some roblox stuff again

2025-07-24 04:25:18 +03:00
parent e0217cbbcb
commit d1f925f298
35 changed files with 866 additions and 282 deletions
--- a/components/FriendsOnlineSection.tsx
+++ b/components/FriendsOnlineSection.tsx
@@ -0,0 +1,56 @@
+import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
+import { useFriendsHome } from "@/hooks/roblox/useFriendsHome";
+import LazyLoadedImage from "./lazyLoadedImage";
+import React from "react";
+import { VerifiedIcon } from "./RobloxIcons";
+
+export function FriendsHomeSect(
+	props: React.DetailedHTMLProps<
+		React.HTMLAttributes<HTMLDivElement>,
+		HTMLDivElement
+	>
+) {
+	const friends = useFriendsHome();
+	const acct = useCurrentAccount();
+
+	if (!friends) {
+		return <></>;
+	}
+
+	return (
+		<div {...props}>
+			<h1 className="text-2xl pb-2 pl-4">Friends</h1>
+			<div className="bg-base p-4 rounded-xl flex flex-col gap-2 px-4">
+				<div
+					className="flex items-center gap-4 overflow-x-auto pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
+					style={{
+						scrollSnapType: "x mandatory",
+						WebkitOverflowScrolling: "touch"
+					}}
+				>
+					<div className="w-8" />
+					{friends.map((a) => (
+						<div
+							key={a.id}
+							className="flex flex-col items-center min-w-[6.5rem]"
+							// style={{ scrollSnapAlign: "start" }}
+						>
+							<LazyLoadedImage
+								imgId={`AvatarHeadShot_${a.id}`}
+								alt={a.name}
+								className="w-24 h-24 rounded-full border-2 border-surface2 object-cover shadow"
+							/>
+							<span className="truncate text-xs text-text mt-1 text-center flex items-center justify-center gap-1">
+								{a.displayName || a.name}
+								{a.hasVerifiedBadge ? null : (
+									<VerifiedIcon className="text-base fill-blue w-3 h-3" />
+								)}
+							</span>
+						</div>
+					))}
+					<div className="w-8" />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/components/QuickTopUI.tsx
+++ b/components/QuickTopUI.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useRobuxBalance } from "@/hooks/roblox/useRobuxBalance";
+import { RobuxIcon } from "./RobloxIcons";
+
+export function QuickTopUI() {
+	const robux = useRobuxBalance();
+	return (
+		<span className="z-50 absolute top-4 right-4 p-4 flex gap-4 items-center">
+			<img src="/icon-128.webp" className="-m-1 w-8 h-8" alt="" />
+			<span className="rounded-full bg-crust/50 flex items-center p-2">
+				<span className="px-2 font-sans text-blue text-xl flex items-center">
+					<RobuxIcon className="w-6 h-6" />
+					<p className="pl-1">{robux}</p>
+				</span>
+			</span>
+		</span>
+	);
+}
--- a/components/RobloxIcons.tsx
+++ b/components/RobloxIcons.tsx
@@ -12,7 +12,6 @@ export const PremiumIconSmall = (props: React.SVGProps<SVGSVGElement>) => (
 				<path d="M14,14V2H2V16a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0H14a2,2,0,0,1,2,2V14a2,2,0,0,1-2,2H8V14ZM12,6v6H8V10h2V6H6V16H4V4h8Z" />
 			</clipPath>
 		</defs>
-		<title>premium_small</title>
 		<g id="premium">
 			<g clipPath="url(#clip-path)">
 				<rect
@@ -27,7 +26,10 @@ export const PremiumIconSmall = (props: React.SVGProps<SVGSVGElement>) => (
 	</svg>
 );

-export const VerifiedIcon = (props: React.SVGProps<SVGSVGElement>) => (
+export const VerifiedIcon = ({
+	useDefault,
+	...props
+}: React.SVGProps<SVGSVGElement> & { useDefault?: boolean }) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="28"
@@ -42,13 +44,13 @@ export const VerifiedIcon = (props: React.SVGProps<SVGSVGElement>) => (
 				width="22.89"
 				height="22.89"
 				transform="rotate(15 5.88818 0)"
-				fill="currentFill" /* #0066FF */
+				fill={useDefault ? "#0066FF" : "currentFill"} /* #0066FF */
 			/>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M20.543 8.7508L20.549 8.7568C21.15 9.3578 21.15 10.3318 20.549 10.9328L11.817 19.6648L7.45 15.2968C6.85 14.6958 6.85 13.7218 7.45 13.1218L7.457 13.1148C8.058 12.5138 9.031 12.5138 9.633 13.1148L11.817 15.2998L18.367 8.7508C18.968 8.1498 19.942 8.1498 20.543 8.7508Z"
-				fill="currentColor"  /* white */
+				fill={useDefault ? "white" : "currentColor"} /* white */
 			/>
 		</g>
 		<defs>
@@ -58,3 +60,38 @@ export const VerifiedIcon = (props: React.SVGProps<SVGSVGElement>) => (
 		</defs>
 	</svg>
 );
+
+export const RobuxIcon = (props: React.SVGProps<SVGSVGElement>) => (
+	<svg
+		width="28"
+		height="28"
+		viewBox="0 0 28 28"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<g id="robux_28_dark">
+			<path
+				d="M23.402,5.571 C25.009,6.499 26,8.215 26,10.071 L26,17.927 C26,19.784 25.009,21.499 23.402,22.427 L16.597,26.356 C14.99,27.284 13.009,27.284 11.402,26.356 L4.597,22.427 C2.99,21.499 2,19.784 2,17.927 L2,10.071 C2,8.215 2.99,6.499 4.597,5.571 L11.402,1.643 C13.009,0.715 14.99,0.715 16.597,1.643 L23.402,5.571 Z M12.313,3.426 L5.686,7.252 C4.642,7.855 4,8.968 4,10.174 L4,17.825 C4,19.03 4.642,20.144 5.686,20.747 L12.313,24.572 C13.357,25.175 14.642,25.175 15.686,24.572 L22.313,20.747 C23.357,20.144 24,19.03 24,17.825 L24,10.174 C24,8.968 23.357,7.855 22.313,7.252 L15.686,3.426 C14.642,2.823 13.357,2.823 12.313,3.426 L12.313,3.426 Z M15.385,5.564 L20.614,8.582 C21.471,9.077 22,9.992 22,10.983 L22,17.02 C22,18.01 21.471,18.925 20.614,19.42 L15.385,22.439 C14.528,22.934 13.471,22.934 12.614,22.439 L7.385,19.42 C6.528,18.925 6,18.01 6,17.02 L6,10.983 C6,9.992 6.528,9.077 7.385,8.582 L12.614,5.564 C13.471,5.069 14.528,5.069 15.385,5.564 L15.385,5.564 Z M11,17.001 L17,17.001 L17,11.001 L11,11.001 L11,17.001 Z"
+				id="Fill-1"
+				fill="currentColor"
+			></path>
+			<path
+				d="M51.402,5.571 C53.009,6.499 54,8.215 54,10.071 L54,17.927 C54,19.784 53.009,21.499 51.402,22.427 L44.597,26.356 C42.99,27.284 41.009,27.284 39.402,26.356 L32.597,22.427 C30.99,21.499 30,19.784 30,17.927 L30,10.071 C30,8.215 30.99,6.499 32.597,5.571 L39.402,1.643 C41.009,0.715 42.99,0.715 44.597,1.643 L51.402,5.571 Z M40.313,3.426 L33.686,7.252 C32.642,7.855 32,8.968 32,10.174 L32,17.825 C32,19.03 32.642,20.144 33.686,20.747 L40.313,24.572 C41.357,25.175 42.642,25.175 43.686,24.572 L50.313,20.747 C51.357,20.144 52,19.03 52,17.825 L52,10.174 C52,8.968 51.357,7.855 50.313,7.252 L43.686,3.426 C42.642,2.823 41.357,2.823 40.313,3.426 L40.313,3.426 Z M43.385,5.564 L48.614,8.582 C49.471,9.077 50,9.992 50,10.983 L50,17.02 C50,18.01 49.471,18.925 48.614,19.42 L43.385,22.439 C42.528,22.934 41.471,22.934 40.614,22.439 L35.385,19.42 C34.528,18.925 34,18.01 34,17.02 L34,10.983 C34,9.992 34.528,9.077 35.385,8.582 L40.614,5.564 C41.471,5.069 42.528,5.069 43.385,5.564 L43.385,5.564 Z M39,17.001 L45,17.001 L45,11.001 L39,11.001 L39,17.001 Z"
+				id="Fill-1"
+				fillOpacity="0.7"
+				fill="currentColor"
+			></path>
+			<g id="Fill-1-Copy-2" transform="matrix(1, 0, 0, 1, 0, -0.5)">
+				<use fill="black" fillOpacity="1" filter="url(#filter-3)"></use>
+				<use fill="url(#linearGradient-1)" fillRule="evenodd"></use>
+				<use fill="black" fillOpacity="1" filter="url(#filter-4)"></use>
+			</g>
+			<path
+				d="M23.402,61.574 C25.009,62.502 26,64.218 26,66.074 L26,73.93 C26,75.787 25.009,77.502 23.402,78.43 L16.597,82.359 C14.99,83.287 13.009,83.287 11.402,82.359 L4.597,78.43 C2.99,77.502 2,75.787 2,73.93 L2,66.074 C2,64.218 2.99,62.502 4.597,61.574 L11.402,57.646 C13.009,56.718 14.99,56.718 16.597,57.646 L23.402,61.574 Z M12.313,59.429 L5.686,63.255 C4.642,63.858 4,64.971 4,66.177 L4,73.828 C4,75.033 4.642,76.147 5.686,76.75 L12.313,80.575 C13.357,81.178 14.642,81.178 15.686,80.575 L22.313,76.75 C23.357,76.147 24,75.033 24,73.828 L24,66.177 C24,64.971 23.357,63.858 22.313,63.255 L15.686,59.429 C14.642,58.826 13.357,58.826 12.313,59.429 L12.313,59.429 Z M15.385,61.567 L20.614,64.585 C21.471,65.08 22,65.995 22,66.986 L22,73.023 C22,74.013 21.471,74.928 20.614,75.423 L15.385,78.442 C14.528,78.937 13.471,78.937 12.614,78.442 L7.385,75.423 C6.528,74.928 6,74.013 6,73.023 L6,66.986 C6,65.995 6.528,65.08 7.385,64.585 L12.614,61.567 C13.471,61.072 14.528,61.072 15.385,61.567 L15.385,61.567 Z M11,73.004 L17,73.004 L17,67.004 L11,67.004 L11,73.004 Z"
+				id="Fill-1-Copy-2"
+				fill="currentColor"
+			></path>
+		</g>
+	</svg>
+);
--- a/components/RobloxTooltipStuff.tsx
+++ b/components/RobloxTooltipStuff.tsx
@@ -0,0 +1,35 @@
+import { PremiumIconSmall, VerifiedIcon } from "./RobloxIcons";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from "./ui/tooltip";
+
+export function RobloxPremiumSmall(props: React.SVGProps<SVGSVGElement>) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<PremiumIconSmall {...props} />
+			</TooltipTrigger>
+			<TooltipContent className="bg-surface0 text-text m-2">
+				<p className="text-sm">Roblox Premium</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
+export function RobloxVerifiedSmall(
+	props: React.SVGProps<SVGSVGElement> & { useDefault?: boolean }
+) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<VerifiedIcon {...props} />
+			</TooltipTrigger>
+			<TooltipContent className="bg-surface0 text-text m-2">
+				<p className="text-sm">Verified user</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+}
--- a/components/lazyLoadedImage.tsx
+++ b/components/lazyLoadedImage.tsx
@@ -9,15 +9,23 @@ interface LazyLoadedImageProps {
 	[prop: string]: string;
 }

-const LazyLoadedImage: React.FC<
-	LazyLoadedImageProps
-> = ({ imgId, alt, ...props }) => {
+const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({
+	imgId,
+	alt,
+	...props
+}) => {
 	const imgUrl = useThumbnailURL(imgId);

 	return (
 		<div>
 			{imgUrl ? (
-				<Image src={imgUrl as any} width={1024} height={1024} alt={alt} {...props} />
+				<Image
+					src={imgUrl as any}
+					width={1024}
+					height={1024}
+					alt={alt}
+					{...props}
+				/>
 			) : (
 				<Skeleton {...props} />
 			)}
--- a/components/loggedInHeader.tsx
+++ b/components/loggedInHeader.tsx
@@ -1,57 +1,65 @@
 "use client";

-import {
-	getLoggedInUser,
-	getUserByUserId,
-	UserProfileDetails
-} from "@/lib/profile";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import LazyLoadedImage from "./lazyLoadedImage";
-import { loadThumbnails } from "@/lib/thumbnailLoader";
-import { PremiumIconSmall, VerifiedIcon } from "./RobloxIcons";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { OctagonXIcon } from "lucide-react";
+import { RobloxPremiumSmall, RobloxVerifiedSmall } from "./RobloxTooltipStuff";
+import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
+import { Skeleton } from "./ui/skeleton";

-export const HomeLoggedInHeader = React.memo(function HomeLoggedInHeader() {
-	const [profileDetails, setProfileDetails] =
-		useState<UserProfileDetails | null>(null);
+export function HomeLoggedInHeader() {
+	const profile = useCurrentAccount();

-	useEffect(() => {
-		(async () => {
-			const authed = await getLoggedInUser();
-			setProfileDetails(await getUserByUserId(authed.id.toString()));
-		})();
-	}, []);
-
-	if (!profileDetails) {
-		return <></>;
+	if (profile === false) {
+		return (
+			<div className="justify-center w-screen px-8 py-6">
+				<Alert variant="destructive" className="space-x-2">
+					<OctagonXIcon />
+					<AlertTitle>Failed to fetch account info</AlertTitle>
+					<AlertDescription>
+						Please make sure <code>.ROBLOSECURITY</code> is set! Is
+						Roblox having an outage?
+					</AlertDescription>
+				</Alert>
+			</div>
+		);
 	}

-	loadThumbnails([
-		{
-			type: "AvatarHeadShot",
-			targetId: profileDetails.id,
-			format: "webp",
-			size: "720x720"
-		}
-	]).catch((a) => {});
-
 	return (
-		<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
-			<LazyLoadedImage
-				imgId={`AvatarHeadShot_${profileDetails.id}`}
-				alt=""
-				className="w-28 h-28 rounded-full shadow-2xl"
-			/>
-			<div className="flex flex-col justify-center">
-				<span className="text-3xl font-bold text-text flex items-center gap-2">
-					Hello, {profileDetails.displayName}
-					{/* TODO: Fetch the User's Roblox Premium subscription state */}
-					<PremiumIconSmall className="w-6 h-6 fill-transparent" />
-					<VerifiedIcon className="w-6 h-6 fill-blue text-base" />
-				</span>
-				<span className="text-base font-mono text-subtext0 mt-1">
-					@{profileDetails.name}
-				</span>
+		<>
+			<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
+				{!profile ? (
+					<Skeleton className="w-28 h-28 rounded-full" />
+				) : (
+					<LazyLoadedImage
+						imgId={`AvatarHeadShot_${profile.id}`}
+						alt=""
+						className="w-28 h-28 rounded-full shadow-crust"
+					/>
+				)}
+				<div className="flex flex-col justify-center">
+					<span className="text-3xl font-bold text-text flex items-center gap-2">
+						{profile ? (
+							<>Hello, {profile.displayName}</>
+						) : (
+							<>
+								<Skeleton className="w-96 h-8 rounded-lg" />
+							</>
+						)}
+						{/* TODO: Fetch the User's Roblox Premium subscription state */}
+						<RobloxPremiumSmall className="w-6 h-6 fill-transparent" />
+						<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
+					</span>
+					<span className="text-base font-mono text-subtext0 mt-1">
+						{profile ? (
+							<>@{profile.name}</>
+						) : (
+							<Skeleton className="w-64 h-6 rounded-lg" />
+						)}
+					</span>
+				</div>
 			</div>
-		</div>
+		</>
 	);
-});
+}
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,82 +1,228 @@
 "use client";

 import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import {
+	ChevronDownIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";

 import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+import { Button, buttonVariants } from "@/components/ui/button";

 function Calendar({
 	className,
 	classNames,
 	showOutsideDays = true,
+	captionLayout = "label",
+	buttonVariant = "ghost",
+	formatters,
+	components,
 	...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+	const defaultClassNames = getDefaultClassNames();
+
 	return (
 		<DayPicker
 			showOutsideDays={showOutsideDays}
-			className={cn("p-3", className)}
+			className={cn(
+				"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) =>
+					date.toLocaleString("default", { month: "short" }),
+				...formatters
+			}}
 			classNames={{
-				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-				month: "space-y-4",
-				caption: "flex justify-center pt-1 relative items-center",
-				caption_label: "text-sm font-medium",
-				nav: "space-x-1 flex items-center",
-				nav_button: cn(
-					buttonVariants({ variant: "outline" }),
-					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn(
+					"relative flex flex-col gap-4 md:flex-row",
+					defaultClassNames.months
 				),
-				nav_button_previous: "absolute left-1",
-				nav_button_next: "absolute right-1",
-				table: "w-full border-collapse space-y-1",
-				head_row: "flex",
-				head_cell:
-					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-				row: "flex w-full mt-2",
-				cell: cn(
-					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-					props.mode === "range"
-						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-						: "[&:has([aria-selected])]:rounded-md"
+				month: cn(
+					"flex w-full flex-col gap-4",
+					defaultClassNames.month
+				),
+				nav: cn(
+					"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+					defaultClassNames.nav
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+					defaultClassNames.button_previous
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+					defaultClassNames.button_next
+				),
+				month_caption: cn(
+					"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+					defaultClassNames.month_caption
+				),
+				dropdowns: cn(
+					"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+					defaultClassNames.dropdowns
+				),
+				dropdown_root: cn(
+					"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+					defaultClassNames.dropdown_root
+				),
+				dropdown: cn(
+					"bg-popover absolute inset-0 opacity-0",
+					defaultClassNames.dropdown
+				),
+				caption_label: cn(
+					"select-none font-medium",
+					captionLayout === "label"
+						? "text-sm"
+						: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+					defaultClassNames.caption_label
+				),
+				table: "w-full border-collapse",
+				weekdays: cn("flex", defaultClassNames.weekdays),
+				weekday: cn(
+					"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+					defaultClassNames.weekday
+				),
+				week: cn("mt-2 flex w-full", defaultClassNames.week),
+				week_number_header: cn(
+					"w-[--cell-size] select-none",
+					defaultClassNames.week_number_header
+				),
+				week_number: cn(
+					"text-muted-foreground select-none text-[0.8rem]",
+					defaultClassNames.week_number
 				),
 				day: cn(
-					buttonVariants({ variant: "ghost" }),
-					"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+					"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+					defaultClassNames.day
 				),
-				day_range_start: "day-range-start",
-				day_range_end: "day-range-end",
-				day_selected:
-					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-				day_today: "bg-accent text-accent-foreground",
-				day_outside:
-					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-				day_disabled: "text-muted-foreground opacity-50",
-				day_range_middle:
-					"aria-selected:bg-accent aria-selected:text-accent-foreground",
-				day_hidden: "invisible",
+				range_start: cn(
+					"bg-accent rounded-l-md",
+					defaultClassNames.range_start
+				),
+				range_middle: cn(
+					"rounded-none",
+					defaultClassNames.range_middle
+				),
+				range_end: cn(
+					"bg-accent rounded-r-md",
+					defaultClassNames.range_end
+				),
+				today: cn(
+					"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+					defaultClassNames.today
+				),
+				outside: cn(
+					"text-muted-foreground aria-selected:text-muted-foreground",
+					defaultClassNames.outside
+				),
+				disabled: cn(
+					"text-muted-foreground opacity-50",
+					defaultClassNames.disabled
+				),
+				hidden: cn("invisible", defaultClassNames.hidden),
 				...classNames
 			}}
 			components={{
-				IconLeft: ({ className, ...props }) => (
-					<ChevronLeft
-						className={cn("h-4 w-4", className)}
-						{...props}
-					/>
-				),
-				IconRight: ({ className, ...props }) => (
-					<ChevronRight
-						className={cn("h-4 w-4", className)}
-						{...props}
-					/>
-				)
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div
+							data-slot="calendar"
+							ref={rootRef}
+							className={cn(className)}
+							{...props}
+						/>
+					);
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return (
+							<ChevronLeftIcon
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						);
+					}
+
+					if (orientation === "right") {
+						return (
+							<ChevronRightIcon
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						);
+					}
+
+					return (
+						<ChevronDownIcon
+							className={cn("size-4", className)}
+							{...props}
+						/>
+					);
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-[--cell-size] items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					);
+				},
+				...components
 			}}
 			{...props}
 		/>
 	);
 }
-Calendar.displayName = "Calendar";

-export { Calendar };
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	...props
+}: React.ComponentProps<typeof DayButton>) {
+	const defaultClassNames = getDefaultClassNames();
+
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar, CalendarDayButton };
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -139,7 +139,7 @@ const ChartTooltipContent = React.forwardRef<
 			}

 			const [item] = payload;
-			const key = `${labelKey || item.dataKey || item.name || "value"}`;
+			const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
 			const itemConfig = getPayloadConfigFromPayload(config, item, key);
 			const value =
 				!labelKey && typeof label === "string"
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
 	<ContextMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
 			className
 		)}
 		{...props}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
 		<ContextMenuPrimitive.Content
 			ref={ref}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
 				className
 			)}
 			{...props}
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 			inset && "pl-8",
 			className
 		)}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
 			className
 		)}
 		{...props}
