this repo has no description
feat: Toggle rich previews for links
+70
-12
+6
internal/assets/css/screen.css
+6
internal/assets/css/screen.css
+58
-12
internal/templates/views/header.html
+58
-12
internal/templates/views/header.html
···
73
73
border: 1px solid #30363d;
74
74
}
75
75
76
-
#theme-toggle {
76
+
.nav-icon-btn {
77
77
background: none;
78
78
border: none;
79
79
cursor: pointer;
···
84
84
justify-content: center;
85
85
opacity: 1;
86
86
}
87
-
#theme-toggle:hover {
87
+
.nav-icon-btn:hover {
88
88
background-color: rgba(128, 128, 128, 0.1);
89
89
border-radius: 50%;
90
90
}
···
184
184
<input type="text" name="search" placeholder="search..." />
185
185
</form>
186
186
187
-
<button id="theme-toggle" aria-label="Toggle Dark Mode">
187
+
<button id="compact-toggle" class="nav-icon-btn" aria-label="Toggle Compact Mode" title="Toggle Compact Mode">
188
+
<span class="material-symbols-rounded" id="compact-icon">view_headline</span>
189
+
</button>
190
+
191
+
<button id="theme-toggle" class="nav-icon-btn" aria-label="Toggle Dark Mode" title="Toggle Dark Mode">
188
192
<span class="material-symbols-rounded">contrast</span>
189
193
</button>
190
194
</div>
191
195
</div>
192
196
193
-
<!-- Theme Toggle Logic (Event Listener) -->
197
+
<!-- Theme & Compact Toggle Logic (Event Listeners) -->
194
198
<script>
195
199
(function () {
196
-
var toggle = document.getElementById("theme-toggle");
200
+
// Theme Toggle
201
+
var themeToggle = document.getElementById("theme-toggle");
197
202
var html = document.documentElement;
198
203
199
-
if (toggle) {
200
-
toggle.addEventListener("click", function () {
201
-
if (html.getAttribute("data-theme") === "dark") {
202
-
html.removeAttribute("data-theme");
203
-
localStorage.setItem("theme", "light");
204
+
if (themeToggle) {
205
+
themeToggle.addEventListener("click", function () {
206
+
if (html.getAttribute("data-theme") === "dark") {
207
+
html.removeAttribute("data-theme");
208
+
localStorage.setItem("theme", "light");
209
+
} else {
210
+
html.setAttribute("data-theme", "dark");
211
+
localStorage.setItem("theme", "dark");
212
+
}
213
+
});
214
+
}
215
+
216
+
// Compact Mode Toggle
217
+
var compactToggle = document.getElementById("compact-toggle");
218
+
var compactIcon = document.getElementById("compact-icon");
219
+
220
+
function updateCompactIcon(isCompact) {
221
+
// While in compact mode (list view), show 'view_module' (card/expanded view) as the action to switch TO.
222
+
// Or vice versa. Let's stick to: Icon represents the CURRENT state or the ACTION?
223
+
// Usually buttons show the ACTION.
224
+
// If Compact -> Show "Expand" (view_module or view_stream)
225
+
// If Expanded -> Show "Compact" (view_headline or view_list)
226
+
if (isCompact) {
227
+
compactIcon.textContent = "view_agenda"; // Action: switch to expanded
204
228
} else {
205
-
html.setAttribute("data-theme", "dark");
206
-
localStorage.setItem("theme", "dark");
229
+
compactIcon.textContent = "view_headline"; // Action: switch to compact
207
230
}
231
+
}
232
+
233
+
// Init Icon
234
+
var isCompact = html.classList.contains("compact-mode") || localStorage.getItem("compact") === "true";
235
+
if (isCompact) {
236
+
html.classList.add("compact-mode");
237
+
updateCompactIcon(true);
238
+
} else {
239
+
updateCompactIcon(false);
240
+
}
241
+
242
+
if (compactToggle) {
243
+
compactToggle.addEventListener("click", function () {
244
+
var wasCompact = html.classList.contains("compact-mode");
245
+
if (wasCompact) {
246
+
html.classList.remove("compact-mode");
247
+
localStorage.setItem("compact", "false");
248
+
updateCompactIcon(false);
249
+
} else {
250
+
html.classList.add("compact-mode");
251
+
localStorage.setItem("compact", "true");
252
+
updateCompactIcon(true);
253
+
}
208
254
});
209
255
}
210
256
})();
+6
internal/templates/views/index.html
+6
internal/templates/views/index.html
···
19
19
if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
20
20
document.documentElement.setAttribute("data-theme", "dark");
21
21
}
22
+
23
+
// Compact Mode Init
24
+
var isCompact = localStorage.getItem("compact") === "true";
25
+
if (isCompact) {
26
+
document.documentElement.classList.add("compact-mode");
27
+
}
22
28
})();
23
29
</script>
24
30