Skip to content

Commit 61e0e68

Browse files
izadoesdevizadoesdev
committed
fix: feature flags
1 parent f76124f commit 61e0e68

File tree

2 files changed

+75
-65
lines changed

2 files changed

+75
-65
lines changed

‎apps/dashboard/app/(main)/websites/[id]/flags/_components/flag-row.tsx‎

Lines changed: 62 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
} from '@phosphor-icons/react';
1111
import { useState } from 'react';
1212
import { toast } from 'sonner';
13-
import { Badge } from '@/components/ui/badge';
1413
import { Button } from '@/components/ui/button';
1514
import { Card } from '@/components/ui/card';
1615
import { trpc } from '@/lib/trpc';
@@ -73,43 +72,55 @@ export function FlagRow({
7372
};
7473

7574
const getStatusBadge = (status: string) => {
76-
switch (status) {
77-
case 'active':
78-
return (
79-
<Badge className="bg-accent text-accent-foreground">● Active</Badge>
80-
);
81-
case 'inactive':
82-
return <Badge variant="secondary">○ Inactive</Badge>;
83-
case 'archived':
84-
return <Badge variant="outline">Archived</Badge>;
85-
default:
86-
return <Badge variant="secondary">{status}</Badge>;
75+
if (status === 'active') {
76+
return (
77+
<span className="inline-flex items-center gap-1 rounded border border-green-200 bg-green-50 px-2 py-0.5 text-green-700 text-xs dark:border-green-900/60 dark:bg-green-950 dark:text-green-300">
78+
<span className="h-1.5 w-1.5 rounded bg-green-500" />
79+
Active
80+
</span>
81+
);
8782
}
88-
};
89-
90-
const getTypeInfo = () => {
91-
const ruleCount = Array.isArray(flag.rules) ? flag.rules.length : 0;
92-
const rollout = flag.rolloutPercentage || 0;
93-
94-
const typeText = flag.type;
95-
const details = [];
96-
97-
if (rollout > 0) {
98-
details.push(`${rollout}% rollout`);
83+
if (status === 'inactive') {
84+
return (
85+
<span className="inline-flex items-center gap-1 rounded border border-zinc-300 bg-zinc-50 px-2 py-0.5 text-xs text-zinc-700 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300">
86+
<span className="h-1.5 w-1.5 rounded bg-zinc-400" />
87+
Inactive
88+
</span>
89+
);
9990
}
100-
101-
if (ruleCount > 0) {
102-
details.push(`${ruleCount} rule${ruleCount !== 1 ? 's' : ''}`);
103-
} else {
104-
details.push('No rules');
91+
if (status === 'archived') {
92+
return (
93+
<span className="inline-flex items-center gap-1 rounded border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-700 text-xs dark:border-amber-900/60 dark:bg-amber-950 dark:text-amber-300">
94+
<span className="h-1.5 w-1.5 rounded bg-amber-500" />
95+
Archived
96+
</span>
97+
);
10598
}
106-
107-
return `${typeText} • ${details.join(' • ')}`;
99+
return (
100+
<span className="inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-muted-foreground text-xs">
101+
{status}
102+
</span>
103+
);
108104
};
109105

106+
const ruleCount = Array.isArray(flag.rules) ? flag.rules.length : 0;
107+
const rollout =
108+
typeof flag.rolloutPercentage === 'number' ? flag.rolloutPercentage : 0;
109+
const isBooleanFlag = String(flag.type).toLowerCase() === 'boolean';
110+
const defaultLabel =
111+
isBooleanFlag && typeof flag.defaultValue === 'boolean'
112+
? `Default: ${flag.defaultValue ? 'On' : 'Off'}`
113+
: undefined;
114+
110115
return (
111116
<Card
112-
className="mb-4 cursor-pointer select-none overflow-hidden rounded border bg-background transition focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]"
117+
className={`mb-4 cursor-pointer select-none overflow-hidden rounded border bg-background transition focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] ${
118+
flag.status === 'active'
119+
? 'border-l-4 border-l-green-500'
120+
: flag.status === 'inactive'
121+
? 'border-l-4 border-l-zinc-400'
122+
: 'border-l-4 border-l-amber-500'
123+
}`}
113124
onClick={handleCardClick}
114125
onKeyDown={(e) => {
115126
if ((e.key === 'Enter' || e.key === ' ') && onToggle) {
@@ -129,26 +140,27 @@ export function FlagRow({
129140
{flag.key}
130141
</h3>
131142
{getStatusBadge(flag.status)}
132-
<span
133-
className="flex items-center gap-1 rounded border px-2 py-0.5 text-xs"
134-
style={{
135-
background: 'var(--color-muted)',
136-
color: 'var(--color-foreground)',
137-
borderColor: 'var(--color-border)',
138-
}}
139-
>
140-
<FlagIcon
141-
className="mr-1 h-3 w-3"
142-
style={{ color: 'var(--color-primary)' }}
143-
weight="duotone"
144-
/>
145-
<span>{flag.type}</span>
146-
{flag.rolloutPercentage && flag.rolloutPercentage > 0 && (
147-
<span style={{ color: 'var(--color-muted-foreground)' }}>
148-
• {flag.rolloutPercentage}%
149-
</span>
150-
)}
143+
{/* Compact info chips */}
144+
<span className="inline-flex items-center gap-1 rounded border px-2 py-0.5 text-muted-foreground text-xs">
145+
<FlagIcon className="h-3 w-3" weight="duotone" />
146+
<span className="capitalize">{flag.type}</span>
151147
</span>
148+
{rollout > 0 && (
149+
<span className="inline-flex items-center gap-1 rounded border px-2 py-0.5 text-muted-foreground text-xs">
150+
<span className="h-1.5 w-1.5 rounded bg-primary" />
151+
{rollout}% rollout
152+
</span>
153+
)}
154+
{ruleCount > 0 && (
155+
<span className="inline-flex items-center gap-1 rounded border px-2 py-0.5 text-muted-foreground text-xs">
156+
{ruleCount} rule{ruleCount !== 1 ? 's' : ''}
157+
</span>
158+
)}
159+
{defaultLabel && (
160+
<span className="inline-flex items-center gap-1 rounded border px-2 py-0.5 text-muted-foreground text-xs">
161+
{defaultLabel}
162+
</span>
163+
)}
152164
</div>
153165
{flag.name && (
154166
<p className="mb-1 font-medium text-foreground text-sm">

‎apps/dashboard/app/(main)/websites/[id]/flags/page.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -144,21 +144,19 @@ export default function FlagsPage() {
144144
websiteId={websiteId}
145145
websiteName={website?.name || undefined}
146146
/>
147-
{isExperimentEnabled && (
148-
<div className="flex items-center gap-2">
149-
<FlagIcon
150-
className="h-5 w-5 text-primary"
151-
color={isExperimentEnabled ? 'red' : 'blue'}
152-
size={16}
153-
weight="fill"
154-
/>
155-
{isExperimentEnabled ? (
156-
<Badge className="bg-red-500">Red Team</Badge>
157-
) : (
158-
<Badge className="bg-blue-500">Blue Team</Badge>
159-
)}
160-
</div>
161-
)}
147+
<div className="flex items-center gap-2">
148+
<FlagIcon
149+
className="h-5 w-5"
150+
color={isExperimentEnabled ? 'red' : 'blue'}
151+
size={16}
152+
weight="fill"
153+
/>
154+
{isExperimentEnabled ? (
155+
<Badge className="bg-red-500 text-white">Red Team</Badge>
156+
) : (
157+
<Badge className="bg-blue-500 text-white">Blue Team</Badge>
158+
)}
159+
</div>
162160
<Suspense fallback={<FlagsListSkeleton />}>
163161
<FlagsList
164162
flags={flags || []}

0 commit comments

Comments
 (0)