From 285baa23a8c5340ad41b802becc5c602efbd0a8f Mon Sep 17 00:00:00 2001
From: dmitry-kostin <wooky@iwooky.me>
Date: Sat, 21 Feb 2026 03:19:15 +0100
Subject: [PATCH] Add auto-growing prompt textarea, placeholder, UI
 screenshots, and Obsidian filename suffix

- Summarize prompt textarea auto-grows with content and uses placeholder instead of default text
- Add overflow:hidden to prevent scrollbar flash during resize
- Add UI section to README with centered, uniform-width screenshots
- Append (Transcript)/(Summary) suffix to Obsidian export filenames

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 README.md            | 12 ++++++++++++
 app/static/app.js    | 14 ++++++++++++--
 app/static/style.css |  1 +
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 505e2f2..33acc76 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,18 @@
 **Storage**
 - **Markdown files** — plain `.md` with YAML frontmatter, no database
 
+## UI
+
+<p align="center">
+  <strong>AI summarization prompt</strong><br><br>
+  <img width="670" alt="AI summarization prompt" src="https://github.com/user-attachments/assets/21e0d473-9d9e-4ee9-83d9-af0f916eb555" />
+</p>
+
+<p align="center">
+  <strong>Obsidian vault connection</strong><br><br>
+  <img width="670" alt="Obsidian vault connection" src="https://github.com/user-attachments/assets/ddac3de0-5880-40c6-b5d2-2ce985a83593" />
+</p>
+
 ## Tech Stack
 
 - Python 3.11+, FastAPI, uvicorn
diff --git a/app/static/app.js b/app/static/app.js
index 9e14b55..ea559a3 100644
--- a/app/static/app.js
+++ b/app/static/app.js
@@ -644,7 +644,8 @@ async function exportToObsidian(id) {
   await navigator.clipboard.writeText(result.markdown);
 
   const subfolder = localStorage.getItem("tm_obsidian_subfolder") || "";
-  const filename = (result.title || "Untitled").replace(/[\\/:*?"<>|]/g, "-").trim();
+  const suffix = result.isSummary ? " (Summary)" : " (Transcript)";
+  const filename = ((result.title || "Untitled") + suffix).replace(/[\\/:*?"<>|]/g, "-").trim();
   const filePath = subfolder ? `${subfolder}/${filename}` : filename;
 
   const uri = `obsidian://new?vault=${encodeURIComponent(vault)}&file=${encodeURIComponent(filePath)}&clipboard&overwrite`;
@@ -1077,7 +1078,7 @@ function addPromptUI(id, card) {
   prompt.addEventListener("click", (e) => e.stopPropagation());
   prompt.innerHTML = `
     <div class="summarize-bar">
-      <textarea class="summarize-input" rows="2">${localStorage.getItem("tm_summarize_prompt") || "Summarize this transcript concisely, highlighting key points and main topics discussed."}</textarea>
+      <textarea class="summarize-input" rows="2" placeholder="Summarize this transcript concisely, highlighting key points and main topics discussed.">${localStorage.getItem("tm_summarize_prompt") || ""}</textarea>
       <div class="summarize-bar-actions">
         <button class="summarize-generate-btn" onclick="generateSummary('${id}')">
           <span>Generate</span>
@@ -1096,6 +1097,15 @@ function addPromptUI(id, card) {
     const content = card.querySelector(".card-content");
     content.after(prompt);
   }
+
+  // Auto-grow textarea to fit content
+  const textarea = prompt.querySelector(".summarize-input");
+  const autoGrow = () => {
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + "px";
+  };
+  textarea.addEventListener("input", autoGrow);
+  autoGrow();
 }
 
 async function generateSummary(id) {
diff --git a/app/static/style.css b/app/static/style.css
index 66a49de..b44b5b8 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -1002,6 +1002,7 @@ button:active:not(:disabled) {
   border: none;
   outline: none;
   resize: none;
+  overflow: hidden;
 }
 
 .summarize-input::placeholder {