feat: space-aware share flow with pre-share picker and unified urls

ijbo · ijbo · commit 05766f706681 · 2026-03-28T02:25:17.000+09:00
diff --git a/README.md b/README.md
@@ -538,6 +538,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-03-28** | | 🔗 **Space-Aware Sharing** — moved "Add to Space" dropdown to the pre-share modal; generates unified `#space=<slug>&s=<id>` URLs that load the document within its space context; converted management items to clickable anchor tags opening directly to the doc |
 | **2026-03-28** | | 🎓 **Quiz Progress Bar Fix** — fixed progress bar not syncing with respondent navigation; bar now tracks current question position instead of answered-question count; `gotoScreen()` now updates HUD on every navigation |
 | **2026-03-27** | | 📊 **ECharts Chart System** — new `{{Chart:}}` DocGen tag with 7 declarative chart types (bar, line, pie, scatter, radar, gauge, heatmap) and raw ECharts JS code mode; `chart-docgen.js` (~720 lines) parser/builder/transformer; `chart-docgen.css` + `echarts.css` styling; lazy-loaded ECharts CDN via `window.getECharts()`; 📊 Chart toolbar button, composer chip, mobile integration; 11 chart gallery templates (Line, Bar, Pie, Scatter, Sunburst, Treemap, Advanced, Sankey, Parallel, Graph) with ~4,200 lines of copy-paste-ready examples; new Charts template category |
 | **2026-03-27** | | 📂 **Spaces** — personal document hub with email-based ownership and access key recovery; `space-manager.js` (~760 lines) CRUD, Firestore sync, hub rendering; `spaces.css` (~540 lines) glassmorphic modal UI; Spaces modal with create/recover/manage views; "Add to Space" picker in share modal; `#space=<slug>` URL routing; Firestore `/spaces/{spaceId}` collection rules with field validation, write-token ownership, 50-item limit |
diff --git a/changelogs/CHANGELOG-space-aware-share.md b/changelogs/CHANGELOG-space-aware-share.md
@@ -0,0 +1,17 @@
+# Space-Aware Share Flow Updates
+
+**Date:** March 28, 2026
+
+## Overview
+Re-engineered the "Add to Space" feature to be part of the pre-share workflow, ensuring users can generate a single, meaningful URL that includes both the space context and the document itself.
+
+## Changes
+- **Pre-Share Space Selection:** Moved the "Add to Space" dropdown from the post-share result modal into the initial Share Options modal.
+- **Unified URL Generation:** Sharing a document to a space now simultaneously creates the share link and associates it with the space, returning a unified URL (`#space=<slug>&s=<id>`).
+- **Enhanced Document Routing:** Updated the hash parser (`M.loadSharedMarkdown`) to properly read and execute compound URLs containing both `space` and `s` parameters, ensuring the document loads seamlessly within the space context.
+- **Clickable Space Management Items:** Converted the document titles in the "My Spaces" editor modal into clickable anchor tags (`<a>`) that open the shared document in a new tab using the new context-aware URL format.
+- **UI Polish:** Added focus states, hover effects, and cleaner typography to the new select dropdown and management links in `spaces.css`.
+
+## Impact
+- **No More Duplicate Links:** Eliminates user confusion by generating a firm link only *after* all contexts (like spaces) have been selected.
+- **Better UX:** Managers can now easily review the documents they've added to a space directly from their management modal with a single click.
diff --git a/css/spaces.css b/css/spaces.css
@@ -288,11 +288,18 @@
     min-width: 0;
 }
 .spaces-editor-item-title {
+    display: block;
     font-size: 14px;
     color: var(--text-color);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-decoration: none;
+    transition: color 0.15s;
+}
+a.spaces-editor-item-title:hover {
+    color: var(--accent-color);
+    text-decoration: underline;
 }
 .spaces-editor-item-time {
     font-size: 11px;
@@ -335,47 +342,22 @@
     box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
 }
 
