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/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)}