@checkstack/catalog-frontend 0.3.7 → 0.3.9

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @checkstack/catalog-frontend
 
+## 0.3.9
+
+### 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.3.8
+
+### Patch Changes
+
+- Updated dependencies [db1f56f]
+- Updated dependencies [538e45d]
+  - @checkstack/common@0.6.0
+  - @checkstack/ui@0.4.1
+  - @checkstack/auth-frontend@0.5.4
+  - @checkstack/catalog-common@1.2.4
+  - @checkstack/frontend-api@0.3.3
+  - @checkstack/notification-common@0.2.3
+
 ## 0.3.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/catalog-frontend",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/components/CatalogConfigPage.tsx

@@ -12,21 +12,20 @@ import {
   catalogAccess,
 } from "@checkstack/catalog-common";
 import {
-  SectionHeader,
+  PageLayout,
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Button,
   Label,
-  LoadingSpinner,
   EmptyState,
-  AccessDenied,
   EditableText,
   ConfirmationModal,
   useToast,
 } from "@checkstack/ui";
-import { Plus, Trash2, LayoutGrid, Server, Settings, Edit } from "lucide-react";
+import { Plus, Trash2, LayoutGrid, Server, Edit } from "lucide-react";
 import { SystemEditor } from "./SystemEditor";
 import { GroupEditor } from "./GroupEditor";
 
@@ -36,7 +35,7 @@ export const CatalogConfigPage = () => {
   const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
-    catalogAccess.system.manage
+    catalogAccess.system.manage,
   );
 
   const [selectedGroupId, setSelectedGroupId] = useState("");
@@ -104,7 +103,7 @@ export const CatalogConfigPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to create system"
+        error instanceof Error ? error.message : "Failed to create system",
       );
     },
   });
@@ -118,7 +117,7 @@ export const CatalogConfigPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update system"
+        error instanceof Error ? error.message : "Failed to update system",
       );
     },
   });
@@ -131,7 +130,7 @@ export const CatalogConfigPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete system"
+        error instanceof Error ? error.message : "Failed to delete system",
       );
     },
   });
@@ -144,7 +143,7 @@ export const CatalogConfigPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to create group"
+        error instanceof Error ? error.message : "Failed to create group",
       );
     },
   });
@@ -157,7 +156,7 @@ export const CatalogConfigPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete group"
+        error instanceof Error ? error.message : "Failed to delete group",
       );
     },
   });
@@ -169,7 +168,7 @@ export const CatalogConfigPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update group name"
+        error instanceof Error ? error.message : "Failed to update group name",
       );
       throw error;
     },
@@ -183,7 +182,9 @@ export const CatalogConfigPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to add system to group"
+        error instanceof Error
+          ? error.message
+          : "Failed to add system to group",
       );
     },
   });
@@ -198,7 +199,7 @@ export const CatalogConfigPage = () => {
         toast.error(
           error instanceof Error
             ? error.message
-            : "Failed to remove system from group"
+            : "Failed to remove system from group",
         );
       },
     });
@@ -259,37 +260,33 @@ export const CatalogConfigPage = () => {
     updateGroupMutation.mutate({ id, data: { name: newName } });
   };
 
