@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/components/fork-view.tsx

@@ -0,0 +1,65 @@
+import { useInject } from '@celljs/react';
+import type { SessionStore } from '@celljs/ta-client';
+import * as React from 'react';
+import { TaChat } from '../chat/chat-protocol';
+import { useNotices, useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { SessionView } from './session-view';
+
+/** Where a fork starts: its file (none when nothing came before), and the message it leaves out. */
+export interface ForkSource {
+    sessionFile?: string;
+    cwd: string;
+    text?: string;
+}
+
+/**
+ * A fork of a conversation, in a tab of the workbench beside it: the conversation shown stays as it was,
+ * and this one goes on here, with a box of its own.
+ */
+export function ForkView({ source }: { source: ForkSource }) {
+    const t = useT();
+    const chat = useInject<TaChat>(TaChat);
+    const [{ sessions }, workbench] = useWorkbench();
+    const [, notices] = useNotices();
+    const [store, setStore] = React.useState<SessionStore>();
+    const refresh = React.useCallback(() => void workbench.refresh().catch(() => undefined), [workbench]);
+    React.useEffect(() => {
+        let current = true;
+        let opened: SessionStore | undefined;
+        chat.openBeside({ sessionFile: source.sessionFile, cwd: source.cwd }).then(
+            next => {
+                opened = next;
+                if (current) {
+                    setStore(next);
+                } else {
+                    void next.detach().catch(() => undefined);
+                }
+            },
+            error => notices.error(error),
+        );
+        return () => {
+            current = false;
+            void opened?.detach().catch(() => undefined);
+        };
+    }, [chat, source, notices]);
+    if (!store) {
+        return (
+            <div className="ta-empty">
+                <span className="ta-spinner" /> {t('ta.chat.opening')}
+            </div>
+        );
+    }
+    return (
+        <SessionView
+            store={store}
+            server={workbench.server}
+            workspace={workbench.workspace}
+            info={sessions.find(session => session.sessionId === store.sessionId)}
+            onClosed={refresh}
+            onActivity={refresh}
+            draftText={source.text}
+            compact
+        />
+    );
+}

package/src/browser/components/hero-cards.tsx

@@ -0,0 +1,189 @@
+import { ArrowRight, type LucideIcon } from 'lucide-react';
+import * as React from 'react';
+import type { MessageId } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import { Icon } from './icon';
+
+/** What a picture of a suggestion shows. */
+export type HeroPicture = 'summary' | 'tests' | 'changes' | 'card' | 'page' | 'command';
+
+/** A suggestion of an empty conversation: a picture, a short label, and the message it sends. */
+export interface HeroSuggestion {
+    picture: HeroPicture;
+    label: MessageId;
+    text: MessageId;
+}
+
+const Frame = () => <rect className="ta-pic-frame" x="1" y="1" width="158" height="94" rx="9" />;
+const Line = ({ x, y, w }: { x: number; y: number; w: number }) => <rect className="ta-pic-line" x={x} y={y} width={w} height="5" rx="2.5" />;
+
+/** A file read through a lens, and the gist of it. */
+function Summary() {
+    return (
+        <>
+            <Frame />
+            <rect className="ta-pic-pane" x="14" y="12" width="56" height="72" rx="5" />
+            <Line x={22} y={22} w={36} />
+            <Line x={22} y={32} w={40} />
+            <Line x={22} y={42} w={28} />
+            <Line x={22} y={52} w={38} />
+            <circle className="ta-pic-ring" cx="58" cy="60" r="13" />
+            <path className="ta-pic-stroke" d="M67.5 69.5l8 8" />
+            <rect className="ta-pic-accent" x="88" y="26" width="58" height="44" rx="6" />
+            <rect className="ta-pic-mark" x="96" y="36" width="34" height="5" rx="2.5" />
+            <rect className="ta-pic-mark ta-pic-soft" x="96" y="46" width="42" height="5" rx="2.5" />
+            <rect className="ta-pic-mark ta-pic-soft" x="96" y="56" width="26" height="5" rx="2.5" />
+        </>
+    );
+}
+
+/** Tests, one failing, made to pass. */
+function Tests() {
+    const rows = [18, 38, 58];
+    return (
+        <>
+            <Frame />
+            {rows.map((y, index) => (
+                <React.Fragment key={y}>
+                    <circle className={index === 1 ? 'ta-pic-bad' : 'ta-pic-mark'} cx="24" cy={y + 6} r="6" />
+                    <Line x={38} y={y + 3.5} w={index === 1 ? 52 : 64} />
+                </React.Fragment>
+            ))}
+            <path className="ta-pic-tick" d="M21 24l2.2 2.2 4-4.4M21 64l2.2 2.2 4-4.4" />
+            <path className="ta-pic-cross" d="M21.5 41.5l5 5M26.5 41.5l-5 5" />
+            <path className="ta-pic-stroke ta-pic-thin" d="M102 44h18m-5-5l5 5-5 5" />
+            <rect className="ta-pic-accent" x="128" y="30" width="22" height="28" rx="6" />
+            <path className="ta-pic-tick ta-pic-tick-big" d="M133 44l4 4 8-8" />
+        </>
+    );
+}
+
+/** The commits of a day, the last one new. */
+function Changes() {
+    return (
+        <>
+            <Frame />
+            <path className="ta-pic-stroke ta-pic-thin" d="M26 14v68" />
+            {[20, 44, 68].map((y, index) => (
+                <React.Fragment key={y}>
+                    <circle className={index === 0 ? 'ta-pic-mark' : 'ta-pic-dot'} cx="26" cy={y} r="5" />
+                    <rect className={index === 0 ? 'ta-pic-accent' : 'ta-pic-pane'} x="40" y={y - 8} width={index === 0 ? 106 : 92} height="16" rx="5" />
+                    <rect
+                        className={index === 0 ? 'ta-pic-mark ta-pic-soft' : 'ta-pic-line'}
+                        x="48"
+                        y={y - 2.5}
+                        width={index === 0 ? 54 : 44}
+                        height="5"
+                        rx="2.5"
+                    />
+                    <rect className="ta-pic-plus" x={index === 0 ? 118 : 106} y={y - 2.5} width="10" height="5" rx="2.5" />
+                </React.Fragment>
+            ))}
+        </>
+    );
+}
+
+/** A card beside the conversation: a timer. */
+function Card() {
+    return (
+        <>
+            <Frame />
+            <Line x={12} y={16} w={58} />
+            <Line x={12} y={27} w={74} />
+            <Line x={12} y={38} w={46} />
+            <rect className="ta-pic-pane" x="100" y="1" width="59" height="94" />
+            <rect className="ta-pic-accent" x="108" y="14" width="43" height="38" rx="6" />
+            <circle className="ta-pic-mark" cx="129.5" cy="33" r="10" />
+            <path className="ta-pic-hand" d="M129.5 27v6l4 3" />
+            <Line x={108} y={62} w={34} />
+            <rect className="ta-pic-box" x="12" y="72" width="78" height="13" rx="6.5" />
+        </>
+    );
+}
+
+/** A page of its own: a list to tick off. */
+function Page() {
+    return (
+        <>
+            <Frame />
+            <rect className="ta-pic-pane" x="1" y="1" width="20" height="94" />
+            <circle className="ta-pic-line" cx="11" cy="16" r="3.5" />
+            <circle className="ta-pic-mark" cx="11" cy="30" r="3.5" />
+            <circle className="ta-pic-line" cx="11" cy="44" r="3.5" />
+            <rect className="ta-pic-accent" x="31" y="13" width="118" height="70" rx="6" />
+            {[24, 40, 56].map((y, index) => (
+                <React.Fragment key={y}>
+                    <rect className={index < 2 ? 'ta-pic-mark' : 'ta-pic-box'} x="42" y={y} width="10" height="10" rx="3" />
+                    <rect
+                        className={index < 2 ? 'ta-pic-mark ta-pic-soft' : 'ta-pic-line'}
+                        x="60"
+                        y={y + 2.5}
+                        width={[60, 44, 52][index]}
+                        height="5"
+                        rx="2.5"
+                    />
+                </React.Fragment>
+            ))}
+            <path className="ta-pic-hand" d="M44.5 29l2 2 3.5-3.5M44.5 45l2 2 3.5-3.5" />
+        </>
+    );
+}
+
+/** A command typed in the box. */
+function Command() {
+    return (
+        <>
+            <Frame />
+            <rect className="ta-pic-line" x="70" y="12" width="76" height="14" rx="7" />
+            <Line x={12} y={36} w={84} />
+            <Line x={12} y={47} w={60} />
+            <rect className="ta-pic-box" x="10" y="64" width="140" height="21" rx="10.5" />
+            <rect className="ta-pic-accent" x="16" y="68.5" width="50" height="12" rx="6" />
+            <text className="ta-pic-text" x="22" y="78">
+                /standup
+            </text>
+        </>
+    );
+}
+
+const PICTURES: Record<HeroPicture, () => React.ReactElement> = { summary: Summary, tests: Tests, changes: Changes, card: Card, page: Page, command: Command };
+
+/** The suggestions of an empty conversation as pictures: a click sends the message of one. */
+export function HeroCards({ suggestions, onPick }: { suggestions: readonly HeroSuggestion[]; onPick(text: string): void }) {
+    const t = useT();
+    return (
+        <div className="ta-hero-cards">
+            {suggestions.map(({ picture, label, text }) => {
+                const Picture = PICTURES[picture];
+                return (
+                    <button key={picture} type="button" className="ta-hero-card" title={t(text)} onClick={() => onPick(t(text))}>
+                        <svg className="ta-pic" viewBox="0 0 160 96" aria-hidden="true">
+                            <Picture />
+                        </svg>
+                        <span>{t(label)}</span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+/** A few steps in a row, each an icon and a word, with arrows between. */
+export function HeroSteps({ steps }: { steps: readonly [LucideIcon, MessageId][] }) {
+    const t = useT();
+    return (
+        <div className="ta-hero-steps">
+            {steps.map(([glyph, label], index) => (
+                <React.Fragment key={label}>
+                    {index > 0 && <Icon icon={ArrowRight} size={14} className="ta-hero-arrow" />}
+                    <span className="ta-hero-step">
+                        <span className="ta-hero-step-icon">
+                            <Icon icon={glyph} size={15} />
+                        </span>
+                        {t(label)}
+                    </span>
+                </React.Fragment>
+            ))}
+        </div>
+    );
+}

package/src/browser/components/icon.tsx

@@ -0,0 +1,62 @@
+import type { LucideIcon } from 'lucide-react';
+import * as React from 'react';
+
+interface GlyphProps {
+    className?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+    'aria-hidden'?: boolean;
+    'aria-label'?: string;
+}
+
+/** What draws an icon: an icon of Lucide (https://lucide.dev), of which only those used are bundled, or one of ta's own. */
+export type Glyph = LucideIcon | React.ComponentType<GlyphProps>;
+
+export function Icon({ icon: Glyph, className = '', label, size = 18 }: { icon: Glyph; className?: string; label?: string; size?: number }) {
+    return <Glyph className={`ta-icon ${className}`} size={size} strokeWidth={1.75} aria-hidden={label ? undefined : true} aria-label={label} />;
+}
+
+function sidebarGlyph(side: 'left' | 'right') {
+    // One shape for both sides and both states, drawn on Lucide's grid: the right one is the left mirrored.
+    const SidebarGlyph = ({ size = 18, strokeWidth = 1.75, ...props }: GlyphProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={size}
+            height={size}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            aria-hidden="true"
+            {...props}
+        >
+            <g transform={side === 'right' ? 'matrix(-1 0 0 1 24 0)' : undefined}>
+                <rect x="2.5" y="4" width="19" height="16" rx="4.5" />
+                <path d="M7 8.5v7" />
+            </g>
+        </svg>
+    );
+    return SidebarGlyph;
+}
+
+/** Shows or hides the sidebar on the left. */
+export const SidebarLeft = sidebarGlyph('left');
+/** Shows or hides the workbench on the right. */
+export const SidebarRight = sidebarGlyph('right');
+
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: Glyph;
+    label: string;
+    badge?: number;
+}
+
+/** A round button with an icon; its label is the tooltip and what screen readers say. */
+export function IconButton({ icon, label, badge, className = '', ...props }: IconButtonProps) {
+    return (
+        <button type="button" className={`ta-icon-button ${className}`} title={label} aria-label={label} {...props}>
+            <Icon icon={icon} />
+            {badge ? <span className="ta-badge">{badge}</span> : null}
+        </button>
+    );
+}

package/src/browser/components/link-dialog.tsx

@@ -0,0 +1,66 @@
+import { ExternalLink } from 'lucide-react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useLinks } from '../hooks';
+import { useT } from '../i18n/use-t';
+import type { ExternalLinkRequest, TaLinks } from '../links/links-protocol';
+import { Icon } from './icon';
+
+/** The URL with its host apart: what the user has to read before going there. */
+function Address({ url }: { url: string }) {
+    const parsed = new URL(url);
+    const rest = url.slice(`${parsed.protocol}//${parsed.host}`.length);
+    return (
+        <p className="ta-link-address">
+            <span className="ta-muted">{`${parsed.protocol}//`}</span>
+            <strong>{parsed.host}</strong>
+            <span className="ta-muted">{rest}</span>
+        </p>
+    );
+}
+
+/** Asks before a page opens outside of Ta, as VS Code does for a domain it does not trust. */
+function ExternalLinkDialog({ request, links }: { request: ExternalLinkRequest; links: TaLinks }) {
+    const t = useT();
+    React.useEffect(() => {
+        const onKey = (event: KeyboardEvent) => event.key === 'Escape' && links.answer(request.id, 'cancel');
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [links, request.id]);
+    const answer = (value: Parameters<TaLinks['answer']>[1]) => links.answer(request.id, value);
+    return createPortal(
+        <div className="ta-modal-scrim">
+            <button type="button" className="ta-overlay-close" aria-label={t('ta.cancel')} tabIndex={-1} onClick={() => answer('cancel')} />
+            <div className="ta-modal ta-confirm ta-link-dialog" role="alertdialog" aria-modal="true" aria-label={t('ta.link.ask')}>
+                <div className="ta-confirm-title">
+                    <Icon icon={ExternalLink} size={16} /> {t('ta.link.ask')}
+                </div>
+                <Address url={request.url} />
+                <div className="ta-dialog-actions">
+                    <div className="ta-link-more">
+                        <button type="button" className="ta-link" onClick={() => answer('copy')}>
+                            {t('ta.copy')}
+                        </button>
+                        <button type="button" className="ta-link" title={t('ta.link.trustHint')} onClick={() => answer('trust')}>
+                            {t('ta.link.trust', { host: request.host })}
+                        </button>
+                    </div>
+                    <button type="button" className="ta-button" onClick={() => answer('cancel')}>
+                        {t('ta.cancel')}
+                    </button>
+                    {/* Enter opens: the user clicked the link to go there. */}
+                    <button type="button" className="ta-button ta-primary" autoFocus onClick={() => answer('open')}>
+                        {t('ta.link.open')}
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body,
+    );
+}
+
+/** The question of TaLinks while there is one. */
+export function LinkDialog() {
+    const [{ external }, links] = useLinks();
+    return external ? <ExternalLinkDialog key={external.id} request={external} links={links} /> : null;
+}

package/src/browser/components/link.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { type LinkTarget, LinkUtil } from '../util/link';
+
+/**
+ * Opens what a link of a reply points to (TaLinks.open, with the directory of the conversation it is in);
+ * `external` for Cmd or Ctrl + click. Without it, as in tests, only pages of the web are links.
+ */
+export const OpenLink = React.createContext<((target: LinkTarget, external: boolean) => void) | undefined>(undefined);
+
+const MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+
+/** Cmd or Ctrl + click, or the middle button: the browser outside of Ta. */
+function external(event: React.MouseEvent): boolean {
+    return event.metaKey || event.ctrlKey || event.button === 1;
+}
+
+/**
+ * A link of a reply. A page of the web keeps its `href`, for the address the browser shows on hover and for
+ * copying it, but a click goes through TaLinks; a path is a button, as it is no address of this page.
+ */
+export function LinkView({ href, children }: { href: string; children: React.ReactNode }) {
+    const t = useT();
+    const open = React.useContext(OpenLink);
+    const target = React.useMemo(() => LinkUtil.parse(href), [href]);
+    if (!target) {
+        return <>{children}</>;
+    }
+    if (target.type !== 'path') {
+        const click = (event: React.MouseEvent) => {
+            if (open) {
+                event.preventDefault();
+                open(target, external(event));
+            }
+        };
+        const title = target.type === 'url' && open ? `${target.url}\n${t(MAC ? 'ta.link.externalMac' : 'ta.link.external')}` : target.url;
+        return (
+            <a className="ta-link-web" href={target.url} target="_blank" rel="noopener noreferrer" title={title} onClick={click} onAuxClick={click}>
+                {children}
+            </a>
+        );
+    }
+    if (!open) {
+        return <>{children}</>;
+    }
+    return <PathButton target={target}>{children}</PathButton>;
+}
+
+/** A code span that names a file or a directory (`src/app.ts:12`), as a link to it. */
+export function CodeLink({ text }: { text: string }) {
+    const open = React.useContext(OpenLink);
+    const target = React.useMemo(() => (open ? LinkUtil.codeReference(text) : undefined), [open, text]);
+    if (!target) {
+        return <code>{text}</code>;
+    }
+    return (
+        <PathButton target={target} code>
+            <code>{text}</code>
+        </PathButton>
+    );
+}
+
+function PathButton({ target, code, children }: { target: LinkTarget; code?: boolean; children: React.ReactNode }) {
+    const t = useT();
+    const open = React.useContext(OpenLink);
+    const directory = target.type === 'path' && target.directory;
+    return (
+        <button
+            type="button"
+            className={`ta-link-path ${code ? 'ta-link-code' : ''}`}
+            title={`${LinkUtil.label(target)}\n${t(directory ? 'ta.link.openFolder' : 'ta.link.openFile')}`}
+            onClick={() => open?.(target, false)}
+        >
+            {children}
+        </button>
+    );
+}

package/src/browser/components/manage-menu.tsx

@@ -0,0 +1,165 @@
+import { Check, ChevronRight, FolderOpen, Info, Keyboard, KeyRound, Languages, Palette, Puzzle, Settings, Settings2, Smartphone } from 'lucide-react';
+import * as React from 'react';
+import { useSettings } from '../hooks';
+import type { MessageId } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import type { LanguageSetting, ThemeSetting } from '../settings/settings-protocol';
+import { useDismiss } from './account-menu';
+import { AuthDialog } from './auth-view';
+import { Icon } from './icon';
+import { RelayDialog } from './relay-view';
+import { Keys } from './settings-controls';
+import type { SettingsSection } from './settings-view';
+import { WorkingDirectoryPicker } from './working-directory';
+
+const THEMES: [ThemeSetting, MessageId][] = [
+    ['system', 'ta.settings.theme.system'],
+    ['light', 'ta.settings.theme.light'],
+    ['dark', 'ta.settings.theme.dark'],
+];
+
+const LANGUAGES: [LanguageSetting, MessageId | string][] = [
+    ['system', 'ta.settings.language.system'],
+    ['zh-CN', '简体中文'],
+    ['en-US', 'English'],
+];
+
+export interface ManageMenuProps {
+    /** Shows the settings view, at a section. */
+    onSettings(section?: SettingsSection): void;
+    /** The settings view is shown. */
+    active: boolean;
+}
+
+/** Moves the focus through the items of a menu with the arrow keys. */
+function onArrows(event: React.KeyboardEvent<HTMLElement>) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+        return;
+    }
+    event.preventDefault();
+    const items = [...event.currentTarget.querySelectorAll<HTMLButtonElement>(':scope > [role^="menuitem"], :scope > div > [role^="menuitem"]')];
+    const at = items.indexOf(document.activeElement as HTMLButtonElement);
+    items[(at + (event.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length]?.focus();
+}
+
+/**
+ * The gear above the account, as in an IDE: the settings, the packages and the keys, the model accounts
+ * and the working directory, and the theme and language a step away, in a second menu beside the first.
+ */
+export function ManageMenu({ onSettings, active }: ManageMenuProps) {
+    const t = useT();
+    const [{ settings }, store] = useSettings();
+    const [open, setOpen] = React.useState(false);
+    const [sub, setSub] = React.useState<'theme' | 'language'>();
+    const [dialog, setDialog] = React.useState<'accounts' | 'directory' | 'relay'>();
+    const root = React.useRef<HTMLDivElement>(null);
+    const button = React.useRef<HTMLButtonElement>(null);
+    const id = React.useId();
+    const close = React.useCallback(() => {
+        setOpen(false);
+        setSub(undefined);
+    }, []);
+    useDismiss(open, close, root, button);
+    const go = (section?: SettingsSection) => {
+        close();
+        onSettings(section);
+    };
+    const item = (label: string, glyph: typeof Settings, onClick: () => void, keys?: string) => (
+        <button type="button" role="menuitem" className="ta-account-item" onClick={onClick} onMouseEnter={() => setSub(undefined)}>
+            <Icon icon={glyph} size={15} />
+            <span className="ta-menu-label">{label}</span>
+            {keys && <Keys keys={keys} />}
+        </button>
+    );
+    const submenu = (key: 'theme' | 'language', label: string, glyph: typeof Settings, choices: React.ReactNode) => (
+        <div className="ta-submenu-anchor">
+            <button
+                type="button"
+                role="menuitem"
+                aria-haspopup="menu"
+                aria-expanded={sub === key}
+                className={`ta-account-item${sub === key ? ' ta-on' : ''}`}
+                onMouseEnter={() => setSub(key)}
+                onClick={() => setSub(sub === key ? undefined : key)}
+                onKeyDown={event => event.key === 'ArrowRight' && setSub(key)}
+            >
+                <Icon icon={glyph} size={15} />
+                <span className="ta-menu-label">{label}</span>
+                <Icon icon={ChevronRight} size={14} className="ta-menu-chevron" />
+            </button>
+            {sub === key && (
+                <div className="ta-manage-menu ta-submenu" role="menu" aria-label={label} onKeyDown={event => event.key === 'ArrowLeft' && setSub(undefined)}>
+                    {choices}
+                </div>
+            )}
+        </div>
+    );
+    const choice = (checked: boolean, label: string, onPick: () => void, key: string) => (
+        <button key={key} type="button" role="menuitemradio" aria-checked={checked} className="ta-account-item" onClick={onPick}>
+            <span className="ta-menu-check">{checked && <Icon icon={Check} size={14} />}</span>
+            <span className="ta-menu-label">{label}</span>
+        </button>
+    );
+    return (
+        <div className="ta-manage" ref={root}>
+            <button
+                ref={button}
+                type="button"
+                className={`ta-rail-item${open || active ? ' ta-on' : ''}`}
+                title={t('ta.manage')}
+                aria-label={t('ta.manage')}
+                aria-haspopup="menu"
+                aria-expanded={open}
+                aria-controls={open ? id : undefined}
+                onClick={() => (open ? close() : setOpen(true))}
+            >
+                <Settings size={20} strokeWidth={1.6} />
+            </button>
+            {open && (
+                <div className="ta-manage-menu" id={id} role="menu" aria-label={t('ta.manage')} onKeyDown={onArrows}>
+                    {item(t('ta.settings'), Settings2, () => go(), 'Mod+,')}
+                    {item(t('ta.manage.packages'), Puzzle, () => go('packages'))}
+                    {item(t('ta.manage.shortcuts'), Keyboard, () => go('shortcuts'))}
+                    <div className="ta-account-sep" />
+                    {item(t('ta.manage.accounts'), KeyRound, () => {
+                        close();
+                        setDialog('accounts');
+                    })}
+                    {item(t('ta.manage.workingDirectory'), FolderOpen, () => {
+                        close();
+                        setDialog('directory');
+                    })}
+                    {item(t('ta.manage.relay'), Smartphone, () => {
+                        close();
+                        setDialog('relay');
+                    })}
+                    <div className="ta-account-sep" />
+                    {submenu(
+                        'theme',
+                        t('ta.settings.theme'),
+                        Palette,
+                        THEMES.map(([theme, label]) => choice(settings.theme === theme, t(label), () => store.update({ theme }), theme)),
+                    )}
+                    {submenu(
+                        'language',
+                        t('ta.settings.language'),
+                        Languages,
+                        LANGUAGES.map(([language, label]) =>
+                            choice(
+                                settings.language === language,
+                                language === 'system' ? t(label as MessageId) : label,
+                                () => store.update({ language }),
+                                language,
+                            ),
+                        ),
+                    )}
+                    <div className="ta-account-sep" />
+                    {item(t('ta.manage.about'), Info, () => go('about'))}
+                </div>
+            )}
+            {dialog === 'accounts' && <AuthDialog onClose={() => setDialog(undefined)} />}
+            {dialog === 'directory' && <WorkingDirectoryPicker onClose={() => setDialog(undefined)} />}
+            {dialog === 'relay' && <RelayDialog onClose={() => setDialog(undefined)} />}
+        </div>
+    );
+}