feat: add grid layout of shortcuts view

web/src/components/ShortcutView.tsx

@@ -31,6 +31,7 @@ const ShortcutView = (props: Props) => {
   const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
   const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
   const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
+  const compactStyle = viewStore.layout === "grid";
 
   useEffect(() => {
     faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
@@ -58,7 +59,7 @@ const ShortcutView = (props: Props) => {
 
   return (
     <>
-      <div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg hover:shadow">
+      <div className="w-full flex flex-col justify-start items-start border px-4 py-3 rounded-lg hover:shadow">
         <div className="w-full flex flex-row justify-between items-center">
           <div className="group flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
             <div className="w-6 h-6 mr-1 flex justify-center items-center overflow-clip">
@@ -128,22 +129,21 @@ const ShortcutView = (props: Props) => {
             )}
           </div>
         </div>
-        {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
-        {shortcut.tags.length > 0 && (
-          <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
-            {shortcut.tags.map((tag) => {
-              return (
-                <span
-                  key={tag}
-                  className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
-                  onClick={() => viewStore.setFilter({ tag: tag })}
-                >
-                  #{tag}
-                </span>
-              );
-            })}
-          </div>
-        )}
+        {shortcut.description && !compactStyle && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
+        <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
+          {shortcut.tags.map((tag) => {
+            return (
+              <span
+                key={tag}
+                className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
+                onClick={() => viewStore.setFilter({ tag: tag })}
+              >
+                #{tag}
+              </span>
+            );
+          })}
+          {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
+        </div>
         <div className="w-full flex mt-2 gap-2">
           <Tooltip title="Creator" variant="solid" placement="top" arrow>
             <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">

web/src/components/ShortcutsContainer.tsx

@@ -1,18 +1,27 @@
 import { useState } from "react";
 import CreateShortcutDialog from "./CreateShortcutDialog";
 import ShortcutView from "./ShortcutView";
+import useViewStore from "../stores/v1/view";
+import classNames from "classnames";
 
 interface Props {
   shortcutList: Shortcut[];
 }
 
-const ShortcutListView: React.FC<Props> = (props: Props) => {
+const ShortcutsContainer: React.FC<Props> = (props: Props) => {
   const { shortcutList } = props;
+  const viewStore = useViewStore();
+  const layout = viewStore.layout || "list";
   const [editingShortcutId, setEditingShortcutId] = useState<ShortcutId | undefined>();
 
   return (
     <>
-      <div className="w-full flex flex-col justify-start items-start">
+      <div
+        className={classNames(
+          "w-full flex flex-col justify-start items-start gap-y-2",
+          layout === "grid" && "sm:grid sm:grid-cols-2 sm:gap-2"
+        )}
+      >
         {shortcutList.map((shortcut) => {
           return <ShortcutView key={shortcut.id} shortcut={shortcut} handleEdit={() => setEditingShortcutId(shortcut.id)} />;
         })}
@@ -31,4 +40,4 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default ShortcutListView;
+export default ShortcutsContainer;

web/src/components/ViewSetting.tsx

@@ -4,10 +4,11 @@ import useViewStore from "../stores/v1/view";
 import Dropdown from "./common/Dropdown";
 import Icon from "./Icon";
 
-const OrderSetting = () => {
+const ViewSetting = () => {
   const viewStore = useViewStore();
   const order = viewStore.getOrder();
   const { field, direction } = order;
+  const layout = viewStore.layout || "list";
 
   const handleReset = () => {
     viewStore.setOrder({ field: "name", direction: "asc" });
@@ -46,10 +47,17 @@ const OrderSetting = () => {
               <Option value={"desc"}>DESC</Option>
             </Select>
           </div>
+          <div className="w-full flex flex-row justify-between items-center">
+            <span className="text-sm shrink-0 mr-2">Layout</span>
+            <Select size="sm" value={layout} onChange={(_, value) => viewStore.setLayout(value as any)}>
+              <Option value={"list"}>List</Option>
+              <Option value={"grid"}>Grid</Option>
+            </Select>
+          </div>
         </div>
       }
     ></Dropdown>
   );
 };
 
-export default OrderSetting;
+export default ViewSetting;