feat(BranchList, branchStore): add branch creation functionality

- Add createBranch method to branchStore for API integration
- Implement "Create New Branch" modal in BranchList component
- Add branch name input with validation and helper text
- Add source branch selector dropdown with current branch indicator
- Add error handling and display for branch creation failures
- Add loading state during branch creation with disabled button
- Add PlusIcon button to branch header for creating new branches
- Add @types/react-syntax-highlighter dependency for type support
- Improve header layout with flex justify-between for button placement

Author: marcuwynu23

apps/frontend/package.json

@@ -29,6 +29,7 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
+    "@types/react-syntax-highlighter": "15.5.13",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",

apps/frontend/src/pages/repo/components/BranchList.tsx

@@ -1,9 +1,12 @@
 import {
   CodeBracketIcon,
   MagnifyingGlassIcon,
+  PlusIcon,
 } from "@heroicons/react/24/outline";
 import React, {useMemo, useState} from "react";
-import {Badge, Button, Modal} from "~/components/ui";
+import {Badge, Button, Input, Modal} from "~/components/ui";
+import {useBranchStore} from "~/stores/branchStore";
+import {useRepoStore} from "~/stores/repoStore";
 
 interface BranchListProps {
   branches: string[];
@@ -20,6 +23,14 @@ export const BranchList: React.FC<BranchListProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [newBranchName, setNewBranchName] = useState("");
+  const [sourceBranch, setSourceBranch] = useState(currentBranch || "");
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  const createBranch = useBranchStore((s) => s.createBranch);
+  const selectedRepo = useRepoStore((s) => s.selectedRepo);
 
   const filteredBranches = useMemo(() => {
     if (!searchQuery) return branches;
@@ -30,13 +41,52 @@ export const BranchList: React.FC<BranchListProps> = ({
 
   const previewBranches = branches.slice(0, previewCount);
 
+  const handleCreateBranch = async () => {
+    if (!newBranchName.trim() || !sourceBranch.trim() || !selectedRepo) return;
+
+    setCreating(true);
+    setCreateError(null);
+
+    try {
+      await createBranch(
+        selectedRepo,
+        newBranchName.trim(),
+        sourceBranch.trim(),
+      );
+      setNewBranchName("");
+      setShowCreateModal(false);
+    } catch (err: unknown) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const e = err as any;
+      const msg =
+        e?.response?.data?.error || e?.message || "Failed to create branch";
+      setCreateError(msg);
+    } finally {
+      setCreating(false);
+    }
+  };
+
   return (
     <div>
-      <div className="flex items-center gap-2 mb-4">
-        <CodeBracketIcon className="w-4 h-4 text-text-tertiary" />
-        <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
-          Branches
-        </h2>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <CodeBracketIcon className="w-4 h-4 text-text-tertiary" />
+          <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
+            Branches
+          </h2>
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            setSourceBranch(currentBranch || branches[0] || "");
+            setShowCreateModal(true);
+          }}
+          className="text-xs"
+        >
+          <PlusIcon className="w-3.5 h-3.5" />
+          New
+        </Button>
       </div>
 
       {branches.length === 0 ? (
@@ -67,6 +117,7 @@ export const BranchList: React.FC<BranchListProps> = ({
         </div>
       )}
 
+      {/* View All Branches Modal */}
       <Modal
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
@@ -108,6 +159,79 @@ export const BranchList: React.FC<BranchListProps> = ({
           </div>
         </div>
       </Modal>
+
+      {/* Create Branch Modal */}
+      <Modal
+        isOpen={showCreateModal}
+        onClose={() => {
+          setShowCreateModal(false);
+          setCreateError(null);
+          setNewBranchName("");
+        }}
+        title="Create New Branch"
+        size="sm"
+        closeOnBackdrop={true}
+        footer={
+          <div className="flex gap-3 w-full sm:w-auto">
+            <Button
+              variant="secondary"
+              onClick={() => {
+                setShowCreateModal(false);
+                setCreateError(null);
+                setNewBranchName("");
+              }}
+              className="flex-1 sm:flex-none"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreateBranch}
+              disabled={creating || !newBranchName.trim()}
+              className="flex-1 sm:flex-none"
+            >
+              {creating ? "Creating..." : "Create Branch"}
+            </Button>
+          </div>
+        }
+      >
+        <div className="space-y-4">
+          {createError && (
+            <div className="bg-error/10 border border-error/20 text-error text-sm p-3 rounded-lg">
+              {createError}
+            </div>
+          )}
+
+          <Input
+            label="Branch Name"
+            placeholder="feature/my-new-branch"
+            value={newBranchName}
+            onChange={(e) => setNewBranchName(e.target.value)}
+            required
+            helperText="Use lowercase with hyphens or slashes."
+          />
+
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1.5">
+              Source Branch
+            </label>
+            <select
+              value={sourceBranch}
+              onChange={(e) => setSourceBranch(e.target.value)}
+              className="w-full h-9 px-3 bg-app-surface border border-app-border rounded text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-app-accent focus:border-app-accent transition-colors"
+            >
+              {branches.map((b) => (
+                <option key={b} value={b}>
+                  {b}
+                  {b === currentBranch ? " (current)" : ""}
+                </option>
+              ))}
+            </select>
+            <p className="text-xs text-text-tertiary mt-1">
+              The new branch will be created from this branch.
+            </p>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };

apps/frontend/src/stores/branchStore.ts

@@ -1,12 +1,17 @@
 import axios from "axios";
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
+import {create} from "zustand";
+import {createJSONStorage, persist} from "zustand/middleware";
 
 interface BranchStore {
   branches: string[];
   currentBranch: string | null;
   setCurrentBranch: (branch: string | null) => void;
   fetchBranches: (repo: string) => Promise<void>;
+  createBranch: (
+    repo: string,
+    newBranch: string,
+    sourceBranch: string,
+  ) => Promise<void>;
 }
 
 const STORAGE_KEY = "branch-store-v1";
@@ -17,16 +22,19 @@ export const useBranchStore = create<BranchStore>()(
       branches: [],
       currentBranch: null,
 
-      setCurrentBranch: (branch) => set({ currentBranch: branch }),
+      setCurrentBranch: (branch) => set({currentBranch: branch}),
 
       fetchBranches: async (repo) => {
         try {
           const repoWithGit = repo.includes(".git") ? repo : `${repo}.git`;
           const res = await axios.get(`/api/repos/${repoWithGit}/branches`);
 
-          const branches: string[] = Array.isArray(res.data?.branches) ? res.data.branches : [];
+          const branches: string[] = Array.isArray(res.data?.branches)
+            ? res.data.branches
+            : [];
 
-          const apiCurrent: string | null = typeof res.data?.current === "string" ? res.data.current : null;
+          const apiCurrent: string | null =
+            typeof res.data?.current === "string" ? res.data.current : null;
 
           // Keep persisted currentBranch if API doesn't provide one (or provides invalid)
           const nextCurrent =
@@ -48,6 +56,19 @@ export const useBranchStore = create<BranchStore>()(
           });
         }
       },
+
+      createBranch: async (repo, newBranch, sourceBranch) => {
+        const repoWithGit = repo.includes(".git") ? repo : `${repo}.git`;
+        await axios.post(
+          `/api/repos/${encodeURIComponent(repoWithGit)}/branches`,
+          {
+            newBranch,
+            sourceBranch,
+          },
+        );
+        // Refresh branches after creation
+        await get().fetchBranches(repo);
+      },
     }),
     {
       name: STORAGE_KEY,