Restructure Integrations card: inline title, ntfy sub-section with collapsible config

- Integrations card now has inline icon+title (no description), future-proofed
  for additional integrations as sub-sections
- ntfy is its own sub-section with Bell icon + "ntfy Push Notifications" header
- Connection settings (URL, topic, token) collapse into a "Configure ntfy
  connection" disclosure after saving, keeping the UI tidy
- Notification types and test/save buttons remain visible when enabled
- First-time setup shows connection fields expanded; they collapse on save

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/settings/NtfySettingsSection.tsx

@@ -3,10 +3,12 @@ import { toast } from 'sonner';
 import {
   AlertTriangle,
   Bell,
+  ChevronDown,
   Eye,
   EyeOff,
   Loader2,
   Send,
+  Settings2,
   X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -14,8 +16,8 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
 import api, { getErrorMessage } from '@/lib/api';
 import type { Settings } from '@/types';
 
@@ -47,6 +49,10 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
   const [isSaving, setIsSaving] = useState(false);
   const [isTestingNtfy, setIsTestingNtfy] = useState(false);
 
+  // Connection config is collapsed once server+topic are saved
+  const isConfigured = !!(settings?.ntfy_server_url && settings?.ntfy_topic);
+  const [configExpanded, setConfigExpanded] = useState(!isConfigured);
+
   // Sync from settings on initial load
   useEffect(() => {
     if (!settings) return;
@@ -62,6 +68,7 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
     setTodoLeadDays(settings.ntfy_todo_lead_days ?? 0);
     setProjectsEnabled(settings.ntfy_projects_enabled ?? false);
     setProjectLeadDays(settings.ntfy_project_lead_days ?? 0);
+    setConfigExpanded(!(settings.ntfy_server_url && settings.ntfy_topic));
   }, [settings?.id]);
 
   const ntfyHasToken = settings?.ntfy_has_token ?? false;
@@ -93,6 +100,10 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
       await updateSettings(updates);
       setNtfyToken('');
       setTokenCleared(false);
+      // Collapse connection settings after successful save if configured
+      if (ntfyServerUrl.trim() && ntfyTopic.trim()) {
+        setConfigExpanded(false);
+      }
       toast.success('Notification settings saved');
     } catch (error) {
       toast.error(getErrorMessage(error, 'Failed to save notification settings'));
@@ -119,35 +130,18 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
   };
 
   return (
-    <Card>
+    <div className="space-y-4">
-      <CardHeader>
+      {/* ntfy sub-section header */}
-        <div className="flex items-center gap-3">
-          <div className="p-1.5 rounded-md bg-orange-500/10">
-            <Bell className="h-4 w-4 text-orange-400" aria-hidden="true" />
-          </div>
-          <div>
-            <CardTitle>Integrations</CardTitle>
-            <CardDescription>Push notifications via ntfy</CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-5">
-
-        {/* Master toggle */}
       <div className="flex items-center justify-between">
-          <div>
+        <div className="flex items-center gap-2.5">
-            <p className="text-sm font-medium">Enable Push Notifications</p>
+          <Bell className="h-4 w-4 text-orange-400" aria-hidden="true" />
-            <p className="text-xs text-muted-foreground mt-0.5">
+          <p className="text-sm font-medium">ntfy Push Notifications</p>
-              Send alerts to your ntfy server for reminders, todos, and events
-            </p>
         </div>
         <Switch checked={ntfyEnabled} onCheckedChange={setNtfyEnabled} />
       </div>
 
       {ntfyEnabled && (
         <>
-            <Separator />
-
           {/* Warning banner */}
           {isMisconfigured && (
             <div
@@ -161,9 +155,31 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
             </div>
           )}
 
-            {/* Connection config */}
+          {/* Connection config — collapsible when already configured */}
-            <div className="space-y-3">
+          {isConfigured && !configExpanded ? (
-              <p className="text-sm font-medium">Connection</p>
+            <button
+              type="button"
+              onClick={() => setConfigExpanded(true)}
+              className="flex items-center gap-2 w-full rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-card-elevated transition-colors"
+            >
+              <Settings2 className="h-3.5 w-3.5" />
+              <span className="flex-1 text-left">Configure ntfy connection</span>
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+          ) : (
+            <div className="space-y-3 rounded-md border border-border p-3">
+              <div className="flex items-center justify-between">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Connection</p>
+                {isConfigured && (
+                  <button
+                    type="button"
+                    onClick={() => setConfigExpanded(false)}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    Collapse
+                  </button>
+                )}
+              </div>
               <div className="space-y-2">
                 <Label htmlFor="ntfy_server_url">Server URL</Label>
                 <Input
@@ -193,7 +209,6 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
                     value={ntfyToken}
                     onChange={(e) => {
                       setNtfyToken(e.target.value);
-                      // If user starts typing after clearing, undo the cleared flag
                       if (tokenCleared && e.target.value) setTokenCleared(false);
                     }}
                     placeholder={
@@ -206,7 +221,6 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
                     className="pr-16"
                   />
                   <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1 items-center">
-                    {/* Clear button — only when a token is saved and field is empty and not yet cleared */}
                     {ntfyHasToken && !ntfyToken && !tokenCleared && (
                       <button
                         type="button"
@@ -236,12 +250,13 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
                 )}
               </div>
             </div>
+          )}
 
           <Separator />
 
           {/* Per-type notification toggles */}
           <div className="space-y-4">
-              <p className="text-sm font-medium">Notification Types</p>
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Notification Types</p>
 
             {/* Event reminders */}
             <div className="flex items-center justify-between gap-3">
@@ -349,8 +364,6 @@ export default function NtfySettingsSection({ settings, updateSettings }: NtfySe
           </Button>
         </div>
       )}
-
+    </div>
-      </CardContent>
-    </Card>
   );
 }

frontend/src/components/settings/SettingsPage.tsx

@@ -13,6 +13,7 @@ import {
   Search,
   Loader2,
   Shield,
+  Blocks,
 } from 'lucide-react';
 import { useSettings } from '@/hooks/useSettings';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -527,8 +528,20 @@ export default function SettingsPage() {
               {/* Authentication (TOTP + password change) */}
               <TotpSetupSection />
 
-              {/* Integrations (ntfy push notifications) */}
+              {/* Integrations */}
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <div className="p-1.5 rounded-md bg-orange-500/10">
+                      <Blocks className="h-4 w-4 text-orange-400" aria-hidden="true" />
+                    </div>
+                    <CardTitle>Integrations</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent>
                   <NtfySettingsSection settings={settings} updateSettings={updateSettings} />
+                </CardContent>
+              </Card>
 
             </div>