app: add random chart button

app/package.json

@@ -25,12 +25,12 @@
     "solid-js": "^1.8.18"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@iconify-json/tabler": "^1.1.117",
     "@tailwindcss/container-queries": "^0.1.1",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "pwa-asset-generator": "^6.3.1",
     "rollup-plugin-visualizer": "^5.12.0",

app/pnpm-lock.yaml

@@ -29,8 +29,8 @@ dependencies:
 
 devDependencies:
   '@ianvs/prettier-plugin-sort-imports':
-    specifier: ^4.3.0
+    specifier: ^4.3.1
-    version: 4.3.0(prettier@3.3.2)
+    version: 4.3.1(prettier@3.3.3)
   '@iconify-json/tabler':
     specifier: ^1.1.117
     version: 1.1.117
@@ -44,11 +44,11 @@ devDependencies:
     specifier: ^8.4.39
     version: 8.4.39
   prettier:
-    specifier: ^3.3.2
+    specifier: ^3.3.3
-    version: 3.3.2
+    version: 3.3.3
   prettier-plugin-tailwindcss:
     specifier: ^0.6.5
-    version: 0.6.5(@ianvs/prettier-plugin-sort-imports@4.3.0)(prettier@3.3.2)
+    version: 0.6.5(@ianvs/prettier-plugin-sort-imports@4.3.1)(prettier@3.3.3)
   pwa-asset-generator:
     specifier: ^6.3.1
     version: 6.3.1
@@ -115,13 +115,13 @@ packages:
     resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
     dev: true
 
-  /@apideck/better-ajv-errors@0.3.6(ajv@8.16.0):
+  /@apideck/better-ajv-errors@0.3.6(ajv@8.17.1):
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
     engines: {node: '>=10'}
     peerDependencies:
       ajv: '>=8'
     dependencies:
-      ajv: 8.16.0
+      ajv: 8.17.1
       json-schema: 0.4.0
       jsonpointer: 5.0.1
       leven: 3.1.0
@@ -1867,8 +1867,8 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
-  /@ianvs/prettier-plugin-sort-imports@4.3.0(prettier@3.3.2):
+  /@ianvs/prettier-plugin-sort-imports@4.3.1(prettier@3.3.3):
-    resolution: {integrity: sha512-OOMtUcO4J3LoL63dOKAe7bn+lSRRPeit2DqNHpx+wvBp3Grejo2PMaK4Mp1mwy8pnat64ccSgk/lBZbsAdLErw==}
+    resolution: {integrity: sha512-ZHwbyjkANZOjaBm3ZosADD2OUYGFzQGxfy67HmGZU94mHqe7g1LCMA7YYKB1Cq+UTPCBqlAYapY0KXAjKEw8Sg==}
     peerDependencies:
       '@vue/compiler-sfc': 2.7.x || 3.x
       prettier: 2 || 3
@@ -1881,7 +1881,7 @@ packages:
       '@babel/parser': 7.24.8
       '@babel/traverse': 7.24.8
       '@babel/types': 7.24.8
-      prettier: 3.3.2
+      prettier: 3.3.3
       semver: 7.6.2
     transitivePeerDependencies:
       - supports-color
@@ -2403,13 +2403,13 @@ packages:
       - supports-color
     dev: true
 
-  /ajv@8.16.0:
+  /ajv@8.17.1:
-    resolution: {integrity: sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==}
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
     dependencies:
       fast-deep-equal: 3.1.3
+      fast-uri: 3.0.1
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
-      uri-js: 4.4.1
     dev: true
 
   /ansi-regex@5.0.1:
@@ -2507,7 +2507,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.23.2
-      caniuse-lite: 1.0.30001641
+      caniuse-lite: 1.0.30001642
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.1
@@ -2634,8 +2634,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001641
+      caniuse-lite: 1.0.30001642
-      electron-to-chromium: 1.4.825
+      electron-to-chromium: 1.4.827
       node-releases: 2.0.14
       update-browserslist-db: 1.1.0(browserslist@4.23.2)
     dev: true
