fix localstorage user first time visit api dashboard

uikit/src/button/styles.scss

@@ -1,6 +1,7 @@
 .btn {
   @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition-colors;
-  @apply cursor-pointer focus:outline-none focus-visible:outline-none focus-visible:ring-0;
+  @apply cursor-pointer;
+  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
   @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
 
   &-primary {

uikit/src/input/styles.scss

@@ -1,6 +1,6 @@
 .input {
   @apply border-border placeholder:text-muted-foreground flex h-9 w-full rounded-lg border bg-transparent px-3 py-1 transition-colors;
   @apply disabled:cursor-not-allowed disabled:opacity-50;
-  @apply focus-visible:ring-secondary focus-visible:outline-none focus-visible:ring-1;
+  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
   @apply file:border-0 file:bg-transparent file:font-medium;
 }

uikit/src/select/styles.scss

@@ -1,5 +1,6 @@
 .select {
   @apply placeholder:text-muted-foreground border-border flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1;
+  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
 
   &-caret {
     @apply h-4 w-4 opacity-50;

uikit/src/textarea/styles.scss

@@ -1,6 +1,6 @@
 .textarea-input {
   @apply border-border placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 transition-colors;
   @apply disabled:cursor-not-allowed disabled:opacity-50;
-  @apply focus-visible:ring-secondary focus-visible:outline-none focus-visible:ring-1;
+  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
   @apply file:border-0 file:bg-transparent file:font-medium;
 }

web/containers/DropdownListSidebar/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { InferenceEngine, Model } from '@janhq/core'
 import {
@@ -80,8 +81,6 @@ export default function DropdownListSidebar() {
     return 4096
   }
 
-  const selectedRef = useRef(null)
-
   useEffect(() => {
     setSelectedModel(recommendedModel)
     setSelected(activeModel || recommendedModel)
@@ -106,6 +105,7 @@ export default function DropdownListSidebar() {
       }
       setThreadModelParams(activeThread.id, modelParams)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     recommendedModel,
     activeThread,
@@ -184,22 +184,26 @@ export default function DropdownListSidebar() {
     <div
       className={twMerge(
         'relative w-full overflow-hidden rounded-md',
-        stateModel.loading && 'bg-blue-100'
+        stateModel.loading && 'bg-blue-200 text-blue-600'
       )}
     >
-      {stateModel.loading && (
-        <div
-          className="absolute left-0 top-0 z-10 h-full w-full rounded-md bg-blue-50/80"
-          style={{ width: `${loader}%` }}
-        />
-      )}
       <Select value={selected?.id} onValueChange={onValueSelected}>
-        <SelectTrigger className="w-full">
-          <SelectValue
-            placeholder="Choose model to start"
-            className="relative z-50"
-          >
-            {selectedName}
+        <SelectTrigger className="relative w-full">
+          <SelectValue placeholder="Choose model to start">
+            {stateModel.loading && (
+              <div
+                className="z-5 absolute left-0 top-0 h-full w-full rounded-md bg-blue-100/80"
+                style={{ width: `${loader}%` }}
+              />
+            )}
+            <span
+              className={twMerge(
+                'relative z-20',
+                stateModel.loading && 'font-medium'
+              )}
+            >
+              {selectedName}
+            </span>
           </SelectValue>
         </SelectTrigger>
         <SelectPortal>
@@ -237,7 +241,6 @@ export default function DropdownListSidebar() {
                 {downloadedModels.map((x, i) => (
                   <SelectItem
                     key={i}
-                    ref={selectedRef}
                     value={x.id}
                     className={twMerge(x.id === selected?.id && 'bg-secondary')}
                     onClick={() => {

web/screens/LocalServer/index.tsx

@@ -76,11 +76,14 @@ const LocalServerScreen = () => {
     useState<boolean>(false)
 
   useEffect(() => {
-    if (localStorage.getItem(FIRST_TIME_VISIT_API_SERVER) === null) {
+    if (
+      localStorage.getItem(FIRST_TIME_VISIT_API_SERVER) === null ||
+      localStorage.getItem(FIRST_TIME_VISIT_API_SERVER) === 'true'
+    ) {
       localStorage.setItem(FIRST_TIME_VISIT_API_SERVER, 'true')
       setFirstTimeVisitAPIServer(true)
     }
-  }, [])
+  }, [firstTimeVisitAPIServer])
 
   return (
     <div className="flex h-full w-full">
@@ -97,7 +100,7 @@ const LocalServerScreen = () => {
             <Button
               block
               themes={serverEnabled ? 'danger' : 'success'}
-              disabled={stateModel.loading}
+              disabled={stateModel.loading || firstTimeVisitAPIServer}
               onClick={() => {
                 if (serverEnabled) {
                   window.core?.api?.stopServer()