-  if (loading || accessLoading) return <LoadingSpinner />;
-
-  if (!canManage) {
-    return <AccessDenied />;
-  }
-
   const selectedGroup = groups.find((g) => g.id === selectedGroupId);
   const availableSystems = systems.filter(
-    (s) => !selectedGroup?.systemIds?.includes(s.id)
+    (s) => !selectedGroup?.systemIds?.includes(s.id),
   );
 
   return (
-    <div className="space-y-8">
-      <SectionHeader
-        title="Catalog Management"
-        description="Manage systems and logical groups within your infrastructure"
-        icon={<Settings className="w-6 h-6 text-primary" />}
-      />
-
+    <PageLayout
+      title="Catalog Management"
+      subtitle="Manage systems and logical groups within your infrastructure"
+      icon={Server}
+      loading={loading || accessLoading}
+      allowed={canManage}
+    >
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
         {/* Systems Management */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle className="flex items-center gap-2">
-              <Server className="w-5 h-5 text-muted-foreground" />
-              Systems
-            </CardTitle>
-            <Button size="sm" onClick={() => setIsSystemEditorOpen(true)}>
-              <Plus className="w-4 h-4 mr-2" />
-              Add System
-            </Button>
+          <CardHeader>
+            <CardHeaderRow>
+              <CardTitle className="flex items-center gap-2">
+                <Server className="w-5 h-5 text-muted-foreground" />
+                Systems
+              </CardTitle>
+              <Button size="sm" onClick={() => setIsSystemEditorOpen(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                Add System
+              </Button>
+            </CardHeaderRow>
           </CardHeader>
           <CardContent className="space-y-4">
             {systems.length === 0 ? (
@@ -347,15 +344,17 @@ export const CatalogConfigPage = () => {
 
         {/* Groups Management */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle className="flex items-center gap-2">
-              <LayoutGrid className="w-5 h-5 text-muted-foreground" />
-              Groups
-            </CardTitle>
-            <Button size="sm" onClick={() => setIsGroupEditorOpen(true)}>
-              <Plus className="w-4 h-4 mr-2" />
-              Add Group
-            </Button>
+          <CardHeader>
+            <CardHeaderRow>
+              <CardTitle className="flex items-center gap-2">
+                <LayoutGrid className="w-5 h-5 text-muted-foreground" />
+                Groups
+              </CardTitle>
+              <Button size="sm" onClick={() => setIsGroupEditorOpen(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                Add Group
+              </Button>
+            </CardHeaderRow>
           </CardHeader>
           <CardContent className="space-y-4">
             {groups.length === 0 ? (
@@ -516,6 +515,6 @@ export const CatalogConfigPage = () => {
         confirmText="Delete"
         variant="danger"
       />
-    </div>
+    </PageLayout>
   );
 };

package/src/components/CatalogPage.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { useApi, loggerApiRef } from "@checkstack/frontend-api";
+import { PageLayout } from "@checkstack/ui";
+import { Layers } from "lucide-react";
 
 export const CatalogPage = () => {
   const logger = useApi(loggerApiRef);
@@ -9,9 +11,8 @@ export const CatalogPage = () => {
   }, [logger]);
 
   return (
-    <div className="p-4 rounded-lg bg-white shadow">
-      <h2 className="text-2xl font-semibold mb-4">Catalog</h2>
+    <PageLayout title="Catalog" icon={Layers}>
       <p className="text-muted-foreground">Welcome to the Service Catalog.</p>
-    </div>
+    </PageLayout>
   );
 };

package/src/components/SystemDetailPage.tsx

@@ -17,7 +17,7 @@ import {
   CardHeader,
   CardTitle,
   CardContent,
-  LoadingSpinner,
+  PageLayout,
   SubscribeButton,
   useToast,
   BackLink,
@@ -74,7 +74,7 @@ export const SystemDetailPage: React.FC = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to subscribe"
+        error instanceof Error ? error.message : "Failed to subscribe",
       );
     },
   });
@@ -87,7 +87,7 @@ export const SystemDetailPage: React.FC = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to unsubscribe"
+        error instanceof Error ? error.message : "Failed to unsubscribe",
       );
     },
   });
@@ -103,7 +103,7 @@ export const SystemDetailPage: React.FC = () => {
   useEffect(() => {
     if (groupsData && systemId) {
       const systemGroups = groupsData.filter((group) =>
-        group.systemIds?.includes(systemId)
+        group.systemIds?.includes(systemId),
       );
       setGroups(systemGroups);
     }
@@ -129,26 +129,32 @@ export const SystemDetailPage: React.FC = () => {
     unsubscribeMutation.mutate({ groupId: getSystemGroupId() });
   };
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <LoadingSpinner />
-      </div>
-    );
-  }
+  // Actions for the page header
+  const headerActions = (
+    <div className="flex items-center gap-4 flex-wrap">
+      {session && (
+        <SubscribeButton
+          isSubscribed={isSubscribed}
+          onSubscribe={handleSubscribe}
+          onUnsubscribe={handleUnsubscribe}
+          loading={
+            subscriptionLoading ||
+            subscribeMutation.isPending ||
+            unsubscribeMutation.isPending
+          }
+        />
+      )}
+      <BackLink onClick={() => navigate("/")}>Back to Dashboard</BackLink>
+    </div>
+  );
 
-  if (notFound || !system) {
+  if (notFound) {
     return (
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Activity className="h-8 w-8 text-primary" />
-            <h1 className="text-3xl font-bold text-foreground">
-              System Not Found
-            </h1>
-          </div>
-          <BackLink onClick={() => navigate("/")}>Back to Dashboard</BackLink>
-        </div>
+      <PageLayout
+        title="System Not Found"
+        icon={Activity}
+        actions={headerActions}
+      >
         <Card className="border-destructive/30 bg-destructive/10">
           <CardContent className="p-12 text-center">
             <p className="text-destructive">
@@ -156,35 +162,23 @@ export const SystemDetailPage: React.FC = () => {
             </p>
           </CardContent>
         </Card>
-      </div>
+      </PageLayout>
     );
   }
 
-  return (
-    <div className="space-y-6 animate-in fade-in duration-500">
-      {/* System Name with Subscribe Button and Back Link */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <Activity className="h-8 w-8 text-primary" />
-          <h1 className="text-3xl font-bold text-foreground">{system.name}</h1>
-        </div>
-        <div className="flex items-center gap-4">
-          {session && (
-            <SubscribeButton
-              isSubscribed={isSubscribed}
-              onSubscribe={handleSubscribe}
-              onUnsubscribe={handleUnsubscribe}
-              loading={
-                subscriptionLoading ||
-                subscribeMutation.isPending ||
-                unsubscribeMutation.isPending
-              }
-            />
-          )}
-          <BackLink onClick={() => navigate("/")}>Back to Dashboard</BackLink>
-        </div>
-      </div>
+  // Guard for TypeScript - PageLayout already handles loading state
+  if (!system) {
+    return;
+  }
 
+  return (
+    <PageLayout
+      title={system.name}
+      icon={Activity}
+      loading={loading}
+      actions={headerActions}
+      maxWidth="full"
+    >
       {/* Top Extension Slot for urgent items like maintenance alerts */}
       <ExtensionSlot slot={SystemDetailsTopSlot} context={{ system }} />
 
@@ -310,8 +304,7 @@ export const SystemDetailPage: React.FC = () => {
           </Card>
         )}
 
-      {/* Extension Slot for System Details */}
       <ExtensionSlot slot={SystemDetailsSlot} context={{ system }} />
-    </div>
+    </PageLayout>
   );
 };