@checkstack/integration-frontend 0.2.7 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @checkstack/integration-frontend
 
+## 0.2.8
+
+### 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
+
 ## 0.2.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/integration-frontend",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/pages/DeliveryLogsPage.tsx

@@ -108,6 +108,7 @@ export const DeliveryLogsPage = () => {
     <PageLayout
       title="Delivery Logs"
       subtitle="View and manage webhook delivery attempts"
+      icon={FileText}
       loading={isLoading}
       actions={
         <BackLink to={resolveRoute(integrationRoutes.routes.list)}>

package/src/pages/IntegrationsPage.tsx

@@ -1,6 +1,12 @@
 import { useState, useEffect } from "react";
 import { Link, useSearchParams } from "react-router-dom";
-import { Plus, Webhook, ArrowRight, Activity } from "lucide-react";
+import {
+  Plus,
+  Webhook,
+  ArrowRight,
+  Activity,
+  Link as LinkIcon,
+} from "lucide-react";
 import {
   PageLayout,
   Card,
@@ -55,13 +61,15 @@ export const IntegrationsPage = () => {
   const toggleMutation = client.toggleSubscription.useMutation({
     onSuccess: (_result, variables) => {
       toast.success(
-        variables.enabled ? "Subscription enabled" : "Subscription disabled"
+        variables.enabled ? "Subscription enabled" : "Subscription disabled",
       );
       void refetchSubs();
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to toggle subscription"
+        error instanceof Error
+          ? error.message
+          : "Failed to toggle subscription",
       );
     },
   });
@@ -81,10 +89,10 @@ export const IntegrationsPage = () => {
   }, [searchParams, setSearchParams]);
 
   const getProviderInfo = (
-    providerId: string
+    providerId: string,
   ): IntegrationProviderInfo | undefined => {
     return (providers as IntegrationProviderInfo[]).find(
-      (p) => p.qualifiedId === providerId
+      (p) => p.qualifiedId === providerId,
     );
   };
 
@@ -124,6 +132,7 @@ export const IntegrationsPage = () => {
     <PageLayout
       title="Integrations"
       subtitle="Configure webhooks to send events to external systems"
+      icon={LinkIcon}
       loading={loading}
       actions={
         <Button onClick={openCreateDialog}>

package/src/pages/ProviderConnectionsPage.tsx

@@ -91,12 +91,12 @@ export const ProviderConnectionsPage = () => {
     refetch: refetchConnections,
   } = client.listConnections.useQuery(
     { providerId: providerId ?? "" },
-    { enabled: !!providerId }
+    { enabled: !!providerId },
   );
 
   const loading = providersLoading || connectionsLoading;
   const provider = (providers as IntegrationProviderInfo[]).find(
-    (p) => p.qualifiedId === providerId
+    (p) => p.qualifiedId === providerId,
   );
 
   // Mutations
@@ -111,7 +111,7 @@ export const ProviderConnectionsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to create connection"
+        error instanceof Error ? error.message : "Failed to create connection",
       );
       setSaving(false);
     },
@@ -127,7 +127,7 @@ export const ProviderConnectionsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update connection"
+        error instanceof Error ? error.message : "Failed to update connection",
       );
       setSaving(false);
     },
@@ -142,7 +142,7 @@ export const ProviderConnectionsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete connection"
+        error instanceof Error ? error.message : "Failed to delete connection",
       );
     },
   });
@@ -166,7 +166,7 @@ export const ProviderConnectionsPage = () => {
         [variables.connectionId]: { success: false, message: "Test failed" },
       }));
       toast.error(
-        error instanceof Error ? error.message : "Connection test failed"
+        error instanceof Error ? error.message : "Connection test failed",
       );
       setTestingId(undefined);
     },
@@ -226,12 +226,16 @@ export const ProviderConnectionsPage = () => {
   };
 
   if (!providerId) {
-    return <PageLayout title="Error">Missing provider ID</PageLayout>;
+    return (
+      <PageLayout title="Error" icon={Settings2}>
+        Missing provider ID
+      </PageLayout>
+    );
   }
 
   if (!loading && !provider) {
     return (
-      <PageLayout title="Provider Not Found">
+      <PageLayout title="Provider Not Found" icon={Settings2}>
         <EmptyState
           icon={<Settings2 className="h-12 w-12" />}
           title="Provider not found"
@@ -243,7 +247,7 @@ export const ProviderConnectionsPage = () => {
 
   if (!loading && !provider?.hasConnectionSchema) {
     return (
-      <PageLayout title={provider?.displayName ?? "Provider"}>
+      <PageLayout title={provider?.displayName ?? "Provider"} icon={Settings2}>
         <EmptyState
           icon={<Settings2 className="h-12 w-12" />}
           title="No connection management"
@@ -257,6 +261,7 @@ export const ProviderConnectionsPage = () => {
     <PageLayout
       title={`${provider?.displayName ?? "Provider"} Connections`}
       subtitle="Manage site-wide connections for this integration provider"
+      icon={Settings2}
       loading={loading}
       actions={
         <div className="flex items-center gap-2">