cleanups and basic styles

src/app/components/breadcrumbs.tsx

···
               <Show when={index() > 0} children={<li aria-hidden="true">/</li>} />
               <li>
                 <Show when={crumb.href} fallback={<span>{crumb.label}</span>}>
-                  <A href={crumb.href!}>{crumb.label}</A>
+                  {(href) => <A href={href()}>{crumb.label}</A>}
                 </Show>
               </li>
             </>

src/app/components/feed-row.tsx

···
   const feedline = useFeedlineDatabase()
   const feedurl = createMemo(() => encodeURIComponent(props.feed.url))
 
-  const entries = makeSignalQuery(
-    async () => await feedline.entries.where('feedurl').equals(props.feed.url).count(),
-  )
+  // eslint-disable-next-line solid/reactivity
+  const entries = makeSignalQuery(async () => {
+    return await feedline.entries.where('feedurl').equals(props.feed.url).count()
+  })
 
   return (
     <li>

src/app/components/logo.tsx

···
-import { ComponentProps, VoidProps } from "solid-js";
+import {ComponentProps} from 'solid-js'
 
 export function Logo(props: ComponentProps<'svg'>) {
   return (
···
       <title>feedline.at</title>
       <g id="logomark">
         <g transform="rotate(-180, 400, 300)">
-          <path id="outer-beam" stroke-width="40" stroke="currentColor" fill="none" d="m242.71695,140.94978c246.88738,5.659 306.05873,87.00719 304.01834,326.10013" />
-          <path id="middle-beam" stroke-width="40" stroke="currentColor" fill="none" d="m243.60313,228.8047c176.30383,4.11259 218.55847,63.23105 217.10141,236.98793" />
-          <path id="inner-beam" stroke-width="50" stroke="currentColor" fill="none" d="m243.60313,323.17414c109.42636,2.438 135.65251,37.48428 134.74816,140.48986" />
+          <path
+            id="outer-beam"
+            stroke-width="40"
+            stroke="currentColor"
+            fill="none"
+            d="m242.71695,140.94978c246.88738,5.659 306.05873,87.00719 304.01834,326.10013"
+          />
+          <path
+            id="middle-beam"
+            stroke-width="40"
+            stroke="currentColor"
+            fill="none"
+            d="m243.60313,228.8047c176.30383,4.11259 218.55847,63.23105 217.10141,236.98793"
+          />
+          <path
+            id="inner-beam"
+            stroke-width="50"
+            stroke="currentColor"
+            fill="none"
+            d="m243.60313,323.17414c109.42636,2.438 135.65251,37.48428 134.74816,140.48986"
+          />
         </g>
 
-        <ellipse fill="currentColor" stroke="currentColor" stroke-width="65" cx="156.71432" cy="415.54991" rx="30" ry="30" id="circle"/>
+        <ellipse
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-width="65"
+          cx="156.71432"
+          cy="415.54991"
+          rx="30"
+          ry="30"
+          id="circle"
+        />
       </g>
-      <rect rx="20" stroke-width="20" id="border" height="480" width="568" y="80" x="46" stroke="currentColor" fill="none"/>
+      <rect
+        rx="20"
+        stroke-width="20"
+        id="border"
+        height="480"
+        width="568"
+        y="80"
+        x="46"
+        stroke="currentColor"
+        fill="none"
+      />
     </svg>
   )
 }

src/app/components/navigation-page.tsx

···
-import {Accessor, JSX, ParentProps, mergeProps} from 'solid-js'
+import {JSX, ParentProps, mergeProps} from 'solid-js'
 
 import styles from './navigation-page.module.css'
 
 export type NavigationPageProps = ParentProps & JSX.HTMLAttributes<HTMLElement>
 
 export function NavigationPage(_props: NavigationPageProps) {
-  const props = mergeProps(_props, {class: styles['nav-page'] + ' ' + _props.class})
-  return <article {...props} />
+  const classname = () => styles['nav-page'] + ' ' + (_props.class ?? '')
+  return <article {...mergeProps(_props, {class: classname()})} />
 }

src/app/components/virtual-list.tsx

···
 }
 
 export function createVirtualList<T>(props: VirtualListProps<T>) {
-  const overscan = props.overscan ?? 2
-
   // calculate how much of the scroll belongs to the list (after header has consumed it's part)
 
-  const offsetY = createMemo(() => (props.offsetY && props.offsetY()) || 0)
-  const listScrollY = createMemo(() => Math.max(0, props.scrollY() - offsetY()))
+  const overscan = createMemo(() => props.overscan ?? 2)
+  const listScrollY = createMemo(() =>
+    Math.max(0, props.scrollY() - ((props.offsetY && props.offsetY()) || 0)),
+  )
 
   // based on the scroll and heights, where should we slice?
-
-  const firstIndex = createMemo(() => Math.max(0, Math.floor(listScrollY() / props.rowHeight) - overscan))
-
+  const firstIndex = createMemo(() => Math.max(0, Math.floor(listScrollY() / props.rowHeight) - overscan()))
   const lastIndex = createMemo(() => {
     const count = Math.ceil(props.viewportHeight() / props.rowHeight)
-    return Math.min(props.items.length, Math.floor(listScrollY() / props.rowHeight) + count + overscan)
+    return Math.min(props.items.length, Math.floor(listScrollY() / props.rowHeight) + count + overscan())
   })
 
-  return {
-    items: createMemo(() => props.items.slice(firstIndex(), lastIndex())),
-    firstIndex: firstIndex,
+  // the slice everything up
+  const items = createMemo(() => props.items.slice(firstIndex(), lastIndex()))
+  const offsetY = createMemo(() => firstIndex() * props.rowHeight)
+  const listHeight = createMemo(() => offsetY() + props.items.length * props.rowHeight)
 
-    offsetY: createMemo(() => firstIndex() * props.rowHeight),
-    listHeight: createMemo(() => offsetY() + props.items.length * props.rowHeight),
-  }
+  return {items, firstIndex, offsetY, listHeight}
 }

