extracted terminal to a widget

This commit is contained in:
2026-02-17 18:46:18 +00:00
parent c6999ea66f
commit 0746844d6f
98 changed files with 487 additions and 3513 deletions
@@ -1,11 +1,10 @@
import { useState, useEffect, useRef, useMemo } from 'react';
import { Search, Terminal, Puzzle, Shield } from 'lucide-react';
import { Search, Terminal, Shield } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
import { Card } from '@/components/Card';
import { DashboardLayout } from '../../Layout';
import { AIHarnessesSection } from './AIHarnessesSection';
import { PluginsSection } from './PluginsSection';
// import { PluginsSection } from './PluginsSection';
import { TerminalSection } from './TerminalSection';
const sections = [
@@ -16,13 +15,13 @@ const sections = [
description: 'Which AI coding tools do you use?',
content: <AIHarnessesSection />,
},
{
key: 'plugins',
icon: Puzzle,
title: 'Plugins',
description: 'Enable or disable installed plugins.',
content: <PluginsSection />,
},
// {
// key: 'plugins',
// icon: Puzzle,
// title: 'Plugins',
// description: 'Enable or disable installed plugins.',
// content: <PluginsSection />,
// },
{
key: 'terminal',
icon: Shield,
@@ -55,45 +54,43 @@ export const ServerSettings = () => {
}, [search, matchingKeys]);
return (
<DashboardLayout>
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<div className="relative mb-6">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
<Input
placeholder="Search settings..."
value={search}
onChange={(ev) => setSearch(ev.target.value)}
className="pl-9"
/>
</div>
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<div className="relative mb-6">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
<Input
placeholder="Search settings..."
value={search}
onChange={(ev) => setSearch(ev.target.value)}
className="pl-9"
/>
</div>
<Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
{sections.map((section) => (
<div
key={section.key}
ref={(el) => {
sectionRefs.current[section.key] = el;
}}
className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
>
<AccordionItem value={section.key}>
<AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3">
<section.icon className="h-5 w-5 text-duck-forest shrink-0" />
<div className="text-left">
<div className="text-base font-bold text-duck-dark">{section.title}</div>
<div className="text-sm font-normal text-duck-dark/70">{section.description}</div>
</div>
<Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
{sections.map((section) => (
<div
key={section.key}
ref={(el) => {
sectionRefs.current[section.key] = el;
}}
className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
>
<AccordionItem value={section.key}>
<AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3">
<section.icon className="h-5 w-5 text-duck-forest shrink-0" />
<div className="text-left">
<div className="text-base font-bold text-duck-dark">{section.title}</div>
<div className="text-sm font-normal text-duck-dark/70">{section.description}</div>
</div>
</AccordionTrigger>
<AccordionContent forceMount>{section.content}</AccordionContent>
</AccordionItem>
</div>
))}
</Accordion>
</Card>
</div>
</DashboardLayout>
</div>
</AccordionTrigger>
<AccordionContent forceMount>{section.content}</AccordionContent>
</AccordionItem>
</div>
))}
</Accordion>
</Card>
</div>
);
};