chore: style updates 372ca782
Steve · 2025-10-28 15:33 3 file(s) · +192 −188
src/components/app-sidebar.tsx +11 −5
1 1
"use client";
2 2
3 3
import * as React from "react";
4 -
import { Command, Plus, RotateCw } from "lucide-react";
4 +
import {
5 +
	ChartNoAxesColumnIcon,
6 +
	ChartNoAxesGanttIcon,
7 +
	CircleSlash2,
8 +
	Command,
9 +
	Plus,
10 +
	RotateCw,
11 +
} from "lucide-react";
5 12
6 13
import { NavUser } from "@/components/nav-user";
7 14
import { NavFeeds } from "@/components/nav-feeds";
78 85
79 86
	// Get posts based on selected feed
80 87
	const allPosts = useQuery(allPostsQuery);
81 -
	const feedPosts = selectedFeedId
82 -
		? useQuery(postsByFeedQuery(selectedFeedId))
83 -
		: allPosts;
88 +
	const feedPostsQuery = useQuery(postsByFeedQuery(selectedFeedId || ""));
89 +
	const feedPosts = selectedFeedId ? feedPostsQuery : allPosts;
84 90
85 91
	// Filter posts by search query
86 92
	const filteredPosts = React.useMemo(() => {
168 174
								<SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
169 175
									<a href="#">
170 176
										<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
171 -
											<Command className="size-4" />
177 +
											<ChartNoAxesGanttIcon className="size-4" />
172 178
										</div>
173 179
										<div className="grid flex-1 text-left text-sm leading-tight">
174 180
											<span className="truncate font-medium">Alcove</span>
src/components/nav-user.tsx +93 −102
1 1
import {
2 -
  BadgeCheck,
3 -
  Bell,
4 -
  ChevronsUpDown,
5 -
  CreditCard,
6 -
  LogOut,
7 -
  Sparkles,
8 -
} from "lucide-react"
2 +
	BadgeCheck,
3 +
	Bell,
4 +
	ChevronsUpDown,
5 +
	CreditCard,
6 +
	LogOut,
7 +
	Settings,
8 +
	Sparkles,
9 +
} from "lucide-react";
9 10
11 +
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
10 12
import {
11 -
  Avatar,
12 -
  AvatarFallback,
13 -
  AvatarImage,
14 -
} from "@/components/ui/avatar"
15 -
import {
16 -
  DropdownMenu,
17 -
  DropdownMenuContent,
18 -
  DropdownMenuGroup,
19 -
  DropdownMenuItem,
20 -
  DropdownMenuLabel,
21 -
  DropdownMenuSeparator,
22 -
  DropdownMenuTrigger,
23 -
} from "@/components/ui/dropdown-menu"
13 +
	DropdownMenu,
14 +
	DropdownMenuContent,
15 +
	DropdownMenuGroup,
16 +
	DropdownMenuItem,
17 +
	DropdownMenuLabel,
18 +
	DropdownMenuSeparator,
19 +
	DropdownMenuTrigger,
20 +
} from "@/components/ui/dropdown-menu";
24 21
import {
25 -
  SidebarMenu,
26 -
  SidebarMenuButton,
27 -
  SidebarMenuItem,
28 -
  useSidebar,
29 -
} from "@/components/ui/sidebar"
22 +
	SidebarMenu,
23 +
	SidebarMenuButton,
24 +
	SidebarMenuItem,
25 +
	useSidebar,
