From ed1b5d4193cfe2181d6703f1d776e1d7ca289eb6 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Fri, 10 Jul 2026 11:05:45 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20Share=20panel=20=E2=80=94=20General=20Ac?=
 =?UTF-8?q?cess=20dropdown=20+=20Publish=20section?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Share panel restructured to match Notion:
- General Access: dropdown with 'Only people invited' / 'Anyone with the link'
- Invite: email + permission selector
- Publish to web: toggle + URL input + Copy link button
- Copy page link at bottom

CSS: .share-access-btn and .share-access-menu for the access dropdown
---
 app/templates/page_editor.html | 77 +++++++++++++++++++++++-----------
 static/css/app.css             | 22 ++++++++++
 2 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/app/templates/page_editor.html b/app/templates/page_editor.html
index 5271219..0440aa2 100644
--- a/app/templates/page_editor.html
+++ b/app/templates/page_editor.html
@@ -24,33 +24,29 @@
 
       <!-- Share dropdown -->
       <div class="share-dropdown" x-show="shareOpen" @click.away="shareOpen = false" x-transition>
+
+        <!-- General Access -->
         <div class="share-dd-section">
-          <div class="share-dd-row">
-            <span>🔒 Private</span>
-            <span class="share-dd-hint">Only you have access</span>
+          <div class="share-dd-label">General Access</div>
+          <div style="position:relative;">
+            <button class="share-access-btn" @click="accessMenuOpen = !accessMenuOpen">
+              <span x-text="generalAccess === 'invited' ? '🔒 Only people invited' : '🌐 Anyone with the link'"></span>
+              <span class="chevron-down">▾</span>
+            </button>
+            <div class="share-access-menu" x-show="accessMenuOpen" @click.away="accessMenuOpen = false" x-transition>
+              <div class="share-access-option" @click="generalAccess='invited'; accessMenuOpen=false">
+                <span>🔒</span> Only people invited
+              </div>
+              <div class="share-access-option" @click="generalAccess='anyone'; accessMenuOpen=false">
+                <span>🌐</span> Anyone with the link
+              </div>
+            </div>
           </div>
         </div>
+
         <div class="share-dd-sep"></div>
-        <div class="share-dd-section">
-          <div class="share-dd-row clickable" @click="copyPageLink">
-            <span>🔗 Copy link</span>
-          </div>
-        </div>
-        <div class="share-dd-sep"></div>
-        <div class="share-dd-section">
-          <div class="share-dd-row" style="justify-content:space-between;">
-            <span>🌐 Publish to web</span>
-            <label class="toggle-switch sm">
-              <input type="checkbox" x-model="pagePublished" @change="togglePublish">
-              <span class="toggle-slider"></span>
-            </label>
-          </div>
-          <p class="share-dd-desc" x-show="pagePublished">
-            Anyone with the link can view.<br>
-            <a :href="publishedUrl" x-text="publishedUrl" target="_blank" style="color:var(--blue);font-size:12px;"></a>
-          </p>
-        </div>
-        <div class="share-dd-sep"></div>
+
+        <!-- Invite -->
         <div class="share-dd-section">
           <div class="share-dd-label">Invite</div>
           <div class="share-dd-invite-row">
@@ -63,6 +59,38 @@
             <button class="share-dd-btn" @click="invitePerson">Invite</button>
           </div>
         </div>
+
+        <div class="share-dd-sep"></div>
+
+        <!-- Publish -->
+        <div class="share-dd-section">
+          <div class="share-dd-row" style="justify-content:space-between;">
+            <div>
+              <span style="font-size:14px;">🌐 Publish to web</span>
+              <p class="share-dd-desc">Make this page visible to anyone on the internet.</p>
+            </div>
+            <label class="toggle-switch sm">
+              <input type="checkbox" x-model="pagePublished" @change="togglePublish">
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+          <div x-show="pagePublished" style="margin-top:8px;">
+            <div class="share-dd-row">
+              <input type="text" class="share-dd-input" :value="publishedUrl || pageUrl" readonly @click="$event.target.select()" style="flex:1;">
+              <button class="share-dd-btn" @click="copyPageLink">Copy link</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="share-dd-sep"></div>
+
+        <!-- Copy link -->
+        <div class="share-dd-section">
+          <div class="share-dd-row clickable" @click="copyPageLink">
+            <span>🔗 Copy page link</span>
+          </div>
+        </div>
+
       </div>
 
       <!-- More menu dropdown -->
@@ -217,8 +245,9 @@ function editor(pid,title,fmt,raw,favorited){
   const self={
     pid,pageTitle:title,blocks:[],dirty:false,saving:false,lastSaved:'',st:null,
     fmt:{open:false,top:0,left:0,idx:-1},
-    shareOpen:false,moreOpen:false,gsMoreOpen:false,
+    shareOpen:false,moreOpen:false,gsMoreOpen:false,accessMenuOpen:false,
     favorited:!!favorited,pagePublished:false,
+    generalAccess:'invited',
     pageUrl:window.location.href,publishedUrl:'',
     inviteEmail:'',invitePermission:'editor',accessList:[],
 
diff --git a/static/css/app.css b/static/css/app.css
index 5bf8f1a..75c1bba 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -2254,6 +2254,28 @@ input, select, textarea { font-family: inherit; color: inherit; }
 }
 .share-dd-btn:hover { opacity: 0.9; }
 
+/* ── General Access dropdown ── */
+.share-access-btn {
+  width: 100%; display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px; background: var(--bg-primary);
+  border: 1px solid var(--border); border-radius: 6px;
+  color: var(--text-primary); font-size: 13px; cursor: pointer;
+  margin-top: 4px;
+}
+.share-access-btn:hover { background: var(--bg-hover); }
+.share-access-btn .chevron-down { font-size: 10px; opacity: 0.5; }
+.share-access-menu {
+  position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
+  background: var(--bg-primary); border: 1px solid var(--border);
+  border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  z-index: 210; padding: 4px 0;
+}
+.share-access-option {
+  padding: 8px 14px; font-size: 13px; color: var(--text-primary);
+  cursor: pointer; display: flex; align-items: center; gap: 8px;
+}
+.share-access-option:hover { background: var(--bg-hover); }
+
 /* ── More menu dropdown ── */
 .more-menu {
   position: absolute; top: calc(100% + 4px); right: 0;