feat: Introduce the new Shaarli-pro theme with its templates, styles, and scripts.

.gemini/analysis.md

@@ -0,0 +1,43 @@
+# Theme Analysis & Fix Plan
+
+## Issues Found
+
+### 1. CSS: Massive duplication of styles (CRITICAL)
+- `.filter-info-banner` defined 3 times (lines 2900, 3137, 3196)
+- `.filter-badge` defined 3 times (lines 2873, 3117, 3255)
+- `.filter-clear-btn` defined 3 times
+- `.filter-info-content` defined 3 times
+- `.header-action-btn.has-active-filter` defined 3 times
+- `.button-primary` and `.button-secondary` duplicated (lines 1771+ and 1834+)
+- `.paging` styles duplicated (lines 1056 and 3007)
+
+### 2. "Mark as Read" Issue
+- The `action_plugin` loop in `linklist.paging.html` renders plugin buttons inside pagination
+- No CSS styling for plugin-injected content in paging area
+- Need to style `.paging-plugin` properly
+
+### 3. Missing Plugin Zones in linklist.html
+- `{loop="$value.link_plugin"}` is missing from the link card template
+- This means plugin hooks for individual links won't render
+
+### 4. linklist_new.html is incomplete/unused duplicate
+- Appears to be an abandoned copy of linklist.html
+
+### 5. Daily page bugs
+- Line 39: `{$type}day=` should be `{$type}=` (nextday URL is broken)
+
+### 6. Footer HTML structure issues
+- `</div><!-- /.content-container -->` and `</div><!-- /.main-content -->` are inside footer
+- This is fragile but necessary for structure
+
+### 7. Picwall uses remixicon classes but only MDI is loaded
+- `ri-zoom-in-line`, `ri-subtract-line`, `ri-add-line`, `ri-external-link-line` won't render
+
+### 8. Console.log debug statements in production JS
+- Many `console.log('[Filter Debug]` statements in script.js
+
+### 9. Missing Google Font import
+- `Inter` font is referenced but never imported
+
+### 10. page.header.html structure
+- `col-md-offset-2` and `col-md-6 col-md-offset-3` don't exist in the minimal grid

shaarli-pro/css/style.css

