From b2418a50d35090b5aa6d2484dcd4c287d673d0ea Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Mon, 19 Jan 2026 10:29:59 +0100
Subject: [PATCH] feat: Improve quote format with guillemets and styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed quote format to: @[Username]: »quoted text«
- Added processQuotes() to detect and style »text« patterns
- Quote styling: italic, gray background, left border
- Different styling for own messages vs others

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css       | 16 ++++++++++++++++
 app/static/js/app.js           |  2 +-
 app/static/js/message-utils.js | 19 ++++++++++++++++++-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index d590fcb..13d3baa 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -511,6 +511,22 @@ main {
     background-color: #084298;
 }
 
+/* Quoted Text (»text«) */
+.quote-text {
+    font-style: italic;
+    color: #6c757d;
+    background-color: rgba(108, 117, 125, 0.1);
+    padding: 0.1rem 0.3rem;
+    border-radius: 0.25rem;
+    border-left: 2px solid #6c757d;
+}
+
+.message.own .quote-text {
+    color: #495057;
+    background-color: rgba(8, 66, 152, 0.1);
+    border-left-color: #084298;
+}
+
 /* Clickable Links in Messages */
 .message-link {
     color: #0d6efd;
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 8a3effc..90f29b5 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -782,7 +782,7 @@ function quoteTo(username, content) {
         quotedText = truncated + '...';
     }
 
-    input.value = `@[${username}] "${quotedText}" `;
+    input.value = `@[${username}]: »${quotedText}« `;
     updateCharCounter();
     input.focus();
 }
diff --git a/app/static/js/message-utils.js b/app/static/js/message-utils.js
index a4fc099..337c1fb 100644
--- a/app/static/js/message-utils.js
+++ b/app/static/js/message-utils.js
@@ -18,7 +18,10 @@ function processMessageContent(content) {
     // 1. Convert @[Username] mentions to badges
     processed = processMentions(processed);
 
-    // 2. Convert URLs to links (and images to thumbnails)
+    // 2. Convert »quoted text« to styled quotes
+    processed = processQuotes(processed);
+
+    // 3. Convert URLs to links (and images to thumbnails)
     processed = processUrls(processed);
 
     return processed;
@@ -40,6 +43,20 @@ function processMentions(text) {
     });
 }
 
+/**
+ * Convert »quoted text« to styled quote blocks
+ * @param {string} text - HTML-escaped text
+ * @returns {string} - Text with styled quotes
+ */
+function processQuotes(text) {
+    // Match »...« pattern (guillemets)
+    const quotePattern = /»([^«]+)«/g;
+
+    return text.replace(quotePattern, (_match, quoted) => {
+        return `<span class="quote-text">»${quoted}«</span>`;
+    });
+}
+
 /**
  * Convert URLs to clickable links and images to thumbnails
  * @param {string} text - HTML-escaped text