-/* --- "Add to Space" in Share Result --- */
-.share-add-space-section {
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border-color);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-.share-add-space-section label {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-color);
-    white-space: nowrap;
-}
-.share-add-space-section select {
-    flex: 1;
-    min-width: 120px;
-    padding: 5px 10px;
-    font-size: 13px;
+/* --- "Add to Space" in Share Options --- */
+.share-space-select {
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 14px;
     border: 1px solid var(--border-color);
-    border-radius: 6px;
+    border-radius: 8px;
     background-color: var(--editor-bg);
     color: var(--text-color);
     outline: none;
-}
-.share-add-space-section button {
-    padding: 5px 12px;
-    font-size: 13px;
-    font-weight: 600;
-    border: 1px solid var(--accent-color);
-    border-radius: 6px;
-    background-color: rgba(88, 166, 255, 0.1);
-    color: var(--accent-color);
+    transition: border-color 0.15s;
     cursor: pointer;
-    transition: all 0.15s;
-    white-space: nowrap;
 }
-.share-add-space-section button:hover {
-    background-color: rgba(88, 166, 255, 0.2);
+.share-space-select:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
 }
 
 /* ============================================
diff --git a/js/cloud-share.js b/js/cloud-share.js
@@ -464,9 +464,10 @@
         if (!hash) return;
         var params = new URLSearchParams(hash);
         var spaceSlug = params.get('space');
+        var compactId = params.get('s');
 
         // --- Space hub: #space=<slug> ---
-        if (spaceSlug) {
+        if (spaceSlug && !compactId) {
             try {
                 M.markdownPreview.innerHTML = '<div style="padding: 40px; text-align: center; opacity: 0.6;"><i class="bi bi-collection"></i> Loading Space...</div>';
                 M.setViewMode('preview');
@@ -894,6 +895,8 @@
         if (hint) hint.style.display = '';
         // Render previously shared versions
         renderSharedVersions();
+        // Populate "Add to Space" picker in options modal
+        if (M.populateShareSpacePicker) M.populateShareSpacePicker();
     }
 
     /** Render the "Previously Shared" list in the share options modal */
@@ -1032,8 +1035,23 @@
             if (shareResult.id) {
                 saveSharedVersion(shareResult.id, shareResult.url, selectedShareView, isSecureShareMode ? 'secure' : 'quick');
             }
+            // Add to selected space (if any)
+            var selectedSpaceSlug = '';
+            var spaceSelect = document.getElementById('share-space-select');
+            if (spaceSelect && spaceSelect.value) {
+                selectedSpaceSlug = spaceSelect.value;
+                try {
+                    var title = 'Untitled';
+                    var content = M.markdownEditor.value;
+                    var headingMatch = content.match(/^#+\s+(.+)/m);
+                    if (headingMatch) title = headingMatch[1].trim().substring(0, 60);
+                    await M.addItemToSpace(selectedSpaceSlug, shareResult.id, title);
+                } catch (spaceErr) {
+                    console.warn('Failed to add to space:', spaceErr);
+                }
+            }
             closeShareOptionsModal();
-            showShareResult(shareResult.url, isSecureShareMode, shareResult.isForm, shareResult.rkString);
+            showShareResult(shareResult.url, isSecureShareMode, shareResult.isForm, shareResult.rkString, selectedSpaceSlug);
         } catch (error) {
             console.error('Share failed:', error);
             // Show custom name errors in the custom name error div
@@ -1054,12 +1072,16 @@
     var shareResultModal = document.getElementById('share-result-modal');
     var lastShareRk = '';
     var lastShareRespondentUrl = '';
-    function showShareResult(url, isSecure, isForm, rkString) {
-        // For form docs, append rk to create the creator link
+    function showShareResult(url, isSecure, isForm, rkString, spaceSlug) {
+        // Build the display URL
         var creatorUrl = url;
         if (isForm && rkString) {
             creatorUrl = url + '&rk=' + rkString;
         }
+        // Rewrite the hash to include the space before the document ID
+        if (spaceSlug) {
+            creatorUrl = creatorUrl.replace('#s=', '#space=' + spaceSlug + '&s=');
+        }
         document.getElementById('share-link-input').value = creatorUrl;
 
         var desc = document.getElementById('share-result-desc');
@@ -1098,9 +1120,6 @@
         }
 
         shareResultModal.classList.add('active');
-
-        // Populate "Add to Space" picker if user has spaces
-        if (M.populateShareSpacePicker) M.populateShareSpacePicker();
     }
     M.closeShareResultModal = function () { shareResultModal.classList.remove('active'); };
     document.getElementById('share-result-close').addEventListener('click', M.closeShareResultModal);
@@ -1204,8 +1223,8 @@
 
     // Track when the share result modal opens (for time-based bot detection)
     var _origShowShareResult = showShareResult;
-    showShareResult = function (url, isSecure, isForm, rkString) {
-        _origShowShareResult(url, isSecure, isForm, rkString);
+    showShareResult = function (url, isSecure, isForm, rkString, spaceSlug) {
+        _origShowShareResult(url, isSecure, isForm, rkString, spaceSlug);
         emailModalOpenTime = Date.now();
     };
     if (emailSendBtn) emailSendBtn.addEventListener('click', async function () {
diff --git a/js/modal-templates.js b/js/modal-templates.js
@@ -99,6 +99,15 @@
                     <small class="share-view-lock-hint">Recipients will only see the selected view and cannot switch modes.</small>
                 </div>
 
+                <!-- Add to Space (pre-share) -->
+                <div id="share-space-section" class="share-form-group" style="display:none">
+                    <label><i class="bi bi-collection me-1"></i>Add to Space</label>
+                    <select id="share-space-select" class="share-space-select">
+                        <option value="">— None —</option>
+                    </select>
+                    <small>Link will open the Space hub instead of the document directly.</small>
+                </div>
+
                 <!-- Previously Shared Versions -->
                 <div id="share-versions-section" class="share-versions-section" style="display:none">
                     <label class="share-view-lock-label"><i class="bi bi-clock-history me-1"></i> Previously Shared</label>
@@ -179,12 +188,7 @@
                         and .md file directly to your inbox.</small>
                     <div id="share-email-status" class="share-email-status"></div>
                 </div>
-                <!-- Add to Space -->
-                <div id="share-add-to-space" class="share-add-space-section" style="display:none">
-                    <label><i class="bi bi-collection me-1"></i>Add to Space</label>
-                    <select id="share-space-picker"></select>
-                    <button id="share-add-space-btn" class="spaces-btn-primary" style="padding:5px 12px;font-size:13px">+ Add</button>
-                </div>
+
             </div>
         </div>
     </div>
diff --git a/js/space-manager.js b/js/space-manager.js
@@ -437,7 +437,7 @@
             row.innerHTML =
                 '<span class="spaces-editor-item-num">' + (idx + 1) + '</span>' +
                 '<div class="spaces-editor-item-info">' +
-                    '<span class="spaces-editor-item-title">' + escapeHtml(item.title) + '</span>' +
+                    '<a href="' + (M.SHARE_BASE_URL || 'https://textagent.github.io/') + '#space=' + escapeHtml(slug) + '&s=' + escapeHtml(item.id) + '" target="_blank" class="spaces-editor-item-title">' + escapeHtml(item.title) + '</a>' +
                     '<span class="spaces-editor-item-time">' + timeStr + '</span>' +
                 '</div>' +
                 '<button class="spaces-list-btn spaces-list-delete" data-idx="' + idx + '" title="Remove"><i class="bi bi-x-lg"></i></button>';
@@ -679,29 +679,6 @@
             });
         });
 
-        // "Add to Space" in share result modal
-        var shareAddBtn = document.getElementById('share-add-space-btn');
-        if (shareAddBtn) shareAddBtn.addEventListener('click', async function () {
-            var picker = document.getElementById('share-space-picker');
-            if (!picker || !picker.value) return;
-            var slug = picker.value;
-            var shareUrl = document.getElementById('share-link-input').value;
-            var shareId = '';
-            var match = shareUrl.match(/#s=([^&]+)/);
-            if (match) shareId = match[1];
-            if (!shareId) return;
-
-            var title = 'Untitled';
-            var content = M.markdownEditor.value;
-            var headingMatch = content.match(/^#+\s+(.+)/m);
-            if (headingMatch) title = headingMatch[1].trim().substring(0, 60);
-
-            try {
-                await addItemToSpace(slug, shareId, title);
-            } catch (e) {
-                if (M.showToast) M.showToast('Failed: ' + e.message, 'error');
-            }
-        });
 
         // Escape to close
         document.addEventListener('keydown', function (e) {
@@ -712,10 +689,10 @@
         });
     }
 
-    // --- Populate "Add to Space" picker in Share Result ---
+    // --- Populate "Add to Space" picker in Share Options ---
     function populateShareSpacePicker() {
-        var section = document.getElementById('share-add-to-space');
-        var picker = document.getElementById('share-space-picker');
+        var section = document.getElementById('share-space-section');
+        var picker = document.getElementById('share-space-select');
         if (!section || !picker) return;
 
         var spaces = getMySpaces();
@@ -725,7 +702,7 @@
             return;
         }
 
-        picker.innerHTML = '';
+        picker.innerHTML = '<option value="">\u2014 None \u2014</option>';
         slugs.forEach(function (slug) {
             var opt = document.createElement('option');
             opt.value = slug;
