fix(workspace): update workspace, me, and settings pages
This commit is contained in:
parent
879aafa3fa
commit
e1cbbc1e0f
@ -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}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -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 */}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user