@@ -65,8 +65,8 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
 				className
 			)}
 			{...props}
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -5,11 +5,11 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
 	Controller,
-	ControllerProps,
-	FieldPath,
-	FieldValues,
 	FormProvider,
-	useFormContext
+	useFormContext,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues
 } from "react-hook-form";

 import { cn } from "@/lib/utils";
@@ -148,7 +148,7 @@ const FormMessage = React.forwardRef<
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
 	const { error, formMessageId } = useFormField();
-	const body = error ? String(error?.message) : children;
+	const body = error ? String(error?.message ?? "") : children;

 	if (!body) {
 		return null;
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
 		align={align}
 		sideOffset={sideOffset}
 		className={cn(
-			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
 			className
 		)}
 		{...props}
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -94,7 +94,7 @@ const MenubarSubContent = React.forwardRef<
 	<MenubarPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
 			className
 		)}
 		{...props}
@@ -123,7 +123,7 @@ const MenubarContent = React.forwardRef<
 				alignOffset={alignOffset}
 				sideOffset={sideOffset}
 				className={cn(
-					"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+					"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
 					className
 				)}
 				{...props}
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;

 const navigationMenuTriggerStyle = cva(
-	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 );

 const NavigationMenuTrigger = React.forwardRef<
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
 			align={align}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
 				className
 			)}
 			{...props}
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+			className
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="h-full w-full flex-1 bg-primary transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className
 		)}
 		{...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Content
 			ref={ref}
 			className={cn(
-				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
 				position === "popper" &&
 					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 				className
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -10,7 +10,13 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle
+} from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Tooltip,
@@ -26,7 +32,7 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";

-type SidebarContext = {
+type SidebarContextProps = {
 	state: "expanded" | "collapsed";
 	open: boolean;
 	setOpen: (open: boolean) => void;
@@ -36,7 +42,7 @@ type SidebarContext = {
 	toggleSidebar: () => void;
 };

-const SidebarContext = React.createContext<SidebarContext | null>(null);
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);

 function useSidebar() {
 	const context = React.useContext(SidebarContext);
@@ -117,7 +123,7 @@ const SidebarProvider = React.forwardRef<
 		// This makes it easier to style the sidebar with Tailwind classes.
 		const state = open ? "expanded" : "collapsed";

-		const contextValue = React.useMemo<SidebarContext>(
+		const contextValue = React.useMemo<SidebarContextProps>(
 			() => ({
 				state,
 				open,
@@ -219,6 +225,12 @@ const Sidebar = React.forwardRef<
 						}
 						side={side}
 					>
+						<SheetHeader className="sr-only">
+							<SheetTitle>Sidebar</SheetTitle>
+							<SheetDescription>
+								Displays the mobile sidebar.
+							</SheetDescription>
+						</SheetHeader>
 						<div className="flex h-full w-full flex-col">
 							{children}
 						</div>
@@ -239,7 +251,7 @@ const Sidebar = React.forwardRef<
 				{/* This is what handles the sidebar gap on desktop */}
 				<div
 					className={cn(
-						"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+						"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
 						"group-data-[collapsible=offcanvas]:w-0",
 						"group-data-[side=right]:rotate-180",
 						variant === "floating" || variant === "inset"
@@ -337,8 +349,8 @@ const SidebarInset = React.forwardRef<
 		<main
 			ref={ref}
 			className={cn(
-				"relative flex min-h-svh flex-1 flex-col bg-background",
-				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+				"relative flex w-full flex-1 flex-col bg-background",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
 				className
 			)}
 			{...props}
@@ -457,7 +469,7 @@ const SidebarGroupLabel = React.forwardRef<
 			ref={ref}
 			data-sidebar="group-label"
 			className={cn(
-				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 				className
 			)}
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
 				className
 			)}
 			{...props}