Refactored Viewer role Notifications settings (#19640)

- now each individual element is shown if allowed by role, instead of having multiple return statement for each role

web/src/pages/Settings.tsx

@@ -73,7 +73,11 @@ export default function Settings() {
 
   const isAdmin = useIsAdmin();
 
-  const allowedViewsForViewer: SettingsType[] = ["ui", "debug"];
+  const allowedViewsForViewer: SettingsType[] = [
+    "ui",
+    "debug",
+    "notifications",
+  ];
   const visibleSettingsViews = !isAdmin
     ? allowedViewsForViewer
     : allSettingsViews;
@@ -164,7 +168,7 @@ export default function Settings() {
   useSearchEffect("page", (page: string) => {
     if (allSettingsViews.includes(page as SettingsType)) {
       // Restrict viewer to UI settings
-      if (!isAdmin && !["ui", "debug"].includes(page)) {
+      if (!isAdmin && !allowedViewsForViewer.includes(page as SettingsType)) {
         setPage("ui");
       } else {
         setPage(page as SettingsType);
@@ -200,7 +204,7 @@ export default function Settings() {
               onValueChange={(value: SettingsType) => {
                 if (value) {
                   // Restrict viewer navigation
-                  if (!isAdmin && !["ui", "debug"].includes(value)) {
+                  if (!isAdmin && !allowedViewsForViewer.includes(value)) {
                     setPageToggle("ui");
                   } else {
                     setPageToggle(value);

web/src/views/settings/NotificationsSettingsView.tsx

@@ -46,6 +46,8 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { useIsAdmin } from "@/hooks/use-is-admin";
+import { cn } from "@/lib/utils";
 
 const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";
 
@@ -64,6 +66,10 @@ export default function NotificationView({
   const { t } = useTranslation(["views/settings"]);
   const { getLocaleDocUrl } = useDocDomain();
 
+  // roles
+
+  const isAdmin = useIsAdmin();
+
   const { data: config, mutate: updateConfig } = useSWR<FrigateConfig>(
     "config",
     {
@@ -380,7 +386,11 @@ export default function NotificationView({
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
         <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
-          <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
+          <div
+            className={cn(
+              isAdmin && "grid w-full grid-cols-1 gap-4 md:grid-cols-2",
+            )}
+          >
             <div className="col-span-1">
               <Heading as="h3" className="my-2">
                 {t("notification.notificationSettings.title")}
@@ -403,6 +413,7 @@ export default function NotificationView({
                 </div>
               </div>
 
+              {isAdmin && (
                 <Form {...form}>
                   <form
                     onSubmit={form.handleSubmit(onSubmit)}
@@ -465,7 +476,9 @@ export default function NotificationView({
                                   <FilterSwitch
                                     key={camera.name}
                                     label={camera.name.replaceAll("_", " ")}
-                                  isChecked={field.value?.includes(camera.name)}
+                                    isChecked={field.value?.includes(
+                                      camera.name,
+                                    )}
                                     onCheckedChange={(checked) => {
                                       setChangedValue(true);
                                       let newCameras;
@@ -528,13 +541,23 @@ export default function NotificationView({
                     </div>
                   </form>
                 </Form>
+              )}
             </div>
 
             <div className="col-span-1">
               <div className="mt-4 gap-2 space-y-6">
-                <div className="flex flex-col gap-2 md:max-w-[50%]">
+                <div
-                  <Separator className="my-2 flex bg-secondary md:hidden" />
+                  className={cn(
-                  <Heading as="h4" className="my-2">
+                    isAdmin && "flex flex-col gap-2 md:max-w-[50%]",
+                  )}
+                >
+                  <Separator
+                    className={cn(
+                      "my-2 flex bg-secondary",
+                      isAdmin && "md:hidden",
+                    )}
+                  />
+                  <Heading as="h4" className={cn(isAdmin ? "my-2" : "my-4")}>
                     {t("notification.deviceSpecific")}
                   </Heading>
                   <Button
@@ -580,7 +603,7 @@ export default function NotificationView({
                       ? t("notification.unregisterDevice")
                       : t("notification.registerDevice")}
                   </Button>
-                  {registration != null && registration.active && (
+                  {isAdmin && registration != null && registration.active && (
                     <Button
                       aria-label={t("notification.sendTestNotification")}
                       onClick={() => sendTestNotification("notification_test")}
@@ -590,7 +613,7 @@ export default function NotificationView({
                   )}
                 </div>
               </div>
-              {notificationCameras.length > 0 && (
+              {isAdmin && notificationCameras.length > 0 && (
                 <div className="mt-4 gap-2 space-y-6">
                   <div className="space-y-3">
                     <Separator className="my-2 flex bg-secondary" />