yay accessibility!

aria tags + better touchscreen support

bun.lock

@@ -20,7 +20,7 @@
         "sqids": "0.3.0",
         "svelte": "^5.53.12",
         "svelte-check": "^4.4.5",
-        "svelte-select": "^5.8.3",
+        "svelte-select": "^6",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
         "vite": "^8.0.0",
@@ -487,7 +487,7 @@
 
     "svelte-floating-ui": ["svelte-floating-ui@1.5.8", "", { "dependencies": { "@floating-ui/core": "^1.5.0", "@floating-ui/dom": "^1.5.3" } }, "sha512-dVvJhZ2bT+kQDHlE4Lep8t+sgEc0XD96fXLzAi2DDI2bsaegBbClxXVNMma0C2WsG+n9GJSYx292dTvA8CYRtw=="],
 
-    "svelte-select": ["svelte-select@5.8.3", "", { "dependencies": { "svelte-floating-ui": "1.5.8" } }, "sha512-nQsvflWmTCOZjssdrNptzfD1Ok45hHVMTL5IHay5DINk7dfu5Er+8KsVJnZMJdSircqtR0YlT4YkCFlxOUhVPA=="],
+    "svelte-select": ["svelte-select@6.0.0", "", { "dependencies": { "svelte-floating-ui": "1.5.8" }, "peerDependencies": { "svelte": ">=5" } }, "sha512-WJ1UDw0a1Z3I7oVFgaCS7G9D2rCSmYAPpufNEj/DNuk5Oyb2a5dju6F36o0urBVw9bTE3WkM9cZkI0x+Sfo8Bg=="],
 
     "svelte2tsx": ["svelte2tsx@0.7.52", "", { "dependencies": { "dedent-js": "^1.0.1", "scule": "^1.3.0" }, "peerDependencies": { "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0", "typescript": "^4.9.4 || ^5.0.0" } }, "sha512-svdT1FTrCLpvlU62evO5YdJt/kQ7nxgQxII/9BpQUvKr+GJRVdAXNVw8UWOt0fhoe5uWKyU0WsUTMRVAtRbMQg=="],
 

db/update_db.js

@@ -52,8 +52,11 @@ for (const file of files) {
     // Prepare attributes for insertion
     const fields = Object.entries(jsonData)
         .filter(([key]) => key in lookup)
-        // Serialize value if array
-        .map(([key, value]) => [lookup[key], Array.isArray(value) ? JSON.stringify(value) : value]);
+        // Serialize value if array or object
+        .map(([key, value]) => [
+            lookup[key],
+            typeof value === 'object' && value !== null ? JSON.stringify(value) : value
+        ]);
 
     const row = existingRow.get(jsonData.id);
     if (row) {

package.json

@@ -30,7 +30,7 @@
         "sqids": "0.3.0",
         "svelte": "^5.53.12",
         "svelte-check": "^4.4.5",
-        "svelte-select": "^5.8.3",
+        "svelte-select": "^6",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
         "vite": "^8.0.0"

src/lib/components/WeightedTags.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { TAG_WEIGHT_NAMES } from '$lib/stores.svelte.ts';
+    import type { TagWeights } from '$lib/types';
+
+    let { tags, highlighted = {} }: { tags: TagWeights; highlighted?: Record<string, number> } =
+        $props();
+
+    let sorted = $derived(Object.entries(tags).sort((a, b) => b[1] - a[1]));
+</script>
+
+{#each sorted as [tag, weight], i}{i ? ', ' : ''}<span
+        class="weight-{weight}"
+        class:highlighted={tag in highlighted}
+        >{tag}<span class="screen-reader-only"> ({TAG_WEIGHT_NAMES[weight]})</span></span
+    >{/each}
+
+<style>
+    .weight-1 {
+        font-weight: normal;
+    }
+
+    .weight-2 {
+        font-weight: bold;
+    }
+
+    .weight-3 {
+        font-weight: bold;
+        text-decoration: underline;
+    }
+
+    /* translucent to take on the hover/selected bg colour tint */
+    .highlighted {
+        background: rgba(255, 220, 0, 0.18);
+    }
+
+    .screen-reader-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+</style>

src/lib/database.ts

@@ -18,7 +18,7 @@ export function getStreams(): StreamSummary[] {
         stream_date: Date.parse(stream.stream_date as string),
         filename: stream.filename as string,
         title: stream.title as string | null,
-        tags: (JSON.parse(stream.tags as string) as string[]) ?? [],
+        tags: stream.tags ? JSON.parse(stream.tags as string) : {},
         length_seconds: stream.length_seconds as number
     }));
 }