26 +
} from "@/components/ui/sidebar";
30 27
31 28
export function NavUser({
32 -
  user,
29 +
	user,
33 30
}: {
34 -
  user: {
35 -
    name: string
36 -
    email: string
37 -
    avatar: string
38 -
  }
31 +
	user: {
32 +
		name: string;
33 +
		email: string;
34 +
		avatar: string;
35 +
	};
39 36
}) {
40 -
  const { isMobile } = useSidebar()
37 +
	const { isMobile } = useSidebar();
41 38
42 -
  return (
43 -
    <SidebarMenu>
44 -
      <SidebarMenuItem>
45 -
        <DropdownMenu>
46 -
          <DropdownMenuTrigger asChild>
47 -
            <SidebarMenuButton
48 -
              size="lg"
49 -
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
50 -
            >
51 -
              <Avatar className="h-8 w-8 rounded-lg">
52 -
                <AvatarImage src={user.avatar} alt={user.name} />
53 -
                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
54 -
              </Avatar>
55 -
              <div className="grid flex-1 text-left text-sm leading-tight">
56 -
                <span className="truncate font-medium">{user.name}</span>
57 -
                <span className="truncate text-xs">{user.email}</span>
58 -
              </div>
59 -
              <ChevronsUpDown className="ml-auto size-4" />
60 -
            </SidebarMenuButton>
61 -
          </DropdownMenuTrigger>
62 -
          <DropdownMenuContent
63 -
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
64 -
            side={isMobile ? "bottom" : "right"}
65 -
            align="end"
66 -
            sideOffset={4}
67 -
          >
68 -
            <DropdownMenuLabel className="p-0 font-normal">
69 -
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
70 -
                <Avatar className="h-8 w-8 rounded-lg">
71 -
                  <AvatarImage src={user.avatar} alt={user.name} />
72 -
                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
73 -
                </Avatar>
74 -
                <div className="grid flex-1 text-left text-sm leading-tight">
75 -
                  <span className="truncate font-medium">{user.name}</span>
76 -
                  <span className="truncate text-xs">{user.email}</span>
77 -
                </div>
78 -
              </div>
79 -
            </DropdownMenuLabel>
80 -
            <DropdownMenuSeparator />
81 -
            <DropdownMenuGroup>
82 -
              <DropdownMenuItem>
83 -
                <Sparkles />
84 -
                Upgrade to Pro
85 -
              </DropdownMenuItem>
86 -
            </DropdownMenuGroup>
87 -
            <DropdownMenuSeparator />
88 -
            <DropdownMenuGroup>
89 -
              <DropdownMenuItem>
90 -
                <BadgeCheck />
91 -
                Account
92 -
              </DropdownMenuItem>
93 -
              <DropdownMenuItem>
94 -
                <CreditCard />
95 -
                Billing
96 -
              </DropdownMenuItem>
97 -
              <DropdownMenuItem>
98 -
                <Bell />
99 -
                Notifications
100 -
              </DropdownMenuItem>
101 -
            </DropdownMenuGroup>
102 -
            <DropdownMenuSeparator />
103 -
            <DropdownMenuItem>
104 -
              <LogOut />
105 -
              Log out
106 -
            </DropdownMenuItem>
107 -
          </DropdownMenuContent>
108 -
        </DropdownMenu>
109 -
      </SidebarMenuItem>
110 -
    </SidebarMenu>
111 -
  )
39 +
	return (
40 +
		<SidebarMenu>
41 +
			<SidebarMenuItem>
42 +
				<DropdownMenu>
43 +
					<DropdownMenuTrigger asChild>
44 +
						<SidebarMenuButton
45 +
							size="lg"
46 +
							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
47 +
						>
48 +
							<div className="grid flex-1 text-center text-sm leading-tight">
49 +
								<span className="truncate font-medium">Settings</span>
50 +
							</div>
51 +
						</SidebarMenuButton>
52 +
					</DropdownMenuTrigger>
53 +
					<DropdownMenuContent
54 +
						className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
55 +
						side={isMobile ? "bottom" : "right"}
56 +
						align="end"
57 +
						sideOffset={4}
58 +
					>
59 +
						<DropdownMenuLabel className="p-0 font-normal">
60 +
							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
61 +
								<Avatar className="h-8 w-8 rounded-lg">
62 +
									<AvatarImage src={user.avatar} alt={user.name} />
63 +
									<AvatarFallback className="rounded-lg">CN</AvatarFallback>
64 +
								</Avatar>
65 +
								<div className="grid flex-1 text-left text-sm leading-tight">
66 +
									<span className="truncate font-medium">{user.name}</span>
67 +
									<span className="truncate text-xs">{user.email}</span>
68 +
								</div>
69 +
							</div>
70 +
						</DropdownMenuLabel>
71 +
						<DropdownMenuSeparator />
72 +
						<DropdownMenuGroup>
73 +
							<DropdownMenuItem>
74 +
								<Sparkles />
75 +
								Upgrade to Pro
76 +
							</DropdownMenuItem>
77 +
						</DropdownMenuGroup>
78 +
						<DropdownMenuSeparator />
79 +
						<DropdownMenuGroup>
80 +
							<DropdownMenuItem>
81 +
								<BadgeCheck />
82 +
								Account
83 +
							</DropdownMenuItem>
84 +
							<DropdownMenuItem>
85 +
								<CreditCard />
86 +
								Billing
87 +
							</DropdownMenuItem>
88 +
							<DropdownMenuItem>
89 +
								<Bell />
90 +
								Notifications
91 +
							</DropdownMenuItem>
92 +
						</DropdownMenuGroup>
93 +
						<DropdownMenuSeparator />
94 +
						<DropdownMenuItem>
95 +
							<LogOut />
96 +
							Log out
97 +
						</DropdownMenuItem>
98 +
					</DropdownMenuContent>
99 +
				</DropdownMenu>
100 +
			</SidebarMenuItem>
101 +
		</SidebarMenu>
102 +
	);
112 103
}
src/index.css +88 −81
4 4
5 5
@custom-variant dark (&:is(.dark *));
6 6
7 -
@theme inline {
8 -
  --radius-sm: calc(var(--radius) - 4px);
9 -
  --radius-md: calc(var(--radius) - 2px);
10 -
  --radius-lg: var(--radius);
11 -
  --radius-xl: calc(var(--radius) + 4px);
12 -
  --color-background: var(--background);
13 -
  --color-foreground: var(--foreground);
14 -
  --color-card: var(--card);
15 -
  --color-card-foreground: var(--card-foreground);
16 -
  --color-popover: var(--popover);
17 -
  --color-popover-foreground: var(--popover-foreground);
18 -
  --color-primary: var(--primary);
19 -
  --color-primary-foreground: var(--primary-foreground);
20 -
  --color-secondary: var(--secondary);
21 -
  --color-secondary-foreground: var(--secondary-foreground);
22 -
  --color-muted: var(--muted);
23 -
  --color-muted-foreground: var(--muted-foreground);
24 -
  --color-accent: var(--accent);
25 -
  --color-accent-foreground: var(--accent-foreground);
26 -
  --color-destructive: var(--destructive);
27 -
  --color-border: var(--border);
28 -
  --color-input: var(--input);
29 -
  --color-ring: var(--ring);
30 -
  --color-chart-1: var(--chart-1);
31 -
  --color-chart-2: var(--chart-2);
32 -
  --color-chart-3: var(--chart-3);
33 -
  --color-chart-4: var(--chart-4);
34 -
  --color-chart-5: var(--chart-5);
35 -
  --color-sidebar: var(--sidebar);
36 -
  --color-sidebar-foreground: var(--sidebar-foreground);
37 -
  --color-sidebar-primary: var(--sidebar-primary);
38 -
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
39 -
  --color-sidebar-accent: var(--sidebar-accent);
40 -
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
41 -
  --color-sidebar-border: var(--sidebar-border);
42 -
  --color-sidebar-ring: var(--sidebar-ring);
43 -
  --font-sans: Geist Mono, ui-monospace, monospace;
44 -
  --font-mono: JetBrains Mono, monospace;
45 -
  --font-serif: serif;
46 -
  --radius: 0.75rem;
47 -
  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
48 -
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
49 -
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
50 -
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
51 -
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
52 -
  --tracking-normal: var(--tracking-normal);
53 -
  --shadow-2xl: var(--shadow-2xl);
54 -
  --shadow-xl: var(--shadow-xl);
55 -
  --shadow-lg: var(--shadow-lg);
56 -
  --shadow-md: var(--shadow-md);
57 -
  --shadow: var(--shadow);
58 -
  --shadow-sm: var(--shadow-sm);
59 -
  --shadow-xs: var(--shadow-xs);
60 -
  --shadow-2xs: var(--shadow-2xs);
61 -
  --spacing: var(--spacing);
62 -
  --letter-spacing: var(--letter-spacing);
63 -
  --shadow-offset-y: var(--shadow-offset-y);
64 -
  --shadow-offset-x: var(--shadow-offset-x);
65 -
  --shadow-spread: var(--shadow-spread);
66 -
  --shadow-blur: var(--shadow-blur);
67 -
  --shadow-opacity: var(--shadow-opacity);
68 -
  --color-shadow-color: var(--shadow-color);
69 -
  --color-destructive-foreground: var(--destructive-foreground);
70 -
}
71 -
72 7
:root {
73 -
  --radius: 0.75rem;
74 8
  --background: oklch(1.0000 0 0);
75 9
  --foreground: oklch(0.2101 0.0318 264.6645);
76 10
  --card: oklch(1.0000 0 0);
86 20
  --accent: oklch(0.9491 0 0);
87 21
  --accent-foreground: oklch(0.2101 0.0318 264.6645);
88 22
  --destructive: oklch(0.6368 0.2078 25.3313);
23 +
  --destructive-foreground: oklch(0.9851 0 0);
89 24
  --border: oklch(0.9276 0.0058 264.5313);
90 25
  --input: oklch(0.9276 0.0058 264.5313);
91 26
  --ring: oklch(0.6716 0.1368 48.5130);
102 37
  --sidebar-accent-foreground: oklch(0.2101 0.0318 264.6645);
103 38
  --sidebar-border: oklch(0.9276 0.0058 264.5313);
104 39
  --sidebar-ring: oklch(0.6716 0.1368 48.5130);
105 -
  --destructive-foreground: oklch(0.9851 0 0);
106 40
  --font-sans: Geist Mono, ui-monospace, monospace;
107 41
  --font-serif: serif;
108 42
  --font-mono: JetBrains Mono, monospace;
109 -
  --shadow-color: #000000;
110 -
  --shadow-opacity: 0.05;
43 +
  --radius: 0.75rem;
44 +
  --shadow-x: 0;
45 +
  --shadow-y: 1px;
111 46
  --shadow-blur: 4px;
112 47
  --shadow-spread: 0px;
113 -
  --shadow-offset-x: 0px;
114 -
  --shadow-offset-y: 1px;
115 -
  --letter-spacing: 0rem;
116 -
  --spacing: 0.25rem;
48 +
  --shadow-opacity: 0.05;
49 +
  --shadow-color: #000000;
117 50
  --shadow-2xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
118 51
  --shadow-xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
119 52
  --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
123 56
  --shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
124 57
  --shadow-2xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.13);
