disabled thread menu on ribbon when local server running

web/containers/Layout/Ribbon/index.tsx

@@ -6,6 +6,7 @@ import {
 } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 
+import { useAtom } from 'jotai'
 import {
   MessageCircleIcon,
   SettingsIcon,
@@ -22,11 +23,15 @@ import { MainViewState } from '@/constants/screens'
 
 import { useMainViewState } from '@/hooks/useMainViewState'
 
+import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+
 export default function RibbonNav() {
   const { mainViewState, setMainViewState } = useMainViewState()
+  const [serverEnabled] = useAtom(serverEnabledAtom)
 
   const onMenuClick = (state: MainViewState) => {
     if (mainViewState === state) return
+    if (serverEnabled && state === MainViewState.Thread) return
     setMainViewState(state)
   }
 
@@ -119,10 +124,24 @@ export default function RibbonNav() {
                           />
                         )}
                       </TooltipTrigger>
+                      {serverEnabled &&
+                      primary.state === MainViewState.Thread ? (
+                        <TooltipContent
+                          side="right"
+                          sideOffset={10}
+                          className="max-w-[180px]"
+                        >
+                          <span>
+                            Threads are disabled while the server is running
+                          </span>
+                          <TooltipArrow />
+                        </TooltipContent>
+                      ) : (
                         <TooltipContent side="right" sideOffset={10}>
                           <span>{primary.name}</span>
                           <TooltipArrow />
                         </TooltipContent>
+                      )}
                     </Tooltip>
                   </div>
                 )

web/helpers/atoms/LocalServer.atom.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const serverEnabledAtom = atom<boolean>(false)

web/screens/LocalServer/index.tsx

@@ -1,10 +1,60 @@
+import { Button } from '@janhq/uikit'
+import { useAtom } from 'jotai'
+
+import { ExternalLinkIcon } from 'lucide-react'
+
+import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+
 const LocalServerScreen = () => {
+  const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
+
   return (
-    <p>
+    <div className="flex h-full w-full">
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum labore,
+      {/* Left SideBar */}
-      neque, voluptatum necessitatibus est commodi perferendis, quo ea alias
+      <div className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border p-4">
-      rerum facilis! Optio commodi quae vero eius sint iusto illum est?
+        <h2 className="font-bold">Server Options</h2>
+        <p className="mt-2 leading-relaxed">
+          Start an OpenAI-compatible local HTTP server.
         </p>
+
+        <div className="mt-4 space-y-3">
+          <Button
+            block
+            themes={serverEnabled ? 'danger' : 'success'}
+            onClick={() => {
+              if (serverEnabled) {
+                window.core?.api?.stopServer()
+                setServerEnabled(false)
+              } else {
+                window.core?.api?.startServer()
+                setServerEnabled(true)
+              }
+            }}
+          >
+            {serverEnabled ? 'Stop' : 'Start'} Server
+          </Button>
+          <Button block themes="secondaryBlue" asChild>
+            <a href="https://jan.ai/api-reference/" target="_blank">
+              API Reference <ExternalLinkIcon size={20} className="ml-2" />
+            </a>
+          </Button>
+        </div>
+      </div>
+
+      {/* Middle Bar */}
+      <div className="relative flex h-full w-full flex-col overflow-auto bg-background p-4">
+        <div className="flex h-full w-full flex-col justify-between">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iusto
+            aspernatur blanditiis, culpa harum ex hic atque quae tempora eaque
+            obcaecati voluptas nulla error repellat aliquam minima laborum
+            corporis fuga.
+          </p>
+        </div>
+      </div>
+
+      {/* Right bar */}
+    </div>
   )
 }
 

web/screens/Settings/Advanced/index.tsx

@@ -6,16 +6,18 @@ import { useContext, useEffect, useState } from 'react'
 import { fs } from '@janhq/core'
 import { Switch, Button } from '@janhq/uikit'
 
-import { atom, useAtom } from 'jotai'
+import { useAtom } from 'jotai'
 
 import ShortcutModal from '@/containers/ShortcutModal'
 import { toaster } from '@/containers/Toast'
 
+import { toaster } from '@/containers/Toast'
+
 import { FeatureToggleContext } from '@/context/FeatureToggle'
 
 import { useSettings } from '@/hooks/useSettings'
 
-const serverEnabledAtom = atom<boolean>(false)
+import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 const Advanced = () => {
   const { experimentalFeatureEnabed, setExperimentalFeatureEnabled } =
@@ -96,7 +98,7 @@ const Advanced = () => {
         />
       </div>
       {/* Server */}
-      <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
+      {/* <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
         <div className="w-4/5 flex-shrink-0 space-y-1.5">
           <div className="flex gap-x-2">
             <h6 className="text-sm font-semibold capitalize">
@@ -118,7 +120,7 @@ const Advanced = () => {
             setServerEnabled(e)
           }}
         />
-      </div>
+      </div> */}
       {window.electronAPI && (
         <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
           <div className="w-4/5 flex-shrink-0 space-y-1.5">