feat: Introduce Shaarli Professional Theme with modern sidebar layout, light/dark mode, and pagination.

shaarli-pro/css/style.css

@@ -2982,3 +2982,63 @@ select:focus {
         align-self: flex-end;
     }
 }
+
+/* ===== Pagination ===== */
+.paging {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin: 2rem 0;
+    padding: 1rem;
+}
+
+.paging-links {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: var(--bg-card);
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+}
+
+.paging-newer,
+.paging-older {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 0.25rem;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+    text-decoration: none;
+}
+
+.paging-newer:hover,
+.paging-older:hover {
+    background: var(--primary-light);
+    color: var(--primary);
+}
+
+.paging-current {
+    font-size: 0.9rem;
+    color: var(--text-main);
+    padding: 0 0.5rem;
+}
+
+.paging-stats {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    background: var(--bg-card);
+    padding: 0.375rem 0.75rem;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+}
+
+.paging-stats strong {
+    color: var(--primary);
+    font-weight: 600;
+}

shaarli-pro/linklist.paging.html

@@ -16,7 +16,12 @@
         <div class="paging-current">page <strong>{$page_current}</strong> / {$page_max}</div>
         {if="$previous_page_url"}<a href="{$previous_page_url}" class="paging-older" title="Older"><i class="mdi mdi-chevron-right"></i></a>{/if}
     </div>
-    {loop="$action_plugin"} <div class="paging-plugin"> <a {loop="$value.attr" }{$key}="{$value}">{$value.html}</a>
+    <div class="paging-stats">
+        Bookmarks <strong>{$from}</strong> - <strong>{$to}</strong> / <strong>{$total}</strong>
+    </div>
+    {loop="$action_plugin"}
+    <div class="paging-plugin">
+        <a {loop="$value.attr" }{$key}="{$value}">{$value.html}</a>
     </div>
     {/loop}
 </div>