@checkstack/notification-frontend 0.2.9 → 0.2.10

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @checkstack/notification-frontend
 
+## 0.2.10
+
+### Patch Changes
+
+- 223081d: Add icon support to PageLayout and improve mobile responsiveness
+
+  **PageLayout Icons:**
+
+  - Added required `icon` prop to `PageLayout` and `PageHeader` components that accepts a Lucide icon component reference
+  - Icons are rendered with consistent `h-6 w-6 text-primary` styling
+  - Updated all page components to include appropriate icons in their headers
+
+  **Mobile Layout Improvements:**
+
+  - Standardized responsive padding in main app shell (`p-3` on mobile, `p-6` on desktop)
+  - Added `CardHeaderRow` component for mobile-safe card headers with proper wrapping
+  - Improved `DateRangeFilter` responsive behavior with vertical stacking on mobile
+  - Migrated pages to use `PageLayout` for consistent responsive behavior
+
+- Updated dependencies [223081d]
+  - @checkstack/ui@0.5.0
+  - @checkstack/auth-frontend@0.5.5
+
 ## 0.2.9
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/notification-frontend",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/pages/NotificationSettingsPage.tsx

@@ -72,7 +72,7 @@ export const NotificationSettingsPage = () => {
     refetch: refetchStrategies,
   } = notificationClient.getDeliveryStrategies.useQuery(
     {},
-    { enabled: isAdmin }
+    { enabled: isAdmin },
   );
 
   // Query: User delivery channels
@@ -97,7 +97,7 @@ export const NotificationSettingsPage = () => {
       },
       onError: (error) => {
         toast.error(
-          error instanceof Error ? error.message : "Failed to save settings"
+          error instanceof Error ? error.message : "Failed to save settings",
         );
       },
     });
@@ -109,7 +109,7 @@ export const NotificationSettingsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to unsubscribe"
+        error instanceof Error ? error.message : "Failed to unsubscribe",
       );
     },
   });
@@ -123,7 +123,7 @@ export const NotificationSettingsPage = () => {
       },
       onError: (error) => {
         toast.error(
-          error instanceof Error ? error.message : "Failed to update channel"
+          error instanceof Error ? error.message : "Failed to update channel",
         );
         setStrategySaving(undefined);
       },
@@ -138,7 +138,9 @@ export const NotificationSettingsPage = () => {
       },
       onError: (error) => {
         toast.error(
-          error instanceof Error ? error.message : "Failed to update preference"
+          error instanceof Error
+            ? error.message
+            : "Failed to update preference",
         );
         setChannelSaving(undefined);
       },
@@ -153,7 +155,7 @@ export const NotificationSettingsPage = () => {
       },
       onError: (error) => {
         toast.error(
-          error instanceof Error ? error.message : "Failed to disconnect"
+          error instanceof Error ? error.message : "Failed to disconnect",
         );
         setChannelSaving(undefined);
       },
@@ -166,7 +168,7 @@ export const NotificationSettingsPage = () => {
       },
       onError: (error) => {
         toast.error(
-          error instanceof Error ? error.message : "Failed to start OAuth flow"
+          error instanceof Error ? error.message : "Failed to start OAuth flow",
         );
         setChannelConnecting(undefined);
       },
@@ -180,7 +182,7 @@ export const NotificationSettingsPage = () => {
 
   const handleSaveRetention = () => {
     setRetentionMutation.mutate(
-      retentionSettings as { enabled: boolean; retentionDays: number }
+      retentionSettings as { enabled: boolean; retentionDays: number },
     );
   };
 
@@ -192,7 +194,7 @@ export const NotificationSettingsPage = () => {
     strategyId: string,
     enabled: boolean,
     config?: Record<string, unknown>,
-    layoutConfig?: Record<string, unknown>
+    layoutConfig?: Record<string, unknown>,
   ) => {
     setStrategySaving(strategyId);
     await updateStrategyMutation.mutateAsync({
@@ -226,7 +228,7 @@ export const NotificationSettingsPage = () => {
 
   const handleChannelConfigSave = async (
     strategyId: string,
-    userConfig: Record<string, unknown>
+    userConfig: Record<string, unknown>,
   ) => {
     setChannelSaving(strategyId);
     const channel = userChannels.find((c) => c.strategyId === strategyId);
@@ -243,7 +245,7 @@ export const NotificationSettingsPage = () => {
   };
 
   return (
-    <PageLayout title="Notification Settings" loading={subsLoading}>
+    <PageLayout title="Notification Settings" icon={Bell} loading={subsLoading}>
       <div className="space-y-8">
         {/* Your Notification Channels - All users */}
         <section>

package/src/pages/NotificationsPage.tsx

@@ -48,7 +48,7 @@ export const NotificationsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to mark as read"
+        error instanceof Error ? error.message : "Failed to mark as read",
       );
     },
   });
@@ -61,7 +61,9 @@ export const NotificationsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete notification"
+        error instanceof Error
+          ? error.message
+          : "Failed to delete notification",
       );
     },
   });
@@ -74,7 +76,7 @@ export const NotificationsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to mark all as read"
+        error instanceof Error ? error.message : "Failed to mark all as read",
       );
     },
   });
@@ -129,7 +131,7 @@ export const NotificationsPage = () => {
   };
 
   return (
-    <PageLayout title="Notifications" loading={loading}>
+    <PageLayout title="Notifications" icon={Bell} loading={loading}>
       <div className="space-y-4">
         {/* Header with filters */}
         <div className="flex items-center justify-between">