Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: rotate model hub banner on app launch until set (#4542)

Browse Source
This commit is contained in:
Louis 2025-01-29 23:12:16 +07:00 committed by GitHub
parent 0a41a2456c
commit f071497c0e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/helpers/atoms/App.atom.ts
View File

@ -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', 'appBannerHub',
'./images/HubBanner/banner-8.jpg', undefined,
undefined, undefined,
{ {
getOnInit: true, 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)
})

10
web/screens/Hub/index.tsx
View File

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