Fix keyboard shortcut support and address code review feedback

- Add editBranchPrefixCommand in note_tree.ts to support F2 keyboard shortcut with multi-selection
- Extract CSS to separate branch_prefix.css file
- Remove hard-coded color, use CSS class instead
- Fix translation key usage to keep t() calls visible in IDE
- Remove all inline styles

Co-authored-by: eliandoran <21236836+eliandoran@users.noreply.github.com>

apps/client/src/widgets/dialogs/branch_prefix.css

@@ -0,0 +1,13 @@
+.branch-prefix-dialog .branch-prefix-notes-list {
+    margin-top: 10px;
+}
+
+.branch-prefix-dialog .branch-prefix-notes-list ul {
+    max-height: 200px;
+    overflow: auto;
+    margin-top: 5px;
+}
+
+.branch-prefix-dialog .branch-prefix-current {
+    opacity: 0.6;
+}

apps/client/src/widgets/dialogs/branch_prefix.tsx

@@ -11,6 +11,7 @@ import FormGroup from "../react/FormGroup.js";
 import { useTriliumEvent } from "../react/hooks.jsx";
 import FBranch from "../../entities/fbranch.js";
 import type { ContextMenuCommandData } from "../../components/app_context.js";
+import "./branch_prefix.css";
 
 // Virtual branches (e.g., from search results) start with this prefix
 const VIRTUAL_BRANCH_PREFIX = "virt-";
@@ -84,12 +85,11 @@ export default function BranchPrefixDialog() {
     }
 
     const isSingleBranch = branches.length === 1;
-    const titleKey = isSingleBranch ? "branch_prefix.edit_branch_prefix" : "branch_prefix.edit_branch_prefix_multiple";
 
     return (
         <Modal
             className="branch-prefix-dialog"
-            title={t(titleKey, { count: branches.length })}
+            title={isSingleBranch ? t("branch_prefix.edit_branch_prefix") : t("branch_prefix.edit_branch_prefix_multiple", { count: branches.length })}
             size="lg"
             onShown={() => branchInput.current?.focus()}
             onHidden={() => setShown(false)}
@@ -108,14 +108,14 @@ export default function BranchPrefixDialog() {
                 </div>
             </FormGroup>
             {!isSingleBranch && (
-                <div className="branch-prefix-notes-list" style={{ marginTop: "10px" }}>
+                <div className="branch-prefix-notes-list">
                     <strong>{t("branch_prefix.affected_branches", { count: branches.length })}</strong>
-                    <ul style={{ maxHeight: "200px", overflow: "auto", marginTop: "5px" }}>
+                    <ul>
                         {branches.map((branch) => {
                             const note = branch.getNoteFromCache();
                             return (
                                 <li key={branch.branchId}>
-                                    {branch.prefix && <span style={{ color: "#888" }}>{branch.prefix} - </span>}
+                                    {branch.prefix && <span className="branch-prefix-current">{branch.prefix} - </span>}
                                     {note.title}
                                 </li>
                             );

apps/client/src/widgets/note_tree.ts

@@ -1591,6 +1591,20 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         this.clearSelectedNodes();
     }
 
+    async editBranchPrefixCommand({ node }: CommandListenerData<"editBranchPrefix">) {
+        const branchIds = this.getSelectedOrActiveBranchIds(node).filter((branchId) => !branchId.startsWith("virt-"));
+
+        if (!branchIds.length) {
+            return;
+        }
+
+        // Trigger the event with the selected branch IDs
+        appContext.triggerEvent("editBranchPrefix", {
+            selectedOrActiveBranchIds: branchIds,
+            node: node
+        });
+    }
+
     canBeMovedUpOrDown(node: Fancytree.FancytreeNode) {
         if (node.data.noteId === "root") {
             return false;