From 7819126645aa17dcc5b9913d69550263d2618129 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nedim=20Arabac=C4=B1?= Date: Wed, 2 Oct 2024 22:33:52 +0300 Subject: [PATCH] settings revisited --- .../custom/v2/add-entry/date-picker.tsx | 7 +- .../custom/v2/calendar-month-switcher.tsx | 6 +- .../custom/v2/erase-data-drawer.tsx | 57 ++++++ src/components/ui/drawer.tsx | 51 +---- src/screens/settings-screen.tsx | 189 ++++++++---------- 5 files changed, 158 insertions(+), 152 deletions(-) create mode 100644 src/components/custom/v2/erase-data-drawer.tsx diff --git a/src/components/custom/v2/add-entry/date-picker.tsx b/src/components/custom/v2/add-entry/date-picker.tsx index e620fb4..27f91a5 100644 --- 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={} /> diff --git a/src/components/custom/v2/calendar-month-switcher.tsx b/src/components/custom/v2/calendar-month-switcher.tsx index bb2d92c..a22510a 100644 --- 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 { > {!isViewingCurrentMonth && ( - + // )} {dayjs(new Date(calendarIndex)).format("MMMM, YYYY")} diff --git a/src/components/custom/v2/erase-data-drawer.tsx b/src/components/custom/v2/erase-data-drawer.tsx new file mode 100644 index 0000000..dd5d198 --- /dev/null +++ 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((_, ref) => { + const [open, setOpen] = useState(false); + // const { m } = useLocalization(); + + useImperativeHandle(ref, () => ({ + openDrawer: () => { + setOpen(true); + }, + closeDrawer: () => { + setOpen(false); + }, + })); + + return ( + + + + + Are you absolutely sure? + This action cannot be undone. + + + + + + + ); +}); diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx index c5049c7..3cb153f 100644 --- 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) => ( - +const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps) => ( + ); Drawer.displayName = "Drawer"; @@ -24,11 +18,7 @@ const DrawerOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - + )); DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName; @@ -41,37 +31,25 @@ const DrawerContent = React.forwardRef< -
+
{children} )); DrawerContent.displayName = "DrawerContent"; -const DrawerHeader = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes) => ( +
); DrawerHeader.displayName = "DrawerHeader"; -const DrawerFooter = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes) => ( +
); DrawerFooter.displayName = "DrawerFooter"; @@ -81,10 +59,7 @@ const DrawerTitle = React.forwardRef< >(({ className, ...props }, ref) => ( )); @@ -94,11 +69,7 @@ const DrawerDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - + )); DrawerDescription.displayName = DrawerPrimitive.Description.displayName; diff --git a/src/screens/settings-screen.tsx b/src/screens/settings-screen.tsx index 0f9b757..4997ccf 100644 --- a/src/screens/settings-screen.tsx +++ b/src/screens/settings-screen.tsx @@ -1,8 +1,5 @@ import { AmountDisplay } from "@/components/custom/amount-display"; -import { - GroupDrawer, - type GroupDrawerRef, -} from "@/components/custom/group-drawer"; +import { GroupDrawer, type GroupDrawerRef } from "@/components/custom/group-drawer"; import { DecimalModeSelector, DecimalSelector, @@ -11,31 +8,41 @@ import { } from "@/components/custom/settings"; import { TagDrawer, type TagDrawerRef } from "@/components/custom/tag-drawer"; import { ThemeToggle } from "@/components/custom/theme-toggle"; -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/components/ui/accordion"; +import { EraseDataDrawer, type EraseDataDrawerRef } from "@/components/custom/v2/erase-data-drawer"; import { Button } from "@/components/ui/button"; -import { evolu } from "@/evolu-db"; import { useLocalization } from "@/hooks/use-localization"; -import { storageKeys } from "@/lib/utils"; +import { cn, storageKeys } from "@/lib/utils"; import { - IconAlertCircleFilled, + IconCashBanknoteFilled, + IconCategoryFilled, IconChevronRight, + IconContrastFilled, + IconCurrencyCent, + IconEyeFilled, IconHeartFilled, + IconLanguageHiragana, + IconNumber123, + IconTagsFilled, + IconTrashXFilled, + type TablerIcon, } from "@tabler/icons-react"; import type React from "react"; import { useRef } from "react"; function SettingsRow({ title, + Icon, + iconBackground, children, -}: { title: string; children: React.ReactNode }) { +}: { title: string; Icon: TablerIcon; iconBackground: string; children: React.ReactNode }) { return (
-

{title}

+

+
+ +
+ {title} +

{children}
); @@ -44,7 +51,8 @@ export function SettingsScreen() { const { mainCurrency, m, decimalMode } = useLocalization(); const groupDrawerRef = useRef(null); const tagDrawerRef = useRef(null); - const sponsorsEnabled = true; + const eraseDataDrawerRef = useRef(null); + const sponsorsEnabled = false; return ( <>
@@ -53,25 +61,30 @@ export function SettingsScreen() {
-

- {m.Currency()} -

+

{m.General()}

+
+ + + + + + +
+
+ +
+

{m.Currency()}

- + - + - {/* {decimal > 0 && ( - - - - )} */} - + - +
-

- {m.GroupsAndTags()} -

+

{m.GroupsAndTags()}

- + - +
-

- {m.General()} -

-
- - +

Data

+
+ {/* + - - + + + */} + +
@@ -168,12 +205,7 @@ export function SettingsScreen() { className="max-h-12 w-full object-contain filter grayscale transition-all dark:invert duration-300" xmlns="http://www.w3.org/2000/svg" > - + - + @@ -329,53 +357,7 @@ export function SettingsScreen() { )} -
- - - - Danger zone - - -
-
-
-
-
-

- {m.ClearAllEntries()} -

-
-
    -
  • {m.YouWillLoseAllData()}
    • -
  • {m.ThisIsNotReversible()}
    • -
  • {m.PleaseBeSure()}
    • -
-
-
-
- -
- - - -
- -
+
gider.im v{__APP_VERSION__} •

@@ -416,6 +398,7 @@ export function SettingsScreen() {

+ ); }