feat: migrate to site-settings

apps/web/package.json

@@ -42,6 +42,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
+    "remeda": "^1.27.1",
     "sharp": "0.33.1",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",

apps/web/src/app/(dashboard)/admin/banner/banner-form.tsx

@@ -1,119 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { TRPCClientError } from '@documenso/trpc/client';
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Switch } from '@documenso/ui/primitives/switch';
-import { Textarea } from '@documenso/ui/primitives/textarea';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-const ZBannerSchema = z.object({
-  text: z.string().optional(),
-  show: z.boolean().optional(),
-});
-
-type TBannerSchema = z.infer<typeof ZBannerSchema>;
-
-export function BannerForm({ show, text }: TBannerSchema) {
-  const router = useRouter();
-  const { toast } = useToast();
-
-  const form = useForm<TBannerSchema>({
-    resolver: zodResolver(ZBannerSchema),
-    defaultValues: {
-      show,
-      text,
-    },
-  });
-
-  const { mutateAsync: updateBanner, isLoading: isUpdatingBanner } =
-    trpcReact.banner.updateBanner.useMutation();
-
-  const onBannerUpdate = async ({ show, text }: TBannerSchema) => {
-    try {
-      await updateBanner({
-        show,
-        text,
-      });
-
-      toast({
-        title: 'Banner Updated',
-        description: 'Your banner has been updated successfully.',
-        duration: 5000,
-      });
-
-      router.refresh();
-    } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: 'An error occurred',
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: 'An unknown error occurred',
-          variant: 'destructive',
-          description:
-            'We encountered an unknown error while attempting to reset your password. Please try again later.',
-        });
-      }
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form className="flex flex-col" onSubmit={form.handleSubmit(onBannerUpdate)}>
-        <FormField
-          control={form.control}
-          name="show"
-          render={({ field }) => (
-            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-              <div className="space-y-0.5">
-                <FormLabel>Show Banner</FormLabel>
-                <FormDescription>Show a banner to the users by the admin</FormDescription>
-              </div>
-              <FormControl>
-                <Switch checked={field.value} onCheckedChange={field.onChange} />
-              </FormControl>
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="text"
-          render={({ field }) => (
-            <FormItem className="mt-8">
-              <FormLabel className="text-base ">Banner Text</FormLabel>
-              <FormControl>
-                <Textarea placeholder="Text to show to users" className="resize-none" {...field} />
-              </FormControl>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" loading={isUpdatingBanner} className="mt-3 justify-end self-end">
-          Update Banner
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/web/src/app/(dashboard)/admin/banner/page.tsx

@@ -1,15 +0,0 @@
-import { getBanner } from '@documenso/lib/server-only/banner/get-banner';
-
-import { BannerForm } from './banner-form';
-
-export default async function AdminBannerPage() {
-  const banner = await getBanner();
-
-  return (
-    <div className="space-y-8">
-      <h2 className="text-4xl font-semibold">Banner</h2>
-
-      <BannerForm show={banner?.show ?? false} text={banner?.text ?? ''} />
-    </div>
-  );
-}

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { BadgeAlert, BarChart3, FileStack, User2, Wallet2 } from 'lucide-react';
+import { BarChart3, FileStack, Settings, User2, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -87,9 +87,9 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
         )}
         asChild
       >
-        <Link href="/admin/banner">
-          <BadgeAlert className="mr-2 h-5 w-5" />
-          Banner
+        <Link href="/admin/site-settings">
+          <Settings className="mr-2 h-5 w-5" />
+          Site Settings
         </Link>
       </Button>
     </div>

apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import type { TSiteSettingsBannerSchema } from '@documenso/lib/server-only/site-settings/schemas/banner';
+import {
+  SITE_SETTINGS_BANNER_ID,
+  ZSiteSettingsBannerSchema,
+} from '@documenso/lib/server-only/site-settings/schemas/banner';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { ColorPicker } from '@documenso/ui/primitives/color-picker';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZBannerFormSchema = ZSiteSettingsBannerSchema;
+
+type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
+
+export type BannerFormProps = {
+  banner?: TSiteSettingsBannerSchema;
+};
+
+export function BannerForm({ banner }: BannerFormProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const form = useForm<TBannerFormSchema>({
+    resolver: zodResolver(ZBannerFormSchema),
+    defaultValues: {
+      id: SITE_SETTINGS_BANNER_ID,
+      enabled: banner?.enabled ?? false,
+      data: {
+        content: banner?.data?.content ?? '',
+        bgColor: banner?.data?.bgColor ?? '#000000',
+        textColor: banner?.data?.textColor ?? '#FFFFFF',
+      },
+    },
+  });
+
+  const enabled = form.watch('enabled');
+  const values = form.getValues();
+  console.log({ values });
+
+  const { mutateAsync: updateSiteSetting, isLoading: isUpdateSiteSettingLoading } =
+    trpcReact.admin.updateSiteSetting.useMutation();
+
+  const onBannerUpdate = async ({ id, enabled, data }: TBannerFormSchema) => {
+    try {
+      await updateSiteSetting({
+        id,
+        enabled,
+        data,
+      });
+
+      toast({
+        title: 'Banner Updated',
+        description: 'Your banner has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.refresh();
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to update the banner. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="font-semibold">Site Banner</h2>
+      <p className="text-muted-foreground mt-2 text-sm">
+        The site banner is a message that is shown at the top of the site. It can be used to display
+        important information to your users.
+      </p>
+
+      <Form {...form}>
+        <form
+          className="mt-4 flex flex-col rounded-md"
+          onSubmit={form.handleSubmit(onBannerUpdate)}
+        >
+          <div className="mt-4 flex flex-col gap-4 md:flex-row">
+            <FormField
+              control={form.control}
+              name="enabled"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Enabled</FormLabel>
+
+                  <FormControl>
+                    <div>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <fieldset
+              className="flex flex-col gap-4 md:flex-row"
+              disabled={!enabled}
+              aria-disabled={!enabled}
+            >
+              <FormField
+                control={form.control}
+                name="data.bgColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Background Color</FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="data.textColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Text Color</FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </fieldset>
+          </div>
+
+          <fieldset disabled={!enabled} aria-disabled={!enabled}>
+            <FormField
+              control={form.control}
+              name="data.content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Content</FormLabel>
+
+                  <FormControl>
+                    <Textarea className="h-32 resize-none" {...field} />
+                  </FormControl>
+
+                  <FormDescription>
+                    The content to show in the banner, HTML is allowed
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+
+          <Button
+            type="submit"
+            loading={isUpdateSiteSettingLoading}
+            className="mt-4 justify-end self-end"
+          >
+            Update Banner
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/admin/site-settings/page.tsx

@@ -0,0 +1,24 @@
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+import { BannerForm } from './banner-form';
+
+// import { BannerForm } from './banner-form';
+
+export default async function AdminBannerPage() {
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
+
+  return (
+    <div>
+      <SettingsHeader title="Site Settings" subtitle="Manage your site settings here" />
+
+      <div className="mt-8">
+        <BannerForm banner={banner} />
+      </div>
+    </div>
+  );
+}

apps/web/src/components/(dashboard)/layout/banner.tsx

@@ -1,14 +1,22 @@
-import { getBanner } from '@documenso/lib/server-only/banner/get-banner';
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
 
 export const Banner = async () => {
-  const banner = await getBanner();
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
 
   return (
     <>
-      {banner && banner.show && (
-        <div className="bg-documenso-200 dark:bg-documenso-400">
-          <div className="text-documenso-900 mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium">
-            <div className="flex items-center">{banner.text}</div>
+      {banner && banner.enabled && (
+        <div className="mb-2" style={{ background: banner.data.bgColor }}>
+          <div
+            className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
+            style={{ color: banner.data.textColor }}
+          >
+            <div className="flex items-center">
+              <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
+            </div>
           </div>
         </div>
       )}