feat: add shortcut display mode

web/src/components/ShortcutView.tsx

@@ -1,4 +1,5 @@
 import { Tooltip } from "@mui/joy";
+import classNames from "classnames";
 import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -32,6 +33,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 compactMode = viewStore.displayStyle === "compact";
 
   useEffect(() => {
     faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
@@ -59,20 +61,31 @@ const ShortcutView = (props: Props) => {
 
   return (
     <>
-      <div className="group w-full flex flex-col justify-start items-start border px-4 py-3 rounded-lg hover:shadow">
+      <div
+        className={classNames(
+          "group w-full flex flex-col justify-start items-start border rounded-lg hover:shadow",
+          compactMode ? "px-3 py-2" : "px-4 py-3"
+        )}
+      >
         <div className="w-full flex flex-row justify-between items-center">
-          <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
+          <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center mr-1 shrink-0">
-            <Link to={`/shortcut/${shortcut.id}`} className="w-8 h-8 flex justify-center items-center overflow-clip shrink-0">
+            <Link
+              to={`/shortcut/${shortcut.id}`}
+              className={classNames("flex justify-center items-center overflow-clip shrink-0", compactMode ? "w-5 h-5" : "w-8 h-8")}
+            >
               {favicon ? (
                 <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
               ) : (
-                <Icon.CircleSlash className="w-8 h-auto text-gray-400" />
+                <Icon.CircleSlash className="w-full h-auto text-gray-400" />
               )}
             </Link>
-            <div className="ml-1 w-[calc(100%-32px)] flex flex-col justify-start items-start">
+            <div className="ml-1 w-[calc(100%-24px)] flex flex-col justify-start items-start">
               <div className="w-full flex flex-row justify-start items-center">
                 <a
-                  className="max-w-[calc(100%-32px)] flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
+                  className={classNames(
+                    "flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow",
+                    compactMode ? "max-w-full" : "max-w-[calc(100%-24px)]"
+                  )}
                   target="_blank"
                   href={shortcutLink}
                 >
@@ -91,18 +104,22 @@ const ShortcutView = (props: Props) => {
                     <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
                   </span>
                 </a>
-                <Tooltip title="Copy" variant="solid" placement="top" arrow>
+                {!compactMode && (
-                  <button
+                  <Tooltip title="Copy" variant="solid" placement="top" arrow>
-                    className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
+                    <button
-                    onClick={() => handleCopyButtonClick()}
+                      className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
-                  >
+                      onClick={() => handleCopyButtonClick()}
-                    <Icon.Clipboard className="w-4 h-auto mx-auto" />
+                    >
-                  </button>
+                      <Icon.Clipboard className="w-4 h-auto mx-auto" />
-                </Tooltip>
+                    </button>
+                  </Tooltip>
+                )}
               </div>
-              <a className="ml-1 w-full text-sm truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
+              {!compactMode && (
-                {shortcut.link}
+                <a className="ml-1 w-full text-sm truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
-              </a>
+                  {shortcut.link}
+                </a>
+              )}
             </div>
           </div>
           <div className="flex flex-row justify-end items-center">
@@ -143,46 +160,56 @@ const ShortcutView = (props: Props) => {
             )}
           </div>
         </div>
-        <div className="mt-2 w-full flex flex-row justify-start items-start gap-2 truncate">
+
-          {shortcut.tags.map((tag) => {
+        {!compactMode && (
-            return (
+          <>
-              <span
+            <div className="mt-2 w-full flex flex-row justify-start items-start gap-2 truncate">
-                key={tag}
+              {shortcut.tags.map((tag) => {
-                className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
+                return (
-                onClick={() => viewStore.setFilter({ tag: tag })}
+                  <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">
+                  <Icon.User className="w-4 h-auto mr-1" />
+                  <span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
+                </div>
+              </Tooltip>
+              <Tooltip
+                title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)}
+                variant="solid"
+                placement="top"
+                arrow
               >
-                #{tag}
+                <div
-              </span>
+                  className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
-            );
+                  onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
-          })}
+                >
-          {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
+                  <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
-        </div>
+                  {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
-        <div className="w-full flex mt-2 gap-2">
+                </div>
-          <Tooltip title="Creator" variant="solid" placement="top" arrow>
+              </Tooltip>
-            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
+              <Tooltip title="View count" variant="solid" placement="top" arrow>
-              <Icon.User className="w-4 h-auto mr-1" />
+                <div
-              <span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
+                  className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
+                  onClick={() => setShowAnalyticsDialog(true)}
+                >
+                  <Icon.BarChart2 className="w-4 h-auto mr-1" />
+                  {shortcut.view} visits
+                </div>
+              </Tooltip>
             </div>
-          </Tooltip>
+          </>
-          <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
+        )}
-            <div
-              className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
-              onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
-            >
-              <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
-              {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
-            </div>
-          </Tooltip>
-          <Tooltip title="View count" variant="solid" placement="top" arrow>
-            <div
-              className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
-              onClick={() => setShowAnalyticsDialog(true)}
-            >
-              <Icon.BarChart2 className="w-4 h-auto mr-1" />
-              {shortcut.view} visits
-            </div>
-          </Tooltip>
-        </div>
       </div>
 
       {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}

web/src/components/ShortcutsContainer.tsx

@@ -11,15 +11,15 @@ interface Props {
 const ShortcutsContainer: React.FC<Props> = (props: Props) => {
   const { shortcutList } = props;
   const viewStore = useViewStore();
-  const layout = viewStore.layout || "grid";
+  const displayStyle = viewStore.displayStyle || "full";
   const [editingShortcutId, setEditingShortcutId] = useState<ShortcutId | undefined>();
 
   return (
     <>
       <div
         className={classNames(
-          "w-full flex flex-col justify-start items-start gap-y-2",
+          "w-full grid grid-cols-1 gap-y-2 sm:gap-2",
-          layout === "grid" && "sm:grid sm:grid-cols-2 sm:gap-2"
+          displayStyle === "full" ? "sm:grid-cols-2" : "grid-cols-2 sm:grid-cols-4 gap-2"
         )}
       >
         {shortcutList.map((shortcut) => {

web/src/components/ViewSetting.tsx

@@ -8,7 +8,7 @@ const ViewSetting = () => {
   const viewStore = useViewStore();
   const order = viewStore.getOrder();
   const { field, direction } = order;
-  const layout = viewStore.layout || "grid";
+  const displayStyle = viewStore.displayStyle || "full";
 
   const handleReset = () => {
     viewStore.setOrder({ field: "name", direction: "asc" });
@@ -49,10 +49,10 @@ const ViewSetting = () => {
           </div>
           <Divider />
           <div className="w-full flex flex-row justify-between items-center">
-            <span className="text-sm shrink-0 mr-2">Layout</span>
+            <span className="text-sm shrink-0 mr-2">Display</span>
-            <Select size="sm" value={layout} onChange={(_, value) => viewStore.setLayout(value as any)}>
+            <Select size="sm" value={displayStyle} onChange={(_, value) => viewStore.setDisplayStyle(value as any)}>
-              <Option value={"grid"}>Grid</Option>
+              <Option value={"full"}>Full</Option>
-              <Option value={"list"}>List</Option>
+              <Option value={"compact"}>Compact</Option>
             </Select>
           </div>
         </div>

web/src/stores/v1/view.ts

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