add manifest

scripts/build.spa.tsx

@@ -1,6 +1,8 @@
 import { $ } from "bun";
+import project from "../package.json";
 import { getHtml } from "../src/entry/_handlers";
 import { assignToWindow } from "../src/utils/hydration";
+import { Palette } from "../src/style/palette";
 
 // why does this work but running it from Bun.build fails? #justbunthings
 await $`bun build ./src/entry/client.tsx --outdir ./spa`;
@@ -12,13 +14,37 @@ await $`bun build ./src/entry/client.tsx --outdir ./spa`;
 //   throw new AggregateError(buildResult.logs, "Build failed");
 // }
 
+const baseUrl = process.env.BASE_URL;
+const fullUrl = `${baseUrl ?? ""}/`;
+
 const html = getHtml(
-  `${process.env.BASE_URL ?? ""}/`,
-  [assignToWindow("REALM", `"SPA"`), process.env.BASE_URL && assignToWindow("BASE_URL", `"${process.env.BASE_URL}"`)],
-  process.env.BASE_URL,
+  fullUrl,
+  [assignToWindow("REALM", `"SPA"`), baseUrl && assignToWindow("BASE_URL", `"${baseUrl}"`)],
+  baseUrl,
 );
 
+await Bun.write("./spa/index.html", html);
+
+const resolutions = [128, 192, 256, 512, 1024];
+
 await Bun.write(
-  "./spa/index.html",
-  html,
+  "./spa/manifest.json",
+  JSON.stringify({
+    name: project.name,
+    start_url: fullUrl,
+    display: "standalone",
+    description: project.description,
+    background_color: Palette.white,
+    theme_color: Palette.pink,
+    icons: resolutions.map((res) => ({
+      src: `${fullUrl}experiment-${res}.png`,
+      sizes: `${res}x${res}`,
+      type: "image/png",
+      purpose: "maskable",
+    })),
+  }),
 );
+
+for (const res of resolutions) {
+  await $`cp ./.github/assets/experiment-${res}.png ./spa`;
+}

src/components/ConfigRenderer.tsx

@@ -39,8 +39,7 @@ export type Config =
     }
   | boolean;
 
