feat: plugin browser manual refresh

SpikeHD · Jan 6, 2025 · be7902d · be7902d
1 parent 3aaab15
commit be7902d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/plugins/plugin-browser/components/Plugins.scss b/plugins/plugin-browser/components/Plugins.scss
@@ -22,4 +22,20 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+
+  margin-top: 12px;
+}
+
+.split {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 40px;
+}
+
+.split button {
+  height: 100%;
+  width: 10%;
 }
diff --git a/plugins/plugin-browser/components/Plugins.tsx b/plugins/plugin-browser/components/Plugins.tsx
@@ -5,6 +5,7 @@ import { getPluginsCache } from '../storage.js'
 
 const {
   ui: {
+    Button,
     injectCss,
     Header,
     HeaderTags,
@@ -40,7 +41,16 @@ export function Plugins() {
   const [search, setSearch] = createSignal('')
 
   createEffect(async () => {
-    setRepos(getPluginsCache() ||  await getAllPlugins().catch((e) => {
+    const cache = await getPluginsCache()
+    if (cache) {
+      setRepos(cache)
+    } else {
+      loadPlugins()
+    }
+  })
+
+  const loadPlugins = async () => {
+    const plugins = await getAllPlugins().catch((e) => {
       console.error(e)
 
       showToast({
@@ -50,8 +60,10 @@ export function Plugins() {
       })
 
       return []
-    }))
-  })
+    })
+
+    setRepos(plugins)
+  }
 
   return (
     <>
@@ -63,11 +75,23 @@ export function Plugins() {
 
       <Divider mt={16} mb={16} />
 
-      <TextBox
-        value={search()}
-        onInput={debounce((v) => setSearch(v), 100)}
-        placeholder={'Search...'}
-      />
+      <div class={classes.split}>
+        <TextBox
+          value={search()}
+          onInput={debounce((v) => setSearch(v), 100)}
+          placeholder={'Search...'}
+        />
+
+        <Button
+          onClick={() => {
+            setRepos([])
+            loadPlugins()
+          }}
+        >
+          Refresh
+        </Button>
+      </div>
+
 
       {
         repos().length > 0 ? repos().map((repo: RepoInfo) => {