@@ -40,7 +40,7 @@ export function getStreamInfo(streamId: string): Stream | null {
         format: streamData.format as string,
         title: streamData.title as string | null,
         description: streamData.description as string | null,
-        tags: (JSON.parse(streamData.tags as string) as string[]) ?? [],
+        tags: streamData.tags ? JSON.parse(streamData.tags as string) : {},
         length_seconds: streamData.length_seconds as number,
         tracks: JSON.parse(streamData.tracks as string)
     };

src/lib/stores.svelte.ts

@@ -8,6 +8,9 @@ $effect.root(() => {
     });
 });
 
+export const MAX_TAG_WEIGHT = 3;
+export const TAG_WEIGHT_NAMES = ['off', 'light', 'medium', 'heavy'];
+
 export const tagList = [
     'acoustic',
     'electronic',

src/lib/types.ts

@@ -1,13 +1,16 @@
 /** A track entry: [timestamp_seconds, artist, title] */
 export type Track = [number, string, string];
 
+// tag -> weight, 1 (light) to 3 (heavy)
+export type TagWeights = Record<string, number>;
+
 /** The summary shape used in sidebar listings. */
 export interface StreamSummary {
     id: string;
     stream_date: number;
     filename: string;
     title: string | null;
-    tags: string[];
+    tags: TagWeights;
     length_seconds: number;
 }
 

src/routes/+layout.svelte

@@ -8,6 +8,10 @@
 
 <svelte:head>
     <style>
+        :root {
+            --accent: #add8e6;
+        }
+
         body,
         html {
             margin: 0;

src/routes/streams/Footer.svelte

@@ -38,7 +38,6 @@
 
     a,
     a:visited {
-        outline: none;
         color: black;
     }
 </style>

src/routes/streams/Sidebar.svelte

@@ -1,47 +1,88 @@
 <script lang="ts">
-    import { untrack } from 'svelte';
     import { goto } from '$app/navigation';
-    import { favoritedStreams } from '$lib/stores.svelte.ts';
+    import { favoritedStreams, tagList, MAX_TAG_WEIGHT } from '$lib/stores.svelte.ts';
     import * as streamCache from '$lib/streamCache.svelte.ts';
     import { getStreamContext } from '$lib/streamContext.svelte.ts';
     import type { StreamSummary } from '$lib/types';
-    import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
+    import { shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
     import TagSelect from './TagSelect.svelte';
+    import WeightedTags from '$lib/components/WeightedTags.svelte';
 
     const ctx = getStreamContext();
-    let filteredTags = $state([]);
+    // map of tag -> minimum weight
+    // a stream shows if it has every tag with at least the minimum weight
+    let filteredTags: Record<string, number> = $state({});
     let favoritesOnly = $state(false);
     let cachedOnly = $state(false);
-    let listOpen = $state();
+    let listOpen = $state(false);
     let displayedStreams = $derived.by(streamsToDisplay);
-    let remainingTags = $derived.by(getRemainingTags);
+
+    // how many displayed streams have each unselected tag, at each weight?
+    // used in the tag select dropdown
+    let dropdownCounts = $derived.by(getDropdownCounts);
+
+    // how many displayed streams would be shown
+    // if filtered per each of this tag's weights,
+    // all other filters unchanged?
+    // used for the selected tag pills
+    let pillCounts = $derived.by(getPillCounts);
+
+    // which tags can still alter the displayed streams if selected?
+    // we eliminate either those which aren't present in the displayed streams
+    // or those present (at the same weight) in every displayed stream
+    // decides which tags are visible in the selection dropdown
+    let remainingTags = $derived(
+        Object.keys(dropdownCounts).filter((tag) =>
+            dropdownCounts[tag].some((count) => count > 0 && count < displayedStreams.size)
+        )
+    );
+
     let cacheUsage = $derived(streamCache.usage.bytes);
 
     $effect(() => {
-        if (displayedStreams.length == 1) {
-            listOpen = untrack(() => !listOpen);
+        if (displayedStreams.size == 1) {
+            listOpen = false;
         }
     });
 
+    function matchesFilter(stream: StreamSummary, filters: Record<string, number>) {
+        return Object.entries(filters).every(([tag, min]) => (stream.tags[tag] ?? 0) >= min);
+    }
+
     function streamsToDisplay() {
-        return ctx.streams.filter(
-            (stream) =>
-                !('tags' in stream) || filteredTags.every((tag) => stream.tags.includes(tag))
+        return new Set(ctx.streams.filter((stream) => matchesFilter(stream, filteredTags)));
+    }
+
+    // how many of these streams have the tag at weight 1+, 2+ and 3+
+    // e.g. dark at weights [1, 3, 3, None] on four streams gives [3, 2, 2]
+    function weightCounts(streams: Iterable<StreamSummary>, tag: string) {
+        const counts = new Array(MAX_TAG_WEIGHT).fill(0);
+        for (const stream of streams) {
+            const weight = stream.tags[tag] ?? 0;
+            for (let i = 0; i < weight; i++) counts[i]++;
+        }
+        return counts;
+    }
+
+    function getDropdownCounts() {
+        const unselected = tagList.filter((tag) => !(tag in filteredTags));
+        return Object.fromEntries(
+            unselected.map((tag) => [tag, weightCounts(displayedStreams, tag)])
         );
     }
 
-    function getRemainingTags() {
-        let tagCounts = displayedStreams.reduce((tags: Record<string, number>, stream) => {
-            stream.tags.forEach((tag) => (tags[tag] ? (tags[tag] += 1) : (tags[tag] = 1)));
-            return tags;
-        }, {});
-        return Object.entries(tagCounts)
-            .filter((el) => el[1] != displayedStreams.length)
-            .map((el) => el[0]);
-    }
+    function getPillCounts() {
+        return Object.fromEntries(
+            Object.keys(filteredTags).map((tag) => {
+                const otherFilters = { ...filteredTags };
+                delete otherFilters[tag];
 
-    function getDisplayedTagsInList(streamTags: string[], remainingTags: string[]) {
-        return streamTags.filter((tag) => remainingTags.includes(tag));
+                const candidates = ctx.streams.filter((stream) =>
+                    matchesFilter(stream, otherFilters)
+                );
+                return [tag, weightCounts(candidates, tag)];
+            })
+        );
     }
 
     function updateFavorites(stream: StreamSummary) {
@@ -52,15 +93,25 @@
 </script>
 
 <div class="tag-select">
-    <TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
+    <TagSelect
+        bind:listOpen
+        bind:checked={filteredTags}
+        {remainingTags}
+        {dropdownCounts}
+        {pillCounts}
+    />
     <button
         onclick={() => (cachedOnly = !cachedOnly)}
+        aria-label="Downloaded only"
+        aria-pressed={cachedOnly}
         class="material-icons filter-download {cachedOnly
             ? 'select-faves-star'
             : 'unselect-faves-star'}">file_download</button
     >
     <button
         onclick={() => (favoritesOnly = !favoritesOnly)}
+        aria-label="Favorites only"
+        aria-pressed={favoritesOnly}
         class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
     >
 </div>
@@ -72,13 +123,17 @@
         {@const isPartial = streamCache.partials.has(stream.id)}
         {@const current = ctx.current?.id === stream.id}
         <li
-            hidden={!displayedStreams.includes(stream) ||
+            hidden={!displayedStreams.has(stream) ||
                 (favoritesOnly && !favorited) ||
                 (cachedOnly && !(isCached || isPartial))}
             class="stream-item {current ? 'current-stream' : ''}"
             id="stream-{stream.id}"
         >
-            <button class="stream-item-button" onclick={() => goto('/streams/' + stream.id)}>
+            <button
+                class="stream-item-button"
+                aria-current={current ? 'page' : undefined}
+                onclick={() => goto('/streams/' + stream.id)}
+            >
                 <span class="stream-item-id">
                     ID:
                     {shorthandCode(stream.id)}</span
@@ -88,12 +143,12 @@
 
                 <span class="stream-item-length">{formatSecondsToHms(stream.length_seconds)}</span>
 
-                <p class="stream-item-tags" hidden={!remainingTags.length}>
-                    Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
-                        stream.tags,
-                        remainingTags
-                    ).join(', ')}
-                </p>
+                <span class="stream-item-tags" hidden={!Object.keys(stream.tags).length}>
+                    <span class="stream-item-tags-label">Tags:</span>
+                    <span class="stream-item-tags-list"
+                        ><WeightedTags tags={stream.tags} highlighted={filteredTags} /></span
+                    >
+                </span>
             </button>
 
             <button
@@ -101,6 +156,8 @@
                     e.stopPropagation();
                     updateFavorites(stream);
                 }}
+                aria-label="Favorite"
+                aria-pressed={favorited}
                 class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
                 >{favorited ? 'star' : 'star_border'}</button
             >
@@ -112,6 +169,7 @@
                         e.stopPropagation();
                         streamCache.remove(stream.id);
                     }}
+                    aria-label="Delete download"
                     class="material-icons stream-item-cached stream-item-cached-btn">delete</button
                 >
             {:else}
@@ -121,6 +179,7 @@
                         e.stopPropagation();
                         streamCache.download(stream);
                     }}
