some feed row stuff

src/app/components/badge.module.css

···
+.badge {
+    background: var(--theme-color);
+    color: var(--theme-bg);
+
+    display: flex;
+    color: light-dark(
+        color-mix(in srgb, var(--theme-color), white 20%),
+        color-mix(in srgb, var(--theme-color), black 20%)
+    );
+    background: light-dark(
+        color-mix(in srgb, var(--theme-bg), black 20%),
+        color-mix(in srgb, var(--theme-bg), white 20%)
+    );
+
+    gap: 2px;
+    border-radius: 4px;
+    padding: 2px;
+
+    .label {
+    }
+
+    .value {
+        padding: 2px;
+        border-radius: 4px;
+    }
+
+    .extra {
+        padding: 2px;
+        border-radius: 4px;
+
+        background: light-dark(
+            color-mix(in srgb, var(--theme-bg), black 10%),
+            color-mix(in srgb, var(--theme-bg), white 10%)
+        );
+    }
+}

src/app/components/badge.tsx

···
+import { ComponentProps, For, JSXElement, Show, splitProps } from "solid-js";
+
+import styles from './badge.module.css';
+
+export type BadgeProps = ComponentProps<'span'> & {
+  label?: string
+  value: JSXElement | JSXElement[]
+}
+
+export function Badge(props: BadgeProps) {
+  const [badgeprops, spanprops] = splitProps(props, ['label', 'value'])
+
+  const values = () => Array.isArray(badgeprops.value) ? badgeprops.value : [badgeprops.value]
+  const primaryValue = () => values()[0]
+  const secondaryValues = () => values().slice(1)
+
+  return (
+    <span {...spanprops} class={styles['badge']}>
+      <Show when={badgeprops.label}>
+        {(label) => <span class={styles['label']}>{label()}</span>}
+      </Show>
+      <Show when={primaryValue()}>
+        {(value) => <span class={styles['value']}>{value()}</span>}
+      </Show>
+      <Show when={secondaryValues()}>
+        {(values) => (
+          <For each={values()}>
+            {(value) => <span class={styles['extra']}>{value}</span>}
+          </For>
+        )}
+      </Show>
+    </span>
+  )
+}

src/app/layout/index.module.css

