From cc2ac3542dbe20c9dc8f6761b7fbb21452e9f546 Mon Sep 17 00:00:00 2001 From: Cody Seibert Date: Mon, 15 Dec 2025 22:17:32 -0500 Subject: [PATCH 1/3] refactor: convert settings page to separate view panels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace scroll-based navigation with view switching - Add useSettingsView hook for managing active panel state - Extract Audio section into its own component - Remove scroll-mt-6 classes and IDs from section components - Update navigation config to reflect current sections - Create barrel export for settings-view hooks This improves performance by only rendering the active section instead of all sections in a single scrollable container. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../src/components/views/settings-view.tsx | 186 +++++++----------- .../api-keys/api-keys-section.tsx | 3 +- .../appearance/appearance-section.tsx | 3 +- .../settings-view/audio/audio-section.tsx | 64 ++++++ .../cli-status/claude-cli-status.tsx | 3 +- .../views/settings-view/config/navigation.ts | 4 +- .../danger-zone/danger-zone-section.tsx | 3 +- .../feature-defaults-section.tsx | 3 +- .../views/settings-view/hooks/index.ts | 2 + .../settings-view/hooks/use-settings-view.ts | 29 +++ .../keyboard-shortcuts-section.tsx | 3 +- 11 files changed, 176 insertions(+), 127 deletions(-) create mode 100644 apps/app/src/components/views/settings-view/audio/audio-section.tsx create mode 100644 apps/app/src/components/views/settings-view/hooks/index.ts create mode 100644 apps/app/src/components/views/settings-view/hooks/use-settings-view.ts diff --git a/apps/app/src/components/views/settings-view.tsx b/apps/app/src/components/views/settings-view.tsx index 181b2ae9..9f290257 100644 --- a/apps/app/src/components/views/settings-view.tsx +++ b/apps/app/src/components/views/settings-view.tsx @@ -2,7 +2,6 @@ import { useState } from "react"; import { useAppStore } from "@/store/app-store"; -import { Label } from "@/components/ui/label"; import { Key, Palette, @@ -11,12 +10,13 @@ import { Trash2, Settings2, Volume2, - VolumeX, } from "lucide-react"; -import { Checkbox } from "@/components/ui/checkbox"; -import { useCliStatus } from "./settings-view/hooks/use-cli-status"; -import { useScrollTracking } from "@/hooks/use-scroll-tracking"; +import { + useCliStatus, + useSettingsView, + type SettingsViewId, +} from "./settings-view/hooks"; import { SettingsHeader } from "./settings-view/components/settings-header"; import { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialog"; import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog"; @@ -24,6 +24,7 @@ import { SettingsNavigation } from "./settings-view/components/settings-navigati import { ApiKeysSection } from "./settings-view/api-keys/api-keys-section"; import { ClaudeCliStatus } from "./settings-view/cli-status/claude-cli-status"; import { AppearanceSection } from "./settings-view/appearance/appearance-section"; +import { AudioSection } from "./settings-view/audio/audio-section"; import { KeyboardShortcutsSection } from "./settings-view/keyboard-shortcuts/keyboard-shortcuts-section"; import { FeatureDefaultsSection } from "./settings-view/feature-defaults/feature-defaults-section"; import { DangerZoneSection } from "./settings-view/danger-zone/danger-zone-section"; @@ -91,23 +92,72 @@ export function SettingsView() { }; // Use CLI status hook - const { - claudeCliStatus, - isCheckingClaudeCli, - handleRefreshClaudeCli, - } = useCliStatus(); + const { claudeCliStatus, isCheckingClaudeCli, handleRefreshClaudeCli } = + useCliStatus(); - // Use scroll tracking hook - const { activeSection, scrollToSection, scrollContainerRef } = - useScrollTracking({ - items: NAV_ITEMS, - filterFn: (item) => item.id !== "danger" || !!currentProject, - initialSection: "api-keys", - }); + // Use settings view navigation hook + const { activeView, navigateTo } = useSettingsView(); const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showKeyboardMapDialog, setShowKeyboardMapDialog] = useState(false); + // Render the active section based on current view + const renderActiveSection = () => { + switch (activeView) { + case "api-keys": + return ; + case "claude": + return ( + + ); + case "appearance": + return ( + + ); + case "keyboard": + return ( + setShowKeyboardMapDialog(true)} + /> + ); + case "audio": + return ( + + ); + case "defaults": + return ( + + ); + case "danger": + return ( + setShowDeleteDialog(true)} + /> + ); + default: + return ; + } + }; + return (
- {/* Sticky Side Navigation */} + {/* Side Navigation - No longer scrolls, just switches views */} navigateTo(id as SettingsViewId)} /> - {/* Scrollable Content */} -
-
- {/* API Keys Section */} - - - {/* Claude CLI Status Section */} - {claudeCliStatus && ( - - )} - - {/* Appearance Section */} - - - - {/* Keyboard Shortcuts Section */} - setShowKeyboardMapDialog(true)} - /> - - {/* Audio Section */} -
-
-
-
- -
-

