WIP layout api server

web/screens/LocalServer/index.tsx

@@ -1,23 +1,32 @@
 import { Button } from '@janhq/uikit'
-import { useAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 
 import { ExternalLinkIcon } from 'lucide-react'
 
+import { twMerge } from 'tailwind-merge'
+
+import DropdownListSidebar from '@/containers/DropdownListSidebar'
+
+import { showRightSideBarAtom } from '../Chat/Sidebar'
+
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 const LocalServerScreen = () => {
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
+  const showing = useAtomValue(showRightSideBarAtom)
 
   return (
     <div className="flex h-full w-full">
       {/* Left SideBar */}
-      <div className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border p-4">
+      <div className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
+        <div className="p-4">
           <h2 className="font-bold">Server Options</h2>
           <p className="mt-2 leading-relaxed">
             Start an OpenAI-compatible local HTTP server.
           </p>
-
+        </div>
-        <div className="mt-4 space-y-3">
+        <div className="border-b border-border pb-8">
+          <div className="space-y-3 px-4">
             <Button
               block
               themes={serverEnabled ? 'danger' : 'success'}
@@ -40,6 +49,7 @@ const LocalServerScreen = () => {
             </Button>
           </div>
         </div>
+      </div>
 
       {/* Middle Bar */}
       <div className="relative flex h-full w-full flex-col overflow-auto bg-background p-4">
@@ -54,6 +64,21 @@ const LocalServerScreen = () => {
       </div>
 
       {/* Right bar */}
+      <div
+        className={twMerge(
+          'h-full flex-shrink-0 overflow-x-hidden border-l border-border bg-background transition-all duration-100 dark:bg-background/20',
+          showing
+            ? 'w-80 translate-x-0 opacity-100'
+            : 'w-0 translate-x-full opacity-0'
+        )}
+      >
+        <p>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque earum
+          numquam fugit quia quisquam id quos aspernatur unde voluptatem neque,
+          officiis doloribus, laborum totam ad deserunt corporis impedit beatae
+          vitae?
+        </p>
+      </div>
     </div>
   )
 }

web/screens/Settings/Advanced/index.tsx

@@ -6,7 +6,7 @@ import { useContext, useEffect, useState } from 'react'
 import { fs } from '@janhq/core'
 import { Switch, Button } from '@janhq/uikit'
 
-import { useAtom } from 'jotai'
+// import { useAtom } from 'jotai'
 
 import ShortcutModal from '@/containers/ShortcutModal'
 import { toaster } from '@/containers/Toast'
@@ -17,13 +17,13 @@ import { FeatureToggleContext } from '@/context/FeatureToggle'
 
 import { useSettings } from '@/hooks/useSettings'
 
-import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+// import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 const Advanced = () => {
   const { experimentalFeatureEnabed, setExperimentalFeatureEnabled } =
     useContext(FeatureToggleContext)
   const [gpuEnabled, setGpuEnabled] = useState<boolean>(false)
-  const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
+  // const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
   const { readSettings, saveSettings, validateSettings, setShowNotification } =
     useSettings()