got started on new look. pivoting to api implementations now

src/app.tsx

@@ -3,6 +3,7 @@ import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import './index.css';
+import { ThemeContextProvider } from "./features/theme";
 
 export default function App() {
   return (
@@ -10,7 +11,9 @@ export default function App() {
       root={props => (
         <MetaProvider>
           <Title>Streamarr - Home</Title>
-          <Suspense>{props.children}</Suspense>
+          <Suspense>
+            <ThemeContextProvider>{props.children}</ThemeContextProvider>
+          </Suspense>
         </MetaProvider>
       )}
     >

src/components/dropdown/dropdown.module.css

@@ -0,0 +1,96 @@
+.box {
+    display: contents;
+
+    &:has(> :popover-open) > .button {
+        background-color: var(--surface-500);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.button {
+    position: relative;
+    display: grid;
+    grid-template-columns: inherit;
+    place-items: center start;
+
+    /* Make sure the height of the button does not collapse when it is empty */
+    block-size: 1em;
+    box-sizing: content-box;
+
+    padding: var(--size-2);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radius-2);
+    font-size: 1rem;
+    line-height: 1;
+
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--surface-4);
+    }
+
+    &:has(> .caret) {
+        padding-inline-end: calc(1em + (2 * var(--size-2)));
+    }
+
+    & > .caret {
+        position: absolute;
+        inset-inline-end: var(--size-2);
+        inset-block-start: 50%;
+        translate: 0 -50%;
+        inline-size: 1em;
+    }
+}
+
+.dialog {
+    display: none;
+    position: relative;
+    grid-template-columns: inherit;
+
+    inset-inline-start: anchor(start);
+    inset-block-start: anchor(end);
+    position-try-fallbacks: flip-block, flip-inline;
+
+    /* inline-size: anchor-size(self-inline); */
+    background-color: var(--surface-4);
+    padding: var(--size-2);
+    border: none;
+    box-shadow: var(--shadow-2);
+
+    &:popover-open {
+        display: grid;
+    }
+
+    & > header {
+        display: grid;
+        grid-column: 1 / -1;
+
+        gap: var(--size-1);
+    }
+
+    & > main {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        row-gap: var(--size-1);
+    }
+}
+
+.option {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    place-items: center start;
+
+    border-radius: var(--radius-2);
+    padding: var(--size-1);
+    margin-inline: calc(-1 * var(--size-1));
+
+    cursor: pointer;
+
+    &.selected {
+        background-color: color(from var(--cyan-4) srgb r g b / .1);
+    }
+}

src/components/dropdown/dropdown.tsx

@@ -0,0 +1,52 @@
+import { createSignal, JSX, createEffect, Show } from "solid-js";
+import { FaSolidAngleDown } from "solid-icons/fa";
+import css from './dropdown.module.css';
+
+export interface DropdownApi {
+    show(): void;
+    hide(): void;
+}
+
+interface DropdownProps {
+    api?: (api: DropdownApi) => any,
+    id: string;
+    class?: string;
+    open?: boolean;
+    showCaret?: boolean;
+    text: JSX.Element;
+    children: JSX.Element;
+}
+
+export function Dropdown(props: DropdownProps) {
+    const [dialog, setDialog] = createSignal<HTMLDialogElement>();
+    const [open, setOpen] = createSignal<boolean>(props.open ?? false);
+
+    createEffect(() => {
+        dialog()?.[open() ? 'showPopover' : 'hidePopover']();
+    });
+
+    createEffect(() => {
+        props.api?.({
+            show() {
+                dialog()?.showPopover();
+            },
+            hide() {
+                dialog()?.hidePopover();
+            },
+        });
+    });
+
+    return <section class={`${css.box} ${props.class}`}>
+        <button id={`${props.id}_button`} popoverTarget={`${props.id}_dialog`} class={css.button}>
+            {props.text}
+
+            <Show when={props.showCaret}>
+                <FaSolidAngleDown class={css.caret} />
+            </Show>
+        </button>
+
+        <dialog ref={setDialog} id={`${props.id}_dialog`} anchor={`${props.id}_button`} popover class={css.dialog} onToggle={e => setOpen(e.newState === 'open')}>
+            {props.children}
+        </dialog>
+    </section>;
+}

src/components/dropdown/index.ts

@@ -0,0 +1,4 @@
+
+
+export type { DropdownApi } from './dropdown';
+export { Dropdown } from './dropdown';

src/components/hero/hero.module.css

@@ -1,6 +1,7 @@
 .container {
+  position: relative;
   display: grid;
-  grid: repeat(3, auto) / 10em 1fr;
+  grid: repeat(3, auto) / 15em 1fr;
   grid-template-areas:
     "thumbnail ."
     "thumbnail title"
@@ -8,12 +9,26 @@
     "thumbnail summary";
   align-content: end;
   gap: 1em;
+  padding: 2em;
   block-size: 80vh;
+  overflow: clip;
+
+  color: var(--gray-0);
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    background: linear-gradient(transparent 50%, #0007 75%);
+  }
 }
 
 .title {
   grid-area: title;
   font-size: 2.5em;
+  z-index: 1;
+  filter: contrast(9);
 }
 
 .thumbnail {
@@ -23,23 +38,26 @@
   border-radius: 1em;
   object-fit: cover;
   object-position: center;
+  z-index: 1;
 }
 
 .background {
-  position: fixed;
+  position: absolute;
   inset: 0;
-  z-index: -1;
-  block-size: 90vh;
+  block-size: 100%;
   inline-size: 100%;
   object-fit: cover;
   object-position: center;
+  z-index: 0;
 }
 
 .detail {
   grid-area: detail;
+  z-index: 1;
 }
 
 .summary {
   grid-area: summary;
   text-wrap: balance;
-}
+  z-index: 1;
+}

src/components/hero/hero.tsx

@@ -4,11 +4,13 @@ import css from "./hero.module.css";
 
 type HeroProps = {
   entry: Entry;
+  class?: string;
 };
 
 export function Hero(props: HeroProps) {
   return (
-    <div class={css.container}>
+    <div class={`${css.container} ${props.class ?? ''}`}>
+
       <h2 class={css.title}>{props.entry.title}</h2>
 
       <img src={props.entry.thumbnail} class={css.thumbnail} />

src/components/list/list.module.css

@@ -13,17 +13,19 @@
   grid-auto-flow: column;
 
   gap: 2em;
-  padding: 10em 4em 5em;
+  padding: 12em 4em 5em;
   scroll-padding: 4em;
-  margin: -10em -4em 0em;
-  margin-block-start: -10em;
+  margin: -12em -4em 0em;
 
-  overflow: auto visible;
+  overflow: visible auto;
   scroll-snap-type: inline proximity;
 
   @media (hover: none) {
+    padding: 5em;
+    margin: 0;
+
     & > * {
       scroll-snap-align: start;
     }
   }
-}
+}

src/components/list/list.tsx

@@ -4,12 +4,13 @@ import css from "./list.module.css";
 interface ListProps<T> {
   label: string;
   items: T[];
+  class?: string;
   children: (item: Accessor<T>) => JSX.Element;
 }
 
 export function List<T>(props: ListProps<T>) {
   return (
-    <section class={css.container}>
+    <section class={`${css.container} ${props.class ?? ''}`}>
       <b role="heading" class={css.heading}>
         {props.label}
       </b>

src/components/select/index.ts

@@ -0,0 +1,3 @@
+
+
+export { Select } from './select';

src/components/select/select.module.css

@@ -0,0 +1,95 @@
+.box {
+    display: contents;
+
+    &:has(> :popover-open) > .button {
+        background-color: var(--surface-500);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.button {
+    position: relative;
+    display: grid;
+    grid-template-columns: inherit;
+    place-items: center start;
+
+    /* Make sure the height of the button does not collapse when it is empty */
+    block-size: 1em;
+    box-sizing: content-box;
+
+    padding: var(--size-2);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radius-2);
+    font-size: 1rem;
+
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--surface-700);
+    }
+
+    &:has(> .caret) {
+        padding-inline-end: calc(1em + (2 * var(--size-2)));
+    }
+
+    & > .caret {
+        position: absolute;
+        inset-inline-end: var(--size-2);
+        inset-block-start: 50%;
+        translate: 0 -50%;
+        inline-size: 1em;
+    }
+}
+
+.dialog {
+    display: none;
+    position: relative;
+    grid-template-columns: inherit;
+
+    inset-inline-start: anchor(start);
+    inset-block-start: anchor(end);
+    position-try-fallbacks: flip-block, flip-inline;
+
+    /* inline-size: anchor-size(self-inline); */
+    background-color: var(--surface-3);
+    padding: var(--size-2);
+    border: none;
+    box-shadow: var(--shadow-2);
+
+    &:popover-open {
+        display: grid;
+    }
+
+    & > header {
+        display: grid;
+        grid-column: 1 / -1;
+
+        gap: var(--padding-s);
+    }
+
+    & > main {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        row-gap: var(--padding-s);
+    }
+}
+
+.option {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    place-items: center start;
+
+    border-radius: var(--radii-m);
+    padding: var(--padding-s);
+    margin-inline: calc(-1 * var(--padding-s));
+
+    cursor: pointer;
+
+    &.selected {
+        background-color: oklch(from var(--info) l c h / .1);
+    }
+}

src/components/select/select.tsx

@@ -0,0 +1,67 @@
+import { createMemo, createSignal, For, JSX, Setter, createEffect, Show } from "solid-js";
+import { Dropdown, DropdownApi } from "../dropdown";
+import css from './select.module.css';
+
+interface SelectProps<T, K extends string> {
+    id: string;
+    class?: string;
+    value: K;
+    setValue?: Setter<K>;
+    values: Record<K, T>;
+    open?: boolean;
+    showCaret?: boolean;
+    children: (key: K, value: T) => JSX.Element;
+    filter?: (query: string, key: K, value: T) => boolean;
+}
+
+export function Select<T, K extends string>(props: SelectProps<T, K>) {
+    const [dropdown, setDropdown] = createSignal<DropdownApi>();
+    const [key, setKey] = createSignal<K>(props.value);
+    const [query, setQuery] = createSignal<string>('');
+
+    const showCaret = createMemo(() => props.showCaret ?? true);
+    const values = createMemo(() => {
+        let entries = Object.entries<T>(props.values) as [K, T][];
+        const filter = props.filter;
+        const q = query();
+
+        if (filter) {
+            entries = entries.filter(([k, v]) => filter(q, k, v));
+        }
+
+        return entries;
+    });
+
+    createEffect(() => {
+        props.setValue?.(() => key());
+    });
+
+    const text = <Show when={key()}>{
+        key => {
+            const value = createMemo(() => props.values[key()]);
+
+            return <>{props.children(key(), value())}</>;
+        }
+    }</Show>
+
+    return <Dropdown api={setDropdown} id={props.id} class={`${css.box} ${props.class}`} showCaret={showCaret()} open={props.open} text={text}>
+        <Show when={props.filter !== undefined}>
+            <header>
+                <input value={query()} onInput={e => setQuery(e.target.value)} />
+            </header>
+        </Show>
+
+        <main>
+            <For each={values()}>{
+                ([k, v]) => {
+                    const selected = createMemo(() => key() === k);
+
+                    return <span class={`${css.option} ${selected() ? css.selected : ''}`} onpointerdown={() => {
+                        setKey(() => k);
+                        dropdown()?.hide();
+                    }}>{props.children(k, v)}</span>;
+                }
+            }</For>
+        </main>
+    </Dropdown>
+}

src/features/overview/list-item.module.css

@@ -6,7 +6,7 @@
   place-items: start center;
   position: relative;
   inline-size: clamp(15em 20vw 30em);
-  aspect-ratio: 3 / 5;
+  aspect-ratio: var(--ratio-portrait);
   transform: translateY(calc(-2 * var(--padding)));
   z-index: 1;
   contain: layout size style;
@@ -15,23 +15,23 @@
     grid-area: 1/ 1;
     inline-size: 100%;
     block-size: 100%;
-    border-radius: 1em;
+    border-radius: var(--radius-3);
     object-fit: cover;
-    object-position: center;
+    object-position: top center;
     z-index: 1;
 
-    box-shadow: 0 0 1em #000;
+    box-shadow: var(--shadow-2);
     background:
       /* Dot */
-      radial-gradient(circle at 25% 30% #7772 #7774 1em transparent 1em)
+      radial-gradient(circle at 25% 30% #7772 #7774 1em transparent 1em),
       /* Dot */
-      radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em)
+      radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em),
       /* Bottom fade */
-      linear-gradient(165deg transparent 60% #555 60% #333)
+      linear-gradient(165deg transparent 60% #555 60% #333),
       /* wave dark part */
-      radial-gradient(ellipse 5em 2.25em at 0.5em calc(50% - 1em) #333 100% transparent 100%)
+      radial-gradient(ellipse 5em 2.25em at 0.5em calc(50% - 1em) #333 100% transparent 100%),
       /* wave light part */
-      radial-gradient(ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em) #555 100% transparent 100%)
+      radial-gradient(ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em) #555 100% transparent 100%),
       /* Base */
       linear-gradient(to bottom #333 50% #555 50%);
 
@@ -42,7 +42,7 @@
   }
 
   & > main {
-    --ofset: calc(1.5 * var(--padding));
+    --offset: calc(1.5 * var(--padding));
     grid-area: 1/ 1;
     display: grid;
     align-content: end;
@@ -50,53 +50,55 @@
     inline-size: calc(100% + (3 * var(--padding)));
     block-size: calc(100% + (4 * var(--padding)));
     padding: calc(0.5 * var(--padding));
-    background-color: #444;
-    border-radius: 0.5em;
+    background-color: var(--surface-3);
+    border-radius: var(--radius-2);
     transform: translate3d(0 0 0);
     clip-path: inset(-1em);
-    box-shadow: 0 0 1em #000;
+    box-shadow: var(--shadow-2);
     z-index: 0;
 
     &:focus-within {
-      outline: 1px solid #fff;
+      outline: 1px solid var(--text-2);
       outline-offset: 10px;
     }
   }
-}
 
-@media (hover) {
-  &:not(:hover):not(:focus-within) {
-    transform: translateY(0);
-    z-index: 0;
-    will-change: transform;
-
-    & > img {
-      transform: scale(1) translateY(0);
+  @media (hover) {
+    &:not(:hover):not(:focus-within) {
+      transform: translateY(0);
+      z-index: 0;
       will-change: transform;
-    }
-
-    & > main {
-      clip-path: inset(40%);
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: transform 0.2s linear;
-
-    & > img {
-      transition: transform 0.2s ease-in-out;
-    }
-
-    & > main {
-      transition: clip-path 0.2s ease-in-out;
-    }
-
-    &:is(:hover :focus-within) {
-      transition-delay: 0s 0.3s;
-      z-index: 1;
 
       & > img {
-        transition: transform 0.2s ease-in-out;
+        transform: scale(1) translateY(0);
+        will-change: transform;
+      }
+
+      & > main {
+        clip-path: inset(40%);
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      & {
+        transition: transform var(--duration-moderate-1) linear;
+      }
+
+      & > img {
+        transition: transform var(--duration-moderate-1) ease-in-out;
+      }
+
+      & > main {
+        transition: clip-path var(--duration-moderate-1) ease-in-out;
+      }
+
+      &:is(:hover :focus-within) {
+        transition-delay: var(--duration-instant) var(--duration-moderate-2);
+        z-index: 1;
+
+        & > img {
+          transition: transform var(--duration-moderate-1) ease-in-out;
+        }
       }
     }
   }

src/features/overview/list-item.tsx

@@ -4,10 +4,12 @@ import css from "./list-item.module.css";
 
 export const ListItem: Component<{ entry: Entry }> = (props) => {
   return (
-    <div class={css.tile}>
+    <div class={css.listItem}>
       <img src={props.entry.thumbnail} />
 
       <main>
+        <strong>{props.entry.title}</strong>
+
         <a href={`/content/${props.entry.id}`}>Lets go!</a>
       </main>
     </div>

src/features/overview/overview.module.css

@@ -2,4 +2,13 @@
   display: grid;
   grid-auto-flow: row;
   gap: 2em;
-}
+  border-radius: inherit;
+
+  & > .hero {
+    border-radius: inherit;
+  }
+
+  & > .list {
+    padding-inline: 2em;
+  }
+}

src/features/overview/overview.tsx

@@ -1,4 +1,4 @@
-import { Component, Index } from "solid-js";
+import { Component, createEffect, createSignal, Index, onMount } from "solid-js";
 import type { Entry, Category } from "../content";
 import { ListItem } from "./list-item";
 import { List } from "~/components/list";
@@ -11,13 +11,21 @@ type OverviewProps = {
 };
 
 export const Overview: Component<OverviewProps> = (props) => {
+  const [container, setContainer] = createSignal<HTMLElement>();
+
+  onMount(() => {
+    new MutationObserver(() => {
+      container()?.querySelector(`.${css.list} > ul > div:nth-child(4) > main > a`)?.focus({ preventScroll: true });
+    }).observe(document.body, { subtree: true, childList: true });
+  });
+
   return (
-    <div class={css.container}>
-      <Hero entry={props.highlight}></Hero>
+    <div ref={setContainer} class={css.container}>
+      <Hero class={css.hero} entry={props.highlight}></Hero>
 
       <Index each={props.categories}>
         {(category) => (
-          <List label={category().label} items={category().entries}>
+          <List class={css.list} label={category().label} items={category().entries}>
             {(entry) => <ListItem entry={entry()} />}
           </List>
         )}

src/features/shell/shell.module.css

@@ -1,37 +1,161 @@
 .container {
+  position: relative;
   display: grid;
-  grid: 100% / 100%;
+  grid: 2em 1fr / 7.5em 1fr;
+  grid-template-areas:
+    'top top'
+    'nav content'
+  ;
+  inline-size: 100%;
+  block-size: 100%;
   z-index: 0;
-  overflow-inline: clip;
-  overflow-block: auto;
+  overflow: clip;
   container-type: inline-size;
+  background-color: var(--surface-1);
+
+  &:has(.nav a:hover) > .body {
+    filter: blur(3px);
+  }
 }
 
 
 .body {
-  grid-area: 1 / 1;
+  grid-area: 2 / 1 / 3 / 3;
   inline-size: 100%;
-  block-size: fit-content;
-  padding-inline: 2em;
-  padding-block-end: 5em;
-  background: linear-gradient(180deg, transparent, transparent 90vh, #333 90vh, #333);
+  block-size: 100%;
+  background: linear-gradient(180deg, transparent, transparent 90vh, var(--surface-500) 90vh, var(--surface-500));
+  overflow: clip auto;
+  padding-inline-start: 7.5em;
+  transition: filter var(--duration-moderate-1) var(--ease-3);
 
-  @container (inline-size >=600px) {
-    padding-inline-start: 7.5em;
+  & > div {
+    border-top-left-radius: var(--radius-4);
+    background-color: var(--surface-2);
+    isolation: isolate;
+    inline-size: 100%;
+    block-size: fit-content;
+    min-block-size: 100%;
   }
 }
 
-.nav {
-  grid-area: 1 / 1;
-  display: none;
-  grid-auto-flow: row;
-  align-content: start;
-  inline-size: 7.5em;
-  padding: 1em;
-  position: sticky;
-  inset-block-start: 0;
+.top {
+  grid-area: top;
+  display: block grid;
+  grid-auto-flow: column;
+  place-content: center end;
+  z-index: 1;
+  background-color: inherit;
+  padding: .5em;
+}
+
+.nav {
+  grid-area: nav;
+  display: block grid;
+  grid-auto-flow: row;
+  justify-content: space-between;
+  inline-size: 7.5em;
+  block-size: 100%;
+  padding: 1em;
+  background-color: inherit;
+  z-index: 0;
+
+  & > ul {
+    display: block grid;
+    grid-template-columns: auto auto;
+    align-content: center;
+    inline-size: 100%;
+    gap: .5em;
+    transform-origin: left center;
+    padding: 0;
+    margin: 0;
+
+    & > a {
+      grid-column: span 2;
+      display: block grid;
+      grid-template-columns: subgrid;
+      align-items: center;
+      text-decoration: none;
+      transform-origin: center left;
+      transition: transform 2s var(--ease-spring-5), opacity 0.3s var(--ease-3);
+      color: var(--red-4);
+
+      & > svg {
+        fill: var(--red-4);
+      }
+    }
+
+    &:has(a:hover:nth-child(1)) {
+      --target: 1;
+    }
+
+    &:has(a:hover:nth-child(2)) {
+      --target: 2;
+    }
+
+    &:has(a:hover:nth-child(3)) {
+      --target: 3;
+    }
+
+    &:has(a:hover:nth-child(4)) {
+      --target: 4;
+    }
+
+    &:has(a:hover:nth-child(5)) {
+      --target: 5;
+    }
+
+    &:has(a:hover:nth-child(6)) {
+      --target: 6;
+    }
+
+    &:has(a:hover:nth-child(7)) {
+      --target: 7;
+    }
+
+    &:has(a:hover:nth-child(8)) {
+      --target: 8;
+    }
+
+    &:has(a:hover:nth-child(9)) {
+      --target: 9;
+    }
+
+    &:has(a:hover:nth-child(10)) {
+      --target: 10;
+    }
+
+    &:has(a:hover:nth-child(11)) {
+      --target: 11;
+    }
+
+    &:has(a:hover:nth-child(12)) {
+      --target: 12;
+    }
+
+    &:has(a:hover:nth-child(13)) {
+      --target: 13;
+    }
+
+    &:has(a:hover:nth-child(14)) {
+      --target: 14;
+    }
+
+    &:has(a:hover:nth-child(15)) {
+      --target: 15;
+    }
+
+    &:has(a:hover) > a:not(:hover) {
+      opacity: .25;
+    }
+
+    &:has(a:hover) > a {
+      transform: scale(max(1, calc(1.5 - (.2 * abs(var(--target) - var(--sibling-index))))));
+    }
+  }
+
+  &:is(:hover, :focus-within) {
+    z-index: 1;
+
 
-  @container (inline-size >=600px) {
-    display: grid;
   }
 }

src/features/shell/shell.tsx

@@ -6,32 +6,46 @@ import {
 } from "solid-icons/fa";
 import { ParentComponent, Component } from "solid-js";
 import css from "./shell.module.css";
+import { ColorSchemePicker } from "../theme";
 
 export const Shell: ParentComponent = (props) => {
   return (
     <main class={css.container}>
+      <Top />
       <Nav />
 
-      <div class={css.body}>{props.children}</div>
+      <div class={css.body}>
+        <div>{props.children}</div>
+      </div>
     </main>
   );
 };
 
+const Top: Component = (props) => {
+  return (
+    <aside class={css.top}>
+      <ColorSchemePicker />
+    </aside>
+  );
+};
+
 const Nav: Component = (props) => {
   return (
     <nav class={css.nav}>
-      <A href="/">
-        <FaSolidHouseChimney />
-        Home
-      </A>
-      <A href="/library">
-        <FaSolidStar />
-        Library
-      </A>
-      <A href="/search">
-        <FaSolidMagnifyingGlass />
-        Search
-      </A>
+      <ul>
+        <A href="/">
+          <FaSolidHouseChimney />
+          Home
+        </A>
+        <A href="/library">
+          <FaSolidStar />
+          Library
+        </A>
+        <A href="/search">
+          <FaSolidMagnifyingGlass />
+          Search
+        </A>
+      </ul>
     </nav>
   );
 };

src/features/theme/context.ts

@@ -0,0 +1,80 @@
+import { ContextProviderProps, createContextProvider } from "@solid-primitives/context";
+import { action, createAsyncStore, query, useAction } from "@solidjs/router";
+import { createStore } from "solid-js/store";
+import { useSession } from "vinxi/http";
+
+
+export enum ColorScheme {
+    Auto = 'light dark',
+    Light = 'light',
+    Dark = 'dark',
+}
+
+export interface State {
+    colorScheme: ColorScheme;
+    hue: number;
+}
+
+const getSession = async () => {
+    'use server';
+
+    return useSession<State>({
+        password: process.env.SESSION_SECRET!,
+    });
+};
+
+export const getState = query(async () => {
+    'use server';
+
+    const session = await getSession();
+
+    if (Object.getOwnPropertyNames(session.data).length === 0) {
+        await session.update({
+            colorScheme: ColorScheme.Auto,
+            hue: 0,
+        })
+    }
+
+    return session.data;
+}, 'color-scheme');
+
+const setState = action(async (state: State) => {
+    'use server';
+
+    const session = await getSession();
+    await session.update(prev => ({ ...prev, ...state }));
+}, 'color-scheme');
+
+interface ThemeContextType {
+    readonly theme: State;
+    setColorScheme(colorScheme: ColorScheme): void;
+    setHue(colorScheme: number): void;
+}
+
+const [ThemeContextProvider, useTheme] = createContextProvider<ThemeContextType, ContextProviderProps>((props) => {
+    const updateState = useAction(setState);
+    const state = createAsyncStore(() => getState());
+
+    return {
+        get theme() {
+            return state.latest ?? { colorScheme: null };
+        },
+
+        setColorScheme(colorScheme) {
+            updateState({ colorScheme, hue: state.latest!.hue });
+        },
+        setHue(hue) {
+            updateState({ hue, colorScheme: state.latest!.colorScheme });
+        },
+    };
+}, {
+    theme: {
+        colorScheme: ColorScheme.Auto,
+        hue: 180,
+    },
+
+    setColorScheme(colorScheme) { },
+    setHue(hue) { },
+});
+
+export { ThemeContextProvider, useTheme };

src/features/theme/index.ts

@@ -0,0 +1,4 @@
+
+
+export { ThemeContextProvider, useTheme } from './context';
+export { ColorSchemePicker } from './picker';

src/features/theme/picker.module.css

@@ -0,0 +1,9 @@
+.picker {
+    grid-template-columns: auto 1fr;
+}
+
+.hue {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+}

src/features/theme/picker.tsx

@@ -0,0 +1,43 @@
+import { WiMoonAltFirstQuarter, WiMoonAltFull, WiMoonAltNew } from "solid-icons/wi";
+import { Component, createEffect, For, Match, on, Setter, Switch } from "solid-js";
+import { ColorScheme, useTheme } from "./context";
+import css from './picker.module.css';
+import { Select } from "~/components/select";
+
+const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k])) as any;
+
+export const ColorSchemePicker: Component = (props) => {
+    const themeContext = useTheme();
+
+    const setScheme: Setter<ColorScheme> = (next) => {
+
+        if (typeof next === 'function') {
+            next = next();
+        }
+
+        themeContext.setColorScheme(next);
+    };
+
+    createEffect(on(() => themeContext.theme.colorScheme, (colorScheme) => {
+        console.log(colorScheme);
+    }));
+
+    return <>
+        <label aria-label="Color scheme picker">
+            <Select id="color-scheme-picker" class={css.picker} value={themeContext.theme.colorScheme} setValue={setScheme} values={colorSchemes}>{
+                (k, v) => <>
+                    <Switch>
+                        <Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
+                        <Match when={k === ColorScheme.Light}><WiMoonAltNew /></Match>
+                        <Match when={k === ColorScheme.Dark}><WiMoonAltFull /></Match>
+                    </Switch>
+                    {v}
+                </>
+            }</Select>
+        </label>
+
+        {/* <label class={css.hue} aria-label="Hue slider">
+            <input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
+        </label> */}
+    </>;
+};

src/index.css

@@ -1,17 +1,177 @@
 @layer reset, base, tokens, recipes, utilities;
 
-html {
-  display: grid;
-  grid: 100% / 100%;
-  inline-size: 100%;
-  block-size: 100%;
-  overflow: clip;
+@import "open-props/style" layer(tokens);
+@import "open-props/normalize" layer(reset);
+@import "open-props/durations" layer(base);
 
-  & > body {
+@import 'open-props/theme.light.switch.min.css' layer(tokens);
+@import 'open-props/theme.dark.switch.min.css' layer(tokens);
+
+@layer base {
+  html {
     display: grid;
     grid: 100% / 100%;
     inline-size: 100%;
     block-size: 100%;
-    overflow-y: auto;
+    overflow: clip;
+
+    /* font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem); */
+
+    & > body {
+      display: grid;
+      grid: 100% / 100%;
+      inline-size: 100%;
+      block-size: 100%;
+
+      margin: 0;
+      font-family: sans-serif;
+
+      overflow: clip;
+      background-color: var(--surface-3);
+      color: var(--text-2);
+      accent-color: var(--primary-500);
+
+      * {
+        box-sizing: border-box;
+
+        &:focus-visible {
+          outline: 1px solid var(--info);
+        }
+      }
+    }
   }
 }
+
+@layer reset {
+  @property --sibling-index {
+    syntax: '<integer>';
+    inherits: false;
+    initial-value: 1;
+  }
+
+  @property --sibling-count {
+    syntax: '<integer>';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  :nth-child(1) {
+    --sibling-index: 1;
+  }
+
+  :nth-child(2) {
+    --sibling-index: 2;
+  }
+
+  :nth-child(3) {
+    --sibling-index: 3;
+  }
+
+  :nth-child(4) {
+    --sibling-index: 4;
+  }
+
+  :nth-child(5) {
+    --sibling-index: 5;
+  }
+
+  :nth-child(6) {
+    --sibling-index: 6;
+  }
+
+  :nth-child(7) {
+    --sibling-index: 7;
+  }
+
+  :nth-child(8) {
+    --sibling-index: 8;
+  }
+
+  :nth-child(9) {
+    --sibling-index: 9;
+  }
+
+  :nth-child(10) {
+    --sibling-index: 10;
+  }
+
+  :nth-child(11) {
+    --sibling-index: 11;
+  }
+
+  :nth-child(12) {
+    --sibling-index: 12;
+  }
+
+  :nth-child(13) {
+    --sibling-index: 13;
+  }
+
+  :nth-child(14) {
+    --sibling-index: 14;
+  }
+
+  :nth-child(15) {
+    --sibling-index: 15;
+  }
+
+  :has(> :last-child:nth-child(1)) {
+    --sibbling-count: 1;
+  }
+
+  :has(> :last-child:nth-child(2)) {
+    --sibbling-count: 2;
+  }
+
+  :has(> :last-child:nth-child(3)) {
+    --sibbling-count: 3;
+  }
+
+  :has(> :last-child:nth-child(4)) {
+    --sibbling-count: 4;
+  }
+
+  :has(> :last-child:nth-child(5)) {
+    --sibbling-count: 5;
+  }
+
+  :has(> :last-child:nth-child(6)) {
+    --sibbling-count: 6;
+  }
+
+  :has(> :last-child:nth-child(7)) {
+    --sibbling-count: 7;
+  }
+
+  :has(> :last-child:nth-child(8)) {
+    --sibbling-count: 8;
+  }
+
+  :has(> :last-child:nth-child(9)) {
+    --sibbling-count: 9;
+  }
+
+  :has(> :last-child:nth-child(10)) {
+    --sibbling-count: 10;
+  }
+
+  :has(> :last-child:nth-child(11)) {
+    --sibbling-count: 11;
+  }
+
+  :has(> :last-child:nth-child(12)) {
+    --sibbling-count: 12;
+  }
+
+  :has(> :last-child:nth-child(13)) {
+    --sibbling-count: 13;
+  }
+
+  :has(> :last-child:nth-child(14)) {
+    --sibbling-count: 14;
+  }
+
+  :has(> :last-child:nth-child(15)) {
+    --sibbling-count: 15;
+  }
+}

src/routes/(shell).tsx

@@ -1,7 +1,19 @@
 
-import { ParentProps } from "solid-js";
+import { Meta } from "@solidjs/meta";
+import { createEffect, on, ParentProps } from "solid-js";
 import { Shell } from "~/features/shell";
+import { useTheme } from "~/features/theme";
 
 export default function ShellPage(props: ParentProps) {
-  return <Shell>{props.children}</Shell>;
+  const themeContext = useTheme();
+
+  createEffect(on(() => themeContext.theme.colorScheme, (colorScheme) => {
+    document.documentElement.dataset.theme = colorScheme;
+  }));
+
+  return <Shell>
+    <Meta name="color-scheme" content={themeContext.theme.colorScheme} />
+
+    {props.children}
+  </Shell>;
 }

src/routes/sitemap.xml.ts

@@ -0,0 +1,36 @@
+import { SitemapStream, streamToPromise } from 'sitemap'
+import { App } from 'vinxi';
+
+const BASE_URL = 'https://ca-euw-prd-calque-app.purplecoast-f5b7f657.westeurope.azurecontainerapps.io';
+
+export async function GET() {
+
+    const sitemap = new SitemapStream({ hostname: BASE_URL });
+
+    sitemap.write({ url: BASE_URL, changefreq: 'monthly', });
+
+    for (const route of await getRoutes()) {
+        sitemap.write({ url: route, changefreq: 'monthly', });
+    }
+
+    sitemap.end();
+
+    return new Response(
+        (await streamToPromise(sitemap)).toString(),
+        { status: 200, headers: { 'Content-Type': 'text/xml' } }
+    );
+}
+
+const getRoutes = async () => {
+    const router = ((globalThis as any).app as App).getRouter('client').internals.routes;
+
+    if (router === undefined) {
+        return [];
+    }
+
+    const routes = await router.getRoutes() as { page: boolean, $$route?: object, path: string }[];
+
+    return routes
+        .filter(r => r.page === true && r.$$route === undefined && !r.path.match(/^.+\*\d+$/))
+        .map(r => r.path.replace(/\/\(\w+\)/g, ''));
+};