diff --git a/apps/app/src/components/views/settings-view.tsx b/apps/app/src/components/views/settings-view.tsx index 181b2ae9..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 { Label } from "@/components/ui/label"; -import { - Key, - Palette, - Terminal, - FlaskConical, - 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 } 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"; @@ -24,6 +12,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"; @@ -33,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, @@ -91,23 +69,70 @@ 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 "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 */} - {/* 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. +

+
+
+
+ +
+ +

+ 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 (
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 b98a6e66..f907d99a 100644 --- a/apps/app/src/components/views/settings-view/config/navigation.ts +++ b/apps/app/src/components/views/settings-view/config/navigation.ts @@ -3,14 +3,15 @@ import { Key, Terminal, Palette, - LayoutGrid, Settings2, + Volume2, FlaskConical, Trash2, } from "lucide-react"; +import type { SettingsViewId } from "../hooks/use-settings-view"; export interface NavigationItem { - id: string; + id: SettingsViewId; label: string; icon: LucideIcon; } @@ -20,8 +21,8 @@ export const NAV_ITEMS: NavigationItem[] = [ { id: "api-keys", label: "API Keys", icon: Key }, { id: "claude", label: "Claude", icon: Terminal }, { id: "appearance", label: "Appearance", icon: Palette }, - { id: "kanban", label: "Kanban Display", icon: LayoutGrid }, { 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 }, ]; diff --git a/apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx b/apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx index e48aa471..b13d5fd3 100644 --- a/apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx +++ b/apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx @@ -16,9 +16,8 @@ export function DangerZoneSection({ 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 (
+``` + +**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 +```