From 6e359d5b9b8a0e19acc1fd4ca938bba1ef0fa12e Mon Sep 17 00:00:00 2001 From: Laputa App Date: Fri, 27 Feb 2026 18:03:41 +0100 Subject: [PATCH] design: search results subtitle with metadata frames Two frames showing the redesigned search result subtitle: - Main view with metadata (date, word count, links) replacing snippet - States catalog: all metadata, same dates, no links, empty, no date Co-Authored-By: Claude Opus 4.6 --- design/search-results-subtitle.pen | 665 +++++++++++++++++++++++++++++ 1 file changed, 665 insertions(+) create mode 100644 design/search-results-subtitle.pen diff --git a/design/search-results-subtitle.pen b/design/search-results-subtitle.pen new file mode 100644 index 00000000..8c33764f --- /dev/null +++ b/design/search-results-subtitle.pen @@ -0,0 +1,665 @@ +{ + "children": [ + { + "type": "frame", + "id": "srs_main", + "name": "Search Results — subtitle with metadata", + "x": 0, + "y": 0, + "width": 540, + "fill": "$--card", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "shadow": [ + { + "x": 0, + "y": 8, + "blur": 32, + "spread": -4, + "fill": "#00000020" + } + ], + "layout": "vertical", + "clip": true, + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "frame", + "id": "srs_inputRow", + "name": "searchInputRow", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 8, + "padding": [14, 16], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "srs_searchIcon", + "width": 18, + "height": 18, + "iconFontName": "magnifying-glass", + "iconFontFamily": "phosphor", + "fill": "$--primary" + }, + { + "type": "text", + "id": "srs_query", + "fill": "$--foreground", + "content": "time management", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "srs_resultsHeader", + "name": "resultsHeader", + "width": "fill_container", + "padding": [8, 16], + "alignItems": "center", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "srs_count", + "fill": "$--muted-foreground", + "content": "3 results \u00b7 45ms", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "srs_result1", + "name": "searchResult1 (selected)", + "width": "fill_container", + "fill": "$--accent-blue-light", + "layout": "vertical", + "gap": 4, + "padding": [10, 16], + "children": [ + { + "type": "frame", + "id": "srs_r1_titleRow", + "name": "titleRow", + "width": "fill_container", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srs_r1_title", + "fill": "$--foreground", + "content": "Time Management Strategies", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "srs_r1_badge", + "name": "typeBadge", + "fill": "$--accent-green-light", + "cornerRadius": 4, + "padding": [2, 6], + "children": [ + { + "type": "text", + "id": "srs_r1_badgeTxt", + "fill": "$--accent-green", + "content": "Evergreen", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srs_r1_meta", + "name": "metadataRow", + "width": "fill_container", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srs_r1_date", + "fill": "$--muted-foreground", + "content": "2d ago", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r1_sep1", + "fill": "$--muted-foreground", + "content": "\u00b7", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r1_words", + "fill": "$--muted-foreground", + "content": "1,247 words", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r1_sep2", + "fill": "$--muted-foreground", + "content": "\u00b7", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r1_links", + "fill": "$--muted-foreground", + "content": "5 links", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "srs_result2", + "name": "searchResult2", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [10, 16], + "children": [ + { + "type": "frame", + "id": "srs_r2_titleRow", + "name": "titleRow", + "width": "fill_container", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srs_r2_title", + "fill": "$--foreground", + "content": "Weekly Review Process", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "srs_r2_badge", + "name": "typeBadge", + "fill": "$--accent-purple-light", + "cornerRadius": 4, + "padding": [2, 6], + "children": [ + { + "type": "text", + "id": "srs_r2_badgeTxt", + "fill": "$--accent-purple", + "content": "Procedure", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srs_r2_meta", + "name": "metadataRow", + "width": "fill_container", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srs_r2_date", + "fill": "$--muted-foreground", + "content": "5h ago", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r2_sep1", + "fill": "$--muted-foreground", + "content": "\u00b7", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r2_created", + "fill": "$--muted-foreground", + "content": "Created Jan 15", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r2_sep2", + "fill": "$--muted-foreground", + "content": "\u00b7", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r2_words", + "fill": "$--muted-foreground", + "content": "856 words", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r2_sep3", + "fill": "$--muted-foreground", + "content": "\u00b7", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r2_links", + "fill": "$--muted-foreground", + "content": "12 links", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "srs_result3", + "name": "searchResult3", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [10, 16, 14, 16], + "children": [ + { + "type": "frame", + "id": "srs_r3_titleRow", + "name": "titleRow", + "width": "fill_container", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srs_r3_title", + "fill": "$--foreground", + "content": "Q1 Planning", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "srs_r3_meta", + "name": "metadataRow", + "width": "fill_container", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srs_r3_date", + "fill": "$--muted-foreground", + "content": "Jan 3", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r3_sep1", + "fill": "$--muted-foreground", + "content": "\u00b7", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_r3_words", + "fill": "$--muted-foreground", + "content": "2,103 words", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "srs_footer", + "name": "searchFooter", + "width": "fill_container", + "fill": "$--muted", + "stroke": { + "align": "inside", + "thickness": { + "top": 1 + }, + "fill": "$--border" + }, + "gap": 16, + "padding": [8, 16], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srs_hint1", + "fill": "$--muted-foreground", + "content": "\u2191\u2193 Navigate", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_hint2", + "fill": "$--muted-foreground", + "content": "\u21b5 Open", + "fontFamily": "Inter", + "fontSize": 11 + }, + { + "type": "text", + "id": "srs_hint3", + "fill": "$--muted-foreground", + "content": "Esc Close", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + } + ] + }, + { + "type": "frame", + "id": "srs_states", + "name": "Search Results — subtitle states", + "x": 600, + "y": 0, + "width": 540, + "layout": "vertical", + "gap": 24, + "padding": [24, 24], + "fill": "$--background", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "srs_states_title", + "fill": "$--foreground", + "content": "Metadata Subtitle — States", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "srs_state1", + "name": "State: all metadata present", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [10, 16], + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "srs_s1_label", + "fill": "$--accent-blue", + "content": "All metadata present (modified \u2260 created)", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + }, + { + "type": "text", + "id": "srs_s1_title", + "fill": "$--foreground", + "content": "Time Management Strategies", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "srs_s1_meta", + "fill": "$--muted-foreground", + "content": "2d ago \u00b7 Created Jan 15 \u00b7 1,247 words \u00b7 5 links", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "srs_state2", + "name": "State: no created date (same as modified)", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [10, 16], + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "srs_s2_label", + "fill": "$--accent-blue", + "content": "Modified = Created (skip 'Created' field)", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + }, + { + "type": "text", + "id": "srs_s2_title", + "fill": "$--foreground", + "content": "Quick Note", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "srs_s2_meta", + "fill": "$--muted-foreground", + "content": "just now \u00b7 342 words \u00b7 2 links", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "srs_state3", + "name": "State: no links (zero outgoingLinks)", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [10, 16], + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "srs_s3_label", + "fill": "$--accent-blue", + "content": "No links (omitted from metadata)", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + }, + { + "type": "text", + "id": "srs_s3_title", + "fill": "$--foreground", + "content": "Random Thought", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "srs_s3_meta", + "fill": "$--muted-foreground", + "content": "3h ago \u00b7 128 words", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "srs_state4", + "name": "State: empty note (zero words)", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [10, 16], + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "srs_s4_label", + "fill": "$--accent-blue", + "content": "Empty note (word count shows 'Empty')", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + }, + { + "type": "text", + "id": "srs_s4_title", + "fill": "$--foreground", + "content": "Untitled Draft", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "srs_s4_meta", + "fill": "$--muted-foreground", + "content": "5d ago \u00b7 Empty", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "srs_state5", + "name": "State: no date at all", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [10, 16], + "children": [ + { + "type": "text", + "id": "srs_s5_label", + "fill": "$--accent-blue", + "content": "No date available (graceful degradation)", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + }, + { + "type": "text", + "id": "srs_s5_title", + "fill": "$--foreground", + "content": "Legacy Import", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "srs_s5_meta", + "fill": "$--muted-foreground", + "content": "89 words \u00b7 1 link", + "fontFamily": "Inter", + "fontSize": 11 + } + ] + } + ] + } + ], + "variables": {} +} \ No newline at end of file