@@ -2694,8 +2694,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /caniuse-lite@1.0.30001641:
+  /caniuse-lite@1.0.30001642:
-    resolution: {integrity: sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==}
+    resolution: {integrity: sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==}
     dev: true
 
   /capnp-ts@0.7.0:
@@ -3101,8 +3101,8 @@ packages:
       jake: 10.9.1
     dev: true
 
-  /electron-to-chromium@1.4.825:
+  /electron-to-chromium@1.4.827:
-    resolution: {integrity: sha512-OCcF+LwdgFGcsYPYC5keEEFC2XT0gBhrYbeGzHCx7i9qRFbzO/AqTmc/C/1xNhJj+JA7rzlN7mpBuStshh96Cg==}
+    resolution: {integrity: sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==}
     dev: true
 
   /emoji-regex@8.0.0:
@@ -3387,6 +3387,10 @@ packages:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
     dev: true
 
+  /fast-uri@3.0.1:
+    resolution: {integrity: sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==}
+    dev: true
+
   /fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
     dependencies:
@@ -4667,11 +4671,11 @@ packages:
       postcss: ^8.2.14
     dependencies:
       postcss: 8.4.39
-      postcss-selector-parser: 6.1.0
+      postcss-selector-parser: 6.1.1
     dev: true
 
