feat: update sharing manage dialog (#137)

feat: update sharing manage dialog (#137) Co-Authored-By: Minghan Zhang <[email protected]>
coaidev · Mar 27, 2024 · 8402f72 · 8402f72
1 parent 64e9c9d
commit 8402f72
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 73 deletions.
diff --git a/app/src/assets/main.less b/app/src/assets/main.less
@@ -126,6 +126,10 @@ strong {
   max-width: min(90vw, 720px) !important;
 }
 
+.share-dialog {
+  max-width: min(90vw, 720px) !important;
+}
+
 .fixed-dialog {
   border-radius: var(--radius) !important;
   max-height: calc(95% - 2rem) !important;

diff --git a/app/src/assets/ui.less b/app/src/assets/ui.less
@@ -372,6 +372,10 @@ input[type="number"] {
   color: hsl(var(--text)) !important;
 }
 
+.text-md {
+  font-size: 0.95rem;
+}
+
 .error-border {
   border-color: hsl(var(--destructive)) !important;
 }
diff --git a/app/src/dialogs/ShareManagementDialog.tsx b/app/src/dialogs/ShareManagementDialog.tsx
@@ -17,18 +17,17 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog.tsx";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table.tsx";
 import { setDialog } from "@/store/sharing.ts";
 import { Button } from "@/components/ui/button.tsx";
 import { useMemo } from "react";
-import { Eye, MoreHorizontal, Trash2 } from "lucide-react";
+import {
+  Clock,
+  ExternalLink,
+  Eye,
+  HelpCircle,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -43,7 +42,7 @@ type ShareTableProps = {
   data: SharingPreviewForm[];
 };
 
-function ShareTable({ data }: ShareTableProps) {
+function ShareContent({ data }: ShareTableProps) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
@@ -55,54 +54,54 @@ function ShareTable({ data }: ShareTableProps) {
   }, [data]);
 
   return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>ID</TableHead>
-          <TableHead className={`whitespace-nowrap`}>
-            {t("share.name")}
-          </TableHead>
-          <TableHead>{t("share.time")}</TableHead>
-          <TableHead>{t("share.action")}</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {data.map((row, idx) => (
-          <TableRow key={idx}>
-            <TableCell>{row.conversation_id}</TableCell>
-            <TableCell className={`whitespace-nowrap`}>{row.name}</TableCell>
-            <TableCell className={`whitespace-nowrap`}>{time[idx]}</TableCell>
-            <TableCell>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant={`outline`} size={`icon`}>
-                    <MoreHorizontal className={`h-4 w-4`} />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align={`center`}>
-                  <DropdownMenuItem
-                    onClick={() => {
-                      openWindow(getSharedLink(row.hash), "_blank");
-                    }}
-                  >
-                    <Eye className={`h-4 w-4 mr-1`} />
-                    {t("share.view")}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={async () => {
-                      await deleteData(dispatch, row.hash);
-                    }}
-                  >
-                    <Trash2 className={`h-4 w-4 mr-1`} />
-                    {t("conversation.delete")}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+    <div className={`w-full h-max pt-2 pb-6`}>
+      {data.map((row, idx) => (
+        <div
+          key={idx}
+          className={`flex flex-row w-full h-max border boder-input p-4 rounded-md mb-2 last:mb-0`}
+        >
+          <div className={`flex flex-col flex-grow`}>
+            <div className={`flex flex-row text-md items-center mr-1`}>
+              <span className={`text-common mb-1`}>{row.name}</span>
+              <span className={`text-secondary ml-2 select-none`}>
+                #{row.conversation_id}
+              </span>
+            </div>
+            <div
+              className={`flex flex-row items-center text-xs text-gray-500 select-none`}
+            >
+              <Clock className={`h-3.5 w-3.5 mr-1`} />
+              {time[idx]}
+            </div>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant={`outline`} size={`icon`} className={`shrink-0`}>
+                <MoreHorizontal className={`h-4 w-4`} />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className={`min-w-[5rem]`} align={`end`}>
+              <DropdownMenuItem
+                onClick={() => {
+                  openWindow(getSharedLink(row.hash), "_blank");
+                }}
+              >
+                <Eye className={`h-4 w-4 mr-1.5`} />
+                {t("share.view")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={async () => {
+                  await deleteData(dispatch, row.hash);
+                }}
+              >
+                <Trash2 className={`h-4 w-4 mr-1.5`} />
+                {t("conversation.delete")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ))}
+    </div>
   );
 }
 
@@ -130,21 +129,36 @@ function ShareManagementDialog() {
 
   return (
     <Dialog open={open} onOpenChange={(open) => dispatch(setDialog(open))}>
-      <DialogContent>
+      <DialogContent className={`flex-dialog share-dialog`}>
         <DialogHeader>
-          <DialogTitle className={`mb-4`}>{t("share.manage")}</DialogTitle>
+          <DialogTitle className={`mb-4`} asChild>
+            <div
+              className={`flex flex-row items-center justify-center md:justify-normal select-none`}
+            >
+              <ExternalLink className={`h-4 w-4 mr-1.5`} />
+              {t("share.manage")}
+            </div>
+          </DialogTitle>
           {data.length > 0 ? (
-            <ScrollArea className={`max-h-[60vh]`}>
-              <DialogDescription className={`share-table`}>
-                <ShareTable data={data} />
+            <ScrollArea className={`max-h-[60vh] pr-4`}>
+              <DialogDescription asChild>
+                <div className={`w-full`}>
+                  <ShareContent data={data} />
+                </div>
               </DialogDescription>
             </ScrollArea>
           ) : (
-            <DialogDescription>
-              <p className={`text-center select-none mt-6 mb-2`}>
-                {t("conversation.empty")}
+            <div
+              className={`text-center text-sm text-secondary select-none py-8`}
+            >
+              <p>{t("share.empty")}</p>
+              <p
+                className={`mt-4 flex flex-row items-center justify-center text-common`}
+              >
+                <HelpCircle className={`h-4 w-4 mr-1.5`} />
+                {t("share.share-tip")}
               </p>
-            </DialogDescription>
+            </div>
           )}
         </DialogHeader>
       </DialogContent>

diff --git a/app/src/resources/i18n/cn.json b/app/src/resources/i18n/cn.json
@@ -343,7 +343,9 @@
     "sync-error": "同步失败",
     "name": "对话标题",
     "time": "时间",
-    "action": "操作"
+    "action": "操作",
+    "empty": "还没有分享记录，赶快分享吧！",
+    "share-tip": "前往对话栏，点击分享按钮分享对话"
   },
   "docs": {
     "title": "开放文档"

diff --git a/app/src/resources/i18n/en.json b/app/src/resources/i18n/en.json
@@ -287,7 +287,9 @@
     "sync-error": "Sync Error",
     "name": "Conversation Title",
     "time": "Time",
-    "action": "Action"
+    "action": "Action",
+    "empty": "You haven't shared any records yet. Share them now!",
+    "share-tip": "Go to the conversation bar and click the Share button to share the conversation"
   },
   "docs": {
     "title": "Open Docs"

diff --git a/app/src/resources/i18n/ja.json b/app/src/resources/i18n/ja.json
@@ -287,7 +287,9 @@
     "sync-error": "同期に失敗しました",
     "name": "会話のタイトル",
     "time": "日時",
-    "action": "操作"
+    "action": "操作",
+    "empty": "まだ記録を共有していません。今すぐ共有しましょう！",
+    "share-tip": "会話バーに移動し、[共有]ボタンをクリックして会話を共有します"
   },
   "docs": {
     "title": "ドキュメントを開く"

diff --git a/app/src/resources/i18n/ru.json b/app/src/resources/i18n/ru.json
@@ -287,7 +287,9 @@
     "sync-error": "Ошибка синхронизации",
     "name": "Название разговора",
     "time": "Время",
-    "action": "Действие"
+    "action": "Действие",
+    "empty": "Вы еще не поделились записями. Поделитесь ими сейчас!",
+    "share-tip": "Перейдите в панель диалога и нажмите кнопку Поделиться, чтобы поделиться беседой."
   },
   "docs": {
     "title": "Открыть документы"

diff --git a/app/src/routes/Sharing.tsx b/app/src/routes/Sharing.tsx
@@ -25,7 +25,7 @@ import { toJpeg } from "html-to-image";
 import { appLogo } from "@/conf/env.ts";
 import { extractMessage } from "@/utils/processor.ts";
 import { cn } from "@/components/ui/lib/utils.ts";
-import { useMobile } from "@/utils/device.ts";
+import { isMobile, useMobile } from "@/utils/device.ts";
 import { ScrollArea } from "@/components/ui/scroll-area.tsx";
 import { useConversationActions } from "@/store/chat.ts";
 
@@ -41,7 +41,7 @@ function SharingForm({ data }: SharingFormProps) {
   const { toast } = useToast();
   const mobile = useMobile();
   const { mask: setMask, selected: setModel } = useConversationActions();
-  const [maximized, setMaximized] = useState(false);
+  const [maximized, setMaximized] = useState(isMobile());
   const container = useRef<HTMLDivElement>(null);
   const date = new Date(data.time);
   const time = `${