feat(ui): add per-project themes and fix scrolling/styling issues

- Add per-project theme support with theme selector in sidebar
- Fix file diffs scrolling in agent output modal with proper overflow handling
- Improve cursor styling across all interactive elements (buttons, tabs, checkboxes)
- Enhance hotkey styling to use consistent theme colors
- Fix Kanban board flash/refresh issues with React.memo optimizations
- Update tab component for better theme integration with proper active states

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
This commit is contained in:
Cody Seibert
2025-12-10 12:56:24 -05:00
parent 9251411da9
commit f9ba1c260a
20 changed files with 868 additions and 90 deletions

View File

@@ -0,0 +1,474 @@
# Clean Code Guidelines
## Overview
This document serves as a comprehensive guide for writing clean, maintainable, and extensible code. It outlines principles and practices that ensure code quality, reusability, and long-term maintainability. When writing or reviewing code, follow these guidelines to create software that is easy to understand, modify, and extend. This file is used by LLMs to understand and enforce coding standards throughout the codebase.
---
## Core Principles
### 1. DRY (Don't Repeat Yourself)
**Principle**: Every piece of knowledge should have a single, unambiguous representation within a system.
**Practices**:
- Extract repeated logic into reusable functions, classes, or modules
- Use constants for repeated values
- Create shared utilities for common operations
- Avoid copy-pasting code blocks
- When you find yourself writing similar code more than twice, refactor it
**Example - Bad**:
```typescript
// Repeated validation logic
if (email.includes("@") && email.length > 5) {
// ...
}
if (email.includes("@") && email.length > 5) {
// ...
}
```
**Example - Good**:
```typescript
function isValidEmail(email: string): boolean {
return email.includes("@") && email.length > 5;
}
if (isValidEmail(email)) {
// ...
}
```
---
### 2. Code Reusability
**Principle**: Write code that can be used in multiple contexts without modification or with minimal adaptation.
**Practices**:
- Create generic, parameterized functions instead of specific ones
- Use composition over inheritance where appropriate
- Design functions to be pure (no side effects) when possible
- Create utility libraries for common operations
- Use dependency injection to make components reusable
- Design APIs that are flexible and configurable
**Example - Bad**:
```typescript
function calculateUserTotal(userId: string) {
const user = getUser(userId);
return user.items.reduce((sum, item) => sum + item.price, 0);
}
```
**Example - Good**:
```typescript
function calculateTotal<T extends { price: number }>(items: T[]): number {
return items.reduce((sum, item) => sum + item.price, 0);
}
function calculateUserTotal(userId: string) {
const user = getUser(userId);
return calculateTotal(user.items);
}
```
---
### 3. Abstract Functions and Abstractions
**Principle**: Create abstractions that hide implementation details and provide clear, simple interfaces.
**Practices**:
- Use interfaces and abstract classes to define contracts
- Create abstraction layers between different concerns
- Hide complex implementation behind simple function signatures
- Use dependency inversion - depend on abstractions, not concretions
- Create factory functions/classes for object creation
- Use strategy pattern for interchangeable algorithms
**Example - Bad**:
```typescript
function processPayment(amount: number, cardNumber: string, cvv: string) {
// Direct implementation tied to specific payment processor
fetch("https://stripe.com/api/charge", {
method: "POST",
body: JSON.stringify({ amount, cardNumber, cvv }),
});
}
```
**Example - Good**:
```typescript
interface PaymentProcessor {
processPayment(
amount: number,
details: PaymentDetails
): Promise<PaymentResult>;
}
class StripeProcessor implements PaymentProcessor {
async processPayment(
amount: number,
details: PaymentDetails
): Promise<PaymentResult> {
// Implementation
}
}
function processPayment(
processor: PaymentProcessor,
amount: number,
details: PaymentDetails
) {
return processor.processPayment(amount, details);
}
```
---
### 4. Extensibility
**Principle**: Design code that can be easily extended with new features without modifying existing code.
**Practices**:
- Follow the Open/Closed Principle: open for extension, closed for modification
- Use plugin architectures and hooks for extensibility
- Design with future requirements in mind (but don't over-engineer)
- Use configuration over hardcoding
- Create extension points through interfaces and callbacks
- Use composition and dependency injection
- Design APIs that can accommodate new parameters/options
**Example - Bad**:
```typescript
function sendNotification(user: User, type: string) {
if (type === "email") {
sendEmail(user.email);
} else if (type === "sms") {
sendSMS(user.phone);
}
// Adding new notification types requires modifying this function
}
```
**Example - Good**:
```typescript
interface NotificationChannel {
send(user: User): Promise<void>;
}
class EmailChannel implements NotificationChannel {
async send(user: User): Promise<void> {
// Implementation
}
}
class SMSChannel implements NotificationChannel {
async send(user: User): Promise<void> {
// Implementation
}
}
class NotificationService {
constructor(private channels: NotificationChannel[]) {}
async send(user: User): Promise<void> {
await Promise.all(this.channels.map((channel) => channel.send(user)));
}
}
// New notification types can be added without modifying existing code
```
---
### 5. Avoid Magic Numbers and Strings
**Principle**: Use named constants instead of hardcoded values to improve readability and maintainability.
**Practices**:
- Extract all magic numbers into named constants
- Use enums for related constants
- Create configuration objects for settings
- Use constants for API endpoints, timeouts, limits, etc.
- Document why specific values are used
**Example - Bad**:
```typescript
if (user.age >= 18) {
// What does 18 mean?
}
setTimeout(() => {
// What does 3000 mean?
}, 3000);
if (status === "active") {
// What are the valid statuses?
}
```
**Example - Good**:
```typescript
const MINIMUM_AGE_FOR_ADULTS = 18;
const SESSION_TIMEOUT_MS = 3000;
enum UserStatus {
ACTIVE = "active",
INACTIVE = "inactive",
SUSPENDED = "suspended",
}
if (user.age >= MINIMUM_AGE_FOR_ADULTS) {
// Clear intent
}
setTimeout(() => {
// Clear intent
}, SESSION_TIMEOUT_MS);
if (status === UserStatus.ACTIVE) {
// Type-safe and clear
}
```
---
## Additional Best Practices
### 6. Single Responsibility Principle
Each function, class, or module should have one reason to change.
**Example**:
```typescript
// Bad: Multiple responsibilities
class User {
save() {
/* database logic */
}
sendEmail() {
/* email logic */
}
validate() {
/* validation logic */
}
}
// Good: Single responsibility
class User {
validate() {
/* validation only */
}
}
class UserRepository {
save(user: User) {
/* database logic */
}
}
class EmailService {
sendToUser(user: User) {
/* email logic */
}
}
```
### 7. Meaningful Names
- Use descriptive names that reveal intent
- Avoid abbreviations unless they're widely understood
- Use verbs for functions, nouns for classes
- Be consistent with naming conventions
**Example**:
```typescript
// Bad
const d = new Date();
const u = getUser();
function calc(x, y) {}
// Good
const currentDate = new Date();
const currentUser = getUser();
function calculateTotal(price: number, quantity: number): number {}
```
### 8. Small Functions
- Functions should do one thing and do it well
- Keep functions short (ideally under 20 lines)
- Extract complex logic into separate functions
- Use descriptive function names instead of comments
### 9. Error Handling
- Handle errors explicitly
- Use appropriate error types
- Provide meaningful error messages
- Don't swallow errors silently
- Use try-catch appropriately
**Example**:
```typescript
// Bad
function divide(a: number, b: number) {
return a / b; // Can throw division by zero
}
// Good
function divide(a: number, b: number): number {
if (b === 0) {
throw new Error("Division by zero is not allowed");
}
return a / b;
}
```
### 10. Comments and Documentation
- Write self-documenting code (code should explain itself)
- Use comments to explain "why", not "what"
- Document complex algorithms or business logic
- Keep comments up-to-date with code changes
- Use JSDoc/TSDoc for public APIs
### 11. Type Safety
- Use TypeScript types/interfaces effectively
- Avoid `any` type unless absolutely necessary
- Use union types and discriminated unions
- Leverage type inference where appropriate
- Create custom types for domain concepts
**Example**:
```typescript
// Bad
function processUser(data: any) {
return data.name;
}
// Good
interface User {
id: string;
name: string;
email: string;
}
function processUser(user: User): string {
return user.name;
}
```
### 12. Testing Considerations
- Write testable code (pure functions, dependency injection)
- Keep functions small and focused
- Avoid hidden dependencies
- Use mocks and stubs appropriately
- Design for testability from the start
### 13. Performance vs. Readability
- Prefer readability over premature optimization
- Profile before optimizing
- Use clear algorithms first, optimize if needed
- Document performance-critical sections
- Balance between clean code and performance requirements
### 14. Code Organization
- Group related functionality together
- Use modules/packages to organize code
- Follow consistent file and folder structures
- Separate concerns (UI, business logic, data access)
- Use barrel exports (index files) appropriately
### 15. Configuration Management
- Externalize configuration values
- Use environment variables for environment-specific settings
- Create configuration objects/interfaces
- Validate configuration at startup
- Provide sensible defaults
**Example**:
```typescript
// Bad
const apiUrl = "https://api.example.com";
const timeout = 5000;
// Good
interface Config {
apiUrl: string;
timeout: number;
maxRetries: number;
}
const config: Config = {
apiUrl: process.env.API_URL || "https://api.example.com",
timeout: parseInt(process.env.TIMEOUT || "5000"),
maxRetries: parseInt(process.env.MAX_RETRIES || "3"),
};
```
---
## Code Review Checklist
When reviewing code, check for:
- [ ] No code duplication (DRY principle)
- [ ] Meaningful variable and function names
- [ ] No magic numbers or strings
- [ ] Functions are small and focused
- [ ] Proper error handling
- [ ] Type safety maintained
- [ ] Code is testable
- [ ] Documentation where needed
- [ ] Consistent code style
- [ ] Proper abstraction levels
- [ ] Extensibility considered
- [ ] Single responsibility principle followed
---
## Summary
Clean code is:
- **Readable**: Easy to understand at a glance
- **Maintainable**: Easy to modify and update
- **Testable**: Easy to write tests for
- **Extensible**: Easy to add new features
- **Reusable**: Can be used in multiple contexts
- **Well-documented**: Clear intent and purpose
- **Type-safe**: Leverages type system effectively
- **DRY**: No unnecessary repetition
- **Abstracted**: Proper separation of concerns
- **Configurable**: Uses constants and configuration over hardcoding
Remember: Code is read far more often than it is written. Write code for your future self and your teammates.

View File

@@ -5,10 +5,10 @@
"description": "In the output logs of the proc agent output in the file diffs Can you add a scroll bar so it actually scroll to see all these new styles right now it seems like I can't scroll",
"steps": [],
"status": "waiting_approval",
"startedAt": "2025-12-10T17:36:31.716Z",
"startedAt": "2025-12-10T17:42:09.158Z",
"imagePaths": [],
"skipTests": true,
"summary": "Fixed file diffs scrolling in agent output modal. Restructured git-diff-panel.tsx with flex layout - summary bar stays fixed at top while file list scrolls with visible scrollbar. Previously added scrollbar-visible CSS utility class in globals.css.",
"summary": "Fixed scrolling for file diffs in agent output modal. Changed approach: parent container (agent-output-modal.tsx) now handles scrolling with overflow-y-auto, while GitDiffPanel uses natural height without flex-based scrolling. Modified: agent-output-modal.tsx (line 304), git-diff-panel.tsx (lines 461, 500, 525, 614).",
"model": "opus",
"thinkingLevel": "none"
},
@@ -30,12 +30,130 @@
"category": "Uncategorized",
"description": "Can you add a disclaimer .md file to this project saying that this uses a bunch of AI related tooling which could have access to your operating system and change and delete files and so use at your own risk. We tried to check it for security of vulnerability to make sure it's good. But you assume the risk and you should be reviewing the code yourself before you try to run it. And also sandboxing this so it doesn't have access to your whole operating system like using Docker to sandbox before you run it or use a virtual machine to sandbox it. and that we do not recommend running locally on your computer due to the risk of it having access to everything on your computer.\n\nUpdate or read me with a short paragraph overview/description at the top followed by a disclaimer section in red that points to the disclaimer file with the same disclaimer information.\n\nThen a section that lists out all the features of cool emojis.",
"steps": [],
"status": "waiting_approval",
"status": "verified",
"startedAt": "2025-12-10T17:35:40.700Z",
"imagePaths": [],
"skipTests": true,
"summary": "Created DISCLAIMER.md with comprehensive security warnings about AI tooling risks and sandboxing recommendations. Updated README.md with project overview, red caution disclaimer section linking to DISCLAIMER.md, and features list with emojis covering all major functionality (Kanban, AI agents, multi-model support, etc.).",
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765388388144-oa1dewze9",
"category": "Uncategorized",
"description": "Please fix the styling of the hotkeys to be more using the theme colors. Notice that they're kind of gray. I would rather than have some type of like light green if they're not active and then the brighter green if they are active and also the add feature but in the top right it's not very legible. So fix the accessibility of the hotkey but also keep it within the theme. You might just have to change the text inside of it to be bright green.",
"steps": [],
"status": "verified",
"startedAt": "2025-12-10T17:40:02.745Z",
"imagePaths": [
{
"id": "img-1765388352835-dgx4ishp0",
"path": "/Users/webdevcody/Library/Application Support/automaker/images/1765388352832-6jnbgw8kg_Screenshot_2025-12-10_at_12.39.10_PM.png",
"filename": "Screenshot 2025-12-10 at 12.39.10PM.png",
"mimeType": "image/png"
},
{
"id": "img-1765388356955-a0gdovp5b",
"path": "/Users/webdevcody/Library/Application Support/automaker/images/1765388356954-d59a65nf9_Screenshot_2025-12-10_at_12.39.15_PM.png",
"filename": "Screenshot 2025-12-10 at 12.39.15PM.png",
"mimeType": "image/png"
}
],
"skipTests": true,
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765388402095-x66aduwg3",
"category": "Uncategorized",
"description": "Can you please add some spacing and fix the styling of the hotkey with the command enter and make it so they're both vertically aligned for those icons?",
"steps": [],
"status": "waiting_approval",
"startedAt": "2025-12-10T17:44:08.667Z",
"imagePaths": [
{
"id": "img-1765388390408-eefybe95t",
"path": "/Users/webdevcody/Library/Application Support/automaker/images/1765388390408-nn320yoyc_Screenshot_2025-12-10_at_12.39.47_PM.png",
"filename": "Screenshot 2025-12-10 at 12.39.47PM.png",
"mimeType": "image/png"
}
],
"skipTests": true,
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765388662444-as3hqn7be",
"category": "Uncategorized",
"description": "Fix the styling on all the buttons when I hover over them with my mouse they never change to a click mouse cursor. In order they seem to show any type of like hover state changes, if they do, at least for the certain game I'm using, it's not very obvious that you're hovering over the button.",
"steps": [],
"status": "waiting_approval",
"startedAt": "2025-12-10T17:45:59.666Z",
"imagePaths": [],
"skipTests": true,
"summary": "Fixed hover cursor styling on all interactive elements. Modified: button.tsx (added cursor-pointer to base styles), dropdown-menu.tsx (added cursor-pointer to all menu items), checkbox.tsx (added cursor-pointer), tabs.tsx (added cursor-pointer to triggers), dialog.tsx (added cursor-pointer to close button), slider.tsx (added cursor-grab to thumb, cursor-pointer to track), globals.css (added global CSS rules for clickable elements to ensure consistent cursor behavior).",
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765388693856-yx1dk1acj",
"category": "Kanban",
"description": "The tabs in the add new feature modal for the prompt model and testing tabs. They don't seem to look like tabs when I'm on a certain theme. Can you verify that those are hooked into the theme? And make sure that the active one is colored differently than the unactive ones. Keep the primary colors when doing this.",
"steps": [],
"status": "waiting_approval",
"startedAt": "2025-12-10T17:46:00.019Z",
"imagePaths": [],
"skipTests": true,
"summary": "Fixed tabs component theme integration. Modified: tabs.tsx. Changes: (1) Added visible border to TabsList container using theme's border color, (2) Changed inactive tab text to foreground/70 for better contrast, (3) Enhanced active tab with shadow-md and semi-transparent primary border, (4) Improved hover state with full accent background. Active tabs now properly use bg-primary/text-primary-foreground which adapts to each theme.",
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765388754462-bek0flvkj",
"category": "Uncategorized",
"description": "There's a strange issue when I when when these agents are like doing things it seems like it completely refreshes the whole Kanban board and there's like a black flash. Can you verify that the data loading does not cause the entire component to refresh? Maybe there's an issue with the react effect or how the component is rendered maybe we need some used memos or something but it shouldn't refresh the whole page it should just like update the individual cards when they change.",
"steps": [],
"status": "waiting_approval",
"startedAt": "2025-12-10T17:47:20.170Z",
"imagePaths": [],
"skipTests": true,
"summary": "Fixed Kanban board flash/refresh issue. Changes: (1) board-view.tsx - Added isInitialLoadRef to only show loading spinner on initial load, not on feature reloads; memoized column features with useMemo to prevent recalculation on every render. (2) kanban-card.tsx - Wrapped with React.memo to prevent unnecessary re-renders. (3) kanban-column.tsx - Wrapped with React.memo for performance. The flash was caused by loadFeatures setting isLoading=true on every reload, which caused the entire board to unmount and show a loading spinner.",
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765388793845-yhluf0sry",
"category": "Uncategorized",
"description": "Add in the ability so that every project can have its own selected theme. This will allow me to have different projects have different themes so I can easily differentiate when I have one project selected or not.",
"steps": [],
"status": "waiting_approval",
"startedAt": "2025-12-10T17:54:11.363Z",
"imagePaths": [],
"skipTests": true,
"summary": "Added per-project theme support. Modified: electron.ts (added theme property to Project interface), app-store.ts (added setProjectTheme and getEffectiveTheme actions), page.tsx (uses effectiveTheme for theme switching), sidebar.tsx (added project theme selector dropdown with all 13 themes + \"Use Global\" option). Users can now set unique themes for each project via the project options menu in the sidebar.",
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765389333728-y74hmz2yp",
"category": "Agent Runner",
"description": "On the Agent Runner, I took a screenshot and dropped it into the text area and after a certain amount of time, it's like the image preview just completely went away. Can you debug and fix this on the Agent Runner?",
"steps": [],
"status": "backlog",
"imagePaths": [],
"skipTests": true,
"model": "opus",
"thinkingLevel": "none"
},
{
"id": "feature-1765389352488-j9bez5ztx",
"category": "Kanban",
"description": "It seems like the category typehead is no longer working. Can you double check that code didn't break? It should have kept track of categories inside of the categories.json file inside the .automaker folder when adding new features modal",
"steps": [],
"status": "backlog",
"imagePaths": [],
"skipTests": true,
"model": "opus",
"thinkingLevel": "none"
}
]