fix(workspace): update workspace, me, and settings pages

This commit is contained in:
zhenyi 2026-05-31 13:11:56 +08:00
parent 879aafa3fa
commit e1cbbc1e0f
5 changed files with 26 additions and 28 deletions

View File

@ -10,7 +10,6 @@ interface SuggestionCard {
title: string; title: string;
body: string; body: string;
icon: React.ComponentType<{ className?: string }>; icon: React.ComponentType<{ className?: string }>;
gradient: string;
} }
const SUGGESTIONS: SuggestionCard[] = [ const SUGGESTIONS: SuggestionCard[] = [
@ -18,25 +17,21 @@ const SUGGESTIONS: SuggestionCard[] = [
title: "Code Review", title: "Code Review",
body: "Review my pull request for bugs and improvements", body: "Review my pull request for bugs and improvements",
icon: Code2, icon: Code2,
gradient: "from-emerald-500/10 to-emerald-500/[0.02]",
}, },
{ {
title: "Debug Help", title: "Debug Help",
body: "Help me diagnose this failing test case", body: "Help me diagnose this failing test case",
icon: Bug, icon: Bug,
gradient: "from-amber-500/10 to-amber-500/[0.02]",
}, },
{ {
title: "Explain Code", title: "Explain Code",
body: "Explain how this algorithm works step by step", body: "Explain how this algorithm works step by step",
icon: Lightbulb, icon: Lightbulb,
gradient: "from-violet-500/10 to-violet-500/[0.02]",
}, },
{ {
title: "Refactor", title: "Refactor",
body: "Suggest refactoring for better readability", body: "Suggest refactoring for better readability",
icon: Wand2, icon: Wand2,
gradient: "from-sky-500/10 to-sky-500/[0.02]",
}, },
]; ];
@ -118,7 +113,7 @@ export default function MeChatListPage() {
whileHover={{ scale: 1.02, transition: { duration: 0.15 } }} whileHover={{ scale: 1.02, transition: { duration: 0.15 } }}
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
type="button" type="button"
className={`group cursor-pointer rounded-xl border border-border/40 bg-gradient-to-br ${suggestion.gradient} px-4 py-3.5 text-left transition-all duration-200 hover:border-border/80 hover:shadow-sm hover:ring-1 hover:ring-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`} className="group cursor-pointer rounded-xl border border-border/40 bg-card px-4 py-3.5 text-left transition-[background-color,border-color,box-shadow,transform] duration-200 hover:border-border/80 hover:bg-muted/30 hover:shadow-sm hover:ring-1 hover:ring-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => handleQuickStart(suggestion.title, suggestion.body)} onClick={() => handleQuickStart(suggestion.title, suggestion.body)}
aria-label={`${suggestion.title}: ${suggestion.body}`} aria-label={`${suggestion.title}: ${suggestion.body}`}
> >

View File

@ -81,7 +81,7 @@ export function ActivityFeed({ relationCounts }: { relationCounts: { followers:
{new Date(apply.updated_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })} {new Date(apply.updated_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
</p> </p>
</div> </div>
<span className="font-mono text-[10px] uppercase tracking-wider text-amber-600 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5"> <span className="rounded-md border border-warning/20 bg-warning/10 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-warning">
Pending Pending
</span> </span>
</div> </div>

View File

@ -32,7 +32,7 @@ function TwoFactorSection() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Shield className="size-4 text-green-600" /> <Shield className="size-4 text-success" />
Two-factor authentication enabled Two-factor authentication enabled
</CardTitle> </CardTitle>
<CardDescription>Your account is protected with 2FA</CardDescription> <CardDescription>Your account is protected with 2FA</CardDescription>
@ -51,7 +51,7 @@ function TwoFactorSection() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<ShieldOff className="size-4 text-amber-600" /> <ShieldOff className="size-4 text-warning" />
Two-factor authentication Two-factor authentication
</CardTitle> </CardTitle>
<CardDescription>Add an extra layer of security to your account</CardDescription> <CardDescription>Add an extra layer of security to your account</CardDescription>
@ -138,7 +138,7 @@ function EmailSection() {
</form> </form>
)} )}
{changeEmail.isSuccess && ( {changeEmail.isSuccess && (
<p className="mt-4 text-sm text-green-600">Verification email sent. Check your inbox.</p> <p className="mt-4 text-sm text-success">Verification email sent. Check your inbox.</p>
)} )}
{changeEmail.isError && ( {changeEmail.isError && (
<p className="mt-4 text-sm text-destructive">Failed to change email. Please try again.</p> <p className="mt-4 text-sm text-destructive">Failed to change email. Please try again.</p>

View File

@ -68,10 +68,10 @@ export function CreateWorkspaceDialog({
<DialogTrigger render={children as React.ReactElement} /> <DialogTrigger render={children as React.ReactElement} />
<DialogContent className="sm:max-w-md p-6"> <DialogContent className="sm:max-w-md p-6">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-lg font-semibold text-zinc-950"> <DialogTitle className="text-lg font-semibold text-foreground">
Create a new workspace Create a new workspace
</DialogTitle> </DialogTitle>
<DialogDescription className="text-base text-zinc-500"> <DialogDescription className="text-sm text-muted-foreground">
Workspaces organize your projects, repositories, and team collaboration. Workspaces organize your projects, repositories, and team collaboration.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
@ -81,28 +81,30 @@ export function CreateWorkspaceDialog({
onSubmit={(event) => void handleSubmit(event)} onSubmit={(event) => void handleSubmit(event)}
> >
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-semibold text-zinc-950" htmlFor="wk-name"> <Label className="text-sm font-semibold text-foreground" htmlFor="wk-name">
Name Name
</Label> </Label>
<Input <Input
className="h-12 rounded-xl border-zinc-300 bg-zinc-50 text-base" autoComplete="off"
className="h-11 rounded-xl border-input bg-background text-sm"
id="wk-name" id="wk-name"
name="name" name="name"
placeholder="e.g. my-project" placeholder="e.g. my-project"
required required
autoFocus autoFocus
/> />
<p className="text-sm text-zinc-400"> <p className="text-xs text-muted-foreground/70">
This will be used as your workspace URL. Use lowercase letters, numbers, and hyphens. This will be used as your workspace URL. Use lowercase letters, numbers, and hyphens.
</p> </p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-semibold text-zinc-950" htmlFor="wk-description"> <Label className="text-sm font-semibold text-foreground" htmlFor="wk-description">
Description Description
</Label> </Label>
<Textarea <Textarea
className="min-h-24 rounded-xl border-zinc-300 bg-zinc-50 text-base" autoComplete="off"
className="min-h-24 rounded-xl border-input bg-background text-sm"
id="wk-description" id="wk-description"
name="description" name="description"
placeholder="What is this workspace about?" placeholder="What is this workspace about?"
@ -110,14 +112,14 @@ export function CreateWorkspaceDialog({
</div> </div>
{error && ( {error && (
<p className="rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600"> <p aria-live="polite" className="rounded-xl bg-destructive/10 px-4 py-3 text-sm font-medium text-destructive">
{error} {error}
</p> </p>
)} )}
<DialogFooter className="-mx-6 -mb-6 rounded-b-xl border-t border-zinc-200 bg-zinc-50 px-6 py-4 sm:flex-row sm:justify-end"> <DialogFooter className="-mx-6 -mb-6 rounded-b-xl border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end">
<Button <Button
className="h-11 rounded-xl bg-zinc-950 px-5 text-base text-white shadow-inner shadow-white/10 hover:bg-zinc-800" className="h-10 rounded-xl px-5 text-sm"
disabled={submitting} disabled={submitting}
type="submit" type="submit"
> >

View File

@ -102,19 +102,20 @@ function RepoListView({
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="font-heading text-lg font-bold text-foreground">Repositories</h1> <h1 className="font-heading text-lg font-bold text-foreground">Repositories</h1>
<Button className="h-8 rounded px-3 text-[13px]" onClick={onCreate}> <Button className="h-9 rounded-xl px-3 text-[13px]" onClick={onCreate}>
<Plus className="size-3.5 mr-1" /> <Plus className="size-3.5 mr-1" />
New repo New repo
</Button> </Button>
</div> </div>
<div className="mt-6 rounded-md border border-border overflow-hidden"> <div className="mt-6 overflow-hidden rounded-xl border border-border bg-card shadow-sm">
<div className="flex items-center gap-2 bg-muted/50 px-3 py-2 border-b border-border"> <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-2">
<span className="font-mono text-[11px] text-muted-foreground">{repos.length} repositories</span> <span className="font-mono text-[11px] text-muted-foreground">{repos.length} repositories</span>
<div className="ml-auto relative"> <div className="ml-auto relative">
<Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" /> <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
<Input <Input
className="h-7 w-52 rounded-sm border-border bg-card pl-7 text-[12px]" autoComplete="off"
className="h-8 w-52 rounded-lg border-border bg-background pl-7 text-[12px]"
placeholder="Filter repos..." placeholder="Filter repos..."
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
@ -250,11 +251,11 @@ function RepoCreateView({
</p> </p>
{/* Mode tabs */} {/* Mode tabs */}
<div className="mt-5 flex gap-1 rounded-lg bg-muted/50 p-1"> <div className="mt-5 flex gap-1 rounded-xl bg-muted/50 p-1">
{modeTabs.map((tab) => ( {modeTabs.map((tab) => (
<button <button
className={cn( className={cn(
"flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors", "flex flex-1 items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors",
mode === tab.key mode === tab.key
? "bg-background text-foreground shadow-sm" ? "bg-background text-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground", : "text-muted-foreground hover:text-foreground",
@ -330,7 +331,7 @@ function RepoCreateView({
].map((opt) => ( ].map((opt) => (
<button <button
className={cn( className={cn(
"flex items-start gap-2 rounded-md border p-3 text-left transition-colors", "flex items-start gap-2 rounded-xl border p-3 text-left transition-colors",
visibility === opt.value visibility === opt.value
? "border-primary bg-primary/5" ? "border-primary bg-primary/5"
: "border-border hover:border-muted-foreground/30", : "border-border hover:border-muted-foreground/30",
@ -398,7 +399,7 @@ function RepoCreateView({
)} )}
{error && ( {error && (
<p className="rounded-md bg-destructive/5 px-3 py-2 text-[12px] text-destructive">{error}</p> <p aria-live="polite" className="rounded-xl bg-destructive/10 px-3 py-2 text-[12px] text-destructive">{error}</p>
)} )}
{/* Actions */} {/* Actions */}