Refactor top bar (#1829)

ui/desktop/src/components/ChatView.tsx

@@ -6,7 +6,7 @@ import GooseMessage from './GooseMessage';
 import Input from './Input';
 import { type View } from '../App';
 import LoadingGoose from './LoadingGoose';
-import MoreMenu from './MoreMenu';
+import MoreMenuLayout from './more_menu/MoreMenuLayout';
 import { Card } from './ui/card';
 import { ScrollArea, ScrollAreaHandle } from './ui/scroll-area';
 import UserMessage from './UserMessage';
@@ -370,7 +370,7 @@ export default function ChatView({
   return (
     <div className="flex flex-col w-full h-screen items-center justify-center">
       <div className="relative flex items-center h-[36px] w-full">
-        <MoreMenu setView={setView} setIsGoosehintsModalOpen={setIsGoosehintsModalOpen} />
+        <MoreMenuLayout setView={setView} setIsGoosehintsModalOpen={setIsGoosehintsModalOpen} />
       </div>
       <Card className="flex flex-col flex-1 rounded-none h-[calc(100vh-95px)] w-full bg-bgApp mt-0 border-none relative">
         {messages.length === 0 ? (

ui/desktop/src/components/more_menu/MoreMenu.tsx

@@ -1,8 +1,13 @@
-import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from '../components/ui/popover';
+import {
+  Popover,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger,
+} from '../../components/ui/popover';
 import React, { useEffect, useState } from 'react';
-import { ChatSmart, Idea, More, Refresh, Time, Send } from './icons';
+import { ChatSmart, Idea, More, Refresh, Time, Send } from '../icons';
 import { FolderOpen, Moon, Sliders, Sun } from 'lucide-react';
-import { View } from '../App';
+import { View } from '../../App';
 
 interface VersionInfo {
   current_version: string;

ui/desktop/src/components/more_menu/MoreMenuLayout.tsx

@@ -0,0 +1,22 @@
+import MoreMenu from './MoreMenu';
+import React from 'react';
+import type { View } from '../../App';
+
+export default function MoreMenuLayout({
+  setView,
+  setIsGoosehintsModalOpen,
+}: {
+  setView: (view: View, viewOptions?: Record<any, any>) => void;
+  setIsGoosehintsModalOpen: (isOpen: boolean) => void;
+}) {
+  return (
+    <div className="relative flex items-center h-[36px] w-full bg-bgSubtle border-b border-borderSubtle">
+      <div className="flex-1"></div>
+      <div className="flex items-center h-full">
+        <div className="flex items-center justify-center h-full px-2 mr-2">
+          <MoreMenu setView={setView} setIsGoosehintsModalOpen={setIsGoosehintsModalOpen} />
+        </div>
+      </div>
+    </div>
+  );
+}