···
 
   @media (--tablet) {
       grid-template-areas:
-          'header content'
+          'header header'
           'sidebar content'
           'sidebar drawer';
 

src/app/layout/sidenav/feed-row.tsx

···
+import {A} from '@solidjs/router'
+import {ComponentProps, Show, createMemo, mergeProps, splitProps} from 'solid-js'
+
+import {Feed} from '#feedline/schema/feed'
+
+import { useFeedlineDatabase, useFeedlineDispatch } from '#app/context/feedline'
+import { makeSignalQuery } from '#app/primitives/database'
+import { Badge } from '#app/components/badge.jsx'
+import styles from './index.module.css'
+
+export type FeedRowProps = ComponentProps<'li'> & {
+  feed: Feed
+}
+
+export function FeedRow(props: FeedRowProps) {
+  const [feedprops, liprops] = splitProps(props, ['feed']);
+
+  const feedline = useFeedlineDatabase()
+  const dispatcher = useFeedlineDispatch()
+
+  const feedurl = createMemo(() => encodeURIComponent(feedprops.feed.url))
+
+  const totalCount = makeSignalQuery(async () =>
+    await feedline.entries.where('feedurl').equals(feedprops.feed.url).count()
+  )
+
+  const unreadCount = makeSignalQuery(async () =>
+    await feedline.entries.where('[feedurl+idx_read]').equals([feedprops.feed.url, 0]).count()
+  )
+
+  return (
+    <li {...liprops}>
+      <Show when={feedprops.feed.imageUrl} fallback={<span class={styles['placeholder']}></span>}>
+        {(url) => (
+          <img
+            src={url()}
+            style={{height: '24px'}}
+            alt={feedprops.feed.imageLabel ?? feedprops.feed.title ?? feedprops.feed.url}
+          />
+        )}
+      </Show>
+      <A href={`/feeds/${feedurl()}`}>
+        {feedprops.feed.title || feedprops.feed.url}
+      </A>
+      <Badge value={[unreadCount(), totalCount()]} />
+    </li>
+  )
+}

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

···
 .sidenav {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    .sidenav-section {
-        flex: 1 1;
+  ul.sidenav-section {
+    flex: 1 1;
+    overflow-y: auto;
+    padding: 1rem;
+
+    list-style: none;
+  }
+
+  .sidenav-bottom {
+    flex: 0 0;
+    align-self: flex-end;
+  }
+}
+
+.sidenav-folder {
+    h3 {
+      margin: 1rem 1rem 1rem 0;
+      padding: 0;
     }
+}
 
-    .sidenav-bottom {
-        flex: 0 0;
-        align-self: flex-end;
-    }
+.sidenav-feed {
+  display: flex;
+  align-items: center;
+
+  white-space: nowrap;
+  margin: 8px 0;
+  gap: 8px;
+
+  > img, > .placeholder {
+      flex: 0;
+      display: inline-block;
+      min-width: 24px;
+      max-height: 24px;
+      margin-right: 4px;
+  }
+
+  > a {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > span {
+    flex: 0;
+  }
 }

src/app/layout/sidenav/index.tsx

···
+import {For, Show, createSignal} from 'solid-js'
+
 import {useFeedlineDatabase, useFeedlineDispatch} from '#app/context/feedline'
-import {DebugNukeButton} from '#app/debug/nuke-database.button.jsx'
+import {DebugNukeButton} from '#app/debug/nuke-database.button'
 import {makeSignalQuery, makeStoreQuery} from '#app/primitives/database'
-import {createDate, createTimeAgo} from '@solid-primitives/date'
-import {createEventDispatcher} from '@solid-primitives/event-dispatcher'
-import {A} from '@solidjs/router'
-import {For, createMemo, createSignal} from 'solid-js'
 
-import {Feed} from '#feedline/schema/feed.js'
+import { Feed } from '#feedline/schema/feed.js'
+import { StrictMap } from '#lib/strict-map.js'
 
+import {FeedRow} from './feed-row'
 import styles from './index.module.css'
+import { useBreakpoints } from '#app/primitives/breakpoints.js'
+import { A } from '@solidjs/router'
 
 export default function SideNav() {
   const dispatch = useFeedlineDispatch()
   const feedline = useFeedlineDatabase()
+  const bp = useBreakpoints()
 
-  const feeds = makeStoreQuery(() => feedline.feeds.reverse().toArray())
   const [newFeed, setNewFeed] = createSignal<string>('')
 
   const addFeed = () => {
     const newFeedUrl = newFeed()
     if (newFeedUrl === '') return
 
-    dispatch.addFeed(newFeedUrl, true)
+    dispatch.addFeed(newFeedUrl)
     setNewFeed('')
   }
 
-  const refreshFeed = (e: CustomEvent<string>) => {
-    dispatch.refreshFeed(e.detail)
+  const importOpml = (e: Event) => {
+    const target = e.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (file) {
+      dispatch.importOpml(file)
+      target.value = ''
+    }
+  }
+
+  const folders = makeSignalQuery<Map<string, Feed[]>>(async () => {
+    const results = new StrictMap<string, Feed[]>();
+    await feedline.feeds.where('idx_tags').startsWith('folder:').each((feed, cursor) => {
+      results.update(cursor.key as string, (orig) => orig ? [...orig, feed] : [feed])
+    })
+
+    return results
+  })
+
+  const folderTagDisplay = (folderTag: string) => {
+    return folderTag.slice("folder:/".length);
   }
 
   return (
     <aside class={styles['sidenav']}>
-      <div class={styles['sidenav-section']}>
-        <h2>Feeds</h2>
-        <ul>
-          <For each={feeds}>{(feed) => <FeedRow feed={feed} onRefresh={refreshFeed} />}</For>
-        </ul>
-      </div>
+      <Show when={bp.isPhone()}>
+        <A href="/dashboard">Dashboard</A>
+      </Show>
+      <ul class={styles['sidenav-section']}>
+      <Show when={folders()}>
+      {(folders) => (
+        <For each={Array.from(folders().entries())}>
+        {([path, feeds]) => (
+          <li class={styles['sidenav-folder']}>
+            <h3>{folderTagDisplay(path)}</h3>
+            <For each={feeds}>{(feed) => <FeedRow feed={feed} class={styles['sidenav-feed']} />}</For>
+          </li>
+        )}
+        </For>
+      )}
+      </Show>
+      </ul>
       <div class={styles['sidenav-bottom']}>
         <div>
           <input
···
           <button onClick={addFeed}>Add Feed</button>
         </div>
         <br />
+        <div>
+        <label>
+          <input type="file" accept=".opml" onChange={importOpml} />
+          <span>Import OPML</span>
+        </label>
+        </div>
         <DebugNukeButton />
       </div>
     </aside>
   )
 }
-
-type FeedRowProps = {
-  feed: Feed
-  onRefresh?: (evt: CustomEvent<string>) => void
-}
-
-function FeedRow(props: FeedRowProps) {
-  const dispatch = createEventDispatcher(props)
-
-  const feedurl = createMemo(() => encodeURIComponent(props.feed.url))
-
-  const feedline = useFeedlineDatabase()
-  const [publishedAt] = createDate(props.feed.lastPublishedAt ?? props.feed.lastBuildAt ?? '1999-12-31')
-  const [published] = createTimeAgo(publishedAt)
-
-  const unreadCount = makeSignalQuery(
-    async () => await feedline.entries.where('[feedurl+idx_read]').equals([props.feed.url, 0]).count(),
-  )
-
-  return (
-    <li>
-      <A href={`/feeds/${feedurl()}`}>
-        <p>{props.feed.title || props.feed.url}</p>
-      </A>
-      <span>{props.feed.status}</span>
-      <span>{published()}</span>
-      <span>{unreadCount()}</span>
-      <button onClick={() => dispatch('refresh', props.feed.url)}>Refresh</button>
-    </li>
-  )
-}

src/app/pages/dashboard.tsx

···
-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 {makeSignalQuery} from '#app/primitives/database'
+import {useFeedlineDatabase} from '../context/feedline'
 import {makeEventListenerStack} from '@solid-primitives/event-listener'
 import {For, createResource, createSignal, onCleanup} from 'solid-js'
 
 import {RealmPeer} from '#realm/client/peer'
 import {IdentID} from '#realm/schema/brands'
+import { StrictMap } from '#lib/strict-map.js'
 
 function PeerLabel(props: {identid: IdentID; peer: RealmPeer}) {
   const [stats, {refetch}] = createResource(() => props.peer.connectionStats())
···
 
 export default function Dashboard() {
   const identity = useRealmIdentity()
-  const dispatch = useFeedlineDispatch()
   const feedline = useFeedlineDatabase()
+  const peers = makeRealmPeersSignal()
+
+  const tags = makeSignalQuery(async () => {
+    const entries = await feedline.entries.toArray()
+    const output = new StrictMap<string, number>();
 
-  const feeds = makeStoreQuery(() => feedline.feeds.reverse().toArray())
-  const peers = makeRealmPeersSignal()
+    entries.forEach((entry) => {
+      entry.idx_tags.forEach((tagstr) => {
+        output.update(tagstr, (x => x === undefined ? 1 : x + 1))
+      })
+    })
 
-  const [invite, setInvite] = createSignal<string>('')
-  const [newFeed, setNewFeed] = createSignal<string>('')
+    return output
+  })
 
-  let opmlInputRef: HTMLInputElement | undefined
+  const topTags = () => {
+    return Array
+      .from(tags()?.entries() || [])
+      .toSorted(([_b, acount], [_a, bcount]) => bcount - acount)
+      .slice(0, 5)
+      .reverse()
+  }
+
+  const [invite, setInvite] = createSignal<string>('')
 
   const host = window.location.host
   const scheme = window.location.protocol === 'https:' ? 'wss' : 'ws'
···
       })
   }
 
-  const addFeed = () => {
-    const newFeedUrl = newFeed()
-    if (newFeedUrl !== '') {
-      dispatch.addFeed(newFeedUrl, true)
-      setNewFeed('')
-    }
-  }
-
-  const handleOpmlImport = (e: Event) => {
-    const file = (e.target as HTMLInputElement).files?.[0]
-    if (file) {
-      dispatch.importOpml(file)
-      if (opmlInputRef) opmlInputRef.value = ''
-    }
-  }
-
   return (
     <NavigationPage>
-      <h2>Feeds</h2>
-      <ul>
-        <li>
-          <input
-            type="url"
-            placeholder="http://example.com"
-            value={newFeed()}
-            onChange={(e) => setNewFeed(e.target.value)}
-          />
-          <button onClick={addFeed}>Add Feed</button>
-          <input ref={opmlInputRef} type="file" accept=".opml,.xml" onChange={handleOpmlImport} />
-          <button onClick={() => opmlInputRef?.click()}>Import OPML</button>
-        </li>
-        <For each={feeds}>{(feed) => <FeedRow feed={feed} />}</For>
-      </ul>
+      <h2>Tags</h2>
+      <pre>{JSON.stringify(topTags(), null, 2)}</pre>
       <h2>Peers</h2>
       <ul>
         <For each={peers()}>{(peer) => <PeerLabel identid={peer.identid} peer={peer} />}</For>
···
       <button onClick={exchangeInvite}>Exchange Invitation</button>
       <button onClick={registerAction}>Register</button>
       <button onClick={generateInvite}>Generate Invitation</button>
-      <br />
-      <br />
-      <DebugNukeButton />
     </NavigationPage>
   )
 }

src/app/styles/system.css

···
     --safe-right: env(safe-area-inset-right, 0px);
 
     --layout-header-height: 56px;
-    --layout-sidebar-width: 280px;
+    --layout-sidebar-width: 360px;
     --layout-drawer-mini: 64px;
     --layout-drawer-midi: 40dvh;
   }

src/feedline/client/action-dispatcher.ts

···
     this.#abort.abort(new Error('dispatcher shutting down'))
   }
 
