New desktop UI

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

• New Features

  • Redesigned main interface with top navigation bar, sidebar navigation, and main content area
  • Added window control buttons for minimize, maximize, and close operations
  • Implemented platform-aware UI adjustments for optimal system compatibility

• Documentation

  • Added comprehensive coding standards and design guidelines

• Chores

  • Updated dependencies and build configuration for enhanced interprocess communication architecture_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Introduces tRPC infrastructure for the desktop app with main and window routers, IPC integration via trpc-electron, renderer-side TRPC client setup with React Query, new UI layout components (TopBar, Sidebar, CenterView), and dependencies. Updates build configuration for preload script bundling and initializes IPC handler in the main process.

Changes

Cohort / File(s)	Summary
tRPC Core Infrastructure apps/desktop/src/lib/trpc/index.ts, apps/desktop/src/lib/trpc/routers/index.ts, apps/desktop/src/lib/trpc/routers/window.ts	Establishes tRPC server configuration with superjson transformer, exports router and publicProcedure builders. Implements createAppRouter composing main router with window router providing minimize/maximize/close mutations and platform/isMaximized queries.
tRPC Client & Provider apps/desktop/src/renderer/lib/trpc.ts, apps/desktop/src/renderer/contexts/TRPCProvider.tsx, apps/desktop/src/renderer/contexts/index.ts	Creates TRPC React client with ipcLink transport and QueryClient singleton. Exports TRPCProvider wrapping TRPC's Provider with React Query's QueryClientProvider.
Build & Dependencies apps/desktop/electron.vite.config.ts, apps/desktop/package.json	Adds @trpc/*, @tanstack/react-query, superjson, and trpc-electron runtime dependencies. Updates electron.vite.config.ts with revised devPath computation, preload plugin with trpc-electron exclusion, and Rollup input configuration.
Process Integration apps/desktop/src/main/windows/main.ts, apps/desktop/src/preload/index.ts	Initializes createIPCHandler with createAppRouter in main process. Exposes electron-trpc IPC channel via exposeElectronTRPC in preload script.
UI Layout Components apps/desktop/src/renderer/screens/main/MainScreen.tsx, apps/desktop/src/renderer/screens/main/components/TopBar/..., apps/desktop/src/renderer/screens/main/components/Sidebar/..., apps/desktop/src/renderer/screens/main/components/CenterView/...	Restructures MainScreen with TopBar (platform-aware title and window controls), Sidebar (navigation items), and CenterView (scrollable content area). TopBar queries platform via TRPC and conditionally renders WindowControls on non-macOS.
Context & Documentation apps/desktop/src/renderer/contexts/AppProviders.tsx, apps/desktop/CLAUDE.md	Wraps AppProviders children with TRPCProvider. Updates CLAUDE.md with comprehensive coding standards and design guidelines.

Sequence Diagram(s)

sequenceDiagram
    participant Renderer as Renderer Process
    participant IPC as IPC Channel
    participant Main as Main Process
    participant Window as BrowserWindow

    Renderer->>Renderer: Create TRPC client with ipcLink
    Renderer->>Renderer: useQuery/useMutation hooks
    
    Renderer->>IPC: tRPC call (e.g., minimize)
    IPC->>Main: IPC message
    Main->>Main: Router handler resolves mutation
    Main->>Window: window.minimize()
    Window-->>Main: { success: true }
    Main->>IPC: Response
    IPC-->>Renderer: Result
    Renderer->>Renderer: Update UI / state

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• electron.vite.config.ts: Verify devPath computation logic and preload plugin configuration with trpc-electron exclusion list
• TRPCProvider ipcLink setup: Confirm correct transport configuration and QueryClient singleton management
• Window router procedures: Review mutation and query implementations for proper BrowserWindow interaction
• IPC handler initialization: Ensure createIPCHandler is called with correct router and windows array
• Build output paths: Verify new subdirectory structure (main/, preload/) doesn't break runtime resolution

Possibly related PRs

• refactor hooks #86: Modifies AppProviders.tsx to implement multiple context provider composition, overlapping with TRPC provider wrapping.
• refactor 1 #69: Updates MainScreen.tsx layout structure similarly by introducing new component arrangement.
• new desktop #101: Related desktop app infrastructure changes involving IPC and tRPC wiring patterns.

Poem

🐰 A rabbit hops through IPC streams,
With tRPC handling windowed dreams,
Preload scripts whisper, routers spin,
Main and Renderer now sync within,
Queries, mutations, smooth and bright—
The little lagomorph sets it right! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch new-desktop-ui

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6c3228f and 5c0f0fa.

📒 Files selected for processing (20)

• apps/desktop/CLAUDE.md (1 hunks)
• apps/desktop/electron.vite.config.ts (3 hunks)
• apps/desktop/package.json (2 hunks)
• apps/desktop/src/lib/trpc/index.ts (1 hunks)
• apps/desktop/src/lib/trpc/routers/index.ts (1 hunks)
• apps/desktop/src/lib/trpc/routers/window.ts (1 hunks)
• apps/desktop/src/main/windows/main.ts (2 hunks)
• apps/desktop/src/preload/index.ts (2 hunks)
• apps/desktop/src/renderer/contexts/AppProviders.tsx (1 hunks)
• apps/desktop/src/renderer/contexts/TRPCProvider.tsx (1 hunks)
• apps/desktop/src/renderer/contexts/index.ts (1 hunks)
• apps/desktop/src/renderer/lib/trpc.ts (1 hunks)
• apps/desktop/src/renderer/screens/main/MainScreen.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/CenterView/CenterView.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/CenterView/index.ts (1 hunks)
• apps/desktop/src/renderer/screens/main/components/Sidebar/Sidebar.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/Sidebar/index.ts (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/TopBar.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WindowControls.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/index.ts (1 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}