fix: the minimum width limit of the window is too large #544

close #544

src/main/ipc.ts

@@ -154,4 +154,17 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
   ipcMain.handle('knowledge-base:add', KnowledgeService.add)
   ipcMain.handle('knowledge-base:remove', KnowledgeService.remove)
   ipcMain.handle('knowledge-base:search', KnowledgeService.search)
+
+  // window
+  ipcMain.handle('window:set-minimum-size', (_, width: number, height: number) => {
+    mainWindow?.setMinimumSize(width, height)
+  })
+
+  ipcMain.handle('window:reset-minimum-size', () => {
+    mainWindow?.setMinimumSize(1080, 600)
+    const [width, height] = mainWindow?.getSize() ?? [1080, 600]
+    if (width < 1080) {
+      mainWindow?.setSize(1080, height)
+    }
+  })
 }

src/preload/index.d.ts

@@ -76,6 +76,10 @@ declare global {
         remove: ({ uniqueId, base }: { uniqueId: string; base: KnowledgeBaseParams }) => Promise<void>
         search: ({ search, base }: { search: string; base: KnowledgeBaseParams }) => Promise<ExtractChunkData[]>
       }
+      window: {
+        setMinimumSize: (width: number, height: number) => Promise<void>
+        resetMinimumSize: () => Promise<void>
+      }
     }
   }
 }

src/preload/index.ts

@@ -70,6 +70,10 @@ const api = {
       ipcRenderer.invoke('knowledge-base:remove', { uniqueId, base }),
     search: ({ search, base }: { search: string; base: KnowledgeBaseParams }) =>
       ipcRenderer.invoke('knowledge-base:search', { search, base })
+  },
+  window: {
+    setMinimumSize: (width: number, height: number) => ipcRenderer.invoke('window:set-minimum-size', width, height),
+    resetMinimumSize: () => ipcRenderer.invoke('window:reset-minimum-size')
   }
 }
 

src/renderer/src/assets/styles/index.scss

@@ -176,7 +176,7 @@ body,
 #content-container {
   border-top-left-radius: 12px;
   border-left: 0.5px solid var(--color-border);
-  box-shadow: -2px 0px 20px -4px rgba(0, 0, 0, 0.08);
+  box-shadow: -2px 0px 20px -4px rgba(0, 0, 0, 0.06);
 }
 
 .loader {

src/renderer/src/pages/apps/AppsPage.tsx

@@ -73,14 +73,15 @@ const ContentContainer = styled.div`
 `
 
 const AppsContainer = styled.div`
-  display: flex;
-  min-width: 930px;
+  display: grid;
+  min-width: 0;
   max-width: 930px;
+  width: 100%;
   max-height: 520px;
   min-height: 520px;
-  display: grid;
-  grid-template-columns: repeat(8, minmax(90px, 1fr));
-  gap: 25px 25px;
+  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+  gap: 25px;
+  justify-content: center;
 `
 
 export default AppsPage

src/renderer/src/pages/home/HomePage.tsx

@@ -1,5 +1,5 @@
 import { useAssistants } from '@renderer/hooks/useAssistant'
-import { useShowAssistants } from '@renderer/hooks/useStore'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { useActiveTopic } from '@renderer/hooks/useTopic'
 import NavigationService from '@renderer/services/NavigationService'
 import { Assistant } from '@renderer/types'
@@ -22,7 +22,7 @@ const HomePage: FC = () => {
 
   const [activeAssistant, setActiveAssistant] = useState(state?.assistant || _activeAssistant || assistants[0])
   const { activeTopic, setActiveTopic } = useActiveTopic(activeAssistant, state?.topic)
-  const { showAssistants } = useShowAssistants()
+  const { showAssistants, showTopics, topicPosition } = useSettings()
 
   _activeAssistant = activeAssistant
 
@@ -35,6 +35,15 @@ const HomePage: FC = () => {
     state?.topic && setActiveTopic(state?.topic)
   }, [state])
 
+  useEffect(() => {
+    const canMinimize = topicPosition == 'left' ? !showAssistants : !showAssistants && !showTopics
+    window.api.window.setMinimumSize(canMinimize ? 520 : 1080, 600)
+
+    return () => {
+      window.api.window.resetMinimumSize()
+    }
+  }, [showAssistants, showTopics, topicPosition])
+
   return (
     <Container id="home-page">
       <Navbar activeAssistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />

src/renderer/src/pages/home/Navbar.tsx

@@ -130,6 +130,9 @@ const TitleText = styled.span`
   font-family: Ubuntu;
   font-size: 13px;
   user-select: none;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `
 
 export default HeaderNavbar

src/renderer/src/pages/paintings/Artboard.tsx

@@ -72,8 +72,8 @@ const Artboard: FC<ArtboardProps> = ({
                 preview={{ mask: false }}
                 onContextMenu={handleContextMenu}
                 style={{
-                  width: '70vh',
-                  height: '70vh',
+                  maxWidth: '70vh',
+                  maxHeight: '70vh',
                   objectFit: 'contain',
                   backgroundColor: 'var(--color-background-soft)',
                   cursor: 'pointer'