v0.3.1 — view-panel tabs, tray + notifications, server-activity, media preview, dockable locks

- Tabbed view panel: File Viewer / File Tree / File Locks, header hidden at one tab, re-openable from Window, state persisted
- Right-click Workspace/Working-folder zones -> Show in File Tree (focuses the right side)
- Commit weight shown in History (p4 sizes -s //...@=CH)
- Rich code editor (highlighted underlay + gutter) and clean spec-editor surfaces (no more grey notepad)
- System tray (close-to-tray, tray menu Quit) + native OS notifications for teammate submits, even when hidden
- 'You're behind the server' banner + native notification (p4 sync -n), rechecked only when the server advances
- Audio & video preview with playback (media-src blob CSP); File Locks dockable into the view panel
- Backend: depot_ls/fs_ls, p4_change_sizes, p4_behind; tauri-plugin-notification + tray-icon

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/CodeView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import hljs from "highlight.js/lib/core";
 import cpp from "highlight.js/lib/languages/cpp";
 import csharp from "highlight.js/lib/languages/csharp";
@@ -104,32 +104,53 @@ export default function CodeView({ file, onFlash }: { file: OpenedFile; onFlash?
     try { return lang ? hljs.highlight(code, { language: lang, ignoreIllegals: true }).value : esc(code); }
     catch { return esc(code); }
   }, [code, lang]);
+  // live-highlighted draft for the editor underlay (same highlighter as the preview)
+  const draftHi = useMemo(() => {
+    try { return lang ? hljs.highlight(draft, { language: lang, ignoreIllegals: true }).value : esc(draft); }
+    catch { return esc(draft); }
+  }, [draft, lang]);
+  const preRef = useRef<HTMLPreElement>(null);
+  const gutRef = useRef<HTMLDivElement>(null);
+  const draftRows = draft.split("\n").length;
 
-  // editing mode — plain textarea over the working copy
+  // editing mode — a real code editor: transparent textarea over a syntax-
+  // highlighted underlay, with a line-number gutter (looks like the preview).
   if (editing) {
+    const syncScroll = (e: { currentTarget: HTMLTextAreaElement }) => {
+      const ta = e.currentTarget;
+      if (preRef.current) { preRef.current.scrollTop = ta.scrollTop; preRef.current.scrollLeft = ta.scrollLeft; }
+      if (gutRef.current) gutRef.current.scrollTop = ta.scrollTop;
+    };
     return (
       <div className="right-body">
         <div className="codebar">
           <span className="cb-badge editing">{t("Editing")}</span>
           <span className="cb-name">{name}</span>
+          {lang ? <span className="cb-lines">{LANG_LABEL[lang]}</span> : null}
           <span className="ce-actions">
             <button className="ce-btn" onClick={cancelEdit} disabled={saving}>{t("Cancel")}</button>
             <button className="ce-btn save" onClick={save} disabled={saving || draft === code}>{saving ? <span className="ldr sm" /> : null}{t("Save")}</button>
           </span>
         </div>
-        <textarea className="code-edit" value={draft} spellCheck={false} onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") cancelEdit();
-            if (e.key === "s" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); if (draft !== code) save(); }
-            // Tab inserts a tab instead of leaving the field
-            if (e.key === "Tab") {
-              e.preventDefault();
-              const ta = e.currentTarget; const s = ta.selectionStart, en = ta.selectionEnd;
-              const nv = draft.slice(0, s) + "\t" + draft.slice(en);
-              setDraft(nv);
-              requestAnimationFrame(() => { ta.selectionStart = ta.selectionEnd = s + 1; });
-            }
-          }} />
+        <div className="code editing">
+          <div className="code-gutter" ref={gutRef}>{Array.from({ length: draftRows }, (_, i) => <span key={i}>{i + 1}</span>)}</div>
+          <div className="ce-wrap">
+            <pre className="ce-under" aria-hidden="true" ref={preRef}><code className="hljs" dangerouslySetInnerHTML={{ __html: draftHi + (draft.endsWith("\n") ? " " : "") }} /></pre>
+            <textarea className="ce-ta" value={draft} spellCheck={false} autoFocus onScroll={syncScroll} onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") cancelEdit();
+                if (e.key === "s" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); if (draft !== code) save(); }
+                // Tab inserts a tab instead of leaving the field
+                if (e.key === "Tab") {
+                  e.preventDefault();
+                  const ta = e.currentTarget; const s = ta.selectionStart, en = ta.selectionEnd;
+                  const nv = draft.slice(0, s) + "\t" + draft.slice(en);
+                  setDraft(nv);
+                  requestAnimationFrame(() => { ta.selectionStart = ta.selectionEnd = s + 1; });
+                }
+              }} />
+          </div>
+        </div>
       </div>
     );
   }