src/app/index.tsx

···
 import {Route, Router} from '@solidjs/router'
-import {Match, Show, Switch} from 'solid-js'
+import {Match, Switch} from 'solid-js'
 import {render} from 'solid-js/web'
 
 import {FeedlineContextProvider} from './context/feedline'
···
 
 function Homepage() {
   const bp = useBreakpoints()
-
-  return <Dashboard />
 
   // on mobile, the sidenav _is_ the homepage
   // on desktop, dashboard is the homepage, because sidenav is, well, sidenav

src/app/layout/drawer/context.tsx

···
   view: unknown,
   state: DrawerState,
 ) => undefined | boolean | Promise<undefined | boolean>
+
 export type DrawerBeforeClose = () => undefined | boolean | Promise<undefined | boolean>
 
 export type DrawerContextValue = {
···
     setState,
     view,
     setView,
-    open: async (view: unknown, state?: DrawerState) => {
+    open: (view: unknown, state?: DrawerState) => {
       setView(view)
       setState(state ?? 'midi')
     },
-    close: async () => {
+    close: () => {
       setState('hidden')
     },
   } satisfies DrawerContextValue

src/app/layout/drawer/index.module.css

···
         padding-left: 0;
     }
 
-    background: #007;
-
     user-select: none;
     touch-action: none;
 

src/app/layout/drawer/index.tsx

···
 import {useBeforeLeave} from '@solidjs/router'
 import {DragGesture} from '@use-gesture/vanilla'
 import {AnimationPlaybackControls, animate} from 'motion'
-import {
-  Accessor,
-  ParentProps,
-  Show,
-  createContext,
-  createEffect,
-  createSignal,
-  on,
-  onCleanup,
-  useContext,
-} from 'solid-js'
+import {ParentProps, Show, createEffect, on, onCleanup} from 'solid-js'
 import {onMount} from 'solid-js'
 import {Portal} from 'solid-js/web'
 
···
 
   createEffect(
     on(drawer.state, (newstate, prevstate) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!drawerref) return
 
       // on initial, make sure we get a defined height

src/app/layout/index.module.css

···
 
   > header {
     grid-area: header;
-    background: #700;
-
     z-index: 1;
 
     display: flex;
···
 
   > main {
     grid-area: content;
-    background: #070;
-
     z-index: 0;
 
     position: relative;
···
             padding: 0;
         }
 
-        &.slide-back {
-            background: #030;
-        }
-        &.slide-forward {
-            background: #090;
-        }
+        &.slide-back {}
+        &.slide-forward {}
     }
   }
 
···
     @media (--tablet) {
       & {
         grid-area: sidebar;
-        background: #770;
+        z-index: 0;
 
         padding-left: var(--safe-left);
         overflow-y: auto;
···
 
   > footer {
     grid-area: drawer;
-    background: #777;
-
     z-index: 3;
 
     padding-left: var(--safe-left);

src/app/layout/index.tsx

···
 import {Breadcrumbs} from '#app/components/breadcrumbs'
+import {Logo} from '#app/components/logo.jsx'
 import {useBreakpoints} from '#app/primitives/breakpoints'
-import {ParentProps, Show, Suspense} from 'solid-js'
+import {ParentProps, Show} from 'solid-js'
 
 import {Drawer} from './drawer'
 import {DrawerContextProvider} from './drawer/context'
 import styles from './index.module.css'
 import {MainTransition} from './main/transition'
 import SideNav from './sidenav'
-import { Logo } from '#app/components/logo.jsx'
 
 export default function Layout(props: ParentProps) {
   const bp = useBreakpoints()

src/app/layout/sidenav/index.tsx

···
   const feedline = useFeedlineDatabase()
   const feedurl = createMemo(() => encodeURIComponent(props.feed.url))
 
-  const entries = makeSignalQuery(
-    async () => await feedline.entries.where('feedurl').equals(props.feed.url).count(),
-  )
+  // eslint-disable-next-line solid/reactivity
+  const entries = makeSignalQuery(async () => {
+    return await feedline.entries.where('feedurl').equals(props.feed.url).count()
+  })
 
   return (
     <li>

src/app/pages/dashboard.tsx

···
-import {NavigationPage} from '#app/components/navigation-page.jsx'
-import {FeedRow} from '../components/feed-row'
+import {FeedRow} from '#app/components/feed-row'
+import {NavigationPage} from '#app/components/navigation-page'
+import {useRealmIdentity} from '#app/context/realm-identity'
+import {DebugNukeButton} from '#app/debug/nuke-database.button'
+import {makeStoreQuery} from '#app/primitives/database'
 import {useFeedlineDatabase, useFeedlineDispatch} from '../context/feedline'
-import {useRealmIdentity} from '../context/realm-identity'
-import {DebugNukeButton} from '../debug/nuke-database.button'
-import {makeStoreQuery} from '../primitives/database'
 import {makeEventListenerStack} from '@solid-primitives/event-listener'
 import {For, createResource, createSignal, onCleanup} from 'solid-js'
 
-import {RealmPeer} from '#realm/client/peer.js'
+import {RealmPeer} from '#realm/client/peer'
 import {IdentID} from '#realm/schema/brands'
 
 function PeerLabel(props: {identid: IdentID; peer: RealmPeer}) {

src/app/pages/entry.tsx

···
 import {useFeedlineDatabase} from '../context/feedline'
 import {RouteSectionProps} from '@solidjs/router'
 import {liveQuery} from 'dexie'
-import {For, Show, Suspense, createEffect, createMemo, createSignal, on, onCleanup} from 'solid-js'
+import {For, Show, createEffect, createMemo, createSignal, on, onCleanup} from 'solid-js'
 
 import {EntryPatchAction} from '#feedline/schema/actions-entry.js'
 import {Entry} from '#feedline/schema/entry.js'
···
         {(entry) => (
           <article>
             <header>
-              {entry().imageUrl && <img src={entry().imageUrl!} alt={entry().imageLabel || ''} width="400" />}
+              <Show when={entry().imageUrl}>
+                {(url) => <img src={url()} alt={entry().imageLabel || ''} width="400" />}
+              </Show>
               <h1>{entry().title}</h1>
               <Show when={date()}>{(date) => <time>{date()}</time>}</Show>
-              {entry().linkUrl && (
-                <a href={entry().linkUrl ?? entry().feedurl} target="_blank" rel="noopener noreferrer">
-                  View original
-                </a>
-              )}
+              <Show when={entry().linkUrl}>
+                {(url) => (
+                  <a href={url()} target="_blank" rel="noopener noreferrer">
+                    View original
+                  </a>
+                )}
+              </Show>
             </header>
 
             <button onClick={setTitle}>Change Title</button>
 
-            {entry().enclosure && (
-              <section>
-                <h2>Audio</h2>
-                <audio controls src={entry().enclosure!.url} preload="metadata">
-                  Your browser does not support audio playback.
-                </audio>
-                {entry().podcast?.duration && (
-                  <p>
-                    Duration: {Math.floor((entry().podcast?.duration || 0) / 60)}m{' '}
-                    {Math.floor((entry().podcast?.duration || 0) % 60)}s
-                  </p>
-                )}
-              </section>
-            )}
+            <Show when={entry().enclosure}>
+              {(enclosure) => (
+                <section>
+                  <h2>Audio</h2>
+                  <audio controls src={enclosure().url} preload="metadata">
+                    Your browser does not support audio playback.
+                  </audio>
+                  <Show when={entry().podcast}>
+                    {(podcast) => (
+                      <p>
+                        Duration:
+                        {Math.floor((podcast().duration || 0) / 60)}m{' '}
+                        {Math.floor((entry().podcast?.duration || 0) % 60)}s
+                      </p>
+                    )}
+                  </Show>
+                </section>
+              )}
+            </Show>
 
-            {!entry().content && entry().snippet && (
-              <section>
-                <iframe srcdoc={entry().snippet!} />
-              </section>
-            )}
+            <Show when={!entry().content && entry().snippet}>
+              {(snippet) => (
+                <section>
+                  <iframe srcdoc={snippet()} />
+                </section>
+              )}
+            </Show>
 
-            {entry().content && (
-              <section>
-                <h2>Content</h2>
-                <iframe srcdoc={entry().content!} />
-              </section>
-            )}
+            <Show when={entry().content}>
+              {(content) => (
+                <section>
+                  <h2>Content</h2>
+                  <iframe srcdoc={content()} />
+                </section>
+              )}
+            </Show>
 
             {entry().links.length > 0 && (
               <section>

src/app/pages/feed/.#index.tsx

···
-jonathan@buzz.492312:1764524568

src/app/pages/feed/index.module.css

···
         top: 0;
         z-index: 1;
 
-        background: #779;
         max-height: 200px;
         min-height: 80px;
         /* height driven by js animation */
···
         position: relative;
 
         .entry-list-empty-item {
-            color: #333;
         }
 
         .entry-list-item {
-            background-color: pink;
         }
     }
 }

src/app/pages/feed/index.tsx

···
 import {
   Accessor,
   For,
-  JSX,
   Show,
   Suspense,
   createMemo,
···
   return (
     <A href={`/feeds/${feedurl()}/${guid()}`}>
       <h3>{props.entry.title || props.entry.guid}</h3>
-
-      {date && <time>{date()}</time>}
+      <time>{date()}</time>
     </A>
   )
 }
 
 function FeedPageDetail(props: {feed: Feed}) {
   const database = useFeedlineDatabase()
+
+  // eslint-disable-next-line solid/reactivity
   const entries = makeStoreQuery(async () => {
     const u = props.feed.url
     return u ? await database.entries.where('feedurl').equals(u).reverse().sortBy('publishedAt') : []
···
   const virtualHeightPx = () => `${viewportHeight()}px`
   const virtualStyles = createMemo(() => ({
     top: offsetYPx(),
-    height: virtualHeightPx(),
+    'max-height': virtualHeightPx(),
   }))
 
   return (
···
       class={styles['entry-list-scroller']}
       on:scroll={{
         handleEvent: (e) => setScrollY(e.currentTarget.scrollTop),
-        passive: true
-      }}>
+        passive: true,
+      }}
+    >
       <header class={styles['entry-list-header']} style={headerStyles()}>
         <FeedPageHeader feed={props.feed} />
       </header>

src/app/primitives/breakpoints.ts

···
 import {createEffect, createSignal, onCleanup, onMount} from 'solid-js'
 import z from 'zod/v4'
 
-const breakpointSchema = z.enum(['init', 'phone', 'tablet', 'desktop'])
+const breakpointSchema = z.enum(['init', 'bp:phone', 'bp:tablet', 'bp:desktop'])
 export type Breakpoint = z.infer<typeof breakpointSchema>
 
 function breakpointLabel(): Breakpoint {
···
 
   return {
     breakpoint,
-    isPhone: () => breakpoint() === 'phone',
-    isTablet: () => breakpoint() === 'tablet',
-    isDesktop: () => breakpoint() === 'desktop',
+    isPhone: () => breakpoint() === 'bp:phone',
+    isTablet: () => breakpoint() === 'bp:tablet',
+    isDesktop: () => breakpoint() === 'bp:desktop',
   }
 }

src/app/primitives/database.ts

···
 // pulled mainly from
 // https://github.com/faassen/solid-dexie/blob/main/src/solid-dexie.ts
 import {liveQuery} from 'dexie'
-import {Accessor, createEffect, createMemo, createSignal, from, on, onCleanup} from 'solid-js'
+import {Accessor, createEffect, createSignal, on, onCleanup} from 'solid-js'
 import {type ReconcileOptions, createStore, reconcile} from 'solid-js/store'
 
 type NotArray<T> = T extends unknown[] ? never : T

src/app/primitives/dataset.ts

···
   const set = (value: T | null) => {
     console.log('setting dataset:', value)
     if (value === null) {
-      // eslint-disable-next-lint @typescript-eslint/no-dynamic-delete
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete target.dataset[key]
     } else {
       target.dataset[key] = value

src/app/styles/reset.css

···
 
 @layer reset {
   html {
-    color-scheme: light dark;
     font:
       clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
       sans-serif;
···
   }
 
   a {
-    color: oklch(0.68 0.17 228);
     text-underline-offset: 2px;
     &:not(:is(:hover, :focus)) {
       text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);

src/app/styles/system.css

···
 @layer system {
   :root {
+    --safe-top: env(safe-area-inset-top, 0px);
+    --safe-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-left: env(safe-area-inset-left, 0px);
+    --safe-right: env(safe-area-inset-right, 0px);
+
+    color-scheme: light dark;
+
     --layout-header-height: 56px;
     --layout-sidebar-width: 280px;
     --layout-drawer-mini: 64px;
     --layout-drawer-midi: 40dvh;
 
-    --safe-top: env(safe-area-inset-top, 0px);
-    --safe-bottom: env(safe-area-inset-bottom, 0px);
-    --safe-left: env(safe-area-inset-left, 0px);
-    --safe-right: env(safe-area-inset-right, 0px);
+    --light-bg: ghostwhite;
+    --light-color: darkslategray;
+    --light-accent: tomato;
+
+    --dark-bg: #223;
+    --dark-color: ghostwhite;
+    --dark-accent: gold;
+
+    --theme-bg: light-dark(var(--light-bg), var(--dark-bg));
+    --theme-color: light-dark(var(--light-color), var(--dark-color));
+    --theme-accent: light-dark(var(--light-accent), var(--dark-accent));
   }
 
   html {
     font-size: 14px; /* default */
+
+    body {
+        &.force-dark { color-scheme: dark; }
+        &.force-light { color-scheme: light; }
+    }
   }
 
-  /* put content on the page that js can use to detect breakpoints */
+  * {
+      color: var(--theme-color);
+      background: var(--theme-bg);
+  }
+
+  /*
+   put content on the page that js can use to detect breakpoints
+   @see app/primitives/useBreakpoint
+  */
 
   body:before {
-    content: 'phone';
+    content: 'bp:phone';
     display: none;
   }
 
   @media (--tablet) {
     body:before {
-      content: 'tablet';
+      content: 'bp:tablet';
     }
   }
 
   @media (--desktop) {
     body:before {
-      content: 'desktop';
+      content: 'bp:desktop';
     }
   }
 }

src/lib/client/webrtc.ts

···
       return
     }
 
-    if (isFinal && this.#chunkIncoming) {
+    if (isFinal) {
       this.#chunkBuffer.enqueue(this.#chunkIncoming)
       this.#chunkIncoming = null
     }
···
 
   async #incomingLoop() {
     try {
-      let chunk: DataChunk
-      while ((chunk = await this.#chunkBuffer.dequeue(this.#abort.signal))) {
+      while (true) {
+        const chunk = await this.#chunkBuffer.dequeue(this.#abort.signal)
         let payload = chunk.buffer
 
         try {

vite.config.js

···
 import postcssGlobalData from '@csstools/postcss-global-data'
-import basicSsl from '@vitejs/plugin-basic-ssl'
 import postcssPresetEnv from 'postcss-preset-env'
 import devtools from 'solid-devtools/vite'
 import {defineConfig} from 'vite'