this repo has no description
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: Toggle rich previews for links

+70 -12
+6
internal/assets/css/screen.css
··· 629 629 opacity: 0.7; 630 630 } 631 631 632 + /* Compact Mode Styles */ 633 + .compact-mode .og-preview, 634 + .compact-mode .youtube-embed-wrapper { 635 + display: none !important; 636 + } 637 +
+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
··· 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