fix gallery setting page

ddPn08 · Jan 21, 2023 · 00f8f8a · 00f8f8a
1 parent 65ad7f8
commit 00f8f8a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 64 deletions.
diff --git a/src/web/pages/gallery/config.tsx b/src/web/pages/gallery/config.tsx
@@ -1,6 +1,7 @@
 import { useI18n } from '@solid-primitives/i18n'
 import { css, styled } from 'decorock'
-import { Component, For } from 'solid-js'
+import { Component, For, onMount } from 'solid-js'
+import { createStore } from 'solid-js/store'
 
 import { Button } from '~/web/components/ui/button'
 import { IconButton } from '~/web/components/ui/icon-button'
@@ -16,56 +17,52 @@ const Container = styled.div`
   text-align: left;
 `
 
-const Paths: Component = () => {
-  return (
-    <div>
-      <For each={config['gallery/dirs']}>
-        {(path, i) => (
-          <div
-            class={css`
-              display: grid;
-              align-items: center;
-              grid-template-columns: 1fr 50px;
-              grid-template-rows: 100%;
-            `}
-          >
-            <Input
-              value={path}
-              onInput={(e) => setConfig('gallery/dirs', i(), e.currentTarget.value)}
-            />
-            <IconButton
-              onClick={() => {
-                setConfig('gallery/dirs', (dirs) => dirs.filter((_, i2) => i2 !== i()))
-              }}
-            >
-              <RemoveIcon />
-            </IconButton>
-          </div>
-        )}
-      </For>
-      <br />
-      <IconButton
-        onClick={() => {
-          setConfig('gallery/dirs', (paths) => ['', ...paths])
-        }}
-      >
-        <AddIcon />
-      </IconButton>
-    </div>
-  )
-}
-
 export const Config: Component = () => {
   const [t] = useI18n()
+  const [dirs, setDirs] = createStore<string[]>([])
+
+  onMount(() => setDirs(config['gallery/dirs']))
 
   return (
     <Container>
       <Label>{t('gallery/config/paths')}</Label>
-      <Paths />
+
+      <div>
+        <For each={dirs}>
+          {(path, i) => (
+            <div
+              class={css`
+                display: grid;
+                align-items: center;
+                grid-template-columns: 1fr 50px;
+                grid-template-rows: 100%;
+              `}
+            >
+              <Input value={path} onChange={(e) => setDirs(i(), e.currentTarget.value)} />
+              <IconButton
+                onClick={() => {
+                  setDirs((dirs) => dirs.filter((_, i2) => i2 !== i()))
+                }}
+              >
+                <RemoveIcon />
+              </IconButton>
+            </div>
+          )}
+        </For>
+        <br />
+        <IconButton
+          onClick={() => {
+            setDirs((paths) => [...paths, ''])
+          }}
+        >
+          <AddIcon />
+        </IconButton>
+      </div>
       <br />
       <Button
         task={() => {
-          return ipc.galley.invoke('dirs/update', [...config['gallery/dirs']])
+          setConfig('gallery/dirs', [...dirs])
+          return ipc.galley.invoke('dirs/update', [...dirs])
         }}
       >
         {t('gallery/config/apply')}

diff --git a/src/web/pages/gallery/images.tsx b/src/web/pages/gallery/images.tsx
@@ -67,19 +67,21 @@ export const Images = () => {
       serialize({ since: images().length, ...options }),
     )
     if (v.length < 50) setComplete(true)
-    setTimeout(() => {
-      setFetching(false)
-      setImages((prev) => [...prev, ...v])
-    }, 500)
+    setFetching(false)
+    setImages((prev) => [...prev, ...v])
+  }
+
+  const refetch = () => {
+    setImages([])
+    setComplete(false)
+    fetch()
   }
 
   createEffect(
     on(tab, (tab) => {
       if (tab === 'all') setOptions('favorite', undefined)
       else if (tab === 'favorites') setOptions('favorite', true)
-      setImages([])
-      setComplete(false)
-      fetch()
+      refetch()
     }),
   )
 
@@ -107,17 +109,24 @@ export const Images = () => {
           <div
             class={css`
               padding: 1rem;
+              user-select: none;
             `}
             onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                setComplete(false)
-                setImages([])
-                fetch()
-              }
+              if (e.key === 'Enter') refetch()
             }}
           >
-            <HStack>
-              <HStack>
+            <HStack
+              class={css`
+                align-items: center;
+                justify-content: space-between;
+              `}
+            >
+              <HStack
+                class={css`
+                  align-items: center;
+                  justify-content: center;
+                `}
+              >
                 <Input
                   placeholder={t('gallery/search/prompt')}
                   value={options['info']?.['prompt'] || ''}
@@ -128,13 +137,7 @@ export const Images = () => {
                   value={options['info']?.['model'] || ''}
                   onInput={(e) => setOptions('info', 'model', e.currentTarget.value)}
                 />
-                <IconButton
-                  onClick={() => {
-                    setComplete(false)
-                    setImages([])
-                    fetch()
-                  }}
-                >
+                <IconButton onClick={() => refetch()}>
                   <IconSearch />
                 </IconButton>
               </HStack>
@@ -152,7 +155,10 @@ export const Images = () => {
             <Select
               options={config['gallery/dirs'].map((v) => ({ label: v, value: v }))}
               value={dir()}
-              onChange={(v) => setDir(v.value)}
+              onChange={(v) => {
+                setDir(v.value)
+                refetch()
+              }}
             />
           </div>
           <div

diff --git a/src/web/pages/webui/ui.tsx b/src/web/pages/webui/ui.tsx
@@ -142,6 +142,7 @@ export const UI: Component = () => {
             class={css`
               height: 100%;
               justify-content: center;
+              align-items: center;
             `}
           >
             <h1>{t('webui/launcher/not-running/title')}</h1>