125 58
  --tracking-normal: 0rem;
59 +
  --spacing: 0.25rem;
60 +
  --shadow-offset-x: 0px;
61 +
  --shadow-offset-y: 1px;
62 +
  --letter-spacing: 0rem;
126 63
}
127 64
128 65
.dark {
141 78
  --accent: oklch(0.3211 0 0);
142 79
  --accent-foreground: oklch(0.8109 0 0);
143 80
  --destructive: oklch(0.5940 0.0443 196.0233);
81 +
  --destructive-foreground: oklch(0.1797 0.0043 308.1928);
144 82
  --border: oklch(0.2520 0 0);
145 83
  --input: oklch(0.2520 0 0);
146 84
  --ring: oklch(0.7214 0.1337 49.9802);
157 95
  --sidebar-accent-foreground: oklch(0.8109 0 0);
158 96
  --sidebar-border: oklch(0.2520 0 0);
159 97
  --sidebar-ring: oklch(0.7214 0.1337 49.9802);
160 -
  --destructive-foreground: oklch(0.1797 0.0043 308.1928);
161 -
  --radius: 0.75rem;
162 98
  --font-sans: Geist Mono, ui-monospace, monospace;
163 99
  --font-serif: serif;
164 100
  --font-mono: JetBrains Mono, monospace;
165 -
  --shadow-color: #000000;
166 -
  --shadow-opacity: 0.05;
101 +
  --radius: 0.75rem;
102 +
  --shadow-x: 0;
103 +
  --shadow-y: 1px;
167 104
  --shadow-blur: 4px;
168 105
  --shadow-spread: 0px;
169 -
  --shadow-offset-x: 0px;
170 -
  --shadow-offset-y: 1px;
171 -
  --letter-spacing: 0rem;
172 -
  --spacing: 0.25rem;
106 +
  --shadow-opacity: 0.05;
107 +
  --shadow-color: #000000;
173 108
  --shadow-2xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
174 109
  --shadow-xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
175 110
  --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
178 113
  --shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
179 114
  --shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
180 115
  --shadow-2xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.13);
