From 63773cb9048e2b9e3094feb78068da709e195952 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Mon, 20 Jul 2026 11:21:14 -0400
Subject: [PATCH] =?UTF-8?q?fix:=204=20correctifs=20UX=20=E2=80=94=20worksp?=
 =?UTF-8?q?ace=20+,=20library=20empty,=20settings=20spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Workspaces: bouton bleu '+' maintenant centré, 48px, min-height 140px (plus coupé)
- Library no-workspace: 'Open a Workspace...' avec lien Go to Workspaces au lieu de Loading
- Library: boutons '+ Add new' et 'New page' cachés quand pas de workspace
- Settings: espacement bouton Upload photo (margin-bottom, margin-top augmentés)
- 143 tests passent
---
 app/templates/library.html    | 23 +++++++++++++++++++----
 app/templates/settings.html   |  4 ++--
 app/templates/workspaces.html |  4 ++--
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/templates/library.html b/app/templates/library.html
index c174b41..3837f36 100644
--- a/app/templates/library.html
+++ b/app/templates/library.html
@@ -186,7 +186,7 @@
   <div class="lib-header">
     <h1>Library</h1>
     <div class="lib-header-actions">
-      <button class="lib-btn-primary" onclick="window.FlowDeck.createPage()">
+      <button class="lib-btn-primary" x-show="!noWorkspace" onclick="window.FlowDeck.createPage()">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
         New page
       </button>
@@ -302,8 +302,14 @@
   </div>
 
   <!-- ── Loading ── -->
-  <div class="lib-loading" id="lib-loading">
-    <p>Loading…</p>
+  <div class="lib-loading" id="lib-loading" x-show="loading">
+    <p x-show="!noWorkspace">Loading…</p>
+    <div x-show="noWorkspace" style="padding:40px;text-align:center;">
+      <div style="font-size:48px;margin-bottom:16px;">📁</div>
+      <h3 style="font-size:18px;margin:0 0 8px;">No workspace open</h3>
+      <p style="color:var(--text-dim);font-size:14px;margin:0 0 20px;">Open a workspace to browse and manage your library items.</p>
+      <a href="/workspaces" class="btn btn-primary" style="display:inline-block;text-decoration:none;padding:8px 20px;">Go to Workspaces</a>
+    </div>
   </div>
 
   <!-- ── Table ── -->
@@ -325,7 +331,7 @@
   </div>
 
   <!-- "+ Add new" (root level) -->
-  <div class="add-new-row" x-show="!loading && tab !== 'favorites' && tab !== 'shared' && tab !== 'published' && tab !== 'repository'"
+  <div class="add-new-row" x-show="!loading && !noWorkspace && tab !== 'favorites' && tab !== 'shared' && tab !== 'published' && tab !== 'repository'"
        onclick="window.FlowDeck.createPage()">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
     Add new
@@ -501,6 +507,9 @@ function libraryPage() {
     moveModalOpen: false,
     moveIds: [],
     moveSearchQuery: '',
+
+    // No workspace guard
+    noWorkspace: false,
     moveCandidates: [],
     _moveAllCandidates: [],
 
@@ -804,6 +813,12 @@ function libraryPage() {
       this.isGiteaActive = (giteaEl ? giteaEl.textContent : '0') === '1';
       this.giteaOwner = (document.getElementById('lib-gitea-owner') || {}).textContent || '';
       this.giteaRepo = (document.getElementById('lib-gitea-repo') || {}).textContent || '';
+      // Detect no workspace: no local wsId AND no Gitea active
+      if (!this.workspaceId && !this.isGiteaActive) {
+        this.noWorkspace = true;
+        this.loading = false; // don't show loading spinner
+        return;
+      }
       console.log('[Library] workspaceId=' + this.workspaceId + ' isGitea=' + this.isGiteaActive);
       var params = new URLSearchParams(window.location.search);
       var t = params.get('tab');
diff --git a/app/templates/settings.html b/app/templates/settings.html
index d67b23a..f1485db 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -113,11 +113,11 @@
               <span x-show="!avatarUrl">{{ user.get('full_name', user.get('login',''))[:1].upper() }}</span>
             </div>
             <div>
-              <label class="avatar-upload-label">
+              <label class="avatar-upload-label" style="margin-bottom:4px;">
                 Upload photo
                 <input type="file" class="avatar-upload-input" accept="image/*" @change="uploadAvatar($event)">
               </label>
-              <div style="font-size:11px;color:var(--text-dim);margin-top:4px;">JPG, PNG or GIF — max 2MB</div>
+              <div style="font-size:11px;color:var(--text-dim);margin-top:8px;">JPG, PNG or GIF — max 2MB</div>
             </div>
           </div>
           <div style="margin-top:8px;">
diff --git a/app/templates/workspaces.html b/app/templates/workspaces.html
index f793541..a13c4aa 100644
--- a/app/templates/workspaces.html
+++ b/app/templates/workspaces.html
@@ -68,8 +68,8 @@
           </div>
         </div>
       </template>
-      <div class="ws-card btn-new" @click="showCreate=true">
-        <span style="font-size:32px">+</span>
+      <div class="ws-card btn-new" @click="showCreate=true" style="display:flex;align-items:center;justify-content:center;height:auto;min-height:140px;">
+        <span style="font-size:48px;line-height:1;">+</span>
       </div>
     </div>
   </div>