Files
cobble/src/pages/admin/settings/setup/(partials)/setup-step-item.tsx
T
tbenandClaude Opus 5.5 1e7834ba7f Add a guided setup after signup, and a no-model notice in conversations
The first super admin now lands on Settings > Setup after signing up: a
skippable walk through the app name, connecting a model provider and
picking models, ending with where to go next. It stays under Settings to
come back to.

While a bot has no text model, its conversation shows a notice in the
thread (centred when empty): super admins get Connect a provider and
Guided setup, everyone else is told the super admin sets it up. The
models modal keeps it current.

The Models page's data and save logic move into useModelsOverview, shared
with the setup.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-28 18:26:20 +01:00

43 lines
1.5 KiB
TypeScript

import { twMerge } from "tailwind-merge";
import Button from "@moduletrace/twui/layout/Button";
import Span from "@moduletrace/twui/layout/Span";
type Props = {
title: string;
number: number;
current: boolean;
done: boolean;
onSelect: () => void;
};
/**
* One step in the setup's trail: its number and name. Any step can be
* opened, in any order.
*/
export default function SetupStepItem({ title, number, current, done, onSelect }: Props) {
return (
<Button
title={`Step ${number}: ${title}`}
type="button"
variant="ghost"
color="text"
aria-current={current ? "step" : undefined}
className={twMerge(
"gap-2! px-2! py-1! rounded-default-sm text-ink-secondary dark:text-ink-secondary hover:text-ink hover:dark:text-ink hover:bg-sunken hover:dark:bg-sunken focus-visible:ring-2 focus-visible:ring-ink",
current && "text-ink dark:text-ink font-bold",
)}
onClick={onSelect}
>
<Span
className={twMerge(
"size-5 shrink-0 flex items-center justify-center rounded-full border border-solid border-hairline-strong text-[11px] leading-none",
(current || done) && "bg-ink text-on-ink border-ink",
)}
>
{number}
</Span>
<Span className="text-[13px] leading-5">{title}</Span>
</Button>
);
}