fix: starter screen layout

web/containers/CenterPanelContainer/index.tsx

@@ -18,19 +18,24 @@ import {
 } from '@/helpers/atoms/App.atom'
 import { reduceTransparentAtom } from '@/helpers/atoms/Setting.atom'
 
-const CenterPanelContainer = ({ children }: PropsWithChildren) => {
+type Props = {
+  isShowStarterScreen?: boolean
+} & PropsWithChildren
+
+const CenterPanelContainer = ({ children, isShowStarterScreen }: Props) => {
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
   const matches = useMediaQuery('(max-width: 880px)')
   const showLeftPanel = useAtomValue(showLeftPanelAtom)
   const showRightPanel = useAtomValue(showRightPanelAtom)
   const mainViewState = useAtomValue(mainViewStateAtom)
+
   return (
     <div
       className={twMerge('flex h-full w-full')}
       style={{
         maxWidth: matches
           ? '100%'
-          : mainViewState === MainViewState.Thread
+          : mainViewState === MainViewState.Thread && !isShowStarterScreen
             ? `calc(100% - (${showRightPanel ? Number(localStorage.getItem(RIGHT_PANEL_WIDTH)) : 0}px + ${showLeftPanel ? Number(localStorage.getItem(LEFT_PANEL_WIDTH)) : 0}px))`
             : '100%',
       }}

web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx

@@ -40,7 +40,11 @@
 } from '@/helpers/atoms/Model.atom'
 import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
 
-const OnDeviceStarterScreen = () => {
+type Props = {
+  isShowStarterScreen?: boolean
+}
+
+const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
   const { extensionHasSettings } = useStarterScreen()
   const [searchValue, setSearchValue] = useState('')
   const [isOpen, setIsOpen] = useState(Boolean(searchValue.length))
@@ -60,7 +64,7 @@
     )
 
     if (manualRecommendModel.length === 2) {
       return x.id === recommendModel[0] || x.id === recommendModel[1]
     } else {
       return (
         x.metadata?.tags?.includes('Featured') && x.metadata?.size < 5000000000
@@ -88,13 +92,13 @@
   const getRows = (array: string[], itemsPerRow: number) => {
     const rows = []
     for (let i = 0; i < array.length; i += itemsPerRow) {
       rows.push(array.slice(i, i + itemsPerRow))
     }
     return rows
   }
 
   const rows = getRows(
     groupByEngine.sort((a, b) => a.localeCompare(b)),
     itemsPerRow
   )
 
@@ -103,7 +107,7 @@
   const [visibleRows, setVisibleRows] = useState(1)
 
   return (
-    <CenterPanelContainer>
+    <CenterPanelContainer isShowStarterScreen={isShowStarterScreen}>
       <ScrollArea className="flex h-full w-full items-center">
         <div className="relative mt-4 flex h-full w-full flex-col items-center justify-center">
           <div className="mx-auto flex h-full w-3/4 flex-col items-center justify-center py-16 text-center">
@@ -118,7 +122,7 @@
                 <div className="relative" ref={refDropdown}>
                   <Input
                     value={searchValue}
                     onFocus={() => setIsOpen(true)}
                     onChange={(e) => {
                       setSearchValue(e.target.value)
                     }}
@@ -139,10 +143,10 @@
                       </div>
                     ) : (
                       filteredModels.map((model) => {
                         const isDownloading = downloadingModels.some(
                           (md) => md === model.id
                         )
                         return (
                           <div
                             key={model.id}
                             className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
@@ -165,7 +169,7 @@
                                   size={18}
                                   className="cursor-pointer text-[hsla(var(--app-link))]"
                                   onClick={() =>
                                     downloadModel(
                                       model.sources[0].url,
                                       model.id,
                                       model.name
@@ -174,9 +178,9 @@
                                 />
                               ) : (
                                 Object.values(downloadStates)
                                   .filter((x) => x.modelId === model.id)
                                   .map((item) => (
                                     <ProgressCircle
                                       key={item.modelId}
                                       percentage={
                                         formatDownloadPercentage(
@@ -204,7 +208,7 @@
                   <p
                     className="cursor-pointer text-sm text-[hsla(var(--text-secondary))]"
                     onClick={() => {
                       setMainViewState(MainViewState.Hub)
                     }}
                   >
                     See All

web/screens/Thread/index.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 const ThreadPanels = memo(({ isShowStarterScreen }: Props) => {
   return isShowStarterScreen ? (
-    <OnDeviceStarterScreen />
+    <OnDeviceStarterScreen isShowStarterScreen={isShowStarterScreen} />
   ) : (
     <>
       <ThreadLeftPanel />