1# webui2
2
3New web interface for git-bug. Built with Vite + React + TypeScript + Tailwind + shadcn/ui.
4
5## Quickstart
6
7You need two processes running:
8
9```bash
10# 1. Go backend (from repo root)
11go run . webui --port 3000
12
13# 2. Vite dev server (from this directory)
14npm install
15npm run dev
16```
17
18Open http://localhost:5173. Vite proxies `/graphql`, `/api`, `/gitfile`, and `/upload` to the Go server on port 3000.
19
20Node 22 is required. If you use asdf, `.tool-versions` pins the right version automatically.
21
22## Code structure
23
24```
25src/
26├── pages/ # One file per route (BugList, BugDetail, NewBug,
27│ # UserProfile, Code, Commit)
28├── components/
29│ ├── bugs/ # Issue components (BugRow, Timeline, CommentBox,
30│ │ # LabelEditor, TitleEditor, LabelBadge, StatusBadge)
31│ ├── code/ # Code browser (FileTree, FileViewer, CommitList,
32│ │ # RefSelector, CodeBreadcrumb)
33│ ├── content/ # Markdown renderer
34│ ├── layout/ # Header + Shell
35│ └── ui/ # shadcn/ui — never edit manually
36│ # Update with: npx shadcn update <component>
37├── graphql/ # .graphql source files — edit these, then run codegen
38├── __generated__/ # Generated typed hooks — do not edit
39└── lib/ # apollo.ts, auth.tsx, theme.tsx, gitApi.ts, utils.ts
40```
41
42## Data flow
43
44**Bug tracking** uses GraphQL (`/graphql`). Queries and mutations are defined in `src/graphql/*.graphql` and codegen produces typed React hooks into `src/__generated__/graphql.ts`. After changing any `.graphql` file, run:
45
46```bash
47npm run codegen
48```
49
50**Code browser** uses REST endpoints at `/api/git/*` implemented in Go (`api/http/git_browse_handler.go`). The TypeScript client is `src/lib/gitApi.ts`.
51
52## Auth
53
54`AuthContext` (`src/lib/auth.tsx`) fetches `repository.userIdentity` on load. If the query returns null the UI enters read-only mode and all write actions are hidden. The context is designed for a future OAuth provider: swap `AuthProvider` for an `OAuthAuthProvider` without touching any other component.
55
56## Theming
57
58`ThemeProvider` (`src/lib/theme.tsx`) toggles the `dark` class on `<html>`. CSS variables for both modes are defined in `src/index.css`. shadcn/ui components pick them up automatically.