diff --git a/apps/app/src/app/settings/components/logo-input.tsx b/apps/app/src/app/settings/components/logo-input.tsx index 17d9ce4..4cdba72 100644 --- a/apps/app/src/app/settings/components/logo-input.tsx +++ b/apps/app/src/app/settings/components/logo-input.tsx @@ -1,13 +1,14 @@ "use client"; -import { useAppInfo } from "@/contexts/app-info-context"; -import { removeLogo, uploadLogo } from "@/http/endpoints"; -import { Button } from "@/components/ui/button"; -import { useTranslations } from "next-intl"; import { useEffect, useRef, useState } from "react"; import { IconCloudUpload, IconTrash } from "@tabler/icons-react"; +import { useTranslations } from "next-intl"; import { toast } from "sonner"; +import { Button } from "@/components/ui/button"; +import { useAppInfo } from "@/contexts/app-info-context"; +import { removeLogo, uploadLogo } from "@/http/endpoints"; + interface LogoInputProps { value?: string; onChange: (value: string) => void; @@ -15,7 +16,7 @@ interface LogoInputProps { } export function LogoInput({ value, onChange, isDisabled }: LogoInputProps) { - const t = useTranslations(); + const t = useTranslations(); const [isUploading, setIsUploading] = useState(false); const [currentLogo, setCurrentLogo] = useState(value); const fileInputRef = useRef(null); @@ -80,19 +81,9 @@ export function LogoInput({ value, onChange, isDisabled }: LogoInputProps) { {currentLogo ? (
- {t("logo.labels.appLogo")} + {t("logo.labels.appLogo")}
- diff --git a/apps/app/src/app/settings/components/settings-form.tsx b/apps/app/src/app/settings/components/settings-form.tsx index ceb2ab1..7ba737a 100644 --- a/apps/app/src/app/settings/components/settings-form.tsx +++ b/apps/app/src/app/settings/components/settings-form.tsx @@ -1,5 +1,4 @@ -import { ValidGroup } from "../types"; -import { SettingsFormProps } from "../types"; +import { SettingsFormProps, ValidGroup } from "../types"; import { SettingsGroup } from "./settings-group"; const GROUP_ORDER: ValidGroup[] = ["general", "email", "security", "storage"]; diff --git a/apps/app/src/app/settings/components/settings-group.tsx b/apps/app/src/app/settings/components/settings-group.tsx index e8fd940..f7a11d7 100644 --- a/apps/app/src/app/settings/components/settings-group.tsx +++ b/apps/app/src/app/settings/components/settings-group.tsx @@ -1,12 +1,13 @@ -import { createGroupMetadata, createFieldDescriptions } from "../constants"; -import { SettingsGroupProps } from "../types"; -import { SettingsInput } from "./settings-input"; +import React from "react"; +import { IconChevronDown, IconChevronUp, IconDeviceFloppy } from "@tabler/icons-react"; +import { useTranslations } from "next-intl"; + import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; -import { useTranslations } from "next-intl"; -import React from "react"; -import { IconChevronDown, IconChevronUp, IconDeviceFloppy } from "@tabler/icons-react"; +import { createFieldDescriptions, createGroupMetadata } from "../constants"; +import { SettingsGroupProps } from "../types"; +import { SettingsInput } from "./settings-input"; export function SettingsGroup({ group, configs, form, isCollapsed, onToggleCollapse, onSubmit }: SettingsGroupProps) { const t = useTranslations(); @@ -21,7 +22,10 @@ export function SettingsGroup({ group, configs, form, isCollapsed, onToggleColla return (
- +
{metadata.icon && React.createElement(metadata.icon, { className: "text-xl text-muted-foreground" })}
@@ -33,7 +37,11 @@ export function SettingsGroup({ group, configs, form, isCollapsed, onToggleColla

- {isCollapsed ? : } + {isCollapsed ? ( + + ) : ( + + )}
diff --git a/apps/app/src/app/settings/components/settings-header.tsx b/apps/app/src/app/settings/components/settings-header.tsx index c84d0e0..5fa6f4c 100644 --- a/apps/app/src/app/settings/components/settings-header.tsx +++ b/apps/app/src/app/settings/components/settings-header.tsx @@ -1,15 +1,15 @@ -import { - Breadcrumb, - BreadcrumbItem, +import Link from "next/link"; +import { IconLayoutDashboard, IconSettings } from "@tabler/icons-react"; +import { useTranslations } from "next-intl"; + +import { + Breadcrumb, + BreadcrumbItem, BreadcrumbLink, BreadcrumbList, - BreadcrumbSeparator + BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { Separator } from "@/components/ui/separator"; -import { useTranslations } from "next-intl"; -import { IconSettings } from "@tabler/icons-react"; -import { IconLayoutDashboard } from "@tabler/icons-react"; -import Link from "next/link"; export function SettingsHeader() { const t = useTranslations(); diff --git a/apps/app/src/app/settings/components/settings-input.tsx b/apps/app/src/app/settings/components/settings-input.tsx index 42548fe..9b00b03 100644 --- a/apps/app/src/app/settings/components/settings-input.tsx +++ b/apps/app/src/app/settings/components/settings-input.tsx @@ -1,10 +1,10 @@ import { useTranslations } from "next-intl"; +import { UseFormRegister, UseFormWatch } from "react-hook-form"; + +import { Input } from "@/components/ui/input"; import { createFieldTitles } from "../constants"; import { Config } from "../types"; import { LogoInput } from "./logo-input"; -import { Input } from "@/components/ui/input"; -import { UseFormRegister, UseFormWatch } from "react-hook-form"; - export interface ConfigInputProps { config: Config; diff --git a/apps/app/src/app/settings/constants.ts b/apps/app/src/app/settings/constants.ts index 164fa56..fedf335 100644 --- a/apps/app/src/app/settings/constants.ts +++ b/apps/app/src/app/settings/constants.ts @@ -1,25 +1,25 @@ -import { createTranslator } from 'next-intl'; -import { IconMail, IconSettings, IconShield, IconDatabase } from '@tabler/icons-react'; +import { IconDatabase, IconMail, IconSettings, IconShield } from "@tabler/icons-react"; +import { createTranslator } from "next-intl"; export const createGroupMetadata = (t: ReturnType) => ({ email: { - title: t('settings.groups.email.title'), - description: t('settings.groups.email.description'), + title: t("settings.groups.email.title"), + description: t("settings.groups.email.description"), icon: IconMail, }, general: { - title: t('settings.groups.general.title'), - description: t('settings.groups.general.description'), + title: t("settings.groups.general.title"), + description: t("settings.groups.general.description"), icon: IconSettings, }, security: { - title: t('settings.groups.security.title'), - description: t('settings.groups.security.description'), + title: t("settings.groups.security.title"), + description: t("settings.groups.security.description"), icon: IconShield, }, storage: { - title: t('settings.groups.storage.title'), - description: t('settings.groups.storage.description'), + title: t("settings.groups.storage.title"), + description: t("settings.groups.storage.description"), icon: IconDatabase, }, }); diff --git a/apps/app/src/app/settings/hooks/use-settings.ts b/apps/app/src/app/settings/hooks/use-settings.ts index 31d0686..f4cf31a 100644 --- a/apps/app/src/app/settings/hooks/use-settings.ts +++ b/apps/app/src/app/settings/hooks/use-settings.ts @@ -1,28 +1,25 @@ "use client"; -import { ConfigType, GroupFormData } from "../types"; -import { Config } from "../types"; -import { useShareContext } from "@/contexts/share-context"; -import { useAppInfo } from "@/contexts/app-info-context"; -import { getAllConfigs, bulkUpdateConfigs } from "@/http/endpoints"; -import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect, useState } from "react"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useTranslations } from "next-intl"; import { useForm } from "react-hook-form"; - import { toast } from "sonner"; import { z } from "zod"; -import { useTranslations } from "next-intl"; + +import { useAppInfo } from "@/contexts/app-info-context"; +import { useShareContext } from "@/contexts/share-context"; +import { bulkUpdateConfigs, getAllConfigs } from "@/http/endpoints"; +import { Config, ConfigType, GroupFormData } from "../types"; const createSchemas = () => ({ settingsSchema: z.object({ - configs: z.record( - z.union([z.string(), z.number()]).transform((val) => String(val)) - ), + configs: z.record(z.union([z.string(), z.number()]).transform((val) => String(val))), }), }); export function useSettings() { - const t = useTranslations(); + const t = useTranslations(); const { settingsSchema } = createSchemas(); const [isLoading, setIsLoading] = useState(true); const [configs, setConfigs] = useState>({}); diff --git a/apps/app/src/app/settings/page.tsx b/apps/app/src/app/settings/page.tsx index ca8c293..b07a365 100644 --- a/apps/app/src/app/settings/page.tsx +++ b/apps/app/src/app/settings/page.tsx @@ -1,4 +1,4 @@ -"use client" +"use client"; import { ProtectedRoute } from "@/components/auth/protected-route"; import { LoadingScreen } from "@/components/layout/loading-screen"; @@ -16,7 +16,7 @@ export default function SettingsPage() { } return ( - +
diff --git a/apps/app/src/components/ui/button.tsx b/apps/app/src/components/ui/button.tsx index 42526de..9e1c0d3 100644 --- a/apps/app/src/components/ui/button.tsx +++ b/apps/app/src/components/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: {