Update sidebar (#1188)

* refactor

* fix build

* refactor

* refactor

* display deposit in sidebar header menu

* minor fix

* fix

* fix document locate

Author: an-lee

1000-hours/package.json

@@ -20,6 +20,6 @@
   },
   "dependencies": {
     "cheerio": "^1.0.0",
-    "swiper": "^11.1.14"
+    "swiper": "^11.1.15"
   }
 }

enjoy/lib/whisper.cpp/x64/linux/.keep

@@ -40,7 +40,7 @@
     "@electron-forge/plugin-vite": "<7.5.0",
     "@electron-forge/publisher-github": "<7.5.0",
     "@electron/fuses": "^1.8.0",
-    "@playwright/test": "^1.48.2",
+    "@playwright/test": "^1.49.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/ahoy.js": "^0.4.2",
     "@types/autosize": "^4.0.3",
@@ -62,8 +62,8 @@
     "@types/unzipper": "^0.10.10",
     "@types/validator": "^13.12.2",
     "@types/wavesurfer.js": "^6.0.12",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "electron": "^33.2.0",

enjoy/lib/whisper.cpp/x64/win32/.keep

@@ -199,7 +199,12 @@ export const DocumentPlayer = () => {
             data-tooltip-id="global-tooltip"
             variant="outline"
             size="icon"
-            onClick={() => locateSegment(playingSegment.id)}
+            onClick={() => {
+              const el = locateSegment(playingSegment.id);
+              if (el) {
+                el.scrollIntoView({ behavior: "smooth" });
+              }
+            }}
           >
             <LocateFixedIcon className="w-4 h-4" />
           </Button>

enjoy/package.json

@@ -1,2 +1,3 @@
 export * from "./layout";
 export * from "./title-bar";
+export * from "./sidebar";

enjoy/src/renderer/components/documents/document-player.tsx

@@ -32,6 +32,7 @@ import {
   PanelLeftCloseIcon,
   ChevronsUpDownIcon,
   LogOutIcon,
+  CreditCardIcon,
 } from "lucide-react";
 import { useLocation, Link, useNavigate } from "react-router-dom";
 import { t } from "i18next";
@@ -46,7 +47,7 @@ export const Sidebar = () => {
   const activeTab = location.pathname;
   const { EnjoyApp, cable, displayPreferences, setDisplayPreferences } =
     useContext(AppSettingsProviderContext);
-  const [isOpen, setIsOpen] = useState(true);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   useEffect(() => {
     if (!cable) return;
@@ -61,40 +62,40 @@ export const Sidebar = () => {
 
   // Save the sidebar state to cache
   useEffect(() => {
-    EnjoyApp.cacheObjects.set("sidebarOpen", isOpen);
-  }, [isOpen]);
+    EnjoyApp.cacheObjects.set("sidebarOpen", isCollapsed);
+  }, [isCollapsed]);
 
   // Restore the sidebar state from cache
   useEffect(() => {
     EnjoyApp.cacheObjects.get("sidebarOpen").then((value) => {
       if (value !== undefined) {
-        setIsOpen(!!value);
+        setIsCollapsed(!!value);
       }
     });
   }, []);
 
   return (
     <div
       className={`h-[calc(100vh-2rem)] pt-8 transition-all relative draggable-region ${
-        isOpen ? "w-48" : "w-12"
+        isCollapsed ? "w-12" : "w-48"
       }`}
       data-testid="sidebar"
     >
       <div
         className={`fixed top-0 left-0 h-full bg-muted ${
-          isOpen ? "w-48" : "w-12"
+          isCollapsed ? "w-12" : "w-48"
         }`}
       >
         <ScrollArea className="w-full h-full pb-12 pt-8">
-          <SidebarHeader isOpen={isOpen} />
+          <SidebarHeader isCollapsed={isCollapsed} />
           <div className="grid gap-2 mb-4">
             <SidebarItem
               href="/"
               label={t("sidebar.home")}
               tooltip={t("sidebar.home")}
               active={activeTab === "/"}
               Icon={HomeIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <SidebarItem
@@ -103,7 +104,7 @@ export const Sidebar = () => {
               tooltip={t("sidebar.chats")}
               active={activeTab.startsWith("/chats")}
               Icon={MessagesSquareIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <SidebarItem
@@ -112,7 +113,7 @@ export const Sidebar = () => {
               tooltip={t("sidebar.courses")}
               active={activeTab.startsWith("/courses")}
               Icon={GraduationCapIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <Separator />
@@ -123,7 +124,7 @@ export const Sidebar = () => {
               tooltip={t("sidebar.audios")}
               active={activeTab.startsWith("/audios")}
               Icon={HeadphonesIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <SidebarItem
@@ -132,7 +133,7 @@ export const Sidebar = () => {
               tooltip={t("sidebar.videos")}
               active={activeTab.startsWith("/videos")}
               Icon={VideoIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <SidebarItem
@@ -141,7 +142,7 @@ export const Sidebar = () => {
               tooltip={t("sidebar.documents")}
               active={activeTab.startsWith("/documents")}
               Icon={NewspaperIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <Separator />
@@ -153,7 +154,7 @@ export const Sidebar = () => {
               active={activeTab.startsWith("/conversations")}
               Icon={BotIcon}
               testid="sidebar-conversations"
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <SidebarItem
@@ -163,7 +164,7 @@ export const Sidebar = () => {
               active={activeTab.startsWith("/pronunciation_assessments")}
               Icon={SpeechIcon}
               testid="sidebar-pronunciation-assessments"
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <SidebarItem
@@ -172,7 +173,7 @@ export const Sidebar = () => {
               tooltip={t("sidebar.notes")}
               active={activeTab === "/notes"}
               Icon={NotebookPenIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <SidebarItem
@@ -181,7 +182,7 @@ export const Sidebar = () => {
               tooltip={t("sidebar.vocabulary")}
               active={activeTab.startsWith("/vocabulary")}
               Icon={BookMarkedIcon}
-              isOpen={isOpen}
+              isCollapsed={isCollapsed}
             />
 
             <Separator />
@@ -192,15 +193,15 @@ export const Sidebar = () => {
                 variant={displayPreferences ? "default" : "ghost"}
                 id="preferences-button"
                 className={`w-full ${
-                  isOpen ? "justify-start" : "justify-center"
+                  isCollapsed ? "justify-center" : "justify-start"
                 }`}
                 data-tooltip-id="global-tooltip"
                 data-tooltip-content={t("sidebar.preferences")}
                 data-tooltip-place="right"
                 onClick={() => setDisplayPreferences(true)}
               >
                 <SettingsIcon className="size-4" />
-                {isOpen && (
+                {!isCollapsed && (
                   <span className="ml-2"> {t("sidebar.preferences")} </span>
                 )}
               </Button>
@@ -228,16 +229,18 @@ export const Sidebar = () => {
             size="sm"
             variant="ghost"
             className={`w-full non-draggable-region ${
-              isOpen ? "justify-start" : "justify-center"
+              isCollapsed ? "justify-center" : "justify-start"
             }`}
-            onClick={() => setIsOpen(!isOpen)}
+            onClick={() => setIsCollapsed(!isCollapsed)}
           >
-            {isOpen ? (
-              <PanelLeftCloseIcon className="size-4" />
-            ) : (
+            {isCollapsed ? (
               <PanelLeftOpenIcon className="size-4" />
+            ) : (
+              <PanelLeftCloseIcon className="size-4" />
+            )}
+            {!isCollapsed && (
+              <span className="ml-2"> {t("sidebar.collapse")} </span>
             )}
-            {isOpen && <span className="ml-2"> {t("sidebar.collapse")} </span>}
           </Button>
         </div>
       </div>
@@ -252,9 +255,9 @@ const SidebarItem = (props: {
   active: boolean;
   Icon: LucideIcon;
   testid?: string;
-  isOpen: boolean;
+  isCollapsed: boolean;
 }) => {
-  const { href, label, tooltip, active, Icon, testid, isOpen } = props;
+  const { href, label, tooltip, active, Icon, testid, isCollapsed } = props;
 
   return (
     <Link
@@ -268,38 +271,47 @@ const SidebarItem = (props: {
       <Button
         size="sm"
         variant={active ? "default" : "ghost"}
-        className={`w-full ${isOpen ? "justify-start" : "justify-center"}`}
+        className={`w-full ${isCollapsed ? "justify-center" : "justify-start"}`}
       >
         <Icon className="size-4" />
-        {isOpen && <span className="ml-2">{label}</span>}
+        {!isCollapsed && <span className="ml-2">{label}</span>}
       </Button>
     </Link>
   );
 };
 
-const SidebarHeader = (props: { isOpen: boolean }) => {
-  const { isOpen } = props;
-  const { user, logout } = useContext(AppSettingsProviderContext);
+const SidebarHeader = (props: { isCollapsed: boolean }) => {
+  const { isCollapsed } = props;
+  const { user, logout, refreshAccount, setDisplayDepositDialog } = useContext(
+    AppSettingsProviderContext
+  );
+  const [open, setOpen] = useState(false);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (open) {
+      refreshAccount?.();
+    }
+  }, [open]);
+
   if (!user) {
     return null;
   }
 
   return (
     <div className="py-3 px-1 sticky top-0 bg-muted z-10 non-draggable-region">
-      <DropdownMenu>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
             className={`w-full h-12 hover:bg-background ${
-              isOpen ? "justify-start" : "justify-center px-1"
+              isCollapsed ? "justify-center px-1" : "justify-start"
             }`}
           >
             <Avatar className="size-8">
               <AvatarImage src={user.avatarUrl} />
             </Avatar>
-            {isOpen && (
+            {!isCollapsed && (
               <>
                 <div className="ml-2 flex flex-col leading-none">
                   <span className="text-left text-sm font-medium line-clamp-1">
@@ -334,6 +346,14 @@ const SidebarHeader = (props: { isOpen: boolean }) => {
             <UsersRoundIcon className="size-4 ml-auto" />
           </DropdownMenuItem>
           <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={() => setDisplayDepositDialog(true)}
+            className="cursor-pointer"
+          >
+            <span className="flex-1 truncate">${user.balance}</span>
+            <CreditCardIcon className="size-4 ml-auto" />
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={logout} className="cursor-pointer">
             <span>{t("logout")}</span>
             <LogOutIcon className="size-4 ml-auto" />

enjoy/src/renderer/components/layouts/index.ts

@@ -4,7 +4,6 @@ export * from "./markdown-wrapper";
 export * from "./no-records-found";
 export * from "./page-placeholder";
 export * from "./universal-player";
-export * from "./sidebar";
 export * from "./wavesurfer-player";
 export * from "./tts-form";
 export * from "./gpt-form";