Something went wrong. Try again.
a simple but full-featured web player for OpenSubsonic music servers (Navidrome, Gonic, Ampache, etc) devins.page/tinysub
svelte typescript javascript subsonic gonic navidrome
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<script lang="ts">import Icon from "./icons/Icon.svelte";import { t } from "./languages/translate.svelte.js";
let { rowKey, label, expanded, focused = false, onToggle, onAdd,} = $props<{ rowKey: string; label: string; expanded: boolean; focused?: boolean; onToggle: () => void; onAdd?: () => void;}>();</script>
<div class="label-row" data-tree-key={rowKey}> <button type="button" tabindex="-1" class="pressable pressable--gentle" class:focused={focused} data-id={rowKey} aria-expanded={expanded} onclick={(event) => { event.stopPropagation(); onToggle(); }} > {label} </button> {#if onAdd} <button type="button" tabindex="-1" class="pressable" aria-label={t("action.add_to_queue")} onclick={(event) => { event.stopPropagation(); onAdd(); }} title={t("action.add_to_queue")} > <Icon name="add" /> </button> {/if}</div>
<style>.label-row { display: flex; align-items: center; gap: 0.25rem; margin-block-start: 0.5rem; border-block-end: var(--border-text);}.label-row > button:first-child { flex: 1; text-align: start; font-weight: bold; padding-block-end: 0.25rem; --button-transform-origin: 10% bottom;
&.focused { background-color: var(--bg-highlight); color: var(--text-highlight); }}.label-row > button + button { flex: none; display: flex; align-items: center;}:global(:dir(rtl)) .label-row > button { --button-transform-origin: 90% bottom;}:global(#library:not(:focus-within)) button.focused { background-color: GrayText; color: HighlightText;}</style>