-const RenderWithAtom = ({children}: {children: LeafWithSlider | LeafWithOptions}) => {
-
+const RenderWithAtom = ({ children }: { children: LeafWithSlider | LeafWithOptions }) => {
   const [value, setValue] = useAtom(children.atom);
   if (typeof value === "number") {
     return (
@@ -71,7 +70,7 @@ const RenderWithAtom = ({children}: {children: LeafWithSlider | LeafWithOptions}
       </Select>
     );
   }
-}
+};
 
 export const ConfigRenderer = ({ children, level = 3 }: { children: Config | boolean; level?: number }) => {
   const id = useId();

src/components/Mobile.tsx

@@ -17,7 +17,7 @@ export const MobileHeaderContainer = styled.h2<WithDarkMode>`
   span {
     text-decoration: underline;
     text-decoration-thickness: 3px;
-  text-underline-offset: 4px;
+    text-underline-offset: 4px;
     padding: 0 ${bs(0.5)};
     text-shadow:
       ${Palette.white} 1px 2px 14px,

src/components/chat.tsx

@@ -123,7 +123,7 @@ export const MessageComponent = styled.article<{
     styles.push(css`
       ol {
         padding-left: 0;
-      }  
+      }
     `);
   }
   if (role === "system") {

src/pages/NewExperiment.tsx

@@ -309,7 +309,7 @@ export default function NewExperiment() {
   const setIsActionPanelOpen = useSetAtom(isActionPanelOpenAtom);
   useEffect(() => {
     setIsActionPanelOpen(false);
-  }, [experiment, isRunning])
+  }, [experiment, isRunning, isEditing, selection]);
 
   const submit = () => {
     if (isEditing) {
@@ -358,11 +358,7 @@ export default function NewExperiment() {
               <option>tool</option>
             </select>
             {isEditing ?
-              <button
-                type="button"
-                disabled={isDisabled}
-                onClick={submit}
-              >
+              <button type="button" disabled={isDisabled} onClick={submit}>
                 update
               </button>
             : null}
@@ -372,11 +368,7 @@ export default function NewExperiment() {
               </button>
             : null}
             {!isEditing && !message && experiment.length ?
-              <button
-                type="button"
-                disabled={isDisabled}
-                onClick={submit}
-              >
+              <button type="button" disabled={isDisabled} onClick={submit}>
                 start
               </button>
             : null}

src/root.tsx

@@ -1,7 +1,7 @@
 import { Global } from "@emotion/react";
 import { atom, Provider, useAtom, useSetAtom } from "jotai";
 import { Suspense, useEffect, useState, type PropsWithChildren } from "react";
-import { useLocation } from 'react-router';
+import { useLocation } from "react-router";
 
 import { NavigationSidebar } from "./navigation";
 import { Router } from "./pages/_router";
@@ -14,7 +14,13 @@ import { getRealm } from "./utils/realm";
 import { clientFile } from "./const";
 import { pageTitleAtom, descriptionAtom, iconAtom } from "./state/meta";
 import { ErrorBoundary } from "./components/error";
-import { isActionPanelOpenAtom, isDarkModeAtom, isNavPanelOpenAtom, layoutAtom, layoutTrackerAtom } from "./state/common";
+import {
+  isActionPanelOpenAtom,
+  isDarkModeAtom,
+  isNavPanelOpenAtom,
+  layoutAtom,
+  layoutTrackerAtom,
+} from "./state/common";
 import { MobileHeader } from "./components/Mobile";
 
 const Context = ({ children }: PropsWithChildren) => {
@@ -43,7 +49,7 @@ const App = () => {
   useAtom(layoutTrackerAtom);
   const [layout] = useAtom(layoutAtom);
   const [isDarkMode] = useAtom(isDarkModeAtom);
-  const {pathname} = useLocation();
+  const { pathname } = useLocation();
   const [isNavPanelOpen, setIsNavPanelOpen] = useAtom(isNavPanelOpenAtom);
   const [isActionPanelOpen, setIsActionPanelOpen] = useAtom(isActionPanelOpenAtom);
   useEffect(() => {
@@ -94,6 +100,7 @@ export const Shell = ({
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="manifest" href="manifest.json" />
         <Context>
           <Meta />
         </Context>

src/state/common.ts

@@ -24,14 +24,20 @@ export type WithLayout = { layout: "mobile" | "desktop" };
 export const _isActionPanelOpenAtom = atom(false);
 export const _isNavPanelOpenAtom = atom(false);
 
-export const isActionPanelOpenAtom = atom(get => get(_isActionPanelOpenAtom), (get, set, value: boolean) => {
-  if (value && get(_isNavPanelOpenAtom)) set(_isNavPanelOpenAtom, false);
-  set(_isActionPanelOpenAtom, value);
-});
-export const isNavPanelOpenAtom = atom(get => get(_isNavPanelOpenAtom), (get, set, value: boolean) => {
-  if (value && get(_isActionPanelOpenAtom)) set(_isActionPanelOpenAtom, false);
-  set(_isNavPanelOpenAtom, value);
-});
+export const isActionPanelOpenAtom = atom(
+  (get) => get(_isActionPanelOpenAtom),
+  (get, set, value: boolean) => {
+    if (value && get(_isNavPanelOpenAtom)) set(_isNavPanelOpenAtom, false);
+    set(_isActionPanelOpenAtom, value);
+  },
+);
+export const isNavPanelOpenAtom = atom(
+  (get) => get(_isNavPanelOpenAtom),
+  (get, set, value: boolean) => {
+    if (value && get(_isActionPanelOpenAtom)) set(_isActionPanelOpenAtom, false);
+    set(_isNavPanelOpenAtom, value);
+  },
+);
 
 export type StringContent = { content: string };
 export type ObjectOrStringContent = { content: object | string };

src/state/inference.ts

@@ -45,7 +45,7 @@ export const availableProviderOptionsAtom = atom((get) => {
       acc.push(item);
     }
     return acc;
-  }, [])
+  }, []);
   return providers.map((provider) => ({
     id: provider,
     name: providerLabels[provider],

src/state/meta.ts

@@ -2,10 +2,10 @@ import { atom } from "jotai";
 import { description, title, TRIANGLE } from "../const";
 
 export const titleAtom = atom(title);
-export const pageTitleAtom = atom(get => {
+export const pageTitleAtom = atom((get) => {
   const title = get(titleAtom);
   const newTitle = title === "Experiment" ? title : `${title} ${TRIANGLE} Experiment`;
   return newTitle;
-})
+});
 export const descriptionAtom = atom(description);
 export const iconAtom = atom("🔬");

src/style/utils.ts

@@ -1 +1 @@
-export const increaseSpecificity = (amount = 2) => new Array(amount).fill("&").join("");
+export const increaseSpecificity = (amount = 2) => new Array(amount).fill("&").join("");