ec547e0662
- Updated task management guidelines to emphasize the importance of posting task comments before marking tasks as complete, ensuring visibility of results on the task board. - Introduced a new notification system for team leads after task completion, summarizing key findings and linking to detailed comments. - Improved UI components, including a new CLI checking spinner with a delayed hint and enhanced task filters to support unread/read task states. - Refactored sidebar task item styles to visually indicate unread tasks and adjusted task sorting options to include 'unread' as a criterion. - Enhanced settings tabs with tooltips for better user guidance and improved layout for advanced settings options.
114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { isElectronMode } from '@renderer/api';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@renderer/components/ui/tooltip';
|
|
import { Bell, Info, Settings, Wrench } from 'lucide-react';
|
|
|
|
import type { LucideIcon } from 'lucide-react';
|
|
|
|
export type SettingsSection = 'general' | 'connection' | 'notifications' | 'advanced';
|
|
|
|
interface SettingsTabsProps {
|
|
activeSection: SettingsSection;
|
|
onSectionChange: (section: SettingsSection) => void;
|
|
}
|
|
|
|
interface TabConfig {
|
|
id: SettingsSection;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
description: string;
|
|
electronOnly?: boolean;
|
|
}
|
|
|
|
const tabs: TabConfig[] = [
|
|
{
|
|
id: 'general',
|
|
label: 'General',
|
|
icon: Settings,
|
|
description:
|
|
'Core app preferences like theme, language, display density, and startup behavior.',
|
|
},
|
|
// { id: 'connection', label: 'Connection', icon: Server, description: 'Manage CLI connection and authentication settings.', electronOnly: true },
|
|
{
|
|
id: 'notifications',
|
|
label: 'Notifications',
|
|
icon: Bell,
|
|
description:
|
|
'Control when and how you get notified about agent activity, task completions, and errors.',
|
|
},
|
|
{
|
|
id: 'advanced',
|
|
label: 'Advanced',
|
|
icon: Wrench,
|
|
description:
|
|
'Power-user options: export/import config, reset defaults, and raw configuration editing.',
|
|
},
|
|
];
|
|
|
|
export const SettingsTabs = ({
|
|
activeSection,
|
|
onSectionChange,
|
|
}: Readonly<SettingsTabsProps>): React.JSX.Element => {
|
|
const isElectron = useMemo(() => isElectronMode(), []);
|
|
const visibleTabs = useMemo(
|
|
() => tabs.filter((tab) => !tab.electronOnly || isElectron),
|
|
[isElectron]
|
|
);
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<div className="border-b border-border pb-0">
|
|
<div className="inline-flex h-9 items-center gap-1 rounded-t-lg bg-[var(--color-surface-raised)] p-1 text-[var(--color-text-muted)]">
|
|
{visibleTabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const isActive = activeSection === tab.id;
|
|
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => onSectionChange(tab.id)}
|
|
className={`relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 pr-7 text-sm font-medium transition-all ${
|
|
isActive
|
|
? 'bg-[var(--color-surface)] text-[var(--color-text)] shadow-sm'
|
|
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
|
|
}`}
|
|
>
|
|
<Icon className="size-3.5" />
|
|
{tab.label}
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={`What is ${tab.label}?`}
|
|
onClick={(event) => event.stopPropagation()}
|
|
onMouseDown={(event) => event.stopPropagation()}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.stopPropagation();
|
|
}
|
|
}}
|
|
className="size-4.5 absolute right-1.5 top-0.5 z-10 inline-flex items-center justify-center rounded-full text-text-muted transition-colors hover:bg-[var(--color-surface-raised)] hover:text-text"
|
|
>
|
|
<Info className="size-3" />
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="max-w-64 text-pretty text-xs leading-relaxed">
|
|
{tab.description}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
};
|