ticket #66 attempt 1

devplacepy/static/css/gists.css

@@ -328,3 +328,44 @@
         padding: 0.75rem;
     }
 }
+
+/* ---- Markdown source/preview toggle ---- */
+.gist-markdown-toggle .gist-md-tabbar {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 0;
+}
+
+.gist-markdown-toggle .gist-md-tab {
+    padding: 0.5em 1em;
+    cursor: pointer;
+    color: var(--text-muted);
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: var(--radius) var(--radius) 0 0;
+    background: transparent;
+    font-size: 0.875rem;
+}
+
+.gist-markdown-toggle .gist-md-tab.active {
+    color: var(--text-primary);
+    background: var(--bg-card);
+    border-color: var(--border) var(--border) transparent;
+}
+
+.gist-markdown-toggle .tab-pane {
+    display: none;
+}
+
+.gist-markdown-toggle .tab-pane.active {
+    display: block;
+}
+
+.gist-markdown-toggle .gist-markdown-preview {
+    padding: 1em;
+    border: 1px solid var(--border);
+    border-radius: 0 0 var(--radius) var(--radius);
+    min-height: 4em;
+    background: var(--bg-card);
+}

devplacepy/static/js/MessagesLayout.js

@@ -16,7 +16,7 @@ export class MessagesLayout {
         }
         this.thread = document.querySelector(".messages-thread");
         this.form = document.querySelector(".messages-input-area");
-        this.input = this.form ? this.form.querySelector('textarea[name="content"]') : null;
+        this.input = this.form ? this.form.querySelector('input[name="content"]') : null;
         this.upload = this.form ? this.form.querySelector("dp-upload") : null;
         this.sendBtn = this.form ? this.form.querySelector(".messages-send-btn") : null;
         this._uploading = false;

devplacepy/templates/gist_detail.html

@@ -35,6 +35,23 @@
 
         {% if gist['language'] == 'markdown_rendered' %}
         <div class="gist-rendered-content rendered-content">{{ render_content(gist['source_code'], author_is_admin=is_admin(author)) }}</div>
+        {% elif gist['language'] == 'markdown' %}
+        <div class="gist-code-block gist-markdown-toggle" data-tabs>
+            <nav class="gist-md-tabbar" role="tablist">
+                <button type="button" class="gist-md-tab" data-tab="source" role="tab">Source</button>
+                <button type="button" class="gist-md-tab" data-tab="preview" role="tab">Preview</button>
+            </nav>
+            <div data-tab-pane="source" class="tab-pane active" role="tabpanel">
+                <div class="gist-code-header">
+                    <span class="gist-language-name">{{ language_name(gist['language']) }}</span>
+                    <button type="button" class="gist-copy-btn" data-copy="gist-code-content">Copy</button>
+                </div>
+                <pre><code id="gist-code-content" class="language-markdown">{{ gist['source_code'] }}</code></pre>
+            </div>
+            <div data-tab-pane="preview" class="tab-pane gist-markdown-preview rendered-content" role="tabpanel">
+                {{ render_content(gist['source_code'], author_is_admin=is_admin(author)) }}
+            </div>
+        </div>
         {% else %}
         <div class="gist-code-block">
             <div class="gist-code-header">

tests/e2e/messages.py

@@ -176,7 +176,7 @@ def test_send_message_appears_in_thread(alice):
         f"{BASE_URL}/messages?with_uid={bob['uid']}", wait_until="domcontentloaded"
     )
     msg = f"Hello bob {int(time.time() * 1000)}"
-    page.fill("textarea[name='content']", msg)
+    page.fill("input[name='content']", msg)
     page.locator(".messages-send-btn").click()
     page.wait_for_url("**/messages**", wait_until="domcontentloaded")
     page.locator(f".message-bubble:has-text('{msg}')").first.wait_for(state="visible")

tests/e2e/notifications/index.py

@@ -440,7 +440,7 @@ def test_message_notification(app_server, browser, seeded_db):
     pb.goto(f"{BASE_URL}/messages?search=alice_test", wait_until="domcontentloaded")
     pb.wait_for_timeout(2000)
 
-    msg_input = pb.locator("textarea[name='content']").first
+    msg_input = pb.locator("input[name='content']").first
     msg_input.wait_for(state="visible", timeout=10000)
     msg_input.fill("Hello from bob_test!")
     pb.locator("button[type='submit']").last.click()
@@ -753,7 +753,7 @@ def test_message_notification_click_opens_conversation(app_server, browser, seed
 
     pb.goto(f"{BASE_URL}/messages?search=alice_test", wait_until="domcontentloaded")
     pb.wait_for_timeout(2000)
-    msg_input = pb.locator("textarea[name='content']").first
+    msg_input = pb.locator("input[name='content']").first
     msg_input.wait_for(state="visible", timeout=10000)
     msg_input.fill("Click-through message from bob")
     pb.locator("button[type='submit']").last.click()