chore: rotate model hub banner on app launch until set

web/helpers/atoms/App.atom.ts

@@ -32,13 +32,28 @@ export const copyOverInstructionEnabledAtom = atomWithStorage(
 )
 
 /**
- * App Hub Banner configured image
+ * App Banner Hub Atom - storage last banner setting - default undefined
  */
-export const appBannerHubAtom = atomWithStorage<string>(
+const appBannerHubStorageAtom = atomWithStorage<string | undefined>(
   'appBannerHub',
-  './images/HubBanner/banner-8.jpg',
+  undefined,
   undefined,
   {
     getOnInit: true,
   }
 )
+/**
+ * App Hub Banner configured image - Retrieve from appBannerHubStorageAtom - fallback a random banner
+ */
+export const getAppBannerHubAtom = atom<string>(
+  (get) =>
+    get(appBannerHubStorageAtom) ??
+    `./images/HubBanner/banner-${Math.floor(Math.random() * 30) + 1}.jpg`
+)
+
+/**
+ * Set App Hub Banner - store in appBannerHubStorageAtom
+ */
+export const setAppBannerHubAtom = atom(null, (get, set, banner: string) => {
+  set(appBannerHubStorageAtom, banner)
+})

web/screens/Hub/index.tsx

@@ -10,7 +10,7 @@ import { ModelSource } from '@janhq/core'
 import { ScrollArea, Button, Select, Tabs, useClickOutside } from '@janhq/joi'
 import { motion as m } from 'framer-motion'
 
-import { useAtom, useSetAtom } from 'jotai'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { ImagePlusIcon, UploadCloudIcon, UploadIcon } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
@@ -33,7 +33,10 @@ import { fuzzySearch } from '@/utils/search'
 
 import ModelPage from './ModelPage'
 
-import { appBannerHubAtom } from '@/helpers/atoms/App.atom'
+import {
+  getAppBannerHubAtom,
+  setAppBannerHubAtom,
+} from '@/helpers/atoms/App.atom'
 import { modelDetailAtom } from '@/helpers/atoms/Model.atom'
 
 const sortMenus = [
@@ -70,7 +73,8 @@ const HubScreen = () => {
   const [filterOption, setFilterOption] = useState('all')
   const [hubBannerOption, setHubBannerOption] = useState('gallery')
   const [showHubBannerSetting, setShowHubBannerSetting] = useState(false)
-  const [appBannerHub, setAppBannerHub] = useAtom(appBannerHubAtom)
+  const appBannerHub = useAtomValue(getAppBannerHubAtom)
+  const setAppBannerHub = useSetAtom(setAppBannerHubAtom)
   const [selectedModel, setSelectedModel] = useState<ModelSource | undefined>(
     undefined
   )