diff --git a/src/_data/facets.json b/src/_data/facets.json index 3332269e..14531e95 100644 --- a/src/_data/facets.json +++ b/src/_data/facets.json @@ -47,7 +47,7 @@ "title": "Blur Pocket", "category": "Themes", "author": "A theme by [@tokono.ma](https://bsky.app/profile/tokono.ma)", - "incomplete": true, + "featured": true, "desc": "A mobile-optimised and minimalised version of the Blur theme. Does not include the background images and has a slightly different color palette." }, { @@ -197,7 +197,6 @@ "title": "iPod", "category": "Themes", "author": "A theme by [@tokono.ma](https://bsky.app/profile/tokono.ma)", - "featured": true, "desc": "A recreation of the click-wheel iPod UI. Spin the wheel to scroll, tap the ring for menu / prev / next / play, and press the centre button to select. Alternatively, use your keyboard arrow keys." }, { @@ -279,7 +278,7 @@ "kind": "prelude", "category": "Data", "featured": true, - "desc": "Analyse the spectrogram of tracks as they play and store the data on their stats. Only runs for tracks that don't already have spectral stats." + "desc": "Analyse the spectrogram of tracks as they play and store the data on their stats. Only runs for tracks that don't already have these stats." }, { "url": "facets/misc/split-view/index.html", @@ -332,7 +331,7 @@ "url": "facets/data/userdata/index.html", "title": "Your data", "category": "Data", - "incomplete": true, + "featured": true, "desc": "Manage where your user-data is stored. See which storage method is active, switch between methods, and migrate data between them." } ] diff --git a/src/common/facets/constants.js b/src/common/facets/constants.js index 9519ffe9..3ab517b2 100644 --- a/src/common/facets/constants.js +++ b/src/common/facets/constants.js @@ -9,9 +9,9 @@ export const TYPE = /** @type {const} */ ("sh.diffuse.output.facet"); export const INTERACTIVE = [ - "facets/connect/index.html", "facets/data/sources/index.html", "facets/data/file-manager/index.html", + "facets/data/userdata/index.html", "facets/themes/blur/artwork-controller/facet/index.html", "facets/themes/blur/facet/index.html", "facets/themes/winamp/facet/index.html", diff --git a/src/facets/data/output-bundle/index.inline.js b/src/facets/data/output-bundle/index.inline.js index 1dacb822..5afd5cc0 100644 --- a/src/facets/data/output-bundle/index.inline.js +++ b/src/facets/data/output-bundle/index.inline.js @@ -29,8 +29,8 @@ effect(() => { atprotoPasskey(output); atprotoSpace(output); - s3(output); dropbox(output); + s3(output); output.loadSelected(); }); @@ -87,6 +87,10 @@ export function atprotoPasskey(output) { passkey.setAttribute("id", "do-output__dc-output__atproto-passkey"); passkey.setAttribute("label", "AT Protocol (Public)"); passkey.setAttribute("namespace", "atproto-passkey"); + passkey.setAttribute( + "connect", + "facets/connect/atproto-passkey/index.html", + ); passkey.setAttribute( "output-selector", "#do-output__dtor-atproto-sync", @@ -133,6 +137,10 @@ export function atprotoSpace(output) { sync.setAttribute("id", "do-output__dc-output__atproto-space"); sync.setAttribute("label", "AT Protocol (Space)"); sync.setAttribute("namespace", "atproto-space"); + sync.setAttribute( + "connect", + "facets/connect/atproto-space/index.html", + ); sync.setAttribute("output-selector", "#do-output__dor-atproto-space"); output.append(out); @@ -147,7 +155,7 @@ export function atprotoSpaceCustomElements() { } //////////////////////////////////////////// -// S3 +// DROPBOX //////////////////////////////////////////// /** @@ -157,17 +165,21 @@ export function atprotoSpaceCustomElements() { * * @param {OutputOrchestrator} output */ -export function s3(output) { - const out = document.createElement(S3_OUTPUT_NAME); +export function dropbox(output) { + const out = document.createElement(DROPBOX_OUTPUT_NAME); out.setAttribute("group", foundation.GROUP); - out.setAttribute("id", "do-output__dob-s3"); + out.setAttribute("id", "do-output__dob-dropbox"); const sync = document.createElement(DASL_SYNC_NAME); sync.setAttribute("group", foundation.GROUP); - sync.setAttribute("id", "do-output__dc-output__s3"); - sync.setAttribute("label", "S3"); - sync.setAttribute("namespace", "s3"); - sync.setAttribute("output-selector", "#do-output__dob-s3"); + sync.setAttribute("id", "do-output__dc-output__dropbox"); + sync.setAttribute("label", "Dropbox"); + sync.setAttribute("namespace", "dropbox"); + sync.setAttribute( + "connect", + "facets/connect/dropbox/index.html", + ); + sync.setAttribute("output-selector", "#do-output__dob-dropbox"); // Add elements to DOM, make sure the transformer // is added to the configurator so the user can select it. @@ -175,15 +187,15 @@ export function s3(output) { output.outputConfigurator.append(sync); } -export function s3CustomElements() { - import("~/components/output/bytes/s3/element.js"); +export function dropboxCustomElements() { + import("~/components/output/bytes/dropbox/element.js"); import( "~/components/transformer/output/bytes/dasl-sync/element.js" ); } //////////////////////////////////////////// -// DROPBOX +// S3 //////////////////////////////////////////// /** @@ -193,17 +205,21 @@ export function s3CustomElements() { * * @param {OutputOrchestrator} output */ -export function dropbox(output) { - const out = document.createElement(DROPBOX_OUTPUT_NAME); +export function s3(output) { + const out = document.createElement(S3_OUTPUT_NAME); out.setAttribute("group", foundation.GROUP); - out.setAttribute("id", "do-output__dob-dropbox"); + out.setAttribute("id", "do-output__dob-s3"); const sync = document.createElement(DASL_SYNC_NAME); sync.setAttribute("group", foundation.GROUP); - sync.setAttribute("id", "do-output__dc-output__dropbox"); - sync.setAttribute("label", "Dropbox"); - sync.setAttribute("namespace", "dropbox"); - sync.setAttribute("output-selector", "#do-output__dob-dropbox"); + sync.setAttribute("id", "do-output__dc-output__s3"); + sync.setAttribute("label", "S3"); + sync.setAttribute("namespace", "s3"); + sync.setAttribute( + "connect", + "facets/connect/s3/index.html", + ); + sync.setAttribute("output-selector", "#do-output__dob-s3"); // Add elements to DOM, make sure the transformer // is added to the configurator so the user can select it. @@ -211,8 +227,8 @@ export function dropbox(output) { output.outputConfigurator.append(sync); } -export function dropboxCustomElements() { - import("~/components/output/bytes/dropbox/element.js"); +export function s3CustomElements() { + import("~/components/output/bytes/s3/element.js"); import( "~/components/transformer/output/bytes/dasl-sync/element.js" ); diff --git a/src/facets/data/userdata/index.html b/src/facets/data/userdata/index.html index 743b8f9b..e5db0325 100644 --- a/src/facets/data/userdata/index.html +++ b/src/facets/data/userdata/index.html @@ -29,7 +29,7 @@ .userdata-item__icon { flex-shrink: 0; - font-size: var(--fs-lg); + font-size: var(--fs-md); opacity: 0.6; } @@ -129,17 +129,7 @@

Your data

Manage where your Diffuse user-data is stored. This includes your tracks, - playlists, settings and facets. -

-

- Each method stores data in its own separate bucket — data is not shared - between them. Switching methods changes which bucket is active. Use - migration to copy data between buckets. -

-

- When a remote method is active, its data is always mirrored to the local - bucket. The reverse is not automatic — local data is only sent to a remote - method by migrating to it. + playlists, settings and facets. A local offline copy will always be available to you.

diff --git a/src/facets/data/userdata/index.inline.js b/src/facets/data/userdata/index.inline.js index 5ba95a56..af6e8c13 100644 --- a/src/facets/data/userdata/index.inline.js +++ b/src/facets/data/userdata/index.inline.js @@ -3,6 +3,7 @@ import { html, nothing, render as litRender } from "lit-html"; import * as Output from "~/common/output.js"; import foundation from "~/common/foundation.js"; import { effect, signal } from "~/common/signal.js"; +import { data as facetsData } from "~/facets/index.js"; /** * @typedef {{ id: string, label: string, element: import("@specs/components/output/types.d.ts").OutputElement }} OutputOption @@ -36,18 +37,25 @@ if (outputOrchestrator.hasSelected() && !outputOrchestrator.selected()) { /** @type {Record} */ const ICONS = { - "Local": "database", + "Local": "devices", "AT Protocol (Public)": "at", - "S3": "hard-drives", - "Dropbox": "cloud", + "AT Protocol (Space)": "at", + "S3": "amazon-logo", + "Dropbox": "dropbox-logo", }; -/** @type {Record} */ -const CONNECT_URLS = { - "AT Protocol (Public)": "facets/connect/atproto-passkey/index.html", - "S3": "facets/connect/s3/index.html", - "Dropbox": "facets/connect/dropbox/index.html", -}; +/** + * Connect facet URLs flagged `incomplete` in `_data/facets.json`. These + * methods are hidden from the list unless they're the active one, so an + * incomplete method stays visible (with its active badge) while in use. + * + * @type {Set} + */ +const INCOMPLETE_CONNECT = new Set( + facetsData + .filter((f) => f.url.startsWith("facets/connect/") && f.incomplete) + .map((f) => f.url), +); //////////////////////////////////////////// // STATE @@ -167,13 +175,23 @@ effect(() => { const activeId = selected?.id ?? defaultId; + // Don't list methods whose connect facet is `incomplete`, unless that + // method is the active one (so the user can still see and switch away + // from it). + const visibleOpts = opts.filter((opt) => { + if (opt.id === activeId) return true; + const url = opt.element?.getAttribute("connect"); + return url ? !INCOMPLETE_CONNECT.has(url) : true; + }); + litRender( html` - ${opts.map((opt) => { + ${visibleOpts.map((opt) => { const isActive = opt.id === activeId; const isActivated = activatedSet.has(opt.id); const trackCount = getTrackCount(opt, activatedSet); const icon = ICONS[opt.label] ?? "database"; + const connectUrl = opt.element?.getAttribute("connect"); /** @type {string | typeof nothing} */ let detail; @@ -214,12 +232,12 @@ effect(() => { Select ` - : CONNECT_URLS[opt.label] + : connectUrl ? html` Configure diff --git a/src/guide.vto b/src/guide.vto index 4365837b..cad362f1 100644 --- a/src/guide.vto +++ b/src/guide.vto @@ -129,7 +129,7 @@ title: Guide | Diffuse
  • - + Sync your user-data