-  addFeed(url: string, local = true) {
+  addFeed(url: string, path: string[] = [], local = true) {
     void this.#identity.dispatchAction<FeedAddAction>('feed:add', {
       url,
+      tags: [{ tag: 'folder', value: path.join('/') }],
       local,
       lock: {
         by: this.#identity.identid,

src/feedline/client/action-handler.ts

···
           interval: 'daily',
         },
         links: [],
-        tags: [],
+        tags: action.dat.tags ?? [],
         meta: {},
       })
 
···
     await this.#db.feeds.delete(action.dat.url)
   }
 
+  #deepMerge(...objects: Record<string, unknown>[]): Record<string, unknown> {
+    const isObject = (obj: any) => obj && typeof obj === 'object';
+
+    function deepMergeInner(target: Record<string, unknown>, source: Record<string, unknown>) {
+      Object.keys(source).forEach((key: string) => {
+        const sourceValue = source[key];
+        const targetValue = target[key];
+
+        if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+          target[key] = targetValue.concat(sourceValue);
+        } else if (isObject(targetValue) && isObject(sourceValue)) {
+          target[key] = deepMergeInner(Object.assign({}, targetValue), sourceValue);
+        } else {
+          target[key] = sourceValue;
+        }
+      });
+
+      return target;
+    }
+
+    if (objects.length < 2) {
+      throw new Error('deepMerge: this function expects at least 2 objects to be provided');
+    }
+
+    if (objects.some(object => !isObject(object))) {
+      throw new Error('deepMerge: all values should be of type "object"');
+    }
+
+    return objects.reduce(deepMergeInner)
+}
+
   async #feedPatch(action: FeedPatchAction) {
     // TODO: this should check locks and clocks
