forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: more dashboard improvements
+100
-43
+1
-1
src/_components/grid.vto
+1
-1
src/_components/grid.vto
···
43
43
</a>
44
44
{{ /if }}
45
45
<span style="flex: 1"></span>
46
-
<span class="grid-item__kind" style="color: {{ color }};">{{ kind }}</span>
46
+
<span class="grid-item__kind" style="background-color: {{ color }};" title="{{ kind }}"></span>
47
47
</div>
48
48
<div class="list-description">
49
49
{{ item.desc |> md(true) }}
+89
-40
src/common/pages/dashboard.js
+89
-40
src/common/pages/dashboard.js
···
4
4
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
5
5
6
6
import * as FacetCategory from "~/common/facets/category.js";
7
-
import { effect } from "~/common/signal.js";
7
+
import { effect, signal } from "~/common/signal.js";
8
8
import { facetFromURI } from "~/common/facets/utils.js";
9
9
import { nothing } from "~/common/element.js";
10
10
11
11
import { deleteFacet, saveFacet } from "./crud.js";
12
12
import { output } from "./output.js";
13
+
14
+
// Signals
15
+
const activeFilter = signal("all");
13
16
14
17
/**
15
18
* @import {OutputElement} from "~/components/output/types.d.ts";
16
19
*/
17
20
18
-
const ADD_FROM_URI_ITEM = html`
19
-
<li
20
-
class="grid-item"
21
-
style="background: oklch(from var(--accent) l c h / 0.0625);"
22
-
>
23
-
<div
24
-
class="grid-item__contents"
25
-
style="display: flex; align-items: center; justify-content: center;"
21
+
const addFromUri = () =>
22
+
html`
23
+
<li
24
+
class="grid-item"
25
+
style="color: ${activeFilter.value === "all"
26
+
? "inherit"
27
+
: FacetCategory.color(
28
+
/** @type {any} */ ({ kind: activeFilter.value }),
29
+
)}; background: oklch(from currentColor l c h / 0.0625);"
26
30
>
27
-
<button
28
-
class="button--transparent with-icon"
29
-
style="color: var(--accent); font-size: var(--fs-sm); font-weight: 600;"
30
-
@click="${openAddFromURIModal}"
31
+
<div
32
+
class="grid-item__contents"
33
+
style="display: flex; align-items: center; justify-content: center;"
31
34
>
32
-
<i class="ph-fill ph-plus-circle"></i>
33
-
Add from URI
34
-
</button>
35
-
</div>
36
-
</li>
37
-
`;
35
+
<button
36
+
class="button--transparent with-icon"
37
+
style="color: inherit; font-size: var(--fs-sm); font-weight: 600;"
38
+
@click="${openAddFromURIModal}"
39
+
>
40
+
<i class="ph-fill ph-plus-circle"></i>
41
+
Add from URI
42
+
</button>
43
+
</div>
44
+
</li>
45
+
`;
38
46
39
-
const EMPTY_FACETS_LIST = html`
40
-
<p>
41
-
<span>
42
-
You haven't saved anything yet. Add a facet by browsing the <a
43
-
href="featured/"
44
-
>featured ones</a> or any of the other categories. You can click the toggle
45
-
to quickly add or remove from your collection. Alternatively, add one using
46
-
an URI:
47
-
</span>
48
-
</p>
49
-
`;
47
+
const emptyFacetsList = () =>
48
+
html`
49
+
<p>
50
+
<span>
51
+
You haven't saved anything yet. Add a facet by browsing the <a
52
+
href="featured/"
53
+
>featured ones</a> or any of the other categories. You can click the toggle
54
+
to quickly add or remove from your collection. Alternatively, add one using
55
+
an URI:
56
+
</span>
57
+
</p>
58
+
`;
50
59
51
60
////////////////////////////////////////////
52
61
// DIALOG
···
215
224
return;
216
225
}
217
226
227
+
const filter = activeFilter.get();
228
+
218
229
const col = facetsCol.state === "loaded"
219
-
? [...facetsCol.data].sort((a, b) => {
220
-
return a.name.toLocaleLowerCase().localeCompare(
221
-
b.name.toLocaleLowerCase(),
222
-
);
223
-
})
230
+
? [...facetsCol.data]
231
+
.filter((c) =>
232
+
filter === "all" ||
233
+
(filter === "prelude" ? c.kind === "prelude" : c.kind !== "prelude")
234
+
)
235
+
.sort((a, b) => {
236
+
return a.name.toLocaleLowerCase().localeCompare(
237
+
b.name.toLocaleLowerCase(),
238
+
);
239
+
})
224
240
: [];
225
241
226
-
const h = col.length
242
+
const filterBar = html`
243
+
<div class="grid-filter">
244
+
<span class="grid-filter--label">Filter by</span>
245
+
<button
246
+
class="button--border button--tiny button--bg-neutral ${filter === "all"
247
+
? ""
248
+
: "button--transparent"}"
249
+
@click="${() => activeFilter.set("all")}"
250
+
>
251
+
All
252
+
</button>
253
+
<button
254
+
class="button--border button--tiny button--tr-accent ${filter ===
255
+
"prelude"
256
+
? ""
257
+
: "button--transparent"}"
258
+
@click="${() => activeFilter.set("prelude")}"
259
+
>
260
+
Features
261
+
</button>
262
+
<button
263
+
class="button--border button--tiny button--bg-twist-2 button--tr-twist-2 ${filter ===
264
+
"interface"
265
+
? ""
266
+
: "button--transparent"}"
267
+
@click="${() => activeFilter.set("interface")}"
268
+
>
269
+
Interfaces
270
+
</button>
271
+
</div>
272
+
`;
273
+
274
+
const h = col.length || filter !== "all"
227
275
? html`
276
+
${filterBar}
228
277
<ul class="grid" style="margin: 0">
229
278
${col.map((c, index) => {
230
279
const color = FacetCategory.color(c);
···
253
302
<div class="grid-item__contents">
254
303
<div class="grid-item__title">
255
304
${title}
256
-
<span class="grid-item__kind" style="color: ${color};"
305
+
<span class="grid-item__kind" style="background-color: ${color};"
257
306
>${kind}</span>
258
307
</div>
259
308
<div class="list-description">
···
303
352
</li>
304
353
`,
305
354
);
306
-
})} ${ADD_FROM_URI_ITEM}
355
+
})} ${addFromUri()}
307
356
</ul>
308
357
`
309
358
: html`
310
-
${EMPTY_FACETS_LIST}
359
+
${filterBar} ${emptyFacetsList()}
311
360
<ul class="grid" style="margin: var(--space-sm) 0 0">
312
-
${ADD_FROM_URI_ITEM}
361
+
${addFromUri()}
313
362
</ul>
314
363
`;
315
364
+1
-1
src/dashboard.vto
+1
-1
src/dashboard.vto
+9
-1
src/styles/diffuse/page.css
+9
-1
src/styles/diffuse/page.css
···
308
308
}
309
309
310
310
.grid-item__kind {
311
-
border: 1.5px solid currentColor;
311
+
border: 1.5px solid transparent;
312
312
border-radius: 9999px;
313
+
color: var(--bg-color);
313
314
display: inline-block;
314
315
font-size: var(--fs-2xs);
315
316
font-weight: 600;
317
+
opacity: 0.6;
316
318
padding: var(--space-3xs);
317
319
text-box: trim-both cap alphabetic;
318
320
vertical-align: middle;
319
321
320
322
&[hidden] {
321
323
display: none;
324
+
}
325
+
326
+
&[title] {
327
+
height: 16px;
328
+
padding: 0;
329
+
width: 6px;
322
330
}
323
331
}
324
332