Fix style (#1232)

* fix style * fix document page * fix menu * fix title bar
ZuodaoTech · Dec 9, 2024 · 6f1d843 · 6f1d843
1 parent 81e0d96
commit 6f1d843
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 62 deletions.
diff --git a/enjoy/src/i18n/en.json b/enjoy/src/i18n/en.json
@@ -1,19 +1,4 @@
 {
-  "menu": {
-    "about": "About",
-    "toggleFullScreen": "Toggle Full Screen",
-    "hide": "Hide",
-    "unhide": "Unhide",
-    "quit": "Quit",
-    "undo": "Undo",
-    "redo": "Redo",
-    "cut": "Cut",
-    "copy": "Copy",
-    "paste": "Paste",
-    "selectAll": "Select All",
-    "checkForUpdates": "Check for Updates",
-    "reportIssue": "Report Issue"
-  },
   "models": {
     "user": {
       "id": "ID",

diff --git a/enjoy/src/i18n/zh-CN.json b/enjoy/src/i18n/zh-CN.json
@@ -1,19 +1,4 @@
 {
-  "menu": {
-    "about": "关于",
-    "toggleFullScreen": "全屏",
-    "hide": "隐藏",
-    "unhide": "显示",
-    "quit": "退出",
-    "undo": "撤销",
-    "redo": "重做",
-    "cut": "剪切",
-    "copy": "复制",
-    "paste": "粘贴",
-    "selectAll": "全选",
-    "checkForUpdates": "检查更新",
-    "reportIssue": "报告问题"
-  },
   "models": {
     "user": {
       "id": "ID",
@@ -375,9 +360,9 @@
   "currentVersion": "当前版本",
   "checkUpdate": "检查更新",
   "checkingLatestVersion": "正在检查最新版本",
-  "updateDownloaded": "新版本已下载，点击重新启动以更新",
-  "restart": "Restart",
-  "later": "Later",
+  "updateDownloaded": "新版本已下载，请重新启动应用以应用更新",
+  "restart": "重新启动",
+  "later": "稍后",
   "userGuide": "用户指南",
   "feedback": "反馈",
   "alreadyLatestVersion": "已经是最新版本",

diff --git a/enjoy/src/index.css b/enjoy/src/index.css
@@ -88,6 +88,11 @@
     font-weight: normal;
     font-style: normal;
   }
+
+  :root {
+    --sidebar-collapsed-width: 48px;
+    --sidebar-expanded-width: 192px;
+  }
 }
 
 @layer components {

diff --git a/enjoy/src/main/window.ts b/enjoy/src/main/window.ts
@@ -706,38 +706,38 @@ ${log}
     {
       label: app.name,
       submenu: [
-        { role: "about", label: t("menu.about") },
+        { role: "about" },
         { type: "separator" },
-        { role: "togglefullscreen", label: t("menu.toggleFullScreen") },
-        { role: "hide", label: t("menu.hide") },
-        { role: "unhide", label: t("menu.unhide") },
+        { role: "togglefullscreen" },
+        { role: "hide" },
+        { role: "unhide" },
         { type: "separator" },
-        { role: "quit", label: t("menu.quit") },
+        { role: "quit" },
       ],
     },
     {
       label: "Edit",
       submenu: [
-        { role: "undo", label: t("menu.undo") },
-        { role: "redo", label: t("menu.redo") },
+        { role: "undo" },
+        { role: "redo" },
         { type: "separator" },
-        { role: "cut", label: t("menu.cut") },
-        { role: "copy", label: t("menu.copy") },
-        { role: "paste", label: t("menu.paste") },
-        { role: "selectAll", label: t("menu.selectAll") },
+        { role: "cut" },
+        { role: "copy" },
+        { role: "paste" },
+        { role: "selectAll" },
       ],
     },
     {
       label: "Help",
       submenu: [
         {
-          label: t("menu.checkForUpdates"),
+          label: "Check for Updates",
           click: () => {
             shell.openExternal("https://1000h.org/enjoy-app/install.html");
           },
         },
         {
-          label: t("menu.reportIssue"),
+          label: "Report an Issue",
           click: () => {
             shell.openExternal(`${REPO_URL}/issues/new`);
           },

diff --git a/enjoy/src/renderer/components/layouts/layout.tsx b/enjoy/src/renderer/components/layouts/layout.tsx
@@ -3,7 +3,7 @@ import {
   AppSettingsProviderContext,
   CopilotProviderContext,
 } from "@renderer/context";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { CopilotSession, TitleBar, Sidebar } from "@renderer/components";
 import {
   ResizableHandle,
@@ -14,6 +14,7 @@ import {
 export const Layout = () => {
   const { initialized } = useContext(AppSettingsProviderContext);
   const { active, setActive } = useContext(CopilotProviderContext);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   if (initialized) {
     return (
@@ -25,13 +26,18 @@ export const Layout = () => {
           data-testid="layout-home"
         >
           <ResizablePanel id="main-panel" order={1} minSize={50}>
-            <div className="flex flex-start">
-              <Sidebar />
+            <div className="flex flex-start w-full">
+              <Sidebar
+                isCollapsed={isCollapsed}
+                setIsCollapsed={setIsCollapsed}
+              />
               <div
                 id="main-panel-content"
-                className="flex-1 border-l overflow-x-hidden overflow-y-auto h-content relative"
+                className="flex-1 h-content overflow-hidden relative"
               >
-                <Outlet />
+                <div className="overflow-x-hidden overflow-y-auto w-full h-content">
+                  <Outlet />
+                </div>
               </div>
             </div>
           </ResizablePanel>

diff --git a/enjoy/src/renderer/components/layouts/sidebar.tsx b/enjoy/src/renderer/components/layouts/sidebar.tsx
@@ -42,12 +42,15 @@ import { useContext, useEffect } from "react";
 import { NoticiationsChannel } from "@renderer/cables";
 import { useState } from "react";
 
-export const Sidebar = () => {
+export const Sidebar = (props: {
+  isCollapsed: boolean;
+  setIsCollapsed: (isCollapsed: boolean) => void;
+}) => {
+  const { isCollapsed, setIsCollapsed } = props;
   const location = useLocation();
   const activeTab = location.pathname;
   const { EnjoyApp, cable, displayPreferences, setDisplayPreferences } =
     useContext(AppSettingsProviderContext);
-  const [isCollapsed, setIsCollapsed] = useState(false);
 
   useEffect(() => {
     if (!cable) return;
@@ -77,13 +80,17 @@ export const Sidebar = () => {
   return (
     <div
       className={`h-content pt-8 transition-all relative draggable-region ${
-        isCollapsed ? "w-12" : "w-48"
+        isCollapsed
+          ? "w-[--sidebar-collapsed-width]"
+          : "w-[--sidebar-expanded-width]"
       }`}
       data-testid="sidebar"
     >
       <div
-        className={`fixed top-0 left-0 h-full bg-muted ${
-          isCollapsed ? "w-12" : "w-48"
+        className={`fixed top-0 left-0 h-full bg-muted border-r ${
+          isCollapsed
+            ? "w-[--sidebar-collapsed-width]"
+            : "w-[--sidebar-expanded-width]"
         }`}
       >
         <ScrollArea className="w-full h-full pb-12 pt-8">
@@ -213,6 +220,7 @@ export const Sidebar = () => {
             >
               <DialogContent
                 aria-describedby={undefined}
+                container={document.body}
                 className="max-w-screen-md xl:max-w-screen-lg h-5/6 p-0"
               >
                 <DialogTitle className="hidden">

diff --git a/enjoy/src/renderer/components/layouts/title-bar.tsx b/enjoy/src/renderer/components/layouts/title-bar.tsx
@@ -23,6 +23,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuSubContent,
   DropdownMenuSeparator,
+  toast,
 } from "@renderer/components/ui";
 import { IpcRendererEvent } from "electron/renderer";
 import { t } from "i18next";
@@ -49,7 +50,7 @@ export const TitleBar = () => {
     "checking-for-update" | "update-available" | "update-downloaded" | "error"
   >();
 
-  const { EnjoyApp, setDisplayPreferences, initialized } = useContext(
+  const { EnjoyApp, version, setDisplayPreferences, initialized } = useContext(
     AppSettingsProviderContext
   );
   const { active, setActive } = useContext(CopilotProviderContext);
@@ -61,6 +62,7 @@ export const TitleBar = () => {
       EnjoyApp.app.quitAndInstall();
     } else {
       EnjoyApp.app.checkForUpdates();
+      toast.info(t("checkingForUpdate"));
     }
   };
 
@@ -89,6 +91,11 @@ export const TitleBar = () => {
     args: any[]
   ) => {
     setUpdaterState(eventType);
+    if (eventType === "update-available") {
+      toast.info(t("updateAvailable"));
+    } else if (eventType === "update-downloaded") {
+      toast.success(t("updateDownloaded"));
+    }
   };
 
   useEffect(() => {
@@ -155,7 +162,7 @@ export const TitleBar = () => {
             >
               <HelpCircleIcon className="size-4" />
               {updaterState && (
-                <span className="absolute -top-1 -right-1 bg-red-500 rounded-full size-2"></span>
+                <span className="absolute top-1 right-1 bg-red-500 rounded-full size-1.5"></span>
               )}
             </Button>
           </DropdownMenuTrigger>
@@ -211,14 +218,17 @@ export const TitleBar = () => {
               </DropdownMenuSub>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
+            <DropdownMenuItem disabled>
+              <span className="text-xs text-muted-foreground">v{version}</span>
+            </DropdownMenuItem>
             <DropdownMenuItem
               onClick={checkUpdate}
               className="cursor-pointer relative"
             >
               {updaterState && (
-                <span className="absolute -top-1 -right-1 bg-red-500 rounded-full size-2"></span>
+                <span className="absolute top-1 right-1 bg-red-500 rounded-full size-1.5"></span>
               )}
-              <span className="capitalize">
+              <span className="capitalize flex items-center gap-2">
                 {updaterState === "checking-for-update" &&
                   t("checkingForUpdate")}
                 {updaterState === "update-available" && t("updateAvailable")}

diff --git a/enjoy/src/renderer/pages/audio.tsx b/enjoy/src/renderer/pages/audio.tsx
@@ -25,7 +25,7 @@ export default () => {
   const navigate = useNavigate();
 
   return (
-    <div className="h-content flex flex-col relative">
+    <div className="h-content flex flex-col relative max-w-full">
       <Breadcrumb className="px-4 pt-3 pb-2">
         <BreadcrumbList>
           <BreadcrumbItem>

diff --git a/enjoy/src/renderer/pages/document.tsx b/enjoy/src/renderer/pages/document.tsx
@@ -77,7 +77,7 @@ const DocumentComponent = () => {
         </ResizablePanel>
         <ResizableHandle
           className={`${document.layout === "horizontal" ? "mx-2" : "my-2"} ${
-            playingSegment ? "invisible" : ""
+            playingSegment ? "" : "invisible"
           }`}
         />
         <ResizablePanel