{ "page_ir": { "page_id": "notifications_page", "page_goal": "Display all user notifications in a chronological list with type-based filtering, read/unread indicators, mark-all-as-read functionality, and navigation to relevant pages on click.", "style": { "tone": "clean", "theme": "light", "density": "comfortable", "color_intent": "neutral with red accent for unread indicators" }, "accessibility": { "required_labels": [ "notification_type_filter", "mark_all_read_button", "notification_list", "load_more_button" ], "skip_navigation": true, "focus_management": true, "announce_changes": [] }, "responsive": { "breakpoints": { "sm": 576, "md": 768, "lg": 992, "xl": 1200 }, "collapse_rules": [ "filter_bar stacks vertically on sm", "notification_meta wraps on sm" ], "hidden_on_small": [], "stack_on_small": [] }, "constraints": [ "Must show notification type icon", "Must indicate read/unread state visually", "Click navigates to relevant entity page", "Pagination via load-more button" ], "seo_title": null, "seo_description": null }, "data_ir": { "types": {}, "state": { "notifications": { "type": "array", "initial": [], "required": true, "constraints": {}, "item_type": null }, "filterType": { "type": "string", "initial": "", "required": false, "constraints": { "allowed_values": [ "", "ORDER", "MESSAGE", "OFFER", "REVIEW", "SHIPMENT", "PAYMENT", "SYSTEM", "PROMOTION" ] }, "item_type": null }, "loading": { "type": "boolean", "initial": false, "required": false, "constraints": {}, "item_type": null }, "markingAllRead": { "type": "boolean", "initial": false, "required": false, "constraints": {}, "item_type": null }, "offset": { "type": "number", "initial": 0, "required": false, "constraints": {}, "item_type": null }, "hasMore": { "type": "boolean", "initial": true, "required": false, "constraints": {}, "item_type": null } }, "derived": { "filteredNotifications": { "type": "array", "expr": "state.filterType ? state.notifications.filter(n => n.notification_type === state.filterType) : state.notifications", "deps": [] }, "unreadCount": { "type": "number", "expr": "state.notifications.filter(n => !n.is_read).length", "deps": [] } } }, "data_fetch_ir": { "endpoints": { "cc31f237e76f4f569e198042b7e25059": { "endpoint_id": "cc31f237e76f4f569e198042b7e25059", "module": "Notifications", "endpoint": "/notifications/", "method": "GET", "path_params": {}, "query_params": { "user_id": "$appContext.currentUser.id", "limit": 20, "offset": "$state.offset" }, "body": null, "fields": [ "id", "user_id", "notification_type", "title", "message", "action_url", "related_entity_type", "related_entity_id", "is_read", "read_at", "created_at", "updated_at" ], "response_target": "notifications", "response_transform": null, "trigger": "on_mount", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "d16bc732dd5c4781bd9fc4a638befd44": { "endpoint_id": "d16bc732dd5c4781bd9fc4a638befd44", "module": "Notifications", "endpoint": "/notifications/{notification_id}/mark-read", "method": "POST", "path_params": { "notification_id": "$action.payload.notificationId" }, "query_params": {}, "body": null, "fields": [ "id", "is_read", "read_at" ], "response_target": "markNotificationRead_data", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "31df2aefbb5a4cbfb6a0856aaaf96f0d": { "endpoint_id": "31df2aefbb5a4cbfb6a0856aaaf96f0d", "module": "Notifications", "endpoint": "/notifications/users/{user_id}/mark-all-read", "method": "POST", "path_params": { "user_id": "$appContext.currentUser.id" }, "query_params": {}, "body": null, "fields": [], "response_target": "markAllNotificationsRead_data", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null } } }, "data_model_ir": { "entities": { "notification": { "name": "Notification", "backend_module": "Notifications", "fields": [ "id", "user_id", "notification_type", "title", "message", "action_url", "related_entity_type", "related_entity_id", "is_read", "read_at", "created_at", "updated_at" ], "computed": [], "display_fields": [ "title", "message", "notification_type", "is_read", "created_at" ], "search_fields": [], "filters": [ "notification_type", "is_read" ], "default_sort": null, "default_sort_dir": "asc" } }, "relationships": [] }, "behaviour_ir": { "events": { "onFilterChange": { "type": "mutation", "updates": [ { "target": "state.filterType", "expr": "event.value" } ], "description": "" } }, "actions": { "577b3a169f8e4fd19273e183509357cf": { "action_id": "577b3a169f8e4fd19273e183509357cf", "trigger": "button_click", "target_component_id": "main_container", "operation": "read", "description": "", "payload": {}, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.loading", "expr": "true" } ], "api_endpoint": "cc31f237e76f4f569e198042b7e25059", "api_body": null, "side_effects": [], "then": null, "catch": null, "data_action": null }, "94fb1f99cd244a68aa0ab8ee2b03c7c4": { "action_id": "94fb1f99cd244a68aa0ab8ee2b03c7c4", "trigger": "button_click", "target_component_id": "load_more_button", "operation": "read", "description": "", "payload": {}, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.offset", "expr": "state.offset + 20" }, { "target": "state.loading", "expr": "true" } ], "api_endpoint": "cc31f237e76f4f569e198042b7e25059", "api_body": null, "side_effects": [], "then": null, "catch": null, "data_action": null }, "2c1c627e234d426d8e49fa84e273dc93": { "action_id": "2c1c627e234d426d8e49fa84e273dc93", "trigger": "button_click", "target_component_id": "mark_all_read_button", "operation": "custom", "description": "", "payload": {}, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.markingAllRead", "expr": "true" }, { "target": "state.notifications", "expr": "state.notifications.map(n => ({...n, is_read: true}))" } ], "api_endpoint": "31df2aefbb5a4cbfb6a0856aaaf96f0d", "api_body": null, "side_effects": [ { "type": "toast", "config": { "message": "All notifications marked as read", "type": "success" } } ], "then": null, "catch": null, "data_action": null }, "9d0535498b9e4917bec6124aa4b471ca": { "action_id": "9d0535498b9e4917bec6124aa4b471ca", "trigger": "row_click", "target_component_id": "notification_list", "operation": "custom", "description": "", "payload": { "notificationId": "$item.id", "actionUrl": "$item.action_url", "relatedEntityType": "$item.related_entity_type", "relatedEntityId": "$item.related_entity_id" }, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.notifications", "expr": "state.notifications.map(n => n.id === $item.id ? {...n, is_read: true} : n)" } ], "api_endpoint": "d16bc732dd5c4781bd9fc4a638befd44", "api_body": null, "side_effects": [ { "type": "custom", "config": { "handler": "navigateByNotificationType", "description": "Navigate based on related_entity_type: ORDER -> /account/orders/:id, LISTING -> /listings/:id, MESSAGE -> /messages, OFFER -> /seller/offers" } } ], "then": null, "catch": null, "data_action": null }, "121fb09264804338bc37703f1544f02e": { "action_id": "121fb09264804338bc37703f1544f02e", "trigger": "input_change", "target_component_id": "type_filter_select", "operation": "custom", "description": "", "payload": {}, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.filterType", "expr": "event.value" } ], "api_endpoint": null, "api_body": null, "side_effects": [], "then": null, "catch": null, "data_action": null } }, "feedback": { "577b3a169f8e4fd19273e183509357cf": { "action_id": "577b3a169f8e4fd19273e183509357cf", "loading_indicator": "spinner", "loading_text": null, "success_message": null, "error_message": "Failed to load notifications", "ui_updates": [ "state.loading = false" ] }, "94fb1f99cd244a68aa0ab8ee2b03c7c4": { "action_id": "94fb1f99cd244a68aa0ab8ee2b03c7c4", "loading_indicator": "spinner", "loading_text": null, "success_message": null, "error_message": "Failed to load more notifications", "ui_updates": [ "state.loading = false" ] }, "2c1c627e234d426d8e49fa84e273dc93": { "action_id": "2c1c627e234d426d8e49fa84e273dc93", "loading_indicator": "spinner", "loading_text": null, "success_message": "All notifications marked as read", "error_message": "Failed to mark notifications as read", "ui_updates": [ "state.markingAllRead = false" ] }, "9d0535498b9e4917bec6124aa4b471ca": { "action_id": "9d0535498b9e4917bec6124aa4b471ca", "loading_indicator": null, "loading_text": null, "success_message": null, "error_message": null, "ui_updates": [] }, "121fb09264804338bc37703f1544f02e": { "action_id": "121fb09264804338bc37703f1544f02e", "loading_indicator": null, "loading_text": null, "success_message": null, "error_message": null, "ui_updates": [] } } }, "component_ir": { "library": "antd", "theme": { "primaryColor": "#E3350D", "secondaryColor": "#1a1a2e", "successColor": null, "warningColor": null, "errorColor": null, "fontFamily": "sans-serif", "fontSize": null, "borderRadius": 8 }, "components": { "main_container": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "minHeight": "100vh", "width": "100%", "backgroundColor": "#f5f5f5", "display": "flex", "flexDirection": "column" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "content_wrapper": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "maxWidth": 800, "width": "100%", "margin": "0 auto", "padding": "24px 16px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "page_header": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "space-between", "alignItems": "center", "marginBottom": 24 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "page_title": { "type": "Typography.Title", "label": "Notifications", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "level": 2 }, "dynamic_props": {}, "styles": { "margin": 0 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "unread_badge": { "type": "Badge", "label": null, "description": null, "bind": "derived.unreadCount", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "count": "$derived.unreadCount", "showZero": false, "style": { "backgroundColor": "#E3350D" } }, "dynamic_props": {}, "styles": { "marginLeft": 8 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "header_left": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "center", "gap": 8 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "mark_all_read_button": { "type": "Button", "label": "Mark All as Read", "description": null, "bind": null, "onClick": "markAllAsRead", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "primary", "icon": "CheckOutlined", "loading": "$state.markingAllRead", "disabled": "$derived.unreadCount === 0" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "filter_bar": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "center", "gap": 12, "marginBottom": 16 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "filter_label": { "type": "Typography.Text", "label": "Filter by type:", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "strong": true }, "dynamic_props": {}, "styles": { "whiteSpace": "nowrap" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "type_filter_select": { "type": "Select", "label": "Filter by notification type", "description": null, "bind": "state.filterType", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "placeholder": "All Notifications", "allowClear": true, "options": [ { "label": "Order Updates", "value": "ORDER" }, { "label": "Messages", "value": "MESSAGE" }, { "label": "Offers", "value": "OFFER" }, { "label": "Reviews", "value": "REVIEW" }, { "label": "Shipments", "value": "SHIPMENT" }, { "label": "Payments", "value": "PAYMENT" }, { "label": "System", "value": "SYSTEM" }, { "label": "Promotions", "value": "PROMOTION" } ] }, "dynamic_props": {}, "styles": { "minWidth": 200 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_list": { "type": "List", "label": "Notifications list", "description": null, "bind": "derived.filteredNotifications", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "dataSource": "$derived.filteredNotifications", "loading": "$state.loading", "locale": { "emptyText": "No notifications yet" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_item": { "type": "List.Item", "label": null, "description": null, "bind": null, "onClick": "clickNotification", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "className": "$item.is_read ? 'notification-read' : 'notification-unread'" }, "dynamic_props": {}, "styles": { "cursor": "pointer", "padding": "16px 20px", "borderRadius": 8, "marginBottom": 8, "transition": "background-color 0.2s" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": "clickNotification", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "hoverable": true, "bordered": true, "size": "small" }, "dynamic_props": {}, "styles": { "cursor": "pointer", "marginBottom": 8 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_order": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "ShoppingOutlined", "style": { "fontSize": 24, "color": "#1677ff" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_message": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "MessageOutlined", "style": { "fontSize": 24, "color": "#52c41a" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_offer": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "DollarOutlined", "style": { "fontSize": 24, "color": "#faad14" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_review": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "StarOutlined", "style": { "fontSize": 24, "color": "#eb2f96" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_shipment": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "CarOutlined", "style": { "fontSize": 24, "color": "#722ed1" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_payment": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "CreditCardOutlined", "style": { "fontSize": 24, "color": "#13c2c2" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_system": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "SettingOutlined", "style": { "fontSize": 24, "color": "#8c8c8c" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_promotion": { "type": "Icon", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "component": "GiftOutlined", "style": { "fontSize": 24, "color": "#E3350D" } }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_content": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "flexDirection": "column", "flex": 1, "gap": 4 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_title_text": { "type": "Typography.Text", "label": null, "description": null, "bind": "$item.title", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "strong": true, "ellipsis": true }, "dynamic_props": {}, "styles": { "fontSize": 15 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_message_text": { "type": "Typography.Text", "label": null, "description": null, "bind": "$item.message", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary", "ellipsis": { "rows": 2 } }, "dynamic_props": {}, "styles": { "fontSize": 13 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_meta_row": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "center", "gap": 8, "marginTop": 4 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_type_tag": { "type": "Tag", "label": null, "description": null, "bind": "$item.notification_type", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "color": "default" }, "dynamic_props": {}, "styles": { "fontSize": 11 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_timestamp": { "type": "Typography.Text", "label": null, "description": null, "bind": "$item.created_at", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": 12 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "unread_dot": { "type": "Badge", "label": null, "description": null, "bind": "$item.is_read", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "dot": true, "status": "error" }, "dynamic_props": {}, "styles": { "marginLeft": "auto" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_row_wrapper": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "flex-start", "gap": 16, "width": "100%" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "notification_icon_wrapper": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "center", "justifyContent": "center", "width": 48, "height": 48, "borderRadius": "50%", "backgroundColor": "#f0f0f0", "flexShrink": 0 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "load_more_wrapper": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "center", "marginTop": 24 }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "load_more_button": { "type": "Button", "label": "Load More", "description": null, "bind": null, "onClick": "loadMoreNotifications", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "default", "loading": "$state.loading", "disabled": "!$state.hasMore" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "empty_state": { "type": "Empty", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "description": "You're all caught up! No notifications to show.", "image": "Empty.PRESENTED_IMAGE_SIMPLE" }, "dynamic_props": {}, "styles": { "padding": "60px 0" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null } } }, "layout_ir": { "root": "main_container", "children": { "main_container": [ "content_wrapper" ], "content_wrapper": [ "page_header", "filter_bar", "notification_list", "load_more_wrapper" ], "page_header": [ "header_left", "mark_all_read_button" ], "header_left": [ "page_title", "unread_badge" ], "filter_bar": [ "filter_label", "type_filter_select" ], "notification_list": [ "notification_card" ], "notification_card": [ "notification_row_wrapper" ], "notification_row_wrapper": [ "notification_icon_wrapper", "notification_content", "unread_dot" ], "notification_content": [ "notification_title_text", "notification_message_text", "notification_meta_row" ], "notification_meta_row": [ "notification_type_tag", "notification_timestamp" ], "load_more_wrapper": [ "load_more_button" ] }, "layout": { "main_container": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "content_wrapper": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "page_header": { "type": "horizontal", "gap": 16, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "header_left": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "filter_bar": { "type": "horizontal", "gap": 12, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "notification_list": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "notification_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "notification_row_wrapper": { "type": "horizontal", "gap": 16, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "notification_content": { "type": "vertical", "gap": 4, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "notification_meta_row": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "load_more_wrapper": { "type": "horizontal", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null } }, "layout_zones": [ { "zone_id": "main_content_zone", "component": "content_wrapper", "anchor": "center", "size_hint": "full-width", "z_layer": "base", "notes": "Main content area centered with max-width 800px" }, { "zone_id": "notification_icon_zone", "component": "notification_icon_wrapper", "anchor": "top-left", "size_hint": "auto", "z_layer": "base", "notes": "Icon rendered dynamically based on notification_type" } ], "responsive_overrides": [] }, "navigation_ir": { "tabs": [], "modals": {}, "drawers": {}, "routes": [], "breadcrumb": null, "default_tab": null }, "realtime_ir": { "timers": {}, "polling": {} }, "metadata": { "ir_version": "3.5", "generated_at": "", "source_prompt": null, "schema_session_id": null, "warnings": [] }, "page_data_contract": null, "schema_ir": null }