theblazehen
235f80643e
* feat: add UI customization and model management features Add comprehensive UI customization options and enhanced model selection: - **Favorite & Recent Models**: Star models for quick access, track 5 most recent - Add favorite/recent sections to model dropdowns - Persist preferences in local storage - Works in ModelControls and ModelSelector components - **Tool Call Expansion Settings**: Control default expansion state for tool outputs - Three modes: collapsed, activity (summary), detailed - Applies to activity groups and individual tool calls - Configurable in Appearance Settings - **Font Size & Spacing Controls**: Adjustable typography and layout density - Font size: 50-200% scaling of all semantic typography - Spacing/padding: 50-200% scaling of margins, gaps, line heights - Real-time preview with reset buttons - Settings in Appearance Settings - **VSCode Extension Settings View**: Full settings access in VSCode extension - Add settings navigation and view type - Settings button in header - Navigate between sessions, chat, and settings Technical changes: - Enhanced useUIStore with new state management - Dynamic CSS variable scaling for typography and spacing - Typography helper functions for variable access - ThemeProvider integration for auto-applying scales * fix: hide theme mode in VSCode and fix detailed tool expansion - Hide "Theme Mode" setting in VSCode extension settings as VSCode dynamically applies its own theme to the extension - Fix bug where tools from subsequent messages in a turn weren't expanded when "Detailed" mode was selected - Now correctly aggregates all tool IDs from turnGroupingContext when calculating effective expanded tools for progressive groups
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { RiBrainAi3Line, RiChatAi3Line, RiCommandLine, RiGitBranchLine, RiPaintBrushLine, RiStackLine } from '@remixicon/react';
|
|
import type { ComponentType } from 'react';
|
|
|
|
export type SidebarSection = 'sessions' | 'agents' | 'commands' | 'providers' | 'git-identities' | 'settings';
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export type IconComponent = ComponentType<any>;
|
|
|
|
export interface SidebarSectionConfig {
|
|
id: SidebarSection;
|
|
label: string;
|
|
description: string;
|
|
icon: IconComponent;
|
|
}
|
|
|
|
export const SIDEBAR_SECTIONS: SidebarSectionConfig[] = [
|
|
{
|
|
id: 'sessions',
|
|
label: 'Sessions',
|
|
description: 'Browse and manage chat sessions scoped to the current directory.',
|
|
icon: RiChatAi3Line,
|
|
},
|
|
{
|
|
id: 'agents',
|
|
label: 'Agents',
|
|
description: 'Configure OpenCode agents, prompts, and permissions.',
|
|
icon: RiBrainAi3Line,
|
|
},
|
|
{
|
|
id: 'commands',
|
|
label: 'Commands',
|
|
description: 'Create and maintain custom slash commands for OpenCode.',
|
|
icon: RiCommandLine,
|
|
},
|
|
{
|
|
id: 'providers',
|
|
label: 'Providers',
|
|
description: 'Configure AI model providers and API credentials.',
|
|
icon: RiStackLine,
|
|
},
|
|
{
|
|
id: 'git-identities',
|
|
label: 'Git Identities',
|
|
description: 'Manage Git profiles with different credentials and SSH keys.',
|
|
icon: RiGitBranchLine,
|
|
},
|
|
{
|
|
id: 'settings',
|
|
label: 'Appearance',
|
|
description: 'Fine-tune themes, fonts, and typography across the interface.',
|
|
icon: RiPaintBrushLine,
|
|
},
|
|
];
|
|
|
|
const sidebarSectionLabels = {} as Record<SidebarSection, string>;
|
|
const sidebarSectionDescriptions = {} as Record<SidebarSection, string>;
|
|
const sidebarSectionConfigMap = {} as Record<SidebarSection, SidebarSectionConfig>;
|
|
|
|
SIDEBAR_SECTIONS.forEach((section) => {
|
|
sidebarSectionLabels[section.id] = section.label;
|
|
sidebarSectionDescriptions[section.id] = section.description;
|
|
sidebarSectionConfigMap[section.id] = section;
|
|
});
|
|
|
|
export const SIDEBAR_SECTION_LABELS = sidebarSectionLabels;
|
|
export const SIDEBAR_SECTION_DESCRIPTIONS = sidebarSectionDescriptions;
|
|
export const SIDEBAR_SECTION_CONFIG_MAP = sidebarSectionConfigMap;
|