116 +
  --shadow-offset-x: 0px;
117 +
  --shadow-offset-y: 1px;
118 +
  --letter-spacing: 0rem;
119 +
  --spacing: 0.25rem;
120 +
}
121 +
122 +
@theme inline {
123 +
  --color-background: var(--background);
124 +
  --color-foreground: var(--foreground);
125 +
  --color-card: var(--card);
126 +
  --color-card-foreground: var(--card-foreground);
127 +
  --color-popover: var(--popover);
128 +
  --color-popover-foreground: var(--popover-foreground);
129 +
  --color-primary: var(--primary);
130 +
  --color-primary-foreground: var(--primary-foreground);
131 +
  --color-secondary: var(--secondary);
132 +
  --color-secondary-foreground: var(--secondary-foreground);
133 +
  --color-muted: var(--muted);
134 +
  --color-muted-foreground: var(--muted-foreground);
135 +
  --color-accent: var(--accent);
136 +
  --color-accent-foreground: var(--accent-foreground);
137 +
  --color-destructive: var(--destructive);
138 +
  --color-destructive-foreground: var(--destructive-foreground);
139 +
  --color-border: var(--border);
140 +
  --color-input: var(--input);
141 +
  --color-ring: var(--ring);
142 +
  --color-chart-1: var(--chart-1);
143 +
  --color-chart-2: var(--chart-2);
144 +
  --color-chart-3: var(--chart-3);
145 +
  --color-chart-4: var(--chart-4);
146 +
  --color-chart-5: var(--chart-5);
147 +
  --color-sidebar: var(--sidebar);
148 +
  --color-sidebar-foreground: var(--sidebar-foreground);
149 +
  --color-sidebar-primary: var(--sidebar-primary);
150 +
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
151 +
  --color-sidebar-accent: var(--sidebar-accent);
152 +
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
153 +
  --color-sidebar-border: var(--sidebar-border);
154 +
  --color-sidebar-ring: var(--sidebar-ring);
155 +
156 +
  --font-sans: Geist Mono, ui-monospace, monospace;
157 +
  --font-mono: JetBrains Mono, monospace;
158 +
  --font-serif: serif;
159 +
160 +
  --radius-sm: calc(var(--radius) - 4px);
161 +
  --radius-md: calc(var(--radius) - 2px);
162 +
  --radius-lg: var(--radius);
163 +
  --radius-xl: calc(var(--radius) + 4px);
164 +
165 +
  --shadow-2xs: var(--shadow-2xs);
166 +
  --shadow-xs: var(--shadow-xs);
167 +
  --shadow-sm: var(--shadow-sm);
168 +
  --shadow: var(--shadow);
169 +
  --shadow-md: var(--shadow-md);
170 +
  --shadow-lg: var(--shadow-lg);
171 +
  --shadow-xl: var(--shadow-xl);
172 +
  --shadow-2xl: var(--shadow-2xl);
173 +
  --radius: 0.75rem;
174 +
  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
175 +
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
176 +
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
177 +
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
178 +
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
179 +
  --tracking-normal: var(--tracking-normal);
180 +
  --spacing: var(--spacing);
181 +
  --letter-spacing: var(--letter-spacing);
182 +
  --shadow-offset-y: var(--shadow-offset-y);
183 +
  --shadow-offset-x: var(--shadow-offset-x);
184 +
  --shadow-spread: var(--shadow-spread);
185 +
  --shadow-blur: var(--shadow-blur);
186 +
  --shadow-opacity: var(--shadow-opacity);
187 +
  --color-shadow-color: var(--shadow-color);
181 188
}
182 189
183 190
@layer base {