@@ -1,3 +1,6 @@
+/* Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 /**
  * Shaarli Professional Theme - Bookmarkify Style
  * Modern Sidebar Layout + Light/Dark Mode
@@ -120,6 +123,17 @@ a:hover {
     color: var(--primary-hover);
 }
 
+/* Accessible Focus */
+:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+button:focus:not(:focus-visible),
+a:focus:not(:focus-visible) {
+    outline: none;
+}
+
 /* ===== App Layout (Sidebar + Main) ===== */
 .app-layout {
     display: flex;
@@ -1052,54 +1066,6 @@ input:checked+.theme-slider:before {
     color: white;
 }
 
-/* ===== Paging ===== */
-.paging {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 0;
-    margin-bottom: 1rem;
-}
-
-.paging-links {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.paging-current {
-    font-size: 0.9rem;
-    color: var(--text-secondary);
-}
-
-.paging-current strong {
-    color: var(--text-main);
-}
-
-.paging-total {
-    color: var(--text-muted);
-    font-size: 0.85rem;
-    margin-left: 0.25rem;
-}
-
-.paging a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    color: var(--text-main);
-    transition: all 0.15s ease;
-}
-
-.paging a:hover {
-    background: var(--primary);
-    border-color: var(--primary);
-    color: white;
-}
 
 /* ===== Links Grid/List ===== */
 .links-list {
@@ -1830,47 +1796,8 @@ select:focus {
     box-shadow: 0 0 0 3px var(--primary-light);
 }
 
-/* ===== Buttons ===== */
-.button-primary {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.625rem 1.25rem;
-    background: var(--primary);
-    color: white;
-    border: none;
-    border-radius: 0.5rem;
-    font-weight: 500;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    text-decoration: none;
-}
 
-.button-primary:hover {
-    background: var(--primary-hover);
-    color: white;
-}
 
-.button-secondary {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.625rem 1.25rem;
-    background: var(--bg-card);
-    color: var(--text-main);
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    font-weight: 500;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    text-decoration: none;
-}
-
-.button-secondary:hover {
-    background: var(--border-light);
-}
 
 .nav-link {
     display: flex;
@@ -2556,8 +2483,8 @@ select:focus {
 }
 
 .picwall-pictureframe::after {
-    content: '\eb82';
+    content: '\F03CC';
-    font-family: 'remixicon';
+    font-family: 'Material Design Icons';
     position: absolute;
     top: 0.75rem;
     right: 0.75rem;
@@ -3062,6 +2989,7 @@ select:focus {
     color: var(--primary);
     font-weight: 600;
 }
+
 /* Search Results Header (Tags) */
 .search-results-header {
     display: flex;
@@ -3105,7 +3033,7 @@ select:focus {
 }
 
 .search-tag-close:hover {
-    background: rgba(0,0,0,0.1);
+    background: rgba(0, 0, 0, 0.1);
     opacity: 1;
 }
 
@@ -3114,158 +3042,57 @@ select:focus {
 }
 
 
-/* Filter Badge Indicator */
+/* ===== Plugin Zone Styling ===== */
-.filter-badge {
+/* Plugin buttons injected into paging (e.g., "Mark as Read") */
-    position: absolute;
+.paging-plugin {
-    top: 2px;
+    display: inline-flex;
-    right: 2px;
-    width: 8px;
-    height: 8px;
-    background: #ef4444;
-    border-radius: 50%;
-    border: 2px solid var(--header-bg);
-}
-
-.header-action-btn {
-    position: relative;
-}
-
-.header-action-btn.has-active-filter {
-    background: rgba(239, 68, 68, 0.2);
-}
-
-/* Filter Info Banner */
-.filter-info-banner {
-    display: flex;
     align-items: center;
-    justify-content: space-between;
-    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
-    color: white;
-    padding: 0.75rem 1.25rem;
-    border-radius: 8px;
-    margin: 1rem 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-.filter-info-banner.empty-results {
+.paging-plugin a {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    display: inline-flex;
-}
-
-.filter-info-content {
-    display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.375rem;
-    font-size: 0.95rem;
+    padding: 0.375rem 0.75rem;
-}
+    border-radius: 0.375rem;
-
+    font-size: 0.8rem;
-.filter-info-content i {
-    font-size: 1.25rem;
-    opacity: 0.9;
-}
-
-.filter-info-content strong {
-    background: rgba(255, 255, 255, 0.25);
-    padding: 0.15rem 0.5rem;
-    border-radius: 4px;
-    font-weight: 600;
-}
-
-.filter-clear-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.35rem;
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    color: white;
-    padding: 0.4rem 0.75rem;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.85rem;
     font-weight: 500;
-    transition: background 0.2s ease;
+    color: var(--text-secondary);
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    transition: all 0.2s ease;
+    text-decoration: none;
+    white-space: nowrap;
 }
 
-.filter-clear-btn:hover {
+.paging-plugin a:hover {
-    background: rgba(255, 255, 255, 0.35);
+    background: var(--primary-light);
+    color: var(--primary);
+    border-color: var(--primary);
 }
 
-.filter-clear-btn i {
+/* Plugin zone inside link cards */
-    font-size: 1rem;
+.link-plugin {
-}
-
-/* ===== Filter Info Banner ===== */
-.filter-info-banner {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: 0.25rem;
-    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+    margin-top: 0.25rem;
-    color: white;
-    padding: 0.75rem 1.25rem;
-    border-radius: 8px;
-    margin: 1rem 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-.filter-info-banner.empty-results {
+.link-plugin a {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    display: inline-flex;
-}
-
-.filter-info-content {
-    display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.25rem;
-    font-size: 0.95rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    transition: all 0.2s ease;
 }
 
-.filter-info-content i {
+.link-plugin a:hover {
-    font-size: 1.25rem;
+    background: var(--primary-light);
-    opacity: 0.9;
+    color: var(--primary);
-}
-
-.filter-info-content strong {
-    background: rgba(255, 255, 255, 0.25);
-    padding: 0.15rem 0.5rem;
-    border-radius: 4px;
-    font-weight: 600;
-}
-
-.filter-clear-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.35rem;
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    color: white;
-    padding: 0.4rem 0.75rem;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.85rem;
-    font-weight: 500;
-    transition: background 0.2s ease;
-}
-
-.filter-clear-btn:hover {
-    background: rgba(255, 255, 255, 0.35);
-}
-
-.filter-clear-btn i {
-    font-size: 1rem;
-}
-
-/* Filter Badge on button */
-.filter-badge {
-    position: absolute;
-    top: -2px;
-    right: -2px;
-    width: 10px;
-    height: 10px;
-    background: #ef4444;
-    border-radius: 50%;
-    border: 2px solid var(--header-bg);
-}
-
-.header-action-btn.has-active-filter {
-    position: relative;
 }
 
 /* Single page pagination - centered stats only */
@@ -3353,8 +3180,12 @@ select:focus {
     color: var(--text-main);
 }
 
-.modal-body h1, .modal-body h2, .modal-body h3, 
+.modal-body h1,
-.modal-body h4, .modal-body h5, .modal-body h6 {
+.modal-body h2,
+.modal-body h3,
+.modal-body h4,
+.modal-body h5,
+.modal-body h6 {
     margin-top: 1.5em;
     margin-bottom: 0.75em;
     color: var(--text-main);
@@ -3370,7 +3201,8 @@ select:focus {
     margin: 1rem 0;
 }
 
-.modal-body pre, .modal-body code {
+.modal-body pre,
+.modal-body code {
     background: var(--bg-body);
     font-family: monospace;
     padding: 0.2rem 0.4rem;
@@ -3385,4 +3217,4 @@ select:focus {
 /* Button style adjustment if needed */
 .view-desc-btn {
     cursor: pointer;
-}
+}

shaarli-pro/daily.html

@@ -36,7 +36,7 @@
                     </a>
                 </div>
                 <div class="col-xs-6 text-right">
-                    <a {if="$nextday"}href="{$base_path}/daily?{$type}day={$nextday}"{else}href="#"{/if} class="btn btn-secondary" {if="!$nextday"}disabled{/if}>
+                    <a {if="$nextday"}href="{$base_path}/daily?{$type}={$nextday}"{else}href="#"{/if} class="btn btn-secondary" {if="!$nextday"}disabled{/if}>
                         {function="t('Next :type', '', 1, 'shaarli', [':type' => t($type)], true)"} <i class="mdi mdi-arrow-right"></i>
                     </a>
                 </div>

shaarli-pro/includes.html

@@ -6,9 +6,25 @@
 <link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
 <link rel="search" type="application/opensearchdescription+xml" href="{$base_path}/open-search#" title="Shaarli search - {$shaarlititle}" />
 
+<!-- Prevent dark mode flash (FOUC) - must run before CSS loads -->
+<script>
+(function() {
+    var t = localStorage.getItem('theme') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    if (t === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.addEventListener('DOMContentLoaded', function() {
+            var mc = document.querySelector('meta[name="theme-color"]');
+            if (mc) mc.setAttribute('content', '#1e293b');
+        });
+    }
+})();
+</script>
+
 <!-- Professional Theme CSS -->
 <link type="text/css" rel="stylesheet" href="{$asset_path}/css/style.css#" />
 
+
 <!-- Icons (Material Design Icons) -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css">
 

shaarli-pro/js/script.js

@@ -416,8 +416,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const currentVisibility = (typeof shaarli !== 'undefined' && shaarli.visibility) ? shaarli.visibility : '';
         const currentUntagged = (typeof shaarli !== 'undefined' && shaarli.untaggedonly) || false;
 
-        console.log('[Filter] Applying filters - private:', isPrivate, 'public:', isPublic, 'untagged:', isUntagged);
+
-        console.log('[Filter] Current state - visibility:', currentVisibility, 'untagged:', currentUntagged);
 
         let url = basePath + '/';
 
@@ -446,7 +445,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
 
-        console.log('[Filter] Navigating to:', url);
+
         window.location.href = url;
     }
 
@@ -488,7 +487,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Initialize filter states from server-side variables (set in includes.html)
     (function initFilterStates() {
-        console.log('[Filter Debug] ========================================');
+
 
         // Get filter state from server-side rendered variables
         const visibility = (typeof shaarli !== 'undefined' && shaarli.visibility) ? shaarli.visibility : '';
@@ -499,42 +498,36 @@ document.addEventListener('DOMContentLoaded', () => {
         let isPublicActive = visibility === 'public';
         let isUntaggedActive = untaggedonly === true;
 
-        console.log('[Filter Debug] shaarli.visibility:', visibility);
-        console.log('[Filter Debug] shaarli.untaggedonly:', untaggedonly);
 
-        console.log('[Filter Debug] isPrivateActive:', isPrivateActive);
-        console.log('[Filter Debug] isPublicActive:', isPublicActive);
-        console.log('[Filter Debug] isUntaggedActive:', isUntaggedActive);
 
         // Set checkbox states
         if (filterPrivate && isPrivateActive) {
             filterPrivate.checked = true;
-            console.log('[Filter Debug] ✓ Set filterPrivate to CHECKED');
+
         }
         if (filterPublic && isPublicActive) {
             filterPublic.checked = true;
-            console.log('[Filter Debug] ✓ Set filterPublic to CHECKED');
+
         }
         if (filterUntagged && isUntaggedActive) {
             filterUntagged.checked = true;
-            console.log('[Filter Debug] ✓ Set filterUntagged to CHECKED');
+
         }
 
         const hasActiveFilter = isPrivateActive || isPublicActive || isUntaggedActive;
-        console.log('[Filter Debug] hasActiveFilter:', hasActiveFilter);
+
-        console.log('[Filter Debug] ========================================');
 
         // Add/update filter indicator badge on the filter button
         if (filterToggleBtn && hasActiveFilter) {
             filterToggleBtn.classList.add('has-active-filter');
-            console.log('[Filter Debug] Added has-active-filter class to button');
+
 
             // Add badge indicator if not exists
             if (!filterToggleBtn.querySelector('.filter-badge')) {
                 const badge = document.createElement('span');
                 badge.className = 'filter-badge';
                 filterToggleBtn.appendChild(badge);
-                console.log('[Filter Debug] Added filter badge');
+
             }
         }
 
@@ -587,9 +580,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
             }
 
-            console.log('[Filter Debug] resultCount:', resultCount);
+
-            console.log('[Filter Debug] isEmptyResults:', isEmptyResults);
-            console.log('[Filter Debug] message:', message);
 
             if (message) {
                 // Get base path safely
@@ -613,26 +604,25 @@ document.addEventListener('DOMContentLoaded', () => {
                 const linklist = document.getElementById('linklist');
                 const emptyStateDiv = document.querySelector('.empty-state');
 
-                console.log('[Filter Debug] contentToolbar:', contentToolbar);
+
-                console.log('[Filter Debug] linklist:', linklist);
 
                 // Insert after the content-toolbar (pagination)
                 if (contentToolbar && contentToolbar.parentNode) {
                     contentToolbar.parentNode.insertBefore(banner, contentToolbar.nextSibling);
-                    console.log('[Filter Debug] Banner inserted after content-toolbar');
+
                 } else if (emptyStateDiv && emptyStateDiv.parentNode) {
                     emptyStateDiv.parentNode.insertBefore(banner, emptyStateDiv);
-                    console.log('[Filter Debug] Banner inserted before empty-state');
+
                 } else if (linklist) {
                     linklist.insertBefore(banner, linklist.firstChild);
-                    console.log('[Filter Debug] Banner inserted at beginning of linklist');
+
                 } else {
-                    console.log('[Filter Debug] Could not find insertion point for banner');
+
                 }
 
                 // Add click handler to clear button
                 document.getElementById('filter-clear-btn')?.addEventListener('click', () => {
-                    console.log('[Filter] Clear button clicked, clearing all filters');
+
                     // Clear based on what was active
                     if (isPrivateActive || isPublicActive) {
                         window.location.href = basePath + '/admin/visibility/all';
@@ -894,7 +884,8 @@ document.addEventListener('DOMContentLoaded', () => {
             let i = 0;
 
             const updateThumbnail = function (id) {
-                console.log('Updating thumbnail #' + i + ' with id ' + id);
+
+
 
                 fetch(shaarli.basePath + '/admin/shaare/' + id + '/update-thumbnail', {
                     method: 'PATCH',

shaarli-pro/linklist.html

@@ -77,6 +77,9 @@
 <a href="#" class="view-desc-btn" data-id="{$value.id}" title="View Description"><i class="mdi mdi-fullscreen"></i></a>
 <a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
 </div>
+{loop="$value.link_plugin"}
+<div class="link-plugin">{$value}</div>
+{/loop}
 </div>
 </div>
 </div>

shaarli-pro/picwall.html

@@ -27,17 +27,17 @@
             <div class="picwall-controls">
                 <div class="picwall-controls-inner">
                     <span class="picwall-controls-label">
-                        <i class="ri-zoom-in-line"></i>
+                        <i class="mdi mdi-magnify-plus-outline"></i>
                         Image Size
                     </span>
                     <div class="picwall-size-controls">
                         <button type="button" class="picwall-size-btn" id="picwall-size-decrease" title="Decrease size">
-                            <i class="ri-subtract-line"></i>
+                            <i class="mdi mdi-minus"></i>
                         </button>
                         <input type="range" id="picwall-size-slider" class="picwall-size-slider" min="120" max="400"
                             value="200" step="20">
                         <button type="button" class="picwall-size-btn" id="picwall-size-increase" title="Increase size">
-                            <i class="ri-add-line"></i>
+                            <i class="mdi mdi-plus"></i>
                         </button>
                     </div>
                     <span class="picwall-size-value" id="picwall-size-value">200px</span>
@@ -58,7 +58,7 @@
                         <a class="picwall-link" href="{$value.real_url}" target="_blank" rel="noopener noreferrer">
                             <span class="picwall-title">{$value.title}</span>
                             <span class="picwall-url">
-                                <i class="ri-external-link-line"></i>
+                                <i class="mdi mdi-open-in-new"></i>
                                 {$value.real_url}
                             </span>
                         </a>