feat: add main menu

frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

frontend/src/components/workspace/workspace-nav-chat-list.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { MessagesSquare } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { useI18n } from "@/core/i18n/hooks";
+
+export function WorkspaceNavChatList() {
+  const { t } = useI18n();
+  const pathname = usePathname();
+  return (
+    <SidebarGroup className="pt-1">
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton isActive={pathname === "/workspace/chats"} asChild>
+            <Link className="text-muted-foreground" href="/workspace/chats">
+              <MessagesSquare />
+              <span>{t.sidebar.chats}</span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}

frontend/src/components/workspace/workspace-nav-menu.tsx

@@ -1,32 +1,101 @@
 "use client";
 
-import { MessagesSquare } from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import {
+  BugIcon,
+  ChevronsUpDown,
+  InfoIcon,
+  MailIcon,
+  Settings2Icon,
+  SettingsIcon,
+} from "lucide-react";
+import { useState } from "react";
 
 import {
-  SidebarGroup,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
 import { useI18n } from "@/core/i18n/hooks";
 
+import { GithubIcon } from "./github-icon";
+import { SettingsDialog } from "./settings";
+
 export function WorkspaceNavMenu() {
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const { t } = useI18n();
-  const pathname = usePathname();
   return (
-    <SidebarGroup className="pt-1">
-      <SidebarMenu>
+    <>
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+      <SidebarMenu className="w-full">
         <SidebarMenuItem>
-          <SidebarMenuButton isActive={pathname === "/workspace/chats"} asChild>
-            <Link className="text-muted-foreground" href="/workspace/chats">
-              <MessagesSquare />
-              <span>{t.sidebar.chats}</span>
-            </Link>
-          </SidebarMenuButton>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <div className="flex w-full items-center gap-2">
+                  <div className="text-muted-foreground flex items-center gap-2 text-left text-sm leading-tight">
+                    <SettingsIcon className="size-4" />
+                    {t.workspace.settingsAndMore}
+                  </div>
+                  <ChevronsUpDown className="text-muted-foreground ml-auto size-4" />
+                </div>
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+              align="end"
+              sideOffset={4}
+            >
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={() => setSettingsOpen(true)}>
+                  <Settings2Icon />
+                  {t.common.settings}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <a
+                  href="https://github.com/bytedance/deer-flow"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <DropdownMenuItem>
+                    <GithubIcon />
+                    {t.workspace.visitGithub}
+                  </DropdownMenuItem>
+                </a>
+                <a
+                  href="https://github.com/bytedance/deer-flow/issues"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <DropdownMenuItem>
+                    <BugIcon />
+                    {t.workspace.reportIssue}
+                  </DropdownMenuItem>
+                </a>
+                <DropdownMenuItem>
+                  <MailIcon />
+                  {t.workspace.contactUs}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <InfoIcon />
+                {t.workspace.about}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </SidebarMenuItem>
       </SidebarMenu>
-    </SidebarGroup>
+    </>
   );
 }

frontend/src/components/workspace/workspace-sidebar.tsx

@@ -1,33 +1,21 @@
 "use client";
 
-import { SettingsIcon } from "lucide-react";
-import { useState } from "react";
-
 import {
   Sidebar,
   SidebarHeader,
   SidebarContent,
   SidebarFooter,
   SidebarRail,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarGroup,
-  SidebarGroupContent,
 } from "@/components/ui/sidebar";
-import { SettingsDialog } from "@/components/workspace/settings";
-import { useI18n } from "@/core/i18n/hooks";
 
 import { RecentChatList } from "./recent-chat-list";
 import { WorkspaceHeader } from "./workspace-header";
+import { WorkspaceNavChatList } from "./workspace-nav-chat-list";
 import { WorkspaceNavMenu } from "./workspace-nav-menu";
 
 export function WorkspaceSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
-  const { t } = useI18n();
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
   return (
     <>
       <Sidebar variant="sidebar" collapsible="icon" {...props}>
@@ -35,33 +23,14 @@ export function WorkspaceSidebar({
           <WorkspaceHeader />
         </SidebarHeader>
         <SidebarContent>
-          <WorkspaceNavMenu />
+          <WorkspaceNavChatList />
           <RecentChatList />
         </SidebarContent>
         <SidebarFooter>
-          <SidebarGroup className="px-0">
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <SidebarMenuItem>
-                  <SidebarMenuButton asChild>
-                    <button
-                      type="button"
-                      className="text-muted-foreground flex w-full cursor-pointer items-center gap-2"
-                      onClick={() => setSettingsOpen(true)}
-                    >
-                      <SettingsIcon size={16} />
-                      <span>{t.common.settings}</span>
-                    </button>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
+          <WorkspaceNavMenu />
         </SidebarFooter>
         <SidebarRail />
       </Sidebar>
-
-      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
     </>
   );
 }

frontend/src/core/i18n/locales/en-US.ts

@@ -68,6 +68,11 @@ export const enUS: Translations = {
   // Workspace
   workspace: {
     githubTooltip: "DeerFlow on Github",
+    settingsAndMore: "Settings and more",
+    visitGithub: "Visit DeerFlow on GitHub",
+    reportIssue: "Report a issue",
+    contactUs: "Contact us",
+    about: "About",
   },
 
   // Conversation

frontend/src/core/i18n/locales/types.ts

@@ -63,6 +63,11 @@ export interface Translations {
   // Workspace
   workspace: {
     githubTooltip: string;
+    settingsAndMore: string;
+    visitGithub: string;
+    reportIssue: string;
+    contactUs: string;
+    about: string;
   };
 
   // Conversation

frontend/src/core/i18n/locales/zh-CN.ts

@@ -66,6 +66,11 @@ export const zhCN: Translations = {
   // Workspace
   workspace: {
     githubTooltip: "DeerFlow 在 Github",
+    settingsAndMore: "设置和更多",
+    visitGithub: "在 Github 上查看 DeerFlow",
+    reportIssue: "报告问题",
+    contactUs: "联系我们",
+    about: "关于",
   },
 
   // Conversation