From ec8f08e003721c9fe72713dad6564708bc5aa9a6 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 18 Feb 2026 21:33:52 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20refactorer=20l'interface=20Picwall=20av?=
 =?UTF-8?q?ec=20design=20moderne=20masonry=20layout,=20contr=C3=B4les=20de?=
 =?UTF-8?q?=20taille=20interactifs=20(slider=20+=20boutons=20+/-),=20overl?=
 =?UTF-8?q?ay=20gradient=20avec=20titre=20et=20description=20tronqu=C3=A9e?=
 =?UTF-8?q?,=20animations=20hover=20avec=20scale=20et=20opacity,=20variabl?=
 =?UTF-8?q?es=20CSS=20personnalisables=20(--picwall-item-size),=20support?=
 =?UTF-8?q?=20complet=20th=C3=A8me=20clair/sombre,=20et=20am=C3=A9lioratio?=
 =?UTF-8?q?n=20responsive=20avec=20breakpoints=20optimis=C3=A9s=20pour=20m?=
 =?UTF-8?q?obile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/css/style.css | 188 ++++++++++++++++++++++++++++++++++++++
 shaarli-pro/picwall.html  |   7 +-
 2 files changed, 191 insertions(+), 4 deletions(-)

diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index 05f4354..ec862aa 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -2383,6 +2383,194 @@ select:focus {
     color: var(--text-secondary);
 }
 
+/* ===== Picwall (Image Wall) ===== */
+.picwall-controls {
+    margin: 1.5rem 0 1.75rem;
+    display: flex;
+    justify-content: center;
+}
+
+.picwall-controls-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.85rem 1.25rem;
+    border-radius: 999px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+}
+
+.picwall-controls-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-weight: 600;
+    color: var(--text-main);
+    font-size: 0.9rem;
+}
+
+.picwall-size-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.picwall-size-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--bg-body);
+    color: var(--text-main);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.picwall-size-btn:hover {
+    background: var(--bg-card-hover);
+    transform: translateY(-1px);
+}
+
+.picwall-size-slider {
+    width: 160px;
+    accent-color: var(--primary);
+}
+
+.picwall-size-value {
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    min-width: 60px;
+    text-align: right;
+}
+
+.picwall-container {
+    --picwall-item-size: 220px;
+    column-width: var(--picwall-item-size);
+    column-gap: 18px;
+    width: 100%;
+    padding-bottom: 2rem;
+}
+
+.picwall-pictureframe {
+    display: inline-block;
+    width: 100%;
+    margin: 0 0 18px;
+    position: relative;
+    border-radius: 18px;
+    overflow: hidden;
+    background: var(--bg-card);
+    box-shadow: var(--shadow-md);
+    break-inside: avoid;
+    isolation: isolate;
+}
+
+.picwall-image-link img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+    transform: scale(1);
+    transition: transform 0.35s ease;
+}
+
+.picwall-pictureframe:hover .picwall-image-link img,
+.picwall-pictureframe:focus-within .picwall-image-link img {
+    transform: scale(1.04);
+}
+
+.picwall-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(8, 15, 30, 0.05) 0%, rgba(8, 15, 30, 0.65) 60%, rgba(8, 15, 30, 0.85) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    display: flex;
+    align-items: flex-end;
+}
+
+.picwall-pictureframe:hover .picwall-overlay,
+.picwall-pictureframe:focus-within .picwall-overlay {
+    opacity: 1;
+}
+
+.picwall-link {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    padding: 1.1rem 1.2rem 1.25rem;
+    color: #ffffff;
+    width: 100%;
+}
+
+.picwall-title {
+    font-size: 1.05rem;
+    font-weight: 600;
+    line-height: 1.3;
+    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
+}
+
+.picwall-description {
+    font-size: 0.85rem;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.85);
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+[data-theme="dark"] .picwall-controls-inner {
+    background: #111827;
+    border-color: #1f2937;
+}
+
+[data-theme="dark"] .picwall-size-btn {
+    background: #0f172a;
+    border-color: #1f2937;
+}
+
+[data-theme="dark"] .picwall-pictureframe {
+    background: #0f172a;
+    box-shadow: 0 18px 26px rgba(4, 12, 26, 0.45);
+}
+
+@media (max-width: 900px) {
+    .picwall-controls-inner {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .picwall-size-slider {
+        width: 140px;
+    }
+}
+
+@media (max-width: 600px) {
+    .picwall-controls {
+        margin: 1rem 0 1.25rem;
+    }
+
+    .picwall-controls-inner {
+        width: 100%;
+        border-radius: 16px;
+    }
+
+    .picwall-container {
+        column-gap: 14px;
+    }
+
+    .picwall-pictureframe {
+        border-radius: 14px;
+        margin-bottom: 14px;
+    }
+}
+
 /* ===== Bulk Bookmark Creation ===== */
 .page-add .col-md-6.col-md-offset-3 {
     width: 100%;
diff --git a/shaarli-pro/picwall.html b/shaarli-pro/picwall.html
index 46dd083..320682f 100644
--- a/shaarli-pro/picwall.html
+++ b/shaarli-pro/picwall.html
@@ -57,10 +57,9 @@
                     <div class="picwall-overlay">
                         <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="mdi mdi-open-in-new"></i>
-                                {$value.real_url}
-                            </span>
+                            {if="$value.description"}
+                            <span class="picwall-description">{$value.description}</span>
+                            {/if}
                         </a>
                     </div>