chore: update shortcut frame

frontend/web/src/components/CreateCollectionDrawer.tsx

@@ -145,7 +145,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
       <DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
       <ModalClose />
       <DialogContent className="max-w-full sm:max-w-sm">
-        <div className="overflow-y-auto w-full mt-2 px-3">
+        <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Name <span className="text-red-600">*</span>
@@ -240,7 +240,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
         </div>
       </DialogContent>
       <DialogActions>
-        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+        <div className="w-full flex flex-row justify-end items-center px-3 py-4 space-x-2">
           <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
             {t("common.cancel")}
           </Button>

frontend/web/src/components/CreateShortcutDrawer.tsx

@@ -215,7 +215,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
       <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
       <ModalClose />
       <DialogContent className="max-w-full sm:max-w-sm">
-        <div className="overflow-y-auto w-full mt-2 px-3">
+        <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Name <span className="text-red-600">*</span>
@@ -373,7 +373,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
         </div>
       </DialogContent>
       <DialogActions>
-        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+        <div className="w-full flex flex-row justify-end items-center px-3 py-4 space-x-2">
           <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
             {t("common.cancel")}
           </Button>

frontend/web/src/components/ShortcutFrame.tsx

@@ -0,0 +1,41 @@
+import { Divider } from "@mui/joy";
+import classNames from "classnames";
+import { Link } from "react-router-dom";
+import { getFaviconWithGoogleS2 } from "@/helpers/utils";
+import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
+import Icon from "./Icon";
+
+interface Props {
+  shortcut: Shortcut;
+}
+
+const ShortcutFrame = ({ shortcut }: Props) => {
+  const favicon = getFaviconWithGoogleS2(shortcut.link);
+
+  return (
+    <div className="w-full h-full flex flex-col justify-center items-center p-8">
+      <Link
+        className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 p-6 pb-4 rounded-2xl shadow-xl dark:text-gray-400 hover:opacity-80"
+        to={`/s/${shortcut.name}`}
+        target="_blank"
+      >
+        <div className={classNames("w-12 h-12 flex justify-center items-center overflow-clip rounded-lg shrink-0")}>
+          {favicon ? (
+            <img className="w-full h-auto" src={favicon} decoding="async" loading="lazy" />
+          ) : (
+            <Icon.Globe2Icon className="w-full h-auto opacity-70" strokeWidth={1} />
+          )}
+        </div>
+        <p className="text-lg font-medium leading-8 mt-2 truncate">{shortcut.title || shortcut.name}</p>
+        <p className="text-gray-500 truncate">{shortcut.description}</p>
+        <Divider className="!my-2" />
+        <p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
+          <span className="leading-4">Open this site in a new tab</span>
+          <Icon.ArrowUpRight className="inline-block ml-1 -mt-0.5 w-4 h-auto" />
+        </p>
+      </Link>
+    </div>
+  );
+};
+
+export default ShortcutFrame;

frontend/web/src/pages/CollectionDashboard.tsx

@@ -45,19 +45,6 @@ const CollectionDashboard: React.FC = () => {
   return (
     <>
       <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-start items-start mb-4">
-          <div className="bg-yellow-100 dark:bg-yellow-500 dark:opacity-70 py-2 px-3 rounded-full border dark:border-yellow-600 flex flex-row justify-start items-center cursor-pointer shadow">
-            <Icon.LibrarySquare className="w-5 h-auto opacity-60" />
-            <a
-              className="hover:underline hover:text-blue-600"
-              href="https://github.com/boojack/slash/blob/main/docs/getting-started/collections.md"
-              target="_blank"
-            >
-              <span className="mx-1 text-sm">Collection is in Beta. Learn more in docs</span>
-              <Icon.ExternalLink className="w-4 h-auto inline-block" />
-            </a>
-          </div>
-        </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div>
             <Input

frontend/web/src/pages/CollectionSpace.tsx

@@ -2,8 +2,9 @@ import { Divider } from "@mui/joy";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import Icon from "@/components/Icon";
+import ShortcutFrame from "@/components/ShortcutFrame";
 import ShortcutView from "@/components/ShortcutView";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import useCollectionStore from "@/stores/v1/collection";
@@ -83,7 +84,7 @@ const CollectionSpace = () => {
               return (
                 <ShortcutView
                   className={classNames(
-                    "w-full py-2 cursor-pointer !px-2",
+                    "w-full py-2 cursor-pointer sm:!px-2",
                     selectedShortcut?.id === shortcut.id
                       ? "bg-gray-100 dark:bg-zinc-800"
                       : "sm:border-transparent dark:sm:border-transparent"
@@ -100,30 +101,15 @@ const CollectionSpace = () => {
         {sm && (
           <div className="w-full h-full overflow-clip rounded-lg border dark:border-zinc-800 bg-white dark:bg-zinc-800">
             {selectedShortcut ? (
-              <div className="w-full h-full flex flex-col justify-center items-center p-8">
+              <ShortcutFrame key={selectedShortcut.id} shortcut={selectedShortcut} />
-                <Link
-                  className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 p-6 rounded-2xl shadow-xl dark:text-gray-400 hover:opacity-80"
-                  to={`/s/${selectedShortcut.name}`}
-                  target="_blank"
-                >
-                  <Icon.Globe2Icon className="w-12 h-auto mb-1" strokeWidth={1} />
-                  <p className="text-lg font-medium leading-8">{selectedShortcut.title || selectedShortcut.name}</p>
-                  <p className="text-gray-500">{selectedShortcut.description}</p>
-                  <Divider className="!my-2" />
-                  <p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
-                    <span className="leading-4">Open this site in a new tab</span>
-                    <Icon.ArrowUpRight className="inline-block ml-1 -mt-0.5 w-4 h-auto" />
-                  </p>
-                </Link>
-              </div>
             ) : (
               <div className="w-full h-full flex flex-col justify-center items-center p-8">
-                <div className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 dark:text-gray-400 p-6 rounded-2xl shadow-xl">
+                <div className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 dark:text-gray-400 p-6 pb-4 rounded-2xl shadow-xl">
-                  <Icon.AppWindow className="w-12 h-auto mb-2" strokeWidth={1} />
+                  <Icon.AppWindow className="w-12 h-auto mb-2 opacity-60" strokeWidth={1} />
                   <p className="text-lg font-medium">Click on a tab in the Sidebar to get started.</p>
                   <Divider className="!my-2" />
-                  <p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
+                  <p className="text-gray-400 dark:text-gray-600 text-sm mt-2 italic">
-                    Shared by <span className="italic font-medium">{creator.nickname}</span>
+                    Shared by <span className="font-medium not-italic">{creator.nickname}</span>
                   </p>
                 </div>
               </div>

frontend/web/src/pages/Home.tsx

@@ -63,7 +63,7 @@ const Home: React.FC = () => {
           <div className="flex flex-row justify-end items-center">
             <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
               <Icon.Plus className="w-5 h-auto" />
-              <span className="hidden sm:block ml-0.5">{t("common.create")}</span>
+              <span className="ml-0.5">{t("common.create")}</span>
             </Button>
           </div>
         </div>