mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-12 17:37:24 +00:00
ce76f65d0c
Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations. Highlights: - Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx). - Introduce src/components/quick-settings-panel/ with clear separation of concerns: - view/: panel shell, header, handle, section wrappers, toggle rows, and content sections. - hooks/: drag interactions and whisper mode persistence. - constants.ts and types.ts for shared config and strict local typing. - Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence. - Keep user-visible behavior intact: - same open/close panel interactions. - same mobile/desktop drag behavior and persisted handle position. - same quick preference toggles and wiring to useUiPreferences. - same hidden whisper section behavior and localStorage/event updates. - Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components. - Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent). - Keep files small and reviewable (all new/changed files are under 300 lines). Validation: - npm run typecheck - npm run build
23 lines
489 B
TypeScript
23 lines
489 B
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
type QuickSettingsSectionProps = {
|
|
title: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export default function QuickSettingsSection({
|
|
title,
|
|
children,
|
|
className = '',
|
|
}: QuickSettingsSectionProps) {
|
|
return (
|
|
<div className={`space-y-2 ${className}`}>
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">
|
|
{title}
|
|
</h4>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|