Skip to content

Commit 88d5928

Browse files
ameer2468ameer2468
committed
improve create org sheet and sidebar
1 parent d513153 commit 88d5928

File tree

14 files changed

+129
-141
lines changed

14 files changed

+129
-141
lines changed

‎apps/dashboard/app/(main)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function MainLayout({
2626
<AuthGuard>
2727
<div className="h-screen overflow-hidden text-foreground">
2828
<Sidebar />
29-
<div className="relative h-screen pl-0 md:pl-84">
29+
<div className="relative h-screen pl-0 md:pl-[304px] lg:pl-84">
3030
<div className="h-screen overflow-y-auto overflow-x-hidden pt-12 md:pt-0">
3131
{children}
3232
</div>

‎apps/dashboard/app/(main)/organizations/components/organizations-list.tsx‎

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -128,52 +128,49 @@ export function OrganizationsList({
128128
key={org.id}
129129
onClick={() => handleCardClick(org.id)}
130130
>
131-
{isActive && (
132-
<div className="absolute top-3 right-3">
133-
<Badge variant="secondary">
134-
<CheckIcon className="mr-1 h-3 w-3" size={12} />
135-
Active
136-
</Badge>
137-
</div>
138-
)}
139-
140131
{isProcessing && (
141132
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm">
142133
<div className="h-6 w-6 animate-spin rounded-full border border-primary/30 border-t-primary" />
143134
</div>
144135
)}
145136

146-
<CardContent>
147-
<div className="space-y-3">
148-
{/* Organization Info */}
149-
<div className="flex items-start gap-3">
150-
<Avatar className="size-9 shrink-0">
151-
<AvatarImage alt={org.name} src={org.logo || undefined} />
152-
<AvatarFallback
153-
className={cn(
154-
"font-medium text-xs",
155-
isActive ? "bg-secondary-brightest" : "bg-accent"
156-
)}
157-
>
158-
{getOrganizationInitials(org.name)}
159-
</AvatarFallback>
160-
</Avatar>
161-
<div className="min-w-0 flex-1">
162-
<h3 className="mb-2 truncate font-semibold text-base">
163-
{org.name}
164-
</h3>
165-
<p className="truncate text-muted-foreground text-sm">
166-
@{org.slug}
167-
</p>
168-
<div className="mt-0.5 flex items-center gap-1">
169-
<CalendarIcon
170-
className="h-3 w-3 text-muted-foreground"
171-
size={12}
172-
/>
173-
<span className="text-muted-foreground text-sm">
174-
Created {dayjs(org.createdAt).fromNow()}
175-
</span>
176-
</div>
137+
<CardContent className="flex flex-col flex-wrap items-start justify-between gap-6 sm:flex-row">
138+
{isActive && (
139+
<Badge
140+
className="order-first xl:order-last"
141+
variant="secondary"
142+
>
143+
<CheckIcon className="size-3" />
144+
Active
145+
</Badge>
146+
)}
147+
<div className="flex flex-col items-start gap-3 space-y-3 md:flex-row">
148+
<Avatar className="size-9 shrink-0">
149+
<AvatarImage alt={org.name} src={org.logo || undefined} />
150+
<AvatarFallback
151+
className={cn(
152+
"font-medium text-xs",
153+
isActive ? "bg-secondary-brightest" : "bg-accent"
154+
)}
155+
>
156+
{getOrganizationInitials(org.name)}
157+
</AvatarFallback>
158+
</Avatar>
159+
<div className="min-w-0 flex-1">
160+
<h3 className="mb-2 truncate font-semibold text-base">
161+
{org.name}
162+
</h3>
163+
<p className="truncate text-muted-foreground text-sm">
164+
@{org.slug}
165+
</p>
166+
<div className="mt-1 flex items-center gap-1">
167+
<CalendarIcon
168+
className="size-3 text-accent-foreground"
169+
weight="duotone"
170+
/>
171+
<span className="text-muted-foreground text-xs">
172+
Created {dayjs(org.createdAt).fromNow()}
173+
</span>
177174
</div>
178175
</div>
179176
</div>

‎apps/dashboard/app/(main)/organizations/members/member-list.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,7 @@ function RoleSelector({
6565
organizationId,
6666
}: RoleSelectorProps) {
6767
if (member.role === "owner") {
68-
return (
69-
<Badge
70-
className="border-amber-200 bg-amber-100 px-2 py-1 text-amber-800"
71-
variant="default"
72-
>
73-
Owner
74-
</Badge>
75-
);
68+
return <Badge variant="amber">Owner</Badge>;
7669
}
7770

7871
return (
@@ -134,7 +127,7 @@ export function MemberList({
134127
<div className="space-y-2">
135128
{members.map((member) => (
136129
<div
137-
className="flex items-center justify-between rounded border border-border/30 bg-muted/20 p-3"
130+
className="flex items-center justify-between rounded border bg-accent-brighter p-3"
138131
key={member.id}
139132
>
140133
<div className="flex items-center gap-3">
@@ -149,15 +142,15 @@ export function MemberList({
149142
</Avatar>
150143
<div className="min-w-0 flex-1">
151144
<div className="flex items-center gap-2">
152-
<p className="truncate font-medium text-sm">
153-
{member.user.name}
154-
</p>
155145
{member.role === "owner" && (
156146
<CrownIcon
157147
className="h-3 w-3 shrink-0 text-amber-500"
158148
size={12}
159149
/>
160150
)}
151+
<p className="truncate font-medium text-sm">
152+
{member.user.name}
153+
</p>
161154
</div>
162155
<p className="truncate text-muted-foreground text-xs">
163156
{member.user.email}

‎apps/dashboard/app/(main)/settings/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,8 @@ export default function SettingsPage() {
146146
<PageHeader description={description} icon={icon} title={title} />
147147
<main className="flex-1 overflow-y-auto p-4">
148148
{activeTab === "profile" && (
149-
<Card className="shadow-sm">
150-
<CardContent className="pt-6">
149+
<Card>
150+
<CardContent>
151151
<ProfileForm />
152152
</CardContent>
153153
</Card>

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

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -92,46 +92,48 @@ export function CategorySidebar({
9292
</Link>
9393
</div>
9494

95-
{categories.map((category, index) => {
96-
const Icon = category.icon;
97-
const isActive = activeCategory === category.id;
98-
99-
return (
100-
<Tooltip delayDuration={500} key={category.id}>
101-
<TooltipTrigger asChild>
102-
<button
103-
className={cn(
104-
index === 0
105-
? "box-content border-t-0 border-b"
106-
: index === categories.length - 1
107-
? "box-content border-b-0"
108-
: "box-content border-b",
109-
"flex h-10 items-center justify-center border-transparent px-3 transition-colors duration-200",
110-
"focus:outline-none",
111-
isActive
112-
? "cursor-default bg-accent text-sidebar-accent-foreground hover:bg-accent"
113-
: "cursor-pointer hover:bg-sidebar-accent"
114-
)}
115-
onClick={() => onCategoryChangeAction?.(category.id)}
116-
type="button"
117-
>
118-
<Icon
95+
<div className="border-b">
96+
{categories.map((category, idx) => {
97+
const Icon = category.icon;
98+
const isActive = activeCategory === category.id;
99+
100+
return (
101+
<Tooltip delayDuration={500} key={category.id}>
102+
<TooltipTrigger asChild>
103+
<button
119104
className={cn(
120-
"h-5 w-5 transition-colors",
121-
isActive
122-
? "text-sidebar-ring"
123-
: "text-sidebar-primary-foreground/70"
105+
"relative flex h-10 w-full items-center justify-center transition-colors duration-200 hover:bg-accent",
106+
"focus:outline-none"
124107
)}
125-
weight={isActive ? "fill" : "duotone"}
126-
/>
127-
</button>
128-
</TooltipTrigger>
129-
<TooltipContent side="right" sideOffset={8}>
130-
{category.name}
131-
</TooltipContent>
132-
</Tooltip>
133-
);
134-
})}
108+
onClick={() => onCategoryChangeAction?.(category.id)}
109+
type="button"
110+
>
111+
{isActive && (
112+
<div
113+
className={cn(
114+
"absolute top-0 left-0 z-[-1] h-full w-full border-accent border-b bg-accent",
115+
idx === 0 ? "box-border" : "box-content"
116+
)}
117+
/>
118+
)}
119+
<Icon
120+
className={cn(
121+
"h-5 w-5 transition-colors",
122+
isActive
123+
? "text-sidebar-ring"
124+
: "text-sidebar-primary-foreground/70"
125+
)}
126+
weight={isActive ? "fill" : "duotone"}
127+
/>
128+
</button>
129+
</TooltipTrigger>
130+
<TooltipContent side="right" sideOffset={8}>
131+
{category.name}
132+
</TooltipContent>
133+
</Tooltip>
134+
);
135+
})}
136+
</div>
135137

136138
<div className="flex-1" />
137139

‎apps/dashboard/components/layout/navigation/mobile-category-selector.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,20 @@ export function MobileCategorySelector({
6767
<Button
6868
className="flex h-10 w-full items-center justify-between px-3"
6969
type="button"
70-
variant="outline"
70+
variant="secondary"
7171
>
7272
<div className="flex items-center gap-2">
7373
{currentCategory?.icon && (
74-
<currentCategory.icon className="h-4 w-4" weight="duotone" />
74+
<currentCategory.icon
75+
className="size-4 text-sidebar-foreground"
76+
weight="duotone"
77+
/>
7578
)}
76-
<span>{currentCategory?.name || "Select Category"}</span>
79+
<span className="text-sidebar-foreground text-sm">
80+
{currentCategory?.name || "Select Category"}
81+
</span>
7782
</div>
78-
<CaretDownIcon className="h-4 w-4" weight="fill" />
83+
<CaretDownIcon className="size-4" />
7984
</Button>
8085
</DropdownMenuTrigger>
8186
<DropdownMenuContent className="w-full min-w-(--radix-dropdown-menu-trigger-width)">
@@ -93,7 +98,7 @@ export function MobileCategorySelector({
9398
>
9499
<Icon
95100
className={cn(
96-
"h-4 w-4",
101+
"size-4",
97102
isActive ? "text-sidebar-ring" : "text-muted-foreground"
98103
)}
99104
weight={isActive ? "fill" : "duotone"}

‎apps/dashboard/components/layout/navigation/navigation-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export function NavigationItem({
7878
size={20}
7979
/>
8080
) : (
81-
<Icon aria-hidden="true" className="size-5 shrink-0" weight="duotone" />
81+
<Icon aria-hidden="true" className="size-4 shrink-0" />
8282
)}
8383
<span className="flex-1">{name}</span>
8484
</>

‎apps/dashboard/components/layout/navigation/navigation-section.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export const NavigationSection = memo(function NavigationSectionComponent({
125125
<button
126126
className={clsx(
127127
className,
128-
"box-content flex h-10 items-center gap-3 px-3 text-left font-medium text-sidebar-foreground text-sm transition-colors focus:outline-none",
128+
"flex h-10 items-center gap-3 px-3 py-2.5 text-left font-medium text-sidebar-foreground text-sm transition-colors focus:outline-none",
129129
isExpanded
130130
? "border-b-0 bg-sidebar-accent-brighter"
131131
: "hover:bg-sidebar-accent-brighter"
@@ -136,7 +136,7 @@ export const NavigationSection = memo(function NavigationSectionComponent({
136136
type="button"
137137
>
138138
<Icon className="size-5 shrink-0 text-sidebar-ring" weight="fill" />
139-
<span className="flex-1 text-sm">{title}</span>
139+
<span className="flex-1 truncate text-sm">{title}</span>
140140
<div className="shrink-0">
141141
<CaretDownIcon
142142
className={clsx(

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ function OrganizationSelectorTrigger({
8080
<div className="flex w-full items-center justify-between">
8181
<div className="flex items-center gap-3">
8282
<div className="rounded">
83-
<Avatar className="h-5 w-5">
83+
<Avatar className="size-7 bg-accent">
8484
<AvatarImage
8585
alt={activeOrganization?.name || "Personal"}
8686
className="rounded"

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export function Sidebar() {
187187
<div className="flex h-8 w-8 items-center justify-center">
188188
<Image
189189
alt="Databuddy Logo"
190-
className="drop-shadow-sm invert dark:invert-0"
190+
className="invert dark:invert-0"
191191
height={24}
192192
priority
193193
src="/logo.svg"
@@ -262,11 +262,13 @@ export function Sidebar() {
262262
<NavigationSection
263263
accordionStates={accordionStates}
264264
className={
265-
idx === navigation.length - 1
265+
navigation.length > 1 && idx === navigation.length - 1
266266
? "border-t"
267-
: idx === 0
268-
? "border-t-0 border-b"
269-
: "border-0"
267+
: idx === 0 && navigation.length < 2
268+
? "border-b"
269+
: idx !== 0 && navigation.length > 1
270+
? "border-t"
271+
: "border-transparent"
270272
}
271273
currentWebsiteId={currentWebsiteId}
272274
icon={section.icon}

0 commit comments

Comments
 (0)