From e810c5f66459b54d99a3bb75f0292a12c8ae425d Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Sun, 27 Sep 2026 17:41:59 +0000
Subject: [PATCH] contact messages: plain thread view instead of bubbles

Drop the bubble styling (muted/accent backgrounds, rounded boxes,
left/right alignment) from both the visitor panel and the admin inbox:
messages now stack full-width as a flat thread with hairline
separators, a small muted meta line (author + time) above the body,
and 'you'/'visitor' fallback labels carrying the side distinction
instead of color.
---
 frontend/src/ContactPanel.vue | 36 +++++++++++++----------------------
 frontend/src/MessagesView.vue | 36 +++++++++++++----------------------
 2 files changed, 26 insertions(+), 46 deletions(-)

diff --git a/frontend/src/ContactPanel.vue b/frontend/src/ContactPanel.vue
index 4ea2625..1b2f07e 100644
--- a/frontend/src/ContactPanel.vue
+++ b/frontend/src/ContactPanel.vue
@@ -38,21 +38,16 @@ function fmtTime(t) {
         <p v-if="!state.thread || !state.thread.messages.length" class="contact-empty">
           Send us a message — the reply appears here.
         </p>
-        <div
-          v-for="m in state.thread?.messages || []"
-          :key="m.id"
-          class="contact-msg"
-          :class="{ mine: !m.admin }"
-        >
+        <div v-for="m in state.thread?.messages || []" :key="m.id" class="contact-msg">
           <!-- m.html is the server's strict-markdown rendering of the
                message source (pagerite/messages.py, html=False): markdown-it
                output only, never user markup. -->
-          <div class="contact-msg-body" v-html="m.html"></div>
-          <footer>
-            <span v-if="m.admin" class="who">{{ m.admin }}</span>
+          <header>
+            <span class="who">{{ m.admin || 'you' }}</span>
             <a v-if="m.page" class="page" :href="m.page" :title="`sent from ${m.page}`">⌂</a>
             <time>{{ fmtTime(m.t) }}</time>
-          </footer>
+          </header>
+          <div class="contact-msg-body" v-html="m.html"></div>
         </div>
       </div>
       <Composer :token="token" autofocus @send="(md) => emit('send', md)" />
@@ -117,15 +112,10 @@ function fmtTime(t) {
 }
 
 .contact-msg {
-  max-width: 88%;
-  margin: 0.45rem 0;
-  padding: 0.35rem 0.6rem;
-  border-radius: 0.6rem;
-  background: color-mix(var(--muted) 12%, transparent);
+  padding: 0.55rem 0;
 }
-.contact-msg.mine {
-  margin-left: auto;
-  background: color-mix(var(--accent) 16%, transparent);
+.contact-msg + .contact-msg {
+  border-top: 1px solid var(--line);
 }
 .contact-msg-body {
   overflow-wrap: break-word;
@@ -146,22 +136,22 @@ function fmtTime(t) {
   text-decoration: none;
   white-space: nowrap;
 }
-.contact-msg footer {
+.contact-msg header {
   display: flex;
   gap: 0.5rem;
-  justify-content: flex-end;
   align-items: baseline;
   color: var(--muted);
   font-size: 0.75rem;
 }
-.contact-msg footer .who {
+.contact-msg header .who {
   font-weight: 600;
+  color: var(--text, CanvasText);
 }
-.contact-msg footer .page {
+.contact-msg header .page {
   color: var(--muted);
   text-decoration: none;
 }
-.contact-msg footer .page:hover {
+.contact-msg header .page:hover {
   color: var(--accent);
 }
 </style>
diff --git a/frontend/src/MessagesView.vue b/frontend/src/MessagesView.vue
index 4322466..3655932 100644
--- a/frontend/src/MessagesView.vue
+++ b/frontend/src/MessagesView.vue
@@ -87,19 +87,14 @@ function send(md) {
     </aside>
     <section v-if="thread" class="thread">
       <div ref="scroll" class="thread-messages">
-        <div
-          v-for="m in thread.messages"
-          :key="m.id"
-          class="contact-msg"
-          :class="{ mine: m.admin }"
-        >
+        <div v-for="m in thread.messages" :key="m.id" class="contact-msg">
           <!-- Server-rendered strict markdown only (see ContactPanel). -->
-          <div class="contact-msg-body" v-html="m.html"></div>
-          <footer>
-            <span v-if="m.admin" class="who">{{ m.admin }}</span>
+          <header>
+            <span class="who">{{ m.admin || 'visitor' }}</span>
             <a v-if="m.page" class="page" :href="m.page" title="sent from this page">{{ m.page }}</a>
             <time>{{ fmtTime(m.t) }}</time>
-          </footer>
+          </header>
+          <div class="contact-msg-body" v-html="m.html"></div>
         </div>
       </div>
       <Composer placeholder="Reply…" @send="send" />
@@ -189,15 +184,10 @@ function send(md) {
 }
 
 .contact-msg {
-  max-width: 85%;
-  margin: 0.45rem 0;
-  padding: 0.35rem 0.6rem;
-  border-radius: 0.6rem;
-  background: color-mix(var(--muted) 12%, transparent);
+  padding: 0.55rem 0;
 }
-.contact-msg.mine {
-  margin-left: auto;
-  background: color-mix(var(--accent) 16%, transparent);
+.contact-msg + .contact-msg {
+  border-top: 1px solid var(--line);
 }
 .contact-msg-body {
   overflow-wrap: break-word;
@@ -218,24 +208,24 @@ function send(md) {
   text-decoration: none;
   white-space: nowrap;
 }
-.contact-msg footer {
+.contact-msg header {
   display: flex;
   gap: 0.5rem;
-  justify-content: flex-end;
   align-items: baseline;
   color: var(--muted);
   font-size: 0.75rem;
 }
-.contact-msg footer .who {
+.contact-msg header .who {
   font-weight: 600;
+  color: var(--text, CanvasText);
 }
-.contact-msg footer .page {
+.contact-msg header .page {
   color: var(--muted);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.contact-msg footer .page:hover {
+.contact-msg header .page:hover {
   color: var(--accent);
 }