fix: updates and pages

SpikeHD · Dec 31, 2024 · eb5df26 · eb5df26
1 parent c963cc4
commit eb5df26
Show file tree

Hide file tree

Showing 5 changed files with 1,096 additions and 640 deletions.
diff --git a/lune.config.js b/lune.config.js
@@ -2,11 +2,11 @@
 // You can view documentation on Lune here:
 // https://github.com/uwu/shelter/tree/main/packages/lune
 // uncomment lines below to enable options, and feel free to delete this header.
-import { defineConfig } from "@uwu/lune";
+import { defineConfig } from '@uwu/lune'
 
 export default defineConfig({
-  repoSubDir: "plugins",
+  repoSubDir: 'plugins',
 
   // this enables CSS Module support - see docs for info
   cssModules: 'legacy',
-});
+})
diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "devDependencies": {
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.13.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.17.0",
     "@tauri-apps/api": "^1.6.0",
-    "@uwu/lune": "^1.4.2",
+    "@uwu/lune": "^1.5.0",
     "@uwu/shelter-defs": "^1.4.1",
-    "globals": "^15.11.0",
-    "typescript": "^5.6.3"
+    "globals": "^15.14.0",
+    "typescript": "^5.7.2"
   },
   "scripts": {
     "lint": "eslint ./plugins ./components",

diff --git a/plugins/dorion-theme-browser/components/ThemePage.tsx b/plugins/dorion-theme-browser/components/ThemePage.tsx
@@ -27,6 +27,7 @@ export function ThemePage() {
   }
 
   const [themeData, setThemeData] = createSignal<any[]>([])
+  const [page, setPage] = createSignal(1)
   const [sort, setSort] = createSignal('popular')
   const [search, setSearch] = createSignal('')
 
@@ -35,7 +36,7 @@ export function ThemePage() {
   })
 
   const loadThemes = async () => {
-    setThemeData(await themeListEndpoint({ page: '1', sort: sort(), filter: search() }))
+    setThemeData(await themeListEndpoint({ page: page().toString(), sort: sort(), filter: search() }))
   }
 
   const doSearch = debounce((v: string) => setSearch(v), 500)
@@ -91,6 +92,28 @@ export function ThemePage() {
           ))
         }
       </div>
+
+      <div class={classes.pagesOuter}>
+        <div class={classes.pages}>
+          <div
+            class={classes.pageBtn}
+            onClick={() => {
+              setPage(page() - 1)
+              loadThemes()
+            }}
+          >&lt; Previous</div>
+
+          <input type='number' value={page()} onInput={(e) => setPage(parseInt(e.target.value))} />
+
+          <div
+            class={classes.pageBtn}
+            onClick={() => {
+              setPage(page() + 1)
+              loadThemes()
+            }}
+          >Next &gt;</div>
+        </div>
+      </div>
     </>
   )
 }
diff --git a/plugins/dorion-theme-browser/components/ThemePage.tsx.scss b/plugins/dorion-theme-browser/components/ThemePage.tsx.scss
@@ -26,4 +26,57 @@
 .searchBox {
   flex-grow: 0 !important;
   width: 50%;
+}
+
+.pagesOuter {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+}
+
+.pages {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 30%;
+
+  margin-top: 16px;
+}
+
+.pageBtn {
+  color: var(--text-normal);
+  cursor: pointer;
+}
+
+.pageBtn:hover {
+  text-decoration: underline;
+}
+
+input[type=number] {
+  width: 50px;
+  text-align: center;
+  margin: 0 8px;
+  padding: 4px;
+
+  font-size: 16px;
+
+  background-color: var(--input-background);
+  color: var(--text-normal);
+  border: none;
+  border-radius: 4px;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
 }