A music player that connects to your cloud/distributed storage.
feat: add ability to toggle facets without deleting them from your collection
+73
-13
+16
src/common/pages/crud.js
+16
src/common/pages/crud.js
···
21
21
}
22
22
23
23
/**
24
+
* @param {{ id: string }} _
25
+
*/
26
+
export function toggleFacetEnabled({ id }) {
27
+
return async () => {
28
+
const out = await output();
29
+
const col = await Output.data(out.facets);
30
+
const facet = col.find((c) => c.id === id);
31
+
if (!facet) return;
32
+
await out.facets.save([
33
+
...col.filter((c) => c.id !== id),
34
+
{ ...facet, enabled: !(facet.enabled ?? true), updatedAt: new Date().toISOString() },
35
+
]);
36
+
};
37
+
}
38
+
39
+
/**
24
40
* @param {Facet} facet
25
41
*/
26
42
export async function saveFacet(facet) {
+40
-12
src/common/pages/dashboard.js
+40
-12
src/common/pages/dashboard.js
···
8
8
9
9
import { nothing } from "~/common/element.js";
10
10
11
-
import { deleteFacet } from "./crud.js";
11
+
import { deleteFacet, toggleFacetEnabled } from "./crud.js";
12
12
import { output } from "./output.js";
13
13
import { openAddFromURIModal } from "./from-uri.js";
14
14
···
99
99
.sort((a, b) => {
100
100
return a.name.toLocaleLowerCase().localeCompare(
101
101
b.name.toLocaleLowerCase(),
102
-
);
102
+
) || a.id.localeCompare(b.id);
103
103
})
104
104
: [];
105
105
···
182
182
return keyed(
183
183
c.id,
184
184
html`
185
-
<li class="grid-item">
185
+
<li class="grid-item" ?data-disabled="${!(c.enabled ?? true)}">
186
186
<div
187
187
class="grid-item__contents"
188
188
style="--grid-item-color: ${color}"
···
218
218
</div>
219
219
220
220
<div class="grid-item__menu">
221
-
<a
222
-
class="button button--transparent"
223
-
title="Edit"
224
-
href="build/?id=${encodeURIComponent(c.id)}"
221
+
<button
222
+
class="button--transparent"
223
+
title="${(c.enabled ?? true)
224
+
? c.kind === "prelude" ? "Disable" : "Dim"
225
+
: c.kind === "prelude"
226
+
? "Enable"
227
+
: "Light"}"
228
+
@click="${toggleFacetEnabled({ id: c.id })}"
225
229
>
226
-
<i class="ph-fill ph-code-block"></i>
227
-
</a>
230
+
<i class="ph-bold ${(c.enabled ?? true)
231
+
? c.kind === "prelude" ? "ph-lightning" : "ph-eye"
232
+
: c.kind === "prelude"
233
+
? "ph-lightning-slash"
234
+
: "ph-eye-slash"}"></i>
235
+
</button>
228
236
<hr />
229
237
<button
230
238
class="button--transparent"
231
-
title="Delete"
232
-
@click="${deleteFacet({ id: c.id })}"
239
+
title="More actions"
240
+
popovertarget="facet-menu-${c.id}"
233
241
>
234
-
<i class="ph-fill ph-skull"></i>
242
+
<i class="ph-bold ph-dots-three-vertical"></i>
235
243
</button>
244
+
<div id="facet-menu-${c.id}" class="dropdown" popover>
245
+
<a
246
+
class="with-icon"
247
+
href="build/?id=${encodeURIComponent(c.id)}"
248
+
>
249
+
<i class="ph-fill ph-code-block"></i>
250
+
Edit
251
+
</a>
252
+
<a
253
+
class="with-icon"
254
+
href="#"
255
+
@click="${(/** @type {MouseEvent} */ e) => {
256
+
e.preventDefault();
257
+
deleteFacet({ id: c.id })();
258
+
}}"
259
+
>
260
+
<i class="ph-fill ph-skull"></i>
261
+
Delete
262
+
</a>
263
+
</div>
236
264
</div>
237
265
</li>
238
266
`,
+5
src/definitions/output/facet.json
+5
src/definitions/output/facet.json
···
18
18
},
19
19
"createdAt": { "type": "string", "format": "datetime" },
20
20
"description": { "type": "string" },
21
+
"enabled": {
22
+
"type": "boolean",
23
+
"default": true,
24
+
"description": "Whether the facet is enabled or not"
25
+
},
21
26
"html": {
22
27
"type": "string",
23
28
"description": "The UTF8 HTML string that makes up the facet"
+12
-1
src/styles/diffuse/page.css
+12
-1
src/styles/diffuse/page.css
···
199
199
200
200
& > a {
201
201
cursor: pointer;
202
-
display: block;
202
+
display: flex;
203
203
min-width: var(--space-3xl);
204
204
padding: var(--space-xs) var(--space-sm);
205
205
text-decoration: none;
···
296
296
border: 1px solid var(--border-color);
297
297
border-radius: var(--radius-md);
298
298
display: flex;
299
+
opacity: 1;
300
+
transition: opacity 250ms;
299
301
300
302
&[hidden] {
301
303
display: none;
304
+
}
305
+
306
+
&[data-disabled] {
307
+
opacity: 0.3;
308
+
309
+
&:hover,
310
+
&:focus-within {
311
+
opacity: 0.6;
312
+
}
302
313
}
303
314
}
304
315