+                    aria-label={partial ? 'Resume download' : 'Download'}
                     title={partial
                         ? `Partially downloaded (${Math.round((partial.received / partial.total) * 100)}%). Click to resume.`
                         : undefined}
@@ -156,11 +215,27 @@
     }
 
     .stream-item-tags {
+        display: flex;
+        clear: both;
+        gap: 0.3em;
         margin: 0;
         font-family: Tahoma;
         font-size: smaller;
     }
 
+    .stream-item-tags[hidden] {
+        display: none;
+    }
+
+    .stream-item-tags-label {
+        flex-shrink: 0;
+    }
+
+    .stream-item-tags-list {
+        flex-grow: 1;
+        text-align: center;
+    }
+
     .stream-item-id {
         float: left;
         font-family: monospace;
@@ -287,6 +362,22 @@
         border: 0;
     }
 
+    .stream-item .stream-item-star:focus-visible,
+    .stream-item .stream-item-cached-btn:focus-visible {
+        opacity: 1;
+    }
+
+    /* touch screens can't hover, so always display */
+    @media (hover: none) {
+        .stream-item-star {
+            opacity: 0.5;
+        }
+
+        .stream-item-cached {
+            opacity: 0.4;
+        }
+    }
+
     @media (max-width: 575px) {
         .stream-item-star {
             opacity: 0.5;

src/routes/streams/TagSelect.svelte

@@ -1,42 +1,68 @@
 <script lang="ts">
     import Select from 'svelte-select';
-    import { tagList } from '$lib/stores.svelte.ts';
+    import { tagList, MAX_TAG_WEIGHT, TAG_WEIGHT_NAMES } from '$lib/stores.svelte.ts';
 
-    let { checked = $bindable([]), remainingTags = [], listOpen = $bindable() } = $props();
+    // type not exported in the lib itself
+    type SelectItem = Record<string, unknown>;
+
+    type Props = {
+        // tag -> minimum weight
+        checked: Record<string, number>;
+        // unselected tags that can still narrow the list
+        remainingTags: string[];
+        // unselected tag -> [displayed streams with it at weight 1+, 2+, 3+]
+        dropdownCounts: Record<string, number[]>;
+        // selected tag -> [streams shown if its minimum weight were 1, 2, 3]
+        pillCounts: Record<string, number[]>;
+        listOpen: boolean;
+    };
+
+    let {
+        checked = $bindable({}),
+        remainingTags = [],
+        dropdownCounts = {},
+        pillCounts = {},
+        listOpen = $bindable()
+    }: Props = $props();
     let items = $state(tagList.map((x) => ({ value: x, label: x })));
-    let isChecked = $derived.by(computeIsChecked);
     let value = $derived.by(computeValue);
 
-    function computeIsChecked() {
-        return checked.reduce((acc, c) => {
-            acc[c] = true;
-            return acc;
-        }, {});
-    }
-
     function computeValue() {
-        return checked.map((c) => items.find((i) => i.value === c));
+        return Object.keys(checked).map((c) => items.find((i) => i.value === c));
     }
 
     function handleSelectable() {
         items = items.map((item) => {
-            return { ...item, selectable: !checked.includes(item.value) };
+            return { ...item, selectable: !(item.value in checked) };
         });
     }
 
-    function handleChange(e: CustomEvent) {
-        if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
-        else
-            checked.includes(e.detail.value)
-                ? (checked = checked.filter((i) => i != e.detail.value))
-                : (checked = [...checked, e.detail.value]);
+    // item selected or deleted => passes every selected item as a list
+    // removing last pill or clearing all => passes undefined
+    function handleInput(selected: unknown) {
+        const tags = ((selected ?? []) as SelectItem[]).map((item) => item.value as string);
+        checked = Object.fromEntries(tags.map((tag) => [tag, checked[tag] ?? 1]));
         handleSelectable();
     }
 
-    let itemFilter = function (label: string, filterText: string, option: { value: string }) {
+    // maximum weight that matches at least one stream for this tag with the current filters
+    function ceilingOf(tag: string) {
+        return pillCounts[tag].filter((count) => count > 0).length;
+    }
+
+    // increment the weight threshold for this tag
+    // and cycles back to 1 once we hit ceilingOf
+    function cycle(tag: string, back: boolean) {
+        const min = checked[tag];
+        const ceiling = ceilingOf(tag);
+        const next = back ? (min > 1 ? min - 1 : ceiling) : min < ceiling ? min + 1 : 1;
+        checked = { ...checked, [tag]: next };
+    }
+
+    let itemFilter = function (label: unknown, filterText: string, option: SelectItem) {
         return (
-            remainingTags.includes(option['value']) &&
-            label.toLowerCase().includes(filterText.toLowerCase())
+            remainingTags.includes(option.value as string) &&
+            String(label).toLowerCase().includes(filterText.toLowerCase())
         );
     };
 </script>
@@ -49,27 +75,110 @@
     placeholder="Tag Filter..."
     filterSelectedItems={true}
     closeListOnChange={false}
-    on:select={handleChange}
-    on:clear={handleChange}
+    oninput={handleInput}
     {itemFilter}
     --max-height="42px"
+    --background="rgba(255, 255, 255, 0.1)"
+    --border="1px solid rgba(255, 255, 255, 0.3)"
+    --border-hover="1px solid rgba(255, 255, 255, 0.3)"
+    --border-focused="1px solid var(--accent)"
+    --item-color="white"
+    --placeholder-color="rgba(255, 255, 255, 0.5)"
+    --icons-color="rgba(255, 255, 255, 0.6)"
+    --list-background="#3a3a3a"
+    --list-border="1px solid rgba(255, 255, 255, 0.3)"
+    --list-shadow="none"
+    --item-hover-bg="rgba(255, 255, 255, 0.15)"
+    --item-hover-color="white"
+    --item-transition="none"
+    --item-height="30px"
+    --item-line-height="30px"
+    --item-active-background="rgba(173, 216, 230, 0.3)"
+    --multi-item-bg="rgba(255, 255, 255, 0.15)"
+    --multi-item-outline="none"
+    --multi-item-clear-icon-color="white"
     listOffset={0}
 >
-    <!-- svelte-select 5.8.3 exposes this as a slot, not a snippet prop -->
-    <div class="item" slot="item" let:item>
-        <label for={item.value}>
-            <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
-            {item.label}
-        </label>
-    </div>
+    {#snippet item({ item }: { item: SelectItem })}
+        {item.label}<span class="count">{dropdownCounts[item.value as string][0]}</span>
+    {/snippet}
+
+    {#snippet empty()}
+        <div class="empty">(´･ω･`)</div>
+    {/snippet}
+
+    {#snippet selection({ selection }: { selection: SelectItem })}
+        {@const tag = selection.value as string}
+        {#if tag in checked}
+            {@const min = checked[tag]}
+            {@const ceiling = ceilingOf(tag)}
+            <button
+                type="button"
+                class="weight"
+                aria-label="{selection.label}, at least {TAG_WEIGHT_NAMES[min]}, press to change"
+                onpointerup={(e) => e.stopPropagation()}
+                onclick={(e) => cycle(tag, e.shiftKey)}
+            >
+                {selection.label}<span class="dots"
+                    >{#each { length: MAX_TAG_WEIGHT }, i}<span
+                            class:headroom={i >= min}
+                            class:spacer={i >= ceiling}>·</span
+                        >{/each}</span
+                >
+            </button>
+        {:else}
+            {selection.label}
+        {/if}
+    {/snippet}
 </Select>
 
 <style>
-    .item {
-        pointer-events: none;
+    .count {
+        float: right;
+        opacity: 0.4;
+    }
+
+    .empty {
+        text-align: center;
+        padding: 6px 0;
+        color: rgba(255, 255, 255, 0.5);
+    }
+
+    .weight {
+        background: none;
+        border: none;
+        padding: 0;
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
+    }
+
+    .weight:hover {
+        color: var(--accent);
+    }
+
+    .dots {
+        margin-left: 3px;
+        color: var(--accent);
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+
+    /* to avoid pills' size shifting as tags are selected */
+    .headroom {
+        opacity: 0.3;
+    }
+
+    .spacer {
+        visibility: hidden;
     }
 
     :global(.svelte-select:hover) {
         max-height: unset !important;
     }
+
+    :global(.svelte-select-list) {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+    }
 </style>

src/routes/streams/[stream_id]/+page.server.ts

@@ -5,6 +5,7 @@ import { getStreamInfo } from '$lib/database.ts';
 import { dev } from '$app/environment';
 import { STREAM_JSON_LOCATION } from '$env/static/private';
 import type { Actions } from './$types';
+import type { TagWeights } from '$lib/types';
 
 type SideloadJson = { title: unknown; description: unknown; tags: unknown };
 
@@ -22,7 +23,7 @@ if (dev) {
             const jsonString = fs.readFileSync(filePath, 'utf8');
             return jsonString;
         } else {
-            return JSON.stringify({ title: '', description: '', tags: [] });
+            return JSON.stringify({ title: '', description: '', tags: {} });
         }
     };
 
@@ -34,10 +35,12 @@ if (dev) {
     actions = {
         default: async ({ params, request }) => {
             const data = await request.formData();
+            const weights = JSON.parse(String(data.get('tags'))) as TagWeights;
             const newJson: SideloadJson = {
                 title: data.get('title'),
                 description: data.get('description'),
-                tags: data.getAll('tags')
+                // weight 0 means the tag is off
+                tags: Object.fromEntries(Object.entries(weights).filter(([, weight]) => weight > 0))
             };
             writeSideloadJson(params.stream_id, newJson);
         }

src/routes/streams/[stream_id]/MetadataEditor.svelte

@@ -1,24 +1,20 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { tagList } from '$lib/stores.svelte.ts';
+    import { page } from '$app/state';
+    import { tagList, MAX_TAG_WEIGHT, TAG_WEIGHT_NAMES } from '$lib/stores.svelte.ts';
+    import type { TagWeights } from '$lib/types';
 
     let { original = $bindable() } = $props();
 
-    let tagMap = new Map<string, boolean>();
+    let weights: TagWeights = $derived({ ...original.tags });
 
-    // Create a mapping of tags and their checked status
-    let reloadTags = (original: { tags: string[] }) => {
-        tagList.forEach((tag) => {
-            tagMap.set(tag, original.tags.includes(tag));
-        });
-    };
-
-    $effect.pre(() => {
-        reloadTags(original);
-    });
+    // off -> light -> medium -> heavy -> off, backwards with shift
+    function cycle(tag: string, back: boolean) {
+        const step = back ? MAX_TAG_WEIGHT : 1;
+        weights = { ...weights, [tag]: ((weights[tag] ?? 0) + step) % (MAX_TAG_WEIGHT + 1) };
+    }
 </script>
 
-{#key $page.url.pathname}
+{#key page.url.pathname}
     <form method="POST">
         <br />
         <label>
@@ -36,17 +32,24 @@
             ></textarea>
         </label>
         <br />
-        <label>
+        <div class="tags">
             <p>Tags:</p>
-            <div class="checkboxContainer">
+            <input type="hidden" name="tags" value={JSON.stringify(weights)} />
+            <div class="tag-pills">
                 {#each tagList as tag}
-                    <label>
-                        <input type="checkbox" name="tags" value={tag} checked={tagMap.get(tag)} />
-                        {tag}
-                    </label>
+                    {@const weight = weights[tag] ?? 0}
+                    <button
+                        type="button"
+                        class="tag-pill"
+                        class:off={!weight}
+                        aria-label="{tag}, {TAG_WEIGHT_NAMES[weight]}"
+                        onclick={(e) => cycle(tag, e.shiftKey)}
+                    >
+                        {tag}<span class="dots">{'·'.repeat(weight)}</span>
+                    </button>
                 {/each}
             </div>
-        </label>
+        </div>
         <br />
 
         <button type="submit">Submit</button>
@@ -58,19 +61,54 @@
         margin-left: 10px;
     }
 
-    label {
+    label,
+    .tags {
         display: flex;
         align-items: center;
     }
 
-    label > p {
+    label > p,
+    .tags > p {
         margin-right: 5px;
     }
 
-    .checkboxContainer {
+    .tag-pills {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 1px;
         max-width: 50%;
+        padding: 4px 8px;
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        border-radius: 4px;
+    }
+
+    .tag-pill {
+        background: none;
+        border: none;
+        padding: 2px 0;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .tag-pill.off {
+        opacity: 0.35;
+    }
+
+    .tag-pill:hover {
+        color: var(--accent);
+    }
+
+    .tag-pill.off:hover {
+        opacity: 0.65;
+        color: inherit;
+    }
+
+    .dots {
+        margin-left: 2px;
+        color: var(--accent);
+        font-weight: bold;
     }
 </style>

src/routes/streams/[stream_id]/Player.svelte

@@ -246,7 +246,7 @@
         seekText = formatSeconds(seekValue);
     }
 
-    function trackMouse(event: MouseEvent) {
+    function trackPointer(event: MouseEvent) {
         if (seeking) updateSeekVisual(event);
         if (showTooltip && !disableTooltip) seekTooltip(event);
         if (volumeSeeking) seekVolume(event);
@@ -265,7 +265,7 @@
 <svelte:window
     bind:innerWidth
     bind:innerHeight
-    onmouseup={() => {
+    onpointerup={() => {
         if (seeking && pendingSeekTime != null) {
             audio.currentTime = pendingSeekTime;
             currentTime = pendingSeekTime;
@@ -274,7 +274,11 @@
         }
         seeking = volumeSeeking = false;
     }}
-    onmousemove={trackMouse}
+    onpointercancel={() => {
+        pendingSeekTime = null;
+        seeking = volumeSeeking = false;
+    }}
+    onpointermove={trackPointer}
 />
 
 {#if display}
@@ -282,6 +286,7 @@
         <button
             class="material-icons"
             style="--icon-color:{iconColor}"
+            aria-label={paused ? 'Play' : 'Pause'}
             onclick={() => (audio.paused ? audio.play() : audio.pause())}
         >
             {#if paused}
@@ -294,12 +299,12 @@
             bind:this={songBar}
             value={seeking && pendingSeekTime != null ? pendingSeekTime : currentTime || 0}
             max={duration}
-            onmousedown={(e) => {
+            onpointerdown={(e) => {
                 seeking = true;
                 updateSeekVisual(e);
             }}
-            onmouseenter={() => (showTooltip = true)}
-            onmouseleave={() => (showTooltip = false)}
+            onpointerenter={() => (showTooltip = true)}
+            onpointerleave={() => (showTooltip = false)}
             style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
             class="song-progress"
         ></progress>
@@ -309,6 +314,8 @@
         <button
             style="--icon-color:{iconColor}"
             class="material-icons"
+            aria-label="Mute"
+            aria-pressed={muted}
             onclick={() => (muted = !muted)}
         >
             {#if muted}
@@ -324,7 +331,7 @@
         <progress
             bind:this={volumeBar}
             value={volume}
-            onmousedown={() => (volumeSeeking = true)}
+            onpointerdown={() => (volumeSeeking = true)}
             onclick={seekVolume}
             style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
             class="volume-progress"
@@ -448,6 +455,8 @@
         margin: auto;
         margin-left: 5px;
         margin-right: 5px;
+        /* make finger drags seek */
+        touch-action: none;
     }
 
     progress::-webkit-progress-bar {

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -2,6 +2,7 @@
     import { getStreamContext } from '$lib/streamContext.svelte.ts';
     import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.ts';
     import { jumpToTrack } from './Player.svelte';
+    import WeightedTags from '$lib/components/WeightedTags.svelte';
 
     const ctx = getStreamContext();
 
@@ -18,7 +19,7 @@
             <h3 class="stream-id">ID: {shorthandCode(ctx.current.id)}</h3>
             <h1 class="stream-date">{formattedStreamDate}</h1>
         </div>
-        <h5 class="stream-tags"><u>Tags</u>: {ctx.current.tags.join(', ')}</h5>
+        <h5 class="stream-tags"><u>Tags</u>: <WeightedTags tags={ctx.current.tags} /></h5>
     </div>
 
     <div class="description-bubble">
@@ -30,12 +31,16 @@
             <tbody>
                 <tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
                 {#each ctx.current.tracks as track, i}
-                    <tr class:current={i == ctx.songIndex}>
+                    <tr
+                        class:current={i == ctx.songIndex}
+                        aria-current={i == ctx.songIndex ? 'true' : undefined}
+                    >
                         <td class="timestamp-field"
                             ><div class="timestamp-field-flex">
                                 {formatTrackTime(track[0])}
                                 <button
                                     onclick={() => jumpToTrack(track[0])}
+                                    aria-label="Play from {formatTrackTime(track[0])}"
                                     class="material-icons"
                                     style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
                                     >fast_forward</button
@@ -179,6 +184,17 @@
         border: 0;
     }
 
+    tr .material-icons:focus-visible {
+        opacity: 1;
+    }
+
+    /* touch screens can't hover, so always display */
+    @media (hover: none) {
+        .material-icons {
+            opacity: 0.5;
+        }
+    }
+
     @media (max-width: 575px) {
         .material-icons {
             opacity: 0.5;