chore: more dashboard and guide improvements

+1

src/build.vto

··· 110 110 111 111 <ul> 112 112 <li>Most elements are configured in broadcast mode so they communicate across tabs. There are a few exceptions such as inputs, where we prefer parallelisation.</li> 113 + <li>All URLs in a facet are relative to the root of Diffuse (not the root of the server) due to the base element in the header of the facet loader.</li> 113 114 </ul> 114 115 </section> 115 116 </div>

+12 -2

src/common/pages/dashboard.js

··· 13 13 import { openAddFromURIModal } from "./from-uri.js"; 14 14 15 15 // Signals 16 - const activeFilter = signal("all"); 16 + const FILTER_STORAGE_KEY = "diffuse/dashboard/filter"; 17 + const storedFilter = localStorage.getItem(FILTER_STORAGE_KEY); 18 + const activeFilter = signal( 19 + storedFilter === "prelude" || storedFilter === "interface" 20 + ? storedFilter 21 + : "all", 22 + ); 23 + 24 + effect(() => { 25 + localStorage.setItem(FILTER_STORAGE_KEY, activeFilter.get()); 26 + }); 17 27 18 28 /** 19 29 * @import OutputOrchestrator from "~/components/orchestrator/output/element.js"; ··· 134 144 @click="${() => openAddFromURIModal()}" 135 145 > 136 146 137 - Add from URI 147 + Add from URI 138 148 </button> 139 149 140 150 <div style="flex: 1"></div>

+11 -28

src/guide.vto

··· 6 6 7 7 <h1 hidden>Guide</h1> 8 8 9 - <style> 10 - strong { 11 - font-weight: 600; 12 - } 13 - </style> 14 - 15 9 <div class="columns"> 16 10 <section> 17 11 <h3>Concept</h3> ··· 44 38  45 39 <li class="with-icon" style="gap: var(--space-sm)"> 46 40 47 - Add some audio files or streams. The <a href="{{ ('facets/data/connect/index.html') |> facetLoaderURL }}">connect</a> interfaces can be used for this, or use the demo from the tutorial below. 41 + Add some audio files or streams. The wide range of <a href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">connect interfaces</a> can be used for this, or use the demo from the tutorial below. 48 42 </li> 49 43 50 44  51 45 <li class="with-icon" style="gap: var(--space-sm)"> 52 46 53 - Wait until the processing of audio sources into tracks is completed. The demo button will show you the status or you can monitor it using this <a href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">interface</a>. 47 + Wait until the processing of audio sources into tracks is completed. You can monitor it using this <a href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">interface</a>. The tutorial demo will show it directly. 54 48 </li> 55 49 56 50  57 51 <li class="with-icon" style="gap: var(--space-sm)"> 58 52 59 - Explore the interfaces that can be used. Check out the <a href="featured/?filter=interface">featured interfaces</a>. 53 + Explore the interfaces that can be used to play and manage your audio. Check out the <a href="featured/?filter=interface">featured interfaces</a>. 60 54 </li> 61 55 62 56  63 57 <li class="with-icon" style="gap: var(--space-sm)"> 64 58 65 - Continue exploring, enable some additional features, such as making played audio available offline automatically. 59 + Continue exploring, enable some additional features such as making played audio available offline automatically. 66 60 </li> 67 61 68 62  69 63 <li class="with-icon" style="gap: var(--space-sm)"> 70 64 71 - Sync your user-data with your other devices. Or share your data with other people. 65 + Sync your configuration and playlists with your other devices. Or share it with other people. 72 66 </li> 73 67 </ul> 74 68 </section> ··· 78 72 <h3 id="tutorial">Tutorial</h3> 79 73 80 74 81 - Diffuse is not your typical streaming service, we have to add sources of audio so we have stuff to play. This button below adds some demo content, so you can experiment with the software right away. 75 + Diffuse is not your typical streaming service, you have to add sources of audio so you have stuff to play. This button below adds some demo content, so you can experiment with the software right away. 82 76 83 77 84 78 ··· 92 86 93 87 94 88 95 - Let's pick an interface that automatically puts audio from our collection into the queue, and another to play what got put into the queue. 89 + By default a feature is enabled which puts audio in the queue automatically. Let's pick an interface to play what got put into the queue for us. 96 90 97 91 98 92 99 - 100 - <a class="button button--bg-accent" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank"> 101 - 102 - 103 - Fill up queue 104 - 105 - </a> 106 - <a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank"> 107 - 108 - 109 - Play audio 110 - 111 - </a> 112 - 93 + <a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank"> 94 + Play audio 95 + </a> 113 96 114 97 115 98 ··· 125 108 126 109 127 110 128 - TODO: explain adding your own inputs, syncing user data, etc. 111 + TODO: explain adding your own inputs, syncing user data, editing/forking facets, creating your own facet, etc. 129 112 130 113 </section>

+17 -2

src/styles/diffuse/page.css

··· 165 165 166 166 dialog { 167 167 background: var(--bg-color); 168 - border: 2px solid var(--border-color); 168 + border: 0; 169 169 border-radius: var(--radius-md); 170 170 padding: var(--space-lg); 171 171 min-width: min(87.5dvw, var(--container-sm)); ··· 390 390 391 391 .grid-filter--output { 392 392 font-size: var(--fs-xs); 393 - font-weight: 700; 393 + font-weight: 600; 394 + overflow: hidden; 395 + text-overflow: ellipsis; 396 + white-space: nowrap; 394 397 } 395 398 396 399 .grid-filter--label-output, ··· 582 585 } 583 586 } 584 587 588 + .button__supplementary-text { 589 + display: none; 590 + 591 + @media (min-width: 42rem) { 592 + display: inline-flex; 593 + } 594 + } 595 + 585 596 & > span { 586 597 align-items: center; 587 598 display: inline-flex; ··· 596 607 a { 597 608 text-underline-offset: 3px; 598 609 } 610 + } 611 + 612 + strong { 613 + font-weight: 600; 599 614 } 600 615 601 616 .button-col {

Configure Feed

Configure Feed