From 78b8cd4121c798dab89a846b7f34e9412569b8a3 Mon Sep 17 00:00:00 2001
From: Ryback2501 <deiturbe@gmail.com>
Date: Fri, 19 Jun 2026 13:55:30 +0200
Subject: [PATCH] feat(swa): move feed compose into a modal opened by a fixed
 button

---
 swa/app.js     | 13 +++++++++++++
 swa/index.html | 46 +++++++++++++++++++++++++---------------------
 swa/style.css  | 24 ++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/swa/app.js b/swa/app.js
index 1eb8119..4a767d8 100644
--- a/swa/app.js
+++ b/swa/app.js
@@ -109,6 +109,10 @@ const generateMnemonic12Btn = document.getElementById('generate-mnemonic-12-btn'
 const generateMnemonic24Btn = document.getElementById('generate-mnemonic-24-btn');
 const generateError = document.getElementById('generate-error');
 
+const postModal = document.getElementById('post-modal');
+const openPostBtn = document.getElementById('open-post-btn');
+const postModalClose = document.getElementById('post-modal-close');
+
 const infoBtn = document.getElementById('info-btn');
 const infoModal = document.getElementById('info-modal');
 const modalCloseBtn = document.getElementById('modal-close-btn');
@@ -214,12 +218,20 @@ for (const button of sidebarButtons) {
   button.addEventListener('click', () => showSection(button.dataset.section));
 }
 
+openPostBtn.addEventListener('click', () => {
+  postModal.hidden = false;
+  postContent.focus();
+});
+postModalClose.addEventListener('click', () => { postModal.hidden = true; });
+postModal.addEventListener('click', (e) => { if (e.target === postModal) postModal.hidden = true; });
+
 infoBtn.addEventListener('click', () => { infoModal.hidden = false; });
 modalCloseBtn.addEventListener('click', () => { infoModal.hidden = true; });
 infoModal.addEventListener('click', (e) => { if (e.target === infoModal) infoModal.hidden = true; });
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
     infoModal.hidden = true;
+    postModal.hidden = true;
     if (!relayInfoModal.hidden) closeRelayModal();
   }
 });
@@ -788,6 +800,7 @@ postBtn.addEventListener('click', async () => {
     postSubject.value = '';
     charCount.textContent = '0';
     setPostResult('Posted.', 'ok');
+    postModal.hidden = true;
   } catch (err) {
     setPostResult(err.message, 'err');
   } finally {
diff --git a/swa/index.html b/swa/index.html
index 2d5dc88..3874c27 100644
--- a/swa/index.html
+++ b/swa/index.html
@@ -90,6 +90,30 @@ <h2 id="relay-modal-name"></h2>
     </div>
   </div>
 
+  <div id="post-modal" class="modal-overlay" hidden>
+    <div class="modal post-modal-card" role="dialog" aria-modal="true" aria-labelledby="post-modal-title">
+      <button id="post-modal-close" class="modal-close" aria-label="Close">&times;</button>
+      <h2 id="post-modal-title">Post</h2>
+      <div class="field-group">
+        <input id="post-subject" type="text" placeholder="Subject (optional)" maxlength="80" autocomplete="off">
+        <textarea id="post-content" rows="4" placeholder="What's on your mind?" maxlength="2000"></textarea>
+        <div class="char-counter"><span id="char-count">0</span> / 2000</div>
+      </div>
+      <div class="btn-row">
+        <button id="post-btn" class="primary">Post</button>
+        <label class="pow-field">Proof of work
+          <select id="post-difficulty">
+            <option value="0">Off</option>
+            <option value="8">8 bits</option>
+            <option value="16">16 bits</option>
+            <option value="20">20 bits</option>
+          </select>
+        </label>
+        <span id="post-result" class="result-msg"></span>
+      </div>
+    </div>
+  </div>
+
   <div class="app-shell">
   <nav id="sidebar" class="sidebar" aria-label="Sections" hidden>
     <button type="button" class="sidebar-btn active" data-section="user" aria-label="User" title="User">
@@ -240,27 +264,6 @@ <h2>Direct Messages</h2>
     </div>
 
     <div class="section" data-section="feeds" hidden>
-    <section id="post-panel" class="panel">
-      <h2>Post</h2>
-      <div class="field-group">
-        <input id="post-subject" type="text" placeholder="Subject (optional)" maxlength="80" autocomplete="off">
-        <textarea id="post-content" rows="4" placeholder="What's on your mind?" maxlength="2000"></textarea>
-        <div class="char-counter"><span id="char-count">0</span> / 2000</div>
-      </div>
-      <div class="btn-row">
-        <button id="post-btn" class="primary">Post</button>
-        <label class="pow-field">Proof of work
-          <select id="post-difficulty">
-            <option value="0">Off</option>
-            <option value="8">8 bits</option>
-            <option value="16">16 bits</option>
-            <option value="20">20 bits</option>
-          </select>
-        </label>
-        <span id="post-result" class="result-msg"></span>
-      </div>
-    </section>
-
     <section id="feed-panel" class="panel">
       <h2>Feed</h2>
       <div id="feed-header" class="feed-header" hidden>
@@ -301,6 +304,7 @@ <h2>Feed</h2>
       <div id="mentions-status" class="feed-status" hidden>No mentions yet.</div>
       <div id="mentions-list" hidden></div>
     </section>
+    <button id="open-post-btn" class="post-fab" aria-haspopup="dialog">✎ Post</button>
     </div>
   </main>
   </div>
diff --git a/swa/style.css b/swa/style.css
index ad409cb..3bd8b07 100644
--- a/swa/style.css
+++ b/swa/style.css
@@ -91,6 +91,30 @@ header h1 {
   gap: 0;
 }
 
+.post-modal-card {
+  max-width: 520px;
+}
+
+.post-fab {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  z-index: 50;
+  padding: 0.7rem 1.25rem;
+  border: none;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.post-fab:hover {
+  background: var(--accent-hover);
+}
+
 .login-section + .login-section {
   border-top: 1px solid var(--border);
   padding-top: 1rem;