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.description && !compactStyle && <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">
-          <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
+          {shortcut.tags.map((tag) => {
-            {shortcut.tags.map((tag) => {
+            return (
-              return (
+              <span
-                <span
+                key={tag}
-                  key={tag}
+                className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
-                  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 })}
-                  onClick={() => viewStore.setFilter({ tag: tag })}
+              >
-                >
+                #{tag}
-                  #{tag}
+              </span>
-                </span>
+            );
-              );
+          })}
-            })}
+          {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
-          </div>
+        </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;

web/src/pages/Home.tsx

@@ -6,10 +6,10 @@ import useViewStore, { getFilteredShortcutList, getOrderedShortcutList } from ".
 import useUserStore from "../stores/v1/user";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
-import ShortcutListView from "../components/ShortcutListView";
+import ShortcutsContainer from "../components/ShortcutsContainer";
 import CreateShortcutDialog from "../components/CreateShortcutDialog";
 import FilterView from "../components/FilterView";
-import OrderSetting from "../components/OrderSetting";
+import ViewSetting from "../components/ViewSetting";
 import Navigator from "../components/Navigator";
 
 interface State {
@@ -59,7 +59,7 @@ const Home: React.FC = () => {
               value={filter.search}
               onChange={(e) => viewStore.setFilter({ search: e.target.value })}
             />
-            <OrderSetting />
+            <ViewSetting />
           </div>
           <div className="flex flex-row justify-end items-center">
             <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
@@ -80,7 +80,7 @@ const Home: React.FC = () => {
             <p className="mt-4">No shortcuts found.</p>
           </div>
         ) : (
-          <ShortcutListView shortcutList={orderedShortcutList} />
+          <ShortcutsContainer shortcutList={orderedShortcutList} />
         )}
       </div>
 

web/src/stores/v1/view.ts

@@ -13,12 +13,16 @@ export interface Order {
   direction: "asc" | "desc";
 }
 
+export type Layout = "grid" | "list";
+
 interface ViewState {
   filter: Filter;
   order: Order;
+  layout: Layout;
   setFilter: (filter: Partial<Filter>) => void;
   getOrder: () => Order;
   setOrder: (order: Partial<Order>) => void;
+  setLayout: (layout: Layout) => void;
 }
 
 const useViewStore = create<ViewState>()(
@@ -29,6 +33,7 @@ const useViewStore = create<ViewState>()(
         field: "name",
         direction: "asc",
       },
+      layout: "list",
       setFilter: (filter: Partial<Filter>) => {
         set({ filter: { ...get().filter, ...filter } });
       },
@@ -41,6 +46,9 @@ const useViewStore = create<ViewState>()(
       setOrder: (order: Partial<Order>) => {
         set({ order: { ...get().order, ...order } });
       },
+      setLayout: (layout: Layout) => {
+        set({ layout });
+      },
     }),
     {
       name: "view",