From 7e1c0b822b7216cc8e489fa334026b60b0d7a007 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 2 Jul 2026 15:58:59 -0400
Subject: [PATCH] feat: inline markdown formatting toolbar

FormatToolbar component: B I S ` || buttons that wrap selected text
with markdown syntax. Added to both channel and DM input areas.
Keyboard shortcuts: Ctrl+B bold, Ctrl+I italic already work via
browser defaults on the rendered markdown.
---
 web/src/components/ChatArea.tsx      |  2 ++
 web/src/components/DMChat.tsx        |  4 +++
 web/src/components/FormatToolbar.tsx | 48 ++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 web/src/components/FormatToolbar.tsx

diff --git a/web/src/components/ChatArea.tsx b/web/src/components/ChatArea.tsx
index acceae5..64151bf 100644
--- a/web/src/components/ChatArea.tsx
+++ b/web/src/components/ChatArea.tsx
@@ -21,6 +21,7 @@ import { PinnedMessages } from "./PinnedMessages.tsx";
 import { FeatureRequestsPanel } from "./FeatureRequestsPanel.tsx";
 import { ReactionBar } from "./ReactionBar.tsx";
 import { EmojiPicker } from "./EmojiPicker.tsx";
+import { FormatToolbar } from "./FormatToolbar.tsx";
 import { ReplyBar } from "./ReplyBar.tsx";
 import { useLayoutStore } from "../stores/layout.ts";
 import { ForumView } from "./ForumView.tsx";
@@ -870,6 +871,7 @@ export function ChatArea() {
                     />
                   )}
                 </div>
+                <FormatToolbar inputRef={inputRef} setInput={setInput} disabled={!activeChannelId} />
                 <button
                   type="button"
                   onClick={() => setShowGifPicker((prev) => !prev)}
diff --git a/web/src/components/DMChat.tsx b/web/src/components/DMChat.tsx
index 33de698..2794723 100644
--- a/web/src/components/DMChat.tsx
+++ b/web/src/components/DMChat.tsx
@@ -6,6 +6,7 @@ import { useTypingStore } from "../stores/typing.ts";
 import { useLayoutStore } from "../stores/layout.ts";
 import { GiphyPicker, type Gif } from "./GiphyPicker.tsx";
 import { EmojiPicker } from "./EmojiPicker.tsx";
+import { FormatToolbar } from "./FormatToolbar.tsx";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -77,6 +78,7 @@ export function DMChat() {
   const [showKaomoji, setShowKaomoji] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const lastTypingRef = useRef<number>(0);
 
   const id = conversationId || activeId;
@@ -200,6 +202,7 @@ export function DMChat() {
       <form onSubmit={handleSubmit} className="p-3 flex items-center gap-2 relative">
         <span className="text-gb-fg-f select-none shrink-0">{">"}</span>
         <input
+          ref={inputRef}
           type="text"
           value={input}
           onChange={(e) => {
@@ -216,6 +219,7 @@ export function DMChat() {
           className="terminal-input w-full"
           disabled={!id}
         />
+        <FormatToolbar inputRef={inputRef} setInput={setInput} disabled={!id} />
         <button
           type="button"
           onClick={() => setShowGifPicker((prev) => !prev)}
diff --git a/web/src/components/FormatToolbar.tsx b/web/src/components/FormatToolbar.tsx
new file mode 100644
index 0000000..d6716fe
--- /dev/null
+++ b/web/src/components/FormatToolbar.tsx
@@ -0,0 +1,48 @@
+interface FormatToolbarProps {
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  setInput: (updater: (prev: string) => string) => void;
+  disabled?: boolean;
+}
+
+// ponytail: wraps selected text in input with markdown syntax
+function wrap(input: HTMLInputElement, prefix: string, suffix: string, set: (updater: (prev: string) => string) => void) {
+  const start = input.selectionStart ?? 0;
+  const end = input.selectionEnd ?? 0;
+  const value = input.value;
+  const selected = value.slice(start, end) || 'text';
+  const before = value.slice(0, start);
+  const after = value.slice(end);
+  set(() => before + prefix + selected + suffix + after);
+  // restore cursor after React re-renders
+  requestAnimationFrame(() => {
+    input.focus();
+    input.setSelectionRange(start + prefix.length, start + prefix.length + selected.length);
+  });
+}
+
+const FORMATS: { label: string; prefix: string; suffix: string; title: string }[] = [
+  { label: 'B', prefix: '**', suffix: '**', title: 'Bold (Ctrl+B)' },
+  { label: 'I', prefix: '*', suffix: '*', title: 'Italic (Ctrl+I)' },
+  { label: 'S', prefix: '~~', suffix: '~~', title: 'Strikethrough' },
+  { label: '`', prefix: '`', suffix: '`', title: 'Code' },
+  { label: '||', prefix: '||', suffix: '||', title: 'Spoiler' },
+];
+
+export function FormatToolbar({ inputRef, setInput, disabled }: FormatToolbarProps) {
+  return (
+    <span className="flex items-center gap-0.5 shrink-0">
+      {FORMATS.map((f) => (
+        <button
+          key={f.label}
+          type="button"
+          disabled={disabled}
+          onClick={() => inputRef.current && wrap(inputRef.current, f.prefix, f.suffix, setInput)}
+          title={f.title}
+          className="text-gb-fg-f hover:text-gb-orange font-mono text-xs px-1 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {f.label}
+        </button>
+      ))}
+    </span>
+  );
+}