-  /postcss-selector-parser@6.1.0:
+  /postcss-selector-parser@6.1.1:
-    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
+    resolution: {integrity: sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
@@ -4691,7 +4695,7 @@ packages:
       source-map-js: 1.2.0
     dev: true
 
-  /prettier-plugin-tailwindcss@0.6.5(@ianvs/prettier-plugin-sort-imports@4.3.0)(prettier@3.3.2):
+  /prettier-plugin-tailwindcss@0.6.5(@ianvs/prettier-plugin-sort-imports@4.3.1)(prettier@3.3.3):
     resolution: {integrity: sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
@@ -4743,12 +4747,12 @@ packages:
       prettier-plugin-svelte:
         optional: true
     dependencies:
-      '@ianvs/prettier-plugin-sort-imports': 4.3.0(prettier@3.3.2)
+      '@ianvs/prettier-plugin-sort-imports': 4.3.1(prettier@3.3.3)
-      prettier: 3.3.2
+      prettier: 3.3.3
     dev: true
 
-  /prettier@3.3.2:
+  /prettier@3.3.3:
-    resolution: {integrity: sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==}
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
@@ -5134,16 +5138,16 @@ packages:
       randombytes: 2.1.0
     dev: true
 
-  /seroval-plugins@1.0.7(seroval@1.0.7):
+  /seroval-plugins@1.1.0(seroval@1.1.0):
-    resolution: {integrity: sha512-GO7TkWvodGp6buMEX9p7tNyIkbwlyuAWbI6G9Ec5bhcm7mQdu3JOK1IXbEUwb3FVzSc363GraG/wLW23NSavIw==}
+    resolution: {integrity: sha512-KtcJg590L3X3dd7ixs6am4UGVcV69TyjYhHtanIdQJq4dy2OceWXmmvWrYx7oFDNe+LNdxdWd0I5BQXuV5fBhA==}
     engines: {node: '>=10'}
     peerDependencies:
       seroval: ^1.0
     dependencies:
-      seroval: 1.0.7
+      seroval: 1.1.0
 
-  /seroval@1.0.7:
+  /seroval@1.1.0:
-    resolution: {integrity: sha512-n6ZMQX5q0Vn19Zq7CIKNIo7E75gPkGCFUEqDpa8jgwpYr/vScjqnQ6H09t1uIiZ0ZSK0ypEGvrYK2bhBGWsGdw==}
+    resolution: {integrity: sha512-74Wpe+hhPx4V8NFe00I2Fu9gTJopKoH5vE7nCqFzVgKOXV8AnN23T58K79QLYQotzGpH93UZ+UN2Y11j9huZJg==}
     engines: {node: '>=10'}
 
   /set-function-length@1.2.2:
@@ -5212,8 +5216,8 @@ packages:
     resolution: {integrity: sha512-cpkxDPvO/AuKBugVv6xKFd1C9VC0XZMu4VtF56IlHoux8HgyW44uqNSWbozMnVcpIzHIhS3vVXPAVZYM26jpWw==}
     dependencies:
       csstype: 3.1.3
-      seroval: 1.0.7
+      seroval: 1.1.0
-      seroval-plugins: 1.0.7(seroval@1.0.7)
+      seroval-plugins: 1.1.0(seroval@1.1.0)
 
   /solid-refresh@0.6.3(solid-js@1.8.18):
     resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==}
@@ -5473,7 +5477,7 @@ packages:
       postcss-js: 4.0.1(postcss@8.4.39)
       postcss-load-config: 4.0.2(postcss@8.4.39)
       postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.1.0
+      postcss-selector-parser: 6.1.1
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
@@ -5831,12 +5835,6 @@ packages:
       picocolors: 1.0.1
     dev: true
 
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.3.1
-    dev: true
-
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
@@ -6020,7 +6018,7 @@ packages:
     resolution: {integrity: sha512-WdkVdC70VMpf5NBCtNbiwdSZeKVuhTEd5PV3mAwpTQCGAB5XbOny1P9egEgNdetv4srAMmMKjvBk4RD58LpooA==}
     engines: {node: '>=16.0.0'}
     dependencies:
-      '@apideck/better-ajv-errors': 0.3.6(ajv@8.16.0)
+      '@apideck/better-ajv-errors': 0.3.6(ajv@8.17.1)
       '@babel/core': 7.24.8
       '@babel/preset-env': 7.24.8(@babel/core@7.24.8)
       '@babel/runtime': 7.24.8
@@ -6029,7 +6027,7 @@ packages:
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
       '@rollup/plugin-terser': 0.4.4(rollup@2.79.1)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
-      ajv: 8.16.0
+      ajv: 8.17.1
       common-tags: 1.8.2
       fast-json-stable-stringify: 2.1.0
       fs-extra: 9.1.0

app/src/app/components/frames/button.tsx

@@ -1,3 +1,5 @@
+import { random } from "/src/scripts/utils/math/random";
+
 export function Button({
   onClick,
   children,
@@ -11,3 +13,19 @@ export function Button({
     </button>
   );
 }
+
+export function ButtonRandomChart({ presets }: { presets: Presets }) {
+  return (
+    <button
+      class="inline-flex rounded-md bg-orange-700 bg-opacity-80 px-1.5 py-0.5 font-medium hover:bg-opacity-100 active:scale-95"
+      onClick={() => {
+        const randomPreset = random(presets.list);
+        if (randomPreset) {
+          presets.select(randomPreset);
+        }
+      }}
+    >
+      Open a random chart
+    </button>
+  );
+}

app/src/app/components/frames/favorites.tsx

@@ -1,3 +1,5 @@
+import { Box } from "./box";
+import { Button, ButtonRandomChart } from "./button";
 import { Header } from "./header";
 import { Line } from "./line";
 import { Number } from "./number";
@@ -11,7 +13,7 @@ export function FavoritesFrame({
 }) {
   return (
     <div
-      class="flex-1 overflow-y-auto overflow-x-hidden"
+      class="relative flex-1 overflow-y-auto overflow-x-hidden"
       style={{
         display: selectedFrame() !== "Favorites" ? "none" : undefined,
       }}
@@ -26,25 +28,46 @@ export function FavoritesFrame({
 
         <div
           class="space-y-0.5 py-1"
-          style={{
+          // style={{
-            display: !presets.favorites().length ? "none" : undefined,
+          //   display: !presets.favorites().length ? "none" : undefined,
-          }}
+          // }}
         >
-          <For each={presets.favorites()}>
+          <Show
-            {(preset) => (
+            when={presets.favorites().length}
-              <Line
+            fallback={
-                id={`favorite-${preset.id}`}
+              <p>
-                name={preset.title}
+                It seems like you couldn't find any interesting chart for your
-                onClick={() => presets.select(preset)}
+                favorites ! You might want to try to{" "}
-                active={() => presets.selected() === preset}
+                <ButtonRandomChart presets={presets} />
-                header={`/ ${[...preset.path.map(({ name }) => name), preset.name].join(" / ")}`}
+              </p>
-              />
+            }
-            )}
+          >
-          </For>
+            <For each={presets.favorites()}>
+              {(preset) => (
+                <Line
+                  id={`favorite-${preset.id}`}
+                  name={preset.title}
+                  onClick={() => presets.select(preset)}
+                  active={() => presets.selected() === preset}
+                  header={`/ ${[...preset.path.map(({ name }) => name), preset.name].join(" / ")}`}
+                />
+              )}
+            </For>
+          </Show>
         </div>
 
         <div class="h-[25dvh] flex-none" />
       </div>
+
+      <Box absolute="bottom">
+        <Button onClick={() => presets.selected().isFavorite.set((b) => !b)}>
+          <span>
+            {presets.selected().isFavorite()
+              ? "Remove from favorites"
+              : "Add to favorites"}
+          </span>
+        </Button>
+      </Box>
     </div>
   );
 }

app/src/app/components/frames/history.tsx

@@ -1,5 +1,6 @@
 import { run } from "/src/scripts/utils/run";
 
+import { ButtonRandomChart } from "./button";
 import { Header } from "./header";
 import { Line } from "./line";
 
@@ -20,62 +21,75 @@ export function HistoryFrame({
       <div class="flex max-h-full min-h-0 flex-1 flex-col p-4">
         <Header title="History">List of previously visited charts.</Header>
 
-        <div
+        <div class="space-y-0.5 pt-4">
-          class="space-y-0.5 pt-4"
+          <Show
-          style={{
+            when={presets.history().length}
-            display: !presets.history().length ? "none" : undefined,
+            fallback={
-          }}
-        >
-          <For each={presets.history()}>
-            {({ preset, date }, index) => (
               <>
-                <Show
+                <div class="border-lighter -mx-4 border-t" />
-                  when={
+
-                    index() === 0 ||
+                <p>
-                    presets.history()[index()].date.toJSON().split("T")[0] !==
+                  You somehow haven't visited by yourself a single chart.
-                      presets.history()[index() - 1].date.toJSON().split("T")[0]
+                  Impressive ! You might want to try to{" "}
-                  }
+                  <ButtonRandomChart presets={presets} />
-                >
+                </p>
-                  <div class="sticky top-[calc(-0.5rem-1px)] z-10 -mx-4 py-2">
-                    <div class="border-lighter border-y bg-[#F4EAE3] p-2 dark:bg-[rgb(25,15,15)]">
-                      <p class="ml-2">
-                        <Switch fallback={date.toLocaleDateString()}>
-                          <Match
-                            when={
-                              new Date().toJSON().split("T")[0] ===
-                              date.toJSON().split("T")[0]
-                            }
-                          >
-                            Today
-                          </Match>
-                          <Match
-                            when={
-                              run(() => {
-                                const d = new Date();
-                                d.setDate(d.getDate() - 1);
-                                return d;
-                              })
-                                .toJSON()
-                                .split("T")[0] === date.toJSON().split("T")[0]
-                            }
-                          >
-                            Yesterday
-                          </Match>
-                        </Switch>
-                      </p>
-                    </div>
-                  </div>
-                </Show>
-                <Line
-                  id={`history-${preset.id}`}
-                  name={preset.title}
-                  onClick={() => presets.select(preset)}
-                  active={() => presets.selected() === preset}
-                  header={date.toLocaleTimeString()}
-                />
               </>
-            )}
+            }
-          </For>
+          >
+            <For each={presets.history()}>
+              {({ preset, date }, index) => (
+                <>
+                  <Show
+                    when={
+                      index() === 0 ||
+                      presets.history()[index()].date.toJSON().split("T")[0] !==
+                        presets
+                          .history()
+                          [index() - 1].date.toJSON()
+                          .split("T")[0]
+                    }
+                  >
+                    <div class="sticky top-[calc(-0.5rem-1px)] z-10 -mx-4 py-2">
+                      <div class="border-lighter border-y bg-[#F4EAE3] p-2 dark:bg-[rgb(25,15,15)]">
+                        <p class="ml-2">
+                          <Switch fallback={date.toLocaleDateString()}>
+                            <Match
+                              when={
+                                new Date().toJSON().split("T")[0] ===
+                                date.toJSON().split("T")[0]
+                              }
+                            >
+                              Today
+                            </Match>
+                            <Match
+                              when={
+                                run(() => {
+                                  const d = new Date();
+                                  d.setDate(d.getDate() - 1);
+                                  return d;
+                                })
+                                  .toJSON()
+                                  .split("T")[0] === date.toJSON().split("T")[0]
+                              }
+                            >
+                              Yesterday
+                            </Match>
+                          </Switch>
+                        </p>
+                      </div>
+                    </div>
+                  </Show>
+                  <Line
+                    id={`history-${preset.id}`}
+                    name={preset.title}
+                    onClick={() => presets.select(preset)}
+                    active={() => presets.selected() === preset}
+                    header={date.toLocaleTimeString()}
+                  />
+                </>
+              )}
+            </For>
+          </Show>
         </div>
 
         <div class="h-[25dvh] flex-none" />

app/src/app/components/frames/search.tsx

@@ -6,7 +6,7 @@ import { createRWS } from "/src/solid/rws";
 
 import { INPUT_PRESET_SEARCH_ID } from "../..";
 import { Box } from "./box";
-import { Button } from "./button";
+import { Button, ButtonRandomChart } from "./button";
 import { Line } from "./line";
 
 const PER_PAGE = 100;
@@ -131,7 +131,15 @@ export function SearchFrame({
     >
       <div class="flex-1 space-y-1 overflow-y-auto p-4 pt-16">
         <p class="py-2 text-orange-100/75">
-          <Show when={search()} fallback={"Write in the top bar to search."}>
+          <Show
+            when={search()}
+            fallback={
+              <p>
+                If you can't think of anything, you might want to try to{" "}
+                <ButtonRandomChart presets={presets} />
+              </p>
+            }
+          >
             Found{" "}
             <span class="font-medium text-orange-400/75">
               {resultCount().toLocaleString("en-us")}
@@ -178,7 +186,7 @@ export function SearchFrame({
             id={INPUT_PRESET_SEARCH_ID}
             ref={inputRef.set}
             class="w-full bg-transparent p-1 caret-orange-500 placeholder:text-orange-200/50 focus:outline-none"
-            placeholder="Search by name or path"
+            placeholder="Search by name or path - / to focus"
             value={search()}
             onFocus={initHaystackIfNeeded}
             onInput={(event) => search.set(event.target.value)}
@@ -196,7 +204,7 @@ export function SearchFrame({
             inputRef()?.focus();
           }}
         >
-          Clear search
+          Reset search
         </Button>
       </Box>
     </div>

app/src/app/components/frames/settings.tsx

@@ -151,6 +151,10 @@ export function SettingsFrame({
                   url: "https://primal.net/p/npub1730y5k2s9u82w9snx3hl37r8gpsrmqetc2y3xyx9h65yfpf28rtq0y635y",
                   amount: 17_471,
                 },
+                {
+                  name: "Anon",
+                  amount: 210_000,
+                },
               ]
                 .sort((a, b) =>
                   b.amount !== a.amount
@@ -159,7 +163,7 @@ export function SettingsFrame({
                 )
                 .slice(0, 10)}
             >
-              {({ name, url, amount }, index) => (
+              {({ name, url, amount }) => (
                 <li>
                   <a href={url} target="_blank">
                     {name}