From 0cc295066c9eeae346889f557f37fed412a6cf51 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Mon, 12 Jan 2026 21:09:26 +0000
Subject: [PATCH] fix(alerts): allow configuration access when alerts are
 disabled

Users should be able to configure alert thresholds, notifications, and
schedules regardless of whether alert notifications are enabled. The
enable/disable toggle only controls whether notifications are sent,
not whether users can access the configuration.

Previously, when alerts were in 'pending_review' or 'snoozed' state,
all configuration tabs were disabled, forcing users to the Overview
tab only.

Fixes #1101
---
 frontend-modern/src/pages/Alerts.tsx | 79 +++++++++++-----------------
 1 file changed, 30 insertions(+), 49 deletions(-)

diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx
index 6d38df4f3..0bda0643a 100644
--- a/frontend-modern/src/pages/Alerts.tsx
+++ b/frontend-modern/src/pages/Alerts.tsx
@@ -1937,9 +1937,7 @@ export function Alerts() {
         </Card>
       </Show>
 
-      <div class={`transition-opacity ${isAlertsActive() ? 'opacity-100' : 'opacity-50 pointer-events-none'
-        }`}>
-
+      <div>
         <Card padding="none" class="relative lg:flex overflow-hidden">
           <div
             class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-gray-200 dark:border-gray-700 lg:border-b-0 lg:border-r lg:border-gray-200 dark:lg:border-gray-700 lg:align-top flex-shrink-0 transition-all duration-200`}
@@ -2002,32 +2000,23 @@ export function Alerts() {
                       </Show>
                       <div class="space-y-1.5">
                         <For each={group.items}>
-                          {(item) => {
-                            const disabled = () => item.id !== 'overview' && !isAlertsActive();
-                            return (
-                              <button
-                                type="button"
-                                aria-current={activeTab() === item.id ? 'page' : undefined}
-                                disabled={disabled()}
-                                class={`flex w-full items-center ${sidebarCollapsed() ? 'justify-center' : 'gap-2.5'} rounded-md ${sidebarCollapsed() ? 'px-2 py-2.5' : 'px-3 py-2'} text-sm font-medium transition-colors ${disabled()
-                                  ? 'opacity-60 cursor-not-allowed text-gray-400 dark:text-gray-600'
-                                  : activeTab() === item.id
-                                    ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-200'
-                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700/60 dark:hover:text-gray-100'
-                                  }`}
-                                onClick={() => {
-                                  if (disabled()) return;
-                                  handleTabChange(item.id);
-                                }}
-                                title={sidebarCollapsed() ? item.label : undefined}
-                              >
-                                {item.icon}
-                                <Show when={!sidebarCollapsed()}>
-                                  <span class="truncate">{item.label}</span>
-                                </Show>
-                              </button>
-                            );
-                          }}
+                          {(item) => (
+                            <button
+                              type="button"
+                              aria-current={activeTab() === item.id ? 'page' : undefined}
+                              class={`flex w-full items-center ${sidebarCollapsed() ? 'justify-center' : 'gap-2.5'} rounded-md ${sidebarCollapsed() ? 'px-2 py-2.5' : 'px-3 py-2'} text-sm font-medium transition-colors ${activeTab() === item.id
+                                ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-200'
+                                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700/60 dark:hover:text-gray-100'
+                                }`}
+                              onClick={() => handleTabChange(item.id)}
+                              title={sidebarCollapsed() ? item.label : undefined}
+                            >
+                              {item.icon}
+                              <Show when={!sidebarCollapsed()}>
+                                <span class="truncate">{item.label}</span>
+                              </Show>
+                            </button>
+                          )}
                         </For>
                       </div>
                     </div>
@@ -2046,26 +2035,18 @@ export function Alerts() {
                     style="-webkit-overflow-scrolling: touch;"
                   >
                     <For each={flatTabs}>
-                      {(tab) => {
-                        const disabled = () => tab.id !== 'overview' && !isAlertsActive();
-                        return (
-                          <button
-                            type="button"
-                            class={`px-3 py-1.5 sm:px-4 sm:py-2 text-[11px] sm:text-xs font-medium rounded-md transition-all whitespace-nowrap ${activeTab() === tab.id
-                              ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-                              } ${disabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}`}
-                            disabled={disabled()}
-                            onClick={() => {
-                              if (disabled()) return;
-                              handleTabChange(tab.id);
-                            }}
-                            title={disabled() ? 'Activate alerts to configure' : undefined}
-                          >
-                            {tab.label}
-                          </button>
-                        );
-                      }}
+                      {(tab) => (
+                        <button
+                          type="button"
+                          class={`px-3 py-1.5 sm:px-4 sm:py-2 text-[11px] sm:text-xs font-medium rounded-md transition-all whitespace-nowrap ${activeTab() === tab.id
+                            ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                            : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                            }`}
+                          onClick={() => handleTabChange(tab.id)}
+                        >
+                          {tab.label}
+                        </button>
+                      )}
                     </For>
                   </div>
                 </div>