-    const update = this.#db.enrichFeed(action.dat.payload)
-    await this.#db.feeds.update(action.dat.url, update)
+    await this.#db.feeds.update(action.dat.url, ((value, ref) => {
+      const update = this.#db.enrichFeed(action.dat.payload)
+      ref.value = this.#deepMerge(value, update)
+      console.log('patched to:', ref.value)
+    }))
   }
 
   async #entryPatch(action: EntryPatchAction) {

src/feedline/client/opml-importer.ts

···
 import {parseOpml as parseOpmlFeedsmith} from 'feedsmith'
-import type {DeepPartial, Opml} from 'feedsmith/types'
-
+import type { DeepPartial, Opml } from 'feedsmith/types'
 import {LogicalClock} from '#realm/logical-clock'
-
 import {FeedAddAction} from '#feedline/schema/actions-feed'
+import { Tag } from '#feedline/schema/feed.js'
 
 export class OpmlImporter {
   #clock: LogicalClock
···
     const text = await file.text()
     const urls = parseOpml(text)
 
-    for (const url of urls) {
+    for (const [path, url] of urls) {
       const action: FeedAddAction = {
         typ: 'act',
         clk: this.#clock.now(),
         msg: 'feed:add',
         dat: {
           url,
+          tags: [{ tag: 'folder', value: path.join('/') }],
           local: true,
         },
       }
···
   }
 }
 
-function parseOpml(text: string): string[] {
-  const doc = parseOpmlFeedsmith(text)
-  function reduce(memo: string[], outline: DeepPartial<Opml.Outline<string>>): string[] {
-    const next = outline.xmlUrl ? [...memo, outline.xmlUrl] : memo
-    return outline.outlines ? outline.outlines.reduce(reduce, next) : next
+type Node = DeepPartial<Opml.Outline<string>>;
+
+// returns [path, url] where path should turn into a folder structure in tags
+function parseOpml(text: string): [string[], string][] {
+  function reduce(memo: [string[], string][], item: [string[], Node]): [string[], string][] {
+    const [path, outline] = item;
+
+    const value: [string[], string][] = outline.xmlUrl ? [...memo, [path, outline.xmlUrl]] : memo
+    if (!outline.outlines) {
+      return value
+    } else {
+      return outline.outlines
+        .map<[string[], Node]>((o) => [outline.title ? [...path, outline.title] : path, o])
+        .reduce(reduce, value)
+    }
   }
 
-  return doc.body?.outlines?.reduce(reduce, [] as string[]) ?? []
+  const doc = parseOpmlFeedsmith(text)
+  const outlines: Node[] | undefined = doc?.body?.outlines
+  return outlines?.map<[string[], Node]>((outline) => [[], outline]).reduce(reduce, []) ?? []
 }

src/feedline/schema/actions-feed.ts

···
 
 import {makeActionSchema} from '#realm/schema'
 
-import {feedSchema} from './feed'
+import {feedSchema, tagSchema} from './feed'
 import {lockSchema} from './lock'
 
 export const feedAddSchema = makeActionSchema(
   'feed:add',
   z.object({
     url: z.url(),
+    tags: z.array(tagSchema).optional(),
     lock: lockSchema.optional(),
     local: z.boolean().optional(), // don't publish to ATProto
     refreshInterval: z.number().optional(), // seconds, defaults to 3600 (1 hour)

src/feedline/schema/feed.ts

···
 
 export const tagSchema = z.discriminatedUnion('tag', [
   z.object({tag: z.literal('explicit')}),
+  z.object({tag: z.literal('folder'), value: z.string()}), // `/` separated folder names (spaces ok)
   z.object({tag: z.literal('category'), value: z.string()}),
   z.object({tag: z.literal('language'), value: z.string()}), // ISO code
   z.object({
···
     case 'person': return `person:${tag.value}${tag.rel ? ":" + tag.rel : ""}`
     case 'podcast.season': return `podcast:season:${tag.value}`
     case 'podcast.episode': return `podcast:episode:${tag.value}`
+    case 'folder': return `folder:/${tag.value}`
   }
 }