- Audio -

-
-

- Configure audio and notification settings. -

-
-
- {/* Mute Done Sound Setting */} -
- - setMuteDoneSound(checked === true) - } - className="mt-1" - data-testid="mute-done-sound-checkbox" - /> -
- -

- When enabled, disables the "ding" sound that - plays when an agent completes a feature. The feature - will still move to the completed column, but without - audio notification. -

-
-
-
-
- - {/* Feature Defaults Section */} - - - {/* Danger Zone Section - Only show when a project is selected */} - setShowDeleteDialog(true)} - /> -
+ {/* Content Panel - Shows only the active section */} +
+
{renderActiveSection()}
diff --git a/apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx b/apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx index 527cbf22..874911a2 100644 --- a/apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx +++ b/apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx @@ -58,9 +58,8 @@ export function ApiKeysSection() { return (
void; +} + +export function AudioSection({ + muteDoneSound, + onMuteDoneSoundChange, +}: AudioSectionProps) { + return ( +
+
+
+
+ +
+

+ Audio +

+
+

+ Configure audio and notification settings. +

+
+
+
+ onMuteDoneSoundChange(checked === true)} + className="mt-1" + data-testid="mute-done-sound-checkbox" + /> +
+ +

+ When enabled, disables the "ding" sound that plays when + an agent completes a feature. The feature will still move to the + completed column, but without audio notification. +

+
+
+
+
+ ); +} diff --git a/apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx b/apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx index e0283130..8df5b836 100644 --- a/apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx +++ b/apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx @@ -23,9 +23,8 @@ export function ClaudeCliStatus({ return (
(initialView); + + const navigateTo = useCallback((viewId: SettingsViewId) => { + setActiveView(viewId); + }, []); + + return { + activeView, + navigateTo, + }; +} diff --git a/apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx b/apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx index a62bd3ac..10c25bc6 100644 --- a/apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx +++ b/apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx @@ -11,9 +11,8 @@ export function KeyboardShortcutsSection({ }: KeyboardShortcutsSectionProps) { return (
Date: Mon, 15 Dec 2025 23:11:12 -0500 Subject: [PATCH 2/3] fix: address PR review comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove redundant case 'api-keys' from switch (handled by default) - Improve type safety by using SettingsViewId in NavigationItem interface - Simplify onCheckedChange callback in AudioSection - Import NAV_ITEMS from config instead of duplicating locally - Update SettingsNavigation props to use SettingsViewId type 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../src/components/views/settings-view.tsx | 31 ++----------------- .../settings-view/audio/audio-section.tsx | 2 +- .../components/settings-navigation.tsx | 5 +-- .../views/settings-view/config/navigation.ts | 3 +- 4 files changed, 9 insertions(+), 32 deletions(-) diff --git a/apps/app/src/components/views/settings-view.tsx b/apps/app/src/components/views/settings-view.tsx index 9f290257..e499d85d 100644 --- a/apps/app/src/components/views/settings-view.tsx +++ b/apps/app/src/components/views/settings-view.tsx @@ -2,21 +2,9 @@ import { useState } from "react"; import { useAppStore } from "@/store/app-store"; -import { - Key, - Palette, - Terminal, - FlaskConical, - Trash2, - Settings2, - Volume2, -} from "lucide-react"; -import { - useCliStatus, - useSettingsView, - type SettingsViewId, -} from "./settings-view/hooks"; +import { useCliStatus, useSettingsView } from "./settings-view/hooks"; +import { NAV_ITEMS } from "./settings-view/config/navigation"; import { SettingsHeader } from "./settings-view/components/settings-header"; import { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialog"; import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog"; @@ -34,17 +22,6 @@ import type { } from "./settings-view/shared/types"; import type { Project as ElectronProject } from "@/lib/electron"; -// Navigation items for the side panel -const NAV_ITEMS = [ - { id: "api-keys", label: "API Keys", icon: Key }, - { id: "claude", label: "Claude", icon: Terminal }, - { id: "appearance", label: "Appearance", icon: Palette }, - { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 }, - { id: "audio", label: "Audio", icon: Volume2 }, - { id: "defaults", label: "Feature Defaults", icon: FlaskConical }, - { id: "danger", label: "Danger Zone", icon: Trash2 }, -]; - export function SettingsView() { const { theme, @@ -104,8 +81,6 @@ export function SettingsView() { // Render the active section based on current view const renderActiveSection = () => { switch (activeView) { - case "api-keys": - return ; case "claude": return ( navigateTo(id as SettingsViewId)} + onNavigate={navigateTo} /> {/* Content Panel - Shows only the active section */} diff --git a/apps/app/src/components/views/settings-view/audio/audio-section.tsx b/apps/app/src/components/views/settings-view/audio/audio-section.tsx index aa0a1e24..688da5e4 100644 --- a/apps/app/src/components/views/settings-view/audio/audio-section.tsx +++ b/apps/app/src/components/views/settings-view/audio/audio-section.tsx @@ -39,7 +39,7 @@ export function AudioSection({ onMuteDoneSoundChange(checked === true)} + onCheckedChange={onMuteDoneSoundChange} className="mt-1" data-testid="mute-done-sound-checkbox" /> diff --git a/apps/app/src/components/views/settings-view/components/settings-navigation.tsx b/apps/app/src/components/views/settings-view/components/settings-navigation.tsx index d847860a..940441da 100644 --- a/apps/app/src/components/views/settings-view/components/settings-navigation.tsx +++ b/apps/app/src/components/views/settings-view/components/settings-navigation.tsx @@ -1,12 +1,13 @@ import { cn } from "@/lib/utils"; import type { Project } from "@/lib/electron"; import type { NavigationItem } from "../config/navigation"; +import type { SettingsViewId } from "../hooks/use-settings-view"; interface SettingsNavigationProps { navItems: NavigationItem[]; - activeSection: string; + activeSection: SettingsViewId; currentProject: Project | null; - onNavigate: (sectionId: string) => void; + onNavigate: (sectionId: SettingsViewId) => void; } export function SettingsNavigation({ diff --git a/apps/app/src/components/views/settings-view/config/navigation.ts b/apps/app/src/components/views/settings-view/config/navigation.ts index a1e5f8b7..f907d99a 100644 --- a/apps/app/src/components/views/settings-view/config/navigation.ts +++ b/apps/app/src/components/views/settings-view/config/navigation.ts @@ -8,9 +8,10 @@ import { FlaskConical, Trash2, } from "lucide-react"; +import type { SettingsViewId } from "../hooks/use-settings-view"; export interface NavigationItem { - id: string; + id: SettingsViewId; label: string; icon: LucideIcon; } From cbdc88c5d0f1f2e77283d4005998d1ce5cc48aed Mon Sep 17 00:00:00 2001 From: Cody Seibert Date: Mon, 15 Dec 2025 23:16:04 -0500 Subject: [PATCH 3/3] docs: add comprehensive Git workflow guide for branching, committing, and creating pull requests - Introduced a new document detailing the standard workflow for Git operations including branch creation, staging, committing, pushing, and PR creation. - Included best practices, troubleshooting tips, and quick reference commands to enhance user understanding and efficiency in using Git. - Emphasized the importance of clear commit messages and branch naming conventions. --- docs/checkout-branch-pr.md | 237 +++++++++++++++++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 docs/checkout-branch-pr.md diff --git a/docs/checkout-branch-pr.md b/docs/checkout-branch-pr.md new file mode 100644 index 00000000..ff86d324 --- /dev/null +++ b/docs/checkout-branch-pr.md @@ -0,0 +1,237 @@ +# Git Workflow: Branch, Commit, Push, and Pull Request + +This document outlines the standard workflow for creating a branch, committing changes, pushing to remote, and creating a pull request. + +## Prerequisites + +- Git installed and configured +- GitHub CLI (`gh`) installed (optional, but recommended for PR creation) +- Access to the repository +- Authentication configured (SSH keys or GitHub CLI authentication) + +## Step-by-Step Workflow + +### 1. Check Current Status + +First, check what changes exist in your working directory: + +```bash +git status +``` + +This shows: + +- Modified files +- Deleted files +- Untracked files +- Current branch + +### 2. Create a New Branch + +Create and switch to a new branch for your changes: + +```bash +git checkout -b +``` + +**Branch naming conventions:** + +- `feature/` - for new features +- `fix/` or `bugfix/` - for bug fixes +- `refactor/` - for code refactoring +- `docs/` - for documentation changes +- `chore/` - for maintenance tasks + +**Example:** + +```bash +git checkout -b refactor/monorepo-restructure +``` + +### 3. Stage Changes + +Stage all changes (including deletions and new files): + +```bash +git add -A +``` + +Or stage specific files: + +```bash +git add +``` + +### 4. Commit Changes + +Create a commit with a descriptive message: + +```bash +git commit -m "type: descriptive commit message" +``` + +**Commit message conventions:** + +- Use conventional commits format: `type: description` +- Types: `feat`, `fix`, `refactor`, `docs`, `chore`, `test`, `style` +- Keep messages concise but descriptive + +**Example:** + +```bash +git commit -m "refactor: restructure project to monorepo with apps directory" +``` + +### 5. Push Branch to Remote + +Push your branch to the remote repository: + +```bash +git push -u origin +``` + +The `-u` flag sets up tracking so future pushes can use `git push` without specifying the branch. + +**Example:** + +```bash +git push -u origin refactor/monorepo-restructure +``` + +### 6. Create Pull Request + +#### Option A: Using GitHub CLI (Recommended) + +If you have GitHub CLI installed: + +```bash +gh pr create --title "Your PR Title" --body "Description of changes" +``` + +To open in browser for review before creating: + +```bash +gh pr create --title "Your PR Title" --body "Description" --web +``` + +#### Option B: Using GitHub Web Interface + +After pushing, GitHub will provide a URL in the terminal output: + +``` +remote: Create a pull request for '' on GitHub by visiting: +remote: https://github.com///pull/new/ +``` + +Visit that URL to create the PR through the web interface. + +#### Option C: Manual PR Creation + +1. Go to your repository on GitHub +2. Click "Pull requests" tab +3. Click "New pull request" +4. Select your branch as the source +5. Select the target branch (usually `main` or `master`) +6. Fill in title and description +7. Click "Create pull request" + +## Complete Example Workflow + +```bash +# 1. Check status +git status + +# 2. Create branch +git checkout -b feature/add-new-component + +# 3. Make your changes (edit files, etc.) + +# 4. Stage changes +git add -A + +# 5. Commit +git commit -m "feat: add new user dashboard component" + +# 6. Push +git push -u origin feature/add-new-component + +# 7. Create PR +gh pr create --title "feat: add new user dashboard component" --body "Implements new dashboard component with user statistics and activity feed." +``` + +## Handling Additional Changes + +If you need to make more changes after pushing: + +```bash +# Make your changes +git add -A +git commit -m "fix: address review feedback" +git push +``` + +The PR will automatically update with the new commits. + +## Troubleshooting + +### Branch already exists + +```bash +git checkout +``` + +### Need to update from main before creating PR + +```bash +git checkout main +git pull origin main +git checkout +git merge main +# Resolve conflicts if any +git push +``` + +### PR creation fails + +- Ensure branch is pushed: `git push -u origin ` +- Check GitHub CLI authentication: `gh auth status` +- Verify repository access permissions +- Try creating PR via web interface instead + +## Best Practices + +1. **Keep branches focused**: One branch = one feature/fix +2. **Write clear commit messages**: Help reviewers understand changes +3. **Keep PRs small**: Easier to review and merge +4. **Update before creating PR**: Merge latest `main` into your branch +5. **Add tests**: Include tests for new features +6. **Update documentation**: Keep docs in sync with code changes +7. **Request reviews**: Tag relevant team members for review + +## Quick Reference Commands + +```bash +# Status check +git status + +# Create branch +git checkout -b + +# Stage all changes +git add -A + +# Commit +git commit -m "type: message" + +# Push +git push -u origin + +# Create PR (GitHub CLI) +gh pr create --title "Title" --body "Description" + +# View PR +gh pr view + +# List PRs +gh pr list +```