app: add random chart button

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={{
-            display: !presets.favorites().length ? "none" : undefined,
-          }}
+          // style={{
+          //   display: !presets.favorites().length ? "none" : undefined,
+          // }}
         >
-          <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
+            when={presets.favorites().length}
+            fallback={
+              <p>
+                It seems like you couldn't find any interesting chart for your
+                favorites ! You might want to try to{" "}
+                <ButtonRandomChart presets={presets} />
+              </p>
+            }
+          >
+            <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
-          class="space-y-0.5 pt-4"
-          style={{
-            display: !presets.history().length ? "none" : undefined,
-          }}
-        >
-          <For each={presets.history()}>
-            {({ preset, date }, index) => (
+        <div class="space-y-0.5 pt-4">
+          <Show
+            when={presets.history().length}
+            fallback={
               <>
-                <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()}
-                />
+                <div class="border-lighter -mx-4 border-t" />
+
+                <p>
+                  You somehow haven't visited by yourself a single chart.
+                  Impressive ! You might want to try to{" "}
+                  <ButtonRandomChart presets={presets} />
+                </p>
               </>
-            )}
-          </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}