settings revisited

needim · Oct 2, 2024 · 7819126 · 7819126
1 parent 9f64e16
commit 7819126
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 152 deletions.
diff --git a/src/components/custom/v2/add-entry/date-picker.tsx b/src/components/custom/v2/add-entry/date-picker.tsx
@@ -1,9 +1,5 @@
 import { Calendar } from "@/components/ui/calendar";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 export function DatePicker({
 	children,
@@ -25,7 +21,6 @@ export function DatePicker({
 					onSelect={onValueChange}
 					initialFocus
 					weekStartsOn={1}
-					// locale={}
 				/>
 			</PopoverContent>
 		</Popover>

diff --git a/src/components/custom/v2/calendar-month-switcher.tsx b/src/components/custom/v2/calendar-month-switcher.tsx
@@ -46,9 +46,9 @@ export function CalendarMonthSwitcher(): React.ReactElement {
 					>
 						<span className={cn("flex items-center pr-2 rounded-full h-7", isViewingCurrentMonth ? "pl-2" : "")}>
 							{!isViewingCurrentMonth && (
-								<Button size="iconXs" variant="default" className="rounded-full size-[27px] mr-1.5">
-									<IconRestore className="size-4" />
-								</Button>
+								// <Button size="iconXs" variant="default" className="rounded-full size-7 mr-1.5">
+								<IconRestore className="size-4 mr-1.5" />
+								// </Button>
 							)}
 							<span>{dayjs(new Date(calendarIndex)).format("MMMM, YYYY")}</span>
 						</span>

diff --git a/src/components/custom/v2/erase-data-drawer.tsx b/src/components/custom/v2/erase-data-drawer.tsx
@@ -0,0 +1,57 @@
+import { Button } from "@/components/ui/button";
+
+import {
+	Drawer,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+} from "@/components/ui/drawer";
+import { evolu } from "@/evolu-db";
+import { IconTrashXFilled } from "@tabler/icons-react";
+import { forwardRef, useImperativeHandle, useState } from "react";
+
+export interface EraseDataDrawerRef {
+	openDrawer: () => void;
+	closeDrawer: () => void;
+}
+
+export const EraseDataDrawer = forwardRef<EraseDataDrawerRef, {}>((_, ref) => {
+	const [open, setOpen] = useState(false);
+	// const { m } = useLocalization();
+
+	useImperativeHandle(ref, () => ({
+		openDrawer: () => {
+			setOpen(true);
+		},
+		closeDrawer: () => {
+			setOpen(false);
+		},
+	}));
+
+	return (
+		<Drawer open={open} onOpenChange={setOpen}>
+			<DrawerContent className="pb-6 max-w-md mx-auto">
+				<DrawerHeader>
+					<IconTrashXFilled className="text-red-500 w-12 h-12 mx-auto mb-2" />
+					<DrawerTitle>Are you absolutely sure?</DrawerTitle>
+					<DrawerDescription>This action cannot be undone.</DrawerDescription>
+				</DrawerHeader>
+				<DrawerFooter>
+					<Button
+						variant="destructive"
+						size="lg"
+						onClick={async () => {
+							await evolu.resetOwner({ reload: false });
+							window.localStorage.clear();
+							window.location.reload();
+						}}
+					>
+						Erase all data and start over
+					</Button>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	);
+});
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
@@ -3,14 +3,8 @@ import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "@/lib/utils";
 
-const Drawer = ({
-	shouldScaleBackground = true,
-	...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-	<DrawerPrimitive.Root
-		shouldScaleBackground={shouldScaleBackground}
-		{...props}
-	/>
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+	<DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
 );
 Drawer.displayName = "Drawer";
 
@@ -24,11 +18,7 @@ const DrawerOverlay = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Overlay>,
 	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-	<DrawerPrimitive.Overlay
-		ref={ref}
-		className={cn("fixed inset-0 z-50 bg-black/80", className)}
-		{...props}
-	/>
+	<DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 backdrop-blur-sm", className)} {...props} />
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
@@ -41,37 +31,25 @@ const DrawerContent = React.forwardRef<
 		<DrawerPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] bg-white dark:bg-zinc-900",
+				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 				className,
 			)}
 			{...props}
 		>
-			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-zinc-200 dark:bg-zinc-800" />
+			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 			{children}
 		</DrawerPrimitive.Content>
 	</DrawerPortal>
 ));
 DrawerContent.displayName = "DrawerContent";
 
-const DrawerHeader = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-		{...props}
-	/>
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("grid gap-1.5 p-4 text-center", className)} {...props} />
 );
 DrawerHeader.displayName = "DrawerHeader";
 
-const DrawerFooter = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-		{...props}
-	/>
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
 );
 DrawerFooter.displayName = "DrawerFooter";
 
@@ -81,10 +59,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<DrawerPrimitive.Title
 		ref={ref}
-		className={cn(
-			"text-lg font-semibold leading-none tracking-tight",
-			className,
-		)}
+		className={cn("text-lg font-semibold leading-none tracking-tight", className)}
 		{...props}
 	/>
 ));
@@ -94,11 +69,7 @@ const DrawerDescription = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Description>,
 	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
-	<DrawerPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
-		{...props}
-	/>
+	<DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
 ));
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;