forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
fix: keyed list items
+112
-104
+56
-52
src/facets/index.js
+56
-52
src/facets/index.js
···
1
1
import { Temporal } from "@js-temporal/polyfill";
2
2
import { html, render } from "lit-html";
3
+
import { keyed } from "lit-html/directives/keyed.js";
3
4
4
5
import { basicSetup, EditorView } from "codemirror";
5
6
import { css as langCss } from "@codemirror/lang-css";
···
80
81
? html`
81
82
<ul>
82
83
${col.map((c) =>
83
-
html`
84
-
<li>
85
-
<div style="position: relative;">
86
-
<a href="facets/l/?id=${c.id}">
87
-
${c.name}
88
-
</a>
89
-
<button
90
-
class="button--fixed button--transparent"
91
-
popovertarget="facet-menu-col-${c.id}"
92
-
style="anchor-name: --facet-anchor-col-${c
93
-
.id}; position: absolute; right: 0; top: 50%; transform: translateY(-50%);"
84
+
keyed(
85
+
c.id,
86
+
html`
87
+
<li>
88
+
<div style="position: relative;">
89
+
<a href="facets/l/?id=${c.id}">
90
+
${c.name}
91
+
</a>
92
+
<button
93
+
class="button--fixed button--transparent"
94
+
popovertarget="facet-menu-col-${c.id}"
95
+
style="anchor-name: --facet-anchor-col-${c
96
+
.id}; position: absolute; right: 0; top: 50%; transform: translateY(-50%);"
97
+
>
98
+
<i class="ph-fill ph-dots-three-circle"></i>
99
+
</button>
100
+
</div>
101
+
<div class="list-description">
102
+
${c.url && !c.html
103
+
? html`
104
+
<span class="with-icon">
105
+
<i class="ph-fill ph-binoculars"></i>
106
+
<span>Tracking the original <a href="${c
107
+
.url}">URL</a></span>
108
+
</span>
109
+
`
110
+
: html`
111
+
<span class="with-icon">
112
+
<i class="ph-fill ph-code"></i>
113
+
<span>Custom code</span>
114
+
</span>
115
+
`}
116
+
</div>
117
+
118
+
<!-- Dropdown Menu -->
119
+
<div
120
+
id="facet-menu-col-${c.id}"
121
+
class="dropdown"
122
+
style="position-anchor: --facet-anchor-col-${c.id}"
123
+
popover
94
124
>
95
-
<i class="ph-fill ph-dots-three-circle"></i>
96
-
</button>
97
-
</div>
98
-
<div class="list-description">
99
-
${c.url && !c.html
100
-
? html`
125
+
<a href="facets/l/?id=${c.id}">
126
+
<span class="with-icon">
127
+
<i class="ph-fill ph-globe"></i> Open
128
+
</span>
129
+
</a>
130
+
<a @click="${() => editFacet(c)}">
101
131
<span class="with-icon">
102
-
<i class="ph-fill ph-binoculars"></i>
103
-
<span>Tracking the original <a href="${c
104
-
.url}">URL</a></span>
132
+
<i class="ph-fill ph-cursor-text"></i> Edit
105
133
</span>
106
-
`
107
-
: html`
134
+
</a>
135
+
<a @click="${deleteFacet({ id: c.id })}">
108
136
<span class="with-icon">
109
-
<i class="ph-fill ph-code"></i>
110
-
<span>Custom code</span>
137
+
<i class="ph-fill ph-eraser"></i> Delete
111
138
</span>
112
-
`}
113
-
</div>
114
-
115
-
<!-- Dropdown Menu -->
116
-
<div
117
-
id="facet-menu-col-${c.id}"
118
-
class="dropdown"
119
-
style="position-anchor: --facet-anchor-col-${c.id}"
120
-
popover
121
-
>
122
-
<a href="facets/l/?id=${c.id}">
123
-
<span class="with-icon">
124
-
<i class="ph-fill ph-globe"></i> Open
125
-
</span>
126
-
</a>
127
-
<a @click="${() => editFacet(c)}">
128
-
<span class="with-icon">
129
-
<i class="ph-fill ph-cursor-text"></i> Edit
130
-
</span>
131
-
</a>
132
-
<a @click="${deleteFacet({ id: c.id })}">
133
-
<span class="with-icon">
134
-
<i class="ph-fill ph-eraser"></i> Delete
135
-
</span>
136
-
</a>
137
-
</div>
138
-
</li>
139
-
`
139
+
</a>
140
+
</div>
141
+
</li>
142
+
`,
143
+
)
140
144
)}
141
145
</ul>
142
146
`
+56
-52
src/themes/index.js
+56
-52
src/themes/index.js
···
1
1
import { Temporal } from "@js-temporal/polyfill";
2
2
import { html, render } from "lit-html";
3
+
import { keyed } from "lit-html/directives/keyed.js";
3
4
4
5
import { basicSetup, EditorView } from "codemirror";
5
6
import { css as langCss } from "@codemirror/lang-css";
···
80
81
? html`
81
82
<ul>
82
83
${col.map((c) =>
83
-
html`
84
-
<li>
85
-
<div style="position: relative;">
86
-
<a href="themes/l/?id=${c.id}">
87
-
${c.name}
88
-
</a>
89
-
<button
90
-
class="button--fixed button--transparent"
91
-
popovertarget="theme-menu-col-${c.id}"
92
-
style="anchor-name: --theme-anchor-col-${c
93
-
.id}; position: absolute; right: 0; top: 50%; transform: translateY(-50%);"
84
+
keyed(
85
+
c.id,
86
+
html`
87
+
<li>
88
+
<div style="position: relative;">
89
+
<a href="themes/l/?id=${c.id}">
90
+
${c.name}
91
+
</a>
92
+
<button
93
+
class="button--fixed button--transparent"
94
+
popovertarget="theme-menu-col-${c.id}"
95
+
style="anchor-name: --theme-anchor-col-${c
96
+
.id}; position: absolute; right: 0; top: 50%; transform: translateY(-50%);"
97
+
>
98
+
<i class="ph-fill ph-dots-three-circle"></i>
99
+
</button>
100
+
</div>
101
+
<div class="list-description">
102
+
${c.url && !c.html
103
+
? html`
104
+
<span class="with-icon">
105
+
<i class="ph-fill ph-binoculars"></i>
106
+
<span>Tracking the original <a href="${c
107
+
.url}">URL</a></span>
108
+
</span>
109
+
`
110
+
: html`
111
+
<span class="with-icon">
112
+
<i class="ph-fill ph-code"></i>
113
+
<span>Custom code</span>
114
+
</span>
115
+
`}
116
+
</div>
117
+
118
+
<!-- Dropdown Menu -->
119
+
<div
120
+
id="theme-menu-col-${c.id}"
121
+
class="dropdown"
122
+
style="position-anchor: --theme-anchor-col-${c.id}"
123
+
popover
94
124
>
95
-
<i class="ph-fill ph-dots-three-circle"></i>
96
-
</button>
97
-
</div>
98
-
<div class="list-description">
99
-
${c.url && !c.html
100
-
? html`
125
+
<a href="themes/l/?id=${c.id}">
126
+
<span class="with-icon">
127
+
<i class="ph-fill ph-globe"></i> Open
128
+
</span>
129
+
</a>
130
+
<a @click="${() => editTheme(c)}">
101
131
<span class="with-icon">
102
-
<i class="ph-fill ph-binoculars"></i>
103
-
<span>Tracking the original <a href="${c
104
-
.url}">URL</a></span>
132
+
<i class="ph-fill ph-cursor-text"></i> Edit
105
133
</span>
106
-
`
107
-
: html`
134
+
</a>
135
+
<a @click="${deleteTheme({ id: c.id })}">
108
136
<span class="with-icon">
109
-
<i class="ph-fill ph-code"></i>
110
-
<span>Custom code</span>
137
+
<i class="ph-fill ph-eraser"></i> Delete
111
138
</span>
112
-
`}
113
-
</div>
114
-
115
-
<!-- Dropdown Menu -->
116
-
<div
117
-
id="theme-menu-col-${c.id}"
118
-
class="dropdown"
119
-
style="position-anchor: --theme-anchor-col-${c.id}"
120
-
popover
121
-
>
122
-
<a href="themes/l/?id=${c.id}">
123
-
<span class="with-icon">
124
-
<i class="ph-fill ph-globe"></i> Open
125
-
</span>
126
-
</a>
127
-
<a @click="${() => editTheme(c)}">
128
-
<span class="with-icon">
129
-
<i class="ph-fill ph-cursor-text"></i> Edit
130
-
</span>
131
-
</a>
132
-
<a @click="${deleteTheme({ id: c.id })}">
133
-
<span class="with-icon">
134
-
<i class="ph-fill ph-eraser"></i> Delete
135
-
</span>
136
-
</a>
137
-
</div>
138
-
</li>
139
-
`
139
+
</a>
140
+
</div>
141
+
</li>
142
+
`,
143
+
)
140
144
)}
141
145
</ul>
142
146
`