Skip to content

Commit e874851

Browse files
izadoesdevizadoesdev
committed
feat: dialog better
1 parent d881cee commit e874851

File tree

6 files changed

+43
-66
lines changed

6 files changed

+43
-66
lines changed

‎apps/dashboard/components/layout/category-sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function CategorySidebar({
5858
<div className="fixed inset-y-0 left-0 z-40 w-12 border-r bg-sidebar-primary border-sidebar-border">
5959
<div className="flex h-full flex-col">
6060
{/* Logo */}
61-
<div className="flex h-16 items-center justify-center border-sidebar-border border-b">
61+
<div className="flex h-12 items-center justify-center border-sidebar-border border-b">
6262
<Link
6363
className="relative flex-shrink-0 transition-opacity hover:opacity-80"
6464
href="/websites"

‎apps/dashboard/components/layout/navigation/sandbox-header.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import Link from 'next/link';
33

44
export function SandboxHeader() {
55
return (
6-
<div className="border-border border-b bg-accent/20">
6+
<div className="border-sidebar-border border-b bg-sidebar-accent">
77
{/* Sandbox info - aligned with logo section */}
8-
<div className="flex h-16 items-center justify-center border-border border-b bg-gradient-to-r from-accent/30 to-accent/10 px-5">
8+
<div className="flex h-12 items-center border-sidebar-border border-b bg-gradient-to-r from-sidebar-accent to-sidebar-accent/80 px-3">
99
<div className="flex w-full items-center gap-3">
10-
<div className="rounded-lg bg-background/80 p-1.5 shadow-sm ring-1 ring-border/50">
10+
<div className="rounded-lg bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-sidebar-border/50">
1111
<TestTubeIcon
12-
className="size-5 flex-shrink-0 text-primary/70"
12+
className="size-5 flex-shrink-0 text-sidebar-ring"
1313
weight="duotone"
1414
/>
1515
</div>
1616
<div className="flex min-w-0 flex-1 flex-col items-start">
17-
<h2 className="truncate text-left font-semibold text-foreground text-sm">
17+
<h2 className="truncate text-left font-semibold text-sidebar-accent-foreground text-sm">
1818
Sandbox
1919
</h2>
20-
<p className="truncate text-left text-muted-foreground/80 text-xs">
20+
<p className="truncate text-left text-sidebar-accent-foreground/70 text-xs">
2121
Test & Experiment
2222
</p>
2323
</div>
@@ -26,15 +26,15 @@ export function SandboxHeader() {
2626

2727
{/* Back navigation - aligned with category buttons */}
2828
<button
29-
className="flex items-center justify-center p-2 transition-colors hover:bg-muted/50"
29+
className="flex items-center justify-start px-3 py-2 transition-colors hover:bg-sidebar-accent/60"
3030
type="button"
3131
>
3232
<Link className="flex items-center gap-2" href="/">
3333
<CaretLeftIcon
34-
className="hover:-translate-x-0.5 h-5 w-5 flex-shrink-0 transition-transform"
34+
className="hover:-translate-x-0.5 h-5 w-5 flex-shrink-0 transition-transform text-sidebar-accent-foreground/80"
3535
weight="fill"
3636
/>
37-
<span className="text-muted-foreground text-xs">
37+
<span className="text-sidebar-accent-foreground/70 text-xs">
3838
Back to Dashboard
3939
</span>
4040
</Link>

‎apps/dashboard/components/layout/navigation/website-header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function WebsiteHeader({ website }: WebsiteHeaderProps) {
1212
return (
1313
<div className="border-sidebar-border border-b bg-sidebar-accent">
1414
{/* Website info - aligned with logo section */}
15-
<div className="flex h-16 items-center justify-center border-sidebar-border border-b bg-gradient-to-r from-sidebar-accent to-sidebar-accent/80 px-5">
15+
<div className="flex h-12 items-center border-sidebar-border border-b bg-gradient-to-r from-sidebar-accent to-sidebar-accent/80 px-3">
1616
<div className="flex w-full items-center gap-3">
1717
<div className="rounded-lg bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-sidebar-border/50">
1818
<FaviconImage
@@ -50,7 +50,7 @@ export function WebsiteHeader({ website }: WebsiteHeaderProps) {
5050

5151
{/* Back navigation - aligned with category buttons */}
5252
<button
53-
className="group flex w-full cursor-pointer items-start justify-start p-2 transition-colors hover:bg-sidebar-accent/60"
53+
className="group flex w-full cursor-pointer items-center justify-start px-3 py-2 transition-colors hover:bg-sidebar-accent/60"
5454
type="button"
5555
>
5656
<Link className="flex items-center gap-2" href="/websites">

‎apps/dashboard/components/layout/organization-selector.tsx‎

Lines changed: 27 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import {
66
PlusIcon,
77
SpinnerGapIcon,
88
UserIcon,
9-
UsersIcon,
109
} from '@phosphor-icons/react';
11-
import { useRouter } from 'next/navigation';
1210
import { useCallback, useState } from 'react';
1311
import { CreateOrganizationDialog } from '@/components/organizations/create-organization-dialog';
1412
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -73,7 +71,7 @@ function OrganizationSelectorTrigger({
7371
return (
7472
<div
7573
className={cn(
76-
'flex h-16 w-full items-center border-sidebar-border border-b bg-sidebar-accent px-5 py-3 transition-colors',
74+
'flex h-12 w-full items-center border-sidebar-border border-b bg-sidebar-accent px-3 py-3 transition-colors',
7775
'hover:bg-sidebar-accent/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring/50',
7876
isSettingActiveOrganization && 'cursor-not-allowed opacity-70',
7977
isOpen && 'bg-sidebar-accent/60'
@@ -138,20 +136,16 @@ export function OrganizationSelector() {
138136
hasError,
139137
activeOrganizationError,
140138
} = useOrganizations();
141-
const router = useRouter();
142139
const [isOpen, setIsOpen] = useState(false);
143140
const [showCreateDialog, setShowCreateDialog] = useState(false);
144141
const [query, setQuery] = useState('');
145142

146-
// Handle case where active organization is not found (deleted)
147143
const [hasHandledMissingOrg, setHasHandledMissingOrg] = useState(false);
148144

149-
// Check if the error indicates the organization was not found
150145
const isActiveOrgNotFound =
151146
activeOrganizationError?.message?.includes('ORGANIZATION_NOT_FOUND') ||
152147
activeOrganizationError?.message?.includes('Organization not found');
153148

154-
// Auto-recover from deleted active organization
155149
if (
156150
isActiveOrgNotFound &&
157151
!hasHandledMissingOrg &&
@@ -181,16 +175,11 @@ export function OrganizationSelector() {
181175
setIsOpen(false);
182176
}, []);
183177

184-
const handleManageOrganizations = useCallback(() => {
185-
router.push('/organizations');
186-
setIsOpen(false);
187-
}, [router]);
188-
189178
const filteredOrganizations = filterOrganizations(organizations, query);
190179

191180
if (isLoading) {
192181
return (
193-
<div className="flex h-16 w-full items-center border-sidebar-border border-b bg-sidebar-accent px-5 py-3">
182+
<div className="flex h-12 w-full items-center border-sidebar-border border-b bg-sidebar-accent px-3 py-3">
194183
<div className="flex w-full items-center justify-between">
195184
<div className="flex items-center gap-3">
196185
<div className="rounded-lg bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-sidebar-border/50">
@@ -209,7 +198,7 @@ export function OrganizationSelector() {
209198

210199
if (hasError && !isActiveOrgNotFound) {
211200
return (
212-
<div className="border-sidebar-border border-b bg-destructive/10 px-5 py-3">
201+
<div className="border-sidebar-border border-b bg-destructive/10 px-3 py-3">
213202
<div className="flex items-center gap-3">
214203
<div className="rounded bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-destructive/50">
215204
<UserIcon className="h-5 w-5 text-destructive" weight="duotone" />
@@ -251,24 +240,23 @@ export function OrganizationSelector() {
251240
/>
252241
</Button>
253242
</DropdownMenuTrigger>
254-
<DropdownMenuContent align="start" className="w-72 p-1" sideOffset={4}>
255-
{/* Personal Workspace */}
243+
<DropdownMenuContent
244+
align="start"
245+
className="w-72 rounded-none border-sidebar-border bg-sidebar p-0"
246+
sideOffset={0}
247+
>
256248
<DropdownMenuItem
257249
className={cn(
258-
'flex cursor-pointer items-center gap-3 rounded px-2 py-2 transition-colors',
259-
'focus:bg-accent focus:text-accent-foreground',
260-
!activeOrganization && 'bg-accent text-accent-foreground'
250+
'flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors',
251+
'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground text-sidebar-foreground/70',
252+
!activeOrganization && 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
261253
)}
262254
onClick={() => handleSelectOrganization(null)}
263255
>
264-
<Avatar className="h-6 w-6">
265-
<AvatarFallback className="bg-muted text-xs">
266-
<UserIcon className="not-dark:text-primary" weight="duotone" />
267-
</AvatarFallback>
268-
</Avatar>
256+
<UserIcon className="h-5 w-5 not-dark:text-primary" weight="duotone" />
269257
<div className="flex min-w-0 flex-1 flex-col items-start text-left">
270258
<span className="text-left font-medium text-sm">Personal</span>
271-
<span className="text-left text-muted-foreground text-xs">
259+
<span className="text-left text-sidebar-foreground/70 text-xs">
272260
Your workspace
273261
</span>
274262
</div>
@@ -281,36 +269,36 @@ export function OrganizationSelector() {
281269
</DropdownMenuItem>
282270

283271
{filteredOrganizations && filteredOrganizations.length > 0 && (
284-
<div className="flex flex-col gap-1">
285-
<DropdownMenuSeparator className="my-1" />
272+
<div className="flex flex-col">
273+
<DropdownMenuSeparator className="my-1 bg-sidebar-border" />
286274
{filteredOrganizations.map((org) => (
287275
<DropdownMenuItem
288276
className={cn(
289-
'flex cursor-pointer items-center gap-3 rounded px-2 py-2 transition-colors',
290-
'focus:bg-accent focus:text-accent-foreground',
277+
'flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors',
278+
'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground text-sidebar-foreground/70',
291279
activeOrganization?.id === org.id &&
292-
'bg-accent text-accent-foreground'
280+
'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
293281
)}
294282
key={org.id}
295283
onClick={() => handleSelectOrganization(org.id)}
296284
>
297-
<Avatar className="h-6 w-6">
285+
<Avatar className="h-5 w-5">
298286
<AvatarImage alt={org.name} src={org.logo || undefined} />
299-
<AvatarFallback className="bg-muted text-xs">
287+
<AvatarFallback className="bg-sidebar-primary/30 text-xs">
300288
{getOrganizationInitials(org.name)}
301289
</AvatarFallback>
302290
</Avatar>
303291
<div className="flex min-w-0 flex-1 flex-col items-start text-left">
304292
<span className="truncate text-left font-medium text-sm">
305293
{org.name}
306294
</span>
307-
<span className="truncate text-left text-muted-foreground text-xs">
295+
<span className="truncate text-left text-sidebar-foreground/70 text-xs">
308296
{org.slug}
309297
</span>
310298
</div>
311299
{activeOrganization?.id === org.id && (
312300
<CheckIcon
313-
className="h-4 w-4 text-primary"
301+
className="h-4 w-4 not-dark:text-primary"
314302
weight="duotone"
315303
/>
316304
)}
@@ -320,30 +308,19 @@ export function OrganizationSelector() {
320308
)}
321309

322310
{filteredOrganizations.length === 0 && (
323-
<div className="px-2 py-2 text-muted-foreground text-xs">
324-
No workspaces match “{query}”.
311+
<div className="px-4 py-2.5 text-sidebar-foreground/60 text-xs">
312+
No workspaces match "{query}".
325313
</div>
326314
)}
327315

328-
<DropdownMenuSeparator className="my-1" />
316+
<DropdownMenuSeparator className="my-1 bg-sidebar-border" />
329317
<DropdownMenuItem
330-
className="flex cursor-pointer items-center gap-3 rounded px-2 py-2 transition-colors focus:bg-accent focus:text-accent-foreground"
318+
className="flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground text-sidebar-foreground/70"
331319
onClick={handleCreateOrganization}
332320
>
333-
<div className="flex h-6 w-6 items-center justify-center rounded bg-muted">
334-
<PlusIcon className="not-dark:text-primary" />
335-
</div>
321+
<PlusIcon className="h-5 w-5 not-dark:text-primary" />
336322
<span className="font-medium text-sm">Create Organization</span>
337323
</DropdownMenuItem>
338-
<DropdownMenuItem
339-
className="flex cursor-pointer items-center gap-3 rounded px-2 py-2 transition-colors focus:bg-accent focus:text-accent-foreground"
340-
onClick={handleManageOrganizations}
341-
>
342-
<div className="flex h-6 w-6 items-center justify-center rounded bg-muted">
343-
<UsersIcon className="not-dark:text-primary" weight="duotone" />
344-
</div>
345-
<span className="font-medium text-sm">Manage Organizations</span>
346-
</DropdownMenuItem>
347324
</DropdownMenuContent>
348325
</DropdownMenu>
349326

‎apps/dashboard/components/layout/sidebar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export function Sidebar() {
149149
return (
150150
<>
151151
{/* Mobile Header */}
152-
<header className="fixed top-0 right-0 left-0 z-50 h-16 w-full border-b bg-background md:hidden">
152+
<header className="fixed top-0 right-0 left-0 z-50 h-12 w-full border-b bg-background md:hidden">
153153
<div className="flex h-full items-center justify-between px-4">
154154
<div className="flex items-center gap-3">
155155
<Button
@@ -209,8 +209,8 @@ export function Sidebar() {
209209
className={cn(
210210
'fixed inset-y-0 z-40 w-72 bg-sidebar',
211211
'border-r border-sidebar-border transition-transform duration-200 ease-out',
212-
'left-0 md:left-12', // Mobile: left-0, Desktop: left-12 (after category sidebar)
213-
'pt-16 md:pt-0', // Mobile: account for mobile header, Desktop: no top padding
212+
'left-0 md:left-12',
213+
'pt-12 md:pt-0',
214214
'md:translate-x-0',
215215
isMobileOpen ? 'translate-x-0' : '-translate-x-full'
216216
)}

‎apps/dashboard/components/website-dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export function WebsiteDialog({
103103
toast.success('Website created successfully!');
104104
}
105105
onOpenChange(false);
106-
} catch (error) {
106+
} catch (error: never) {
107107
const message =
108108
error.data?.code === 'CONFLICT'
109109
? 'A website with this domain already exists.'

0 commit comments

Comments
 (0)