149 lines
9.3 KiB
XML
149 lines
9.3 KiB
XML
|
<svg viewBox="0 0 1400 900" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<!-- Background -->
|
||
|
|
<rect width="1400" height="900" fill="#1a1a1a"/>
|
||
|
|
|
||
|
|
<!-- Screenshot representation -->
|
||
|
|
<rect x="50" y="50" width="600" height="400" fill="#2d2d2d" stroke="#444" stroke-width="2"/>
|
||
|
|
|
||
|
|
<!-- App Bar -->
|
||
|
|
<rect x="50" y="50" width="600" height="40" fill="#1e1e1e" stroke="#0175C2" stroke-width="2"/>
|
||
|
|
<text x="60" y="75" fill="#fff" font-size="14" font-family="Arial">Browser Tab Manager</text>
|
||
|
|
<text x="530" y="75" fill="#fff" font-size="12">▶ Track Tabs ⟳ ☰</text>
|
||
|
|
|
||
|
|
<!-- Search Bar -->
|
||
|
|
<rect x="60" y="100" width="580" height="35" fill="#333" stroke="#555" stroke-width="1" rx="5"/>
|
||
|
|
<text x="70" y="122" fill="#888" font-size="12">🔍 Search tabs, bookmarks, and history...</text>
|
||
|
|
|
||
|
|
<!-- Filter Chips -->
|
||
|
|
<rect x="60" y="145" width="80" height="25" fill="#0175C2" rx="12"/>
|
||
|
|
<text x="75" y="162" fill="#fff" font-size="11">All (0)</text>
|
||
|
|
|
||
|
|
<rect x="150" y="145" width="80" height="25" fill="#444" rx="12"/>
|
||
|
|
<text x="160" y="162" fill="#aaa" font-size="11">Tabs (0)</text>
|
||
|
|
|
||
|
|
<rect x="240" y="145" width="110" height="25" fill="#444" rx="12"/>
|
||
|
|
<text x="245" y="162" fill="#aaa" font-size="11">Bookmarks (0)</text>
|
||
|
|
|
||
|
|
<rect x="360" y="145" width="95" height="25" fill="#444" rx="12"/>
|
||
|
|
<text x="370" y="162" fill="#aaa" font-size="11">History (0)</text>
|
||
|
|
|
||
|
|
<!-- Empty State -->
|
||
|
|
<g transform="translate(250, 270)">
|
||
|
|
<circle cx="100" cy="0" r="40" fill="none" stroke="#0175C280" stroke-width="3"/>
|
||
|
|
<line x1="120" y1="15" x2="140" y2="35" stroke="#0175C280" stroke-width="3" stroke-linecap="round"/>
|
||
|
|
<line x1="115" y1="5" x2="125" y2="15" stroke="#0175C280" stroke-width="2"/>
|
||
|
|
<text x="35" y="60" fill="#fff" font-size="16" font-weight="bold">No items found</text>
|
||
|
|
<text x="15" y="80" fill="#aaa" font-size="12">Try a different search or filter</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Code snippets with arrows -->
|
||
|
|
|
||
|
|
<!-- AppBar code -->
|
||
|
|
<rect x="700" y="50" width="650" height="80" fill="#1e1e1e" stroke="#0175C2" stroke-width="1" rx="5"/>
|
||
|
|
<text x="710" y="70" fill="#569cd6" font-size="11" font-family="monospace">appBar: AppBar(</text>
|
||
|
|
<text x="720" y="85" fill="#fff" font-size="11" font-family="monospace">title: Row(children: [</text>
|
||
|
|
<text x="730" y="100" fill="#ce9178" font-size="11" font-family="monospace">const Text('Browser Tab Manager'),</text>
|
||
|
|
<text x="720" y="115" fill="#fff" font-size="11" font-family="monospace">]),</text>
|
||
|
|
|
||
|
|
<!-- Arrow from AppBar code to UI -->
|
||
|
|
<path d="M 700 90 L 650 70" stroke="#0175C2" stroke-width="2" fill="none" marker-end="url(#arrowblue)"/>
|
||
|
|
|
||
|
|
<!-- Search field code -->
|
||
|
|
<rect x="700" y="150" width="650" height="95" fill="#1e1e1e" stroke="#4CAF50" stroke-width="1" rx="5"/>
|
||
|
|
<text x="710" y="170" fill="#569cd6" font-size="11" font-family="monospace">TextField(</text>
|
||
|
|
<text x="720" y="185" fill="#fff" font-size="11" font-family="monospace">controller: searchController,</text>
|
||
|
|
<text x="720" y="200" fill="#fff" font-size="11" font-family="monospace">decoration: InputDecoration(</text>
|
||
|
|
<text x="730" y="215" fill="#ce9178" font-size="11" font-family="monospace">hintText: 'Search tabs, bookmarks...</text>
|
||
|
|
<text x="720" y="230" fill="#fff" font-size="11" font-family="monospace">),</text>
|
||
|
|
|
||
|
|
<!-- Arrow from Search code to UI -->
|
||
|
|
<path d="M 700 195 L 640 115" stroke="#4CAF50" stroke-width="2" fill="none" marker-end="url(#arrowgreen)"/>
|
||
|
|
|
||
|
|
<!-- Filter chips code -->
|
||
|
|
<rect x="700" y="265" width="650" height="110" fill="#1e1e1e" stroke="#FF9800" stroke-width="1" rx="5"/>
|
||
|
|
<text x="710" y="285" fill="#569cd6" font-size="11" font-family="monospace">FilterChip(</text>
|
||
|
|
<text x="720" y="300" fill="#ce9178" font-size="11" font-family="monospace">label: Text('All (${allItems.length})'),</text>
|
||
|
|
<text x="720" y="315" fill="#fff" font-size="11" font-family="monospace">selected: filterType == 'all',</text>
|
||
|
|
<text x="720" y="330" fill="#fff" font-size="11" font-family="monospace">onSelected: (selected) {</text>
|
||
|
|
<text x="730" y="345" fill="#dcdcaa" font-size="11" font-family="monospace">setState(() { filterType = 'all'; });</text>
|
||
|
|
<text x="720" y="360" fill="#fff" font-size="11" font-family="monospace">},</text>
|
||
|
|
|
||
|
|
<!-- Arrow from Filter code to UI -->
|
||
|
|
<path d="M 700 310 L 460 155" stroke="#FF9800" stroke-width="2" fill="none" marker-end="url(#arroworange)"/>
|
||
|
|
|
||
|
|
<!-- Empty state code -->
|
||
|
|
<rect x="700" y="395" width="650" height="125" fill="#1e1e1e" stroke="#9C27B0" stroke-width="1" rx="5"/>
|
||
|
|
<text x="710" y="415" fill="#569cd6" font-size="11" font-family="monospace">filteredItems.isEmpty</text>
|
||
|
|
<text x="720" y="430" fill="#fff" font-size="11" font-family="monospace">? Center(child: Column(</text>
|
||
|
|
<text x="730" y="445" fill="#fff" font-size="11" font-family="monospace">children: [</text>
|
||
|
|
<text x="740" y="460" fill="#fff" font-size="11" font-family="monospace">Icon(Icons.search_off, size: 80),</text>
|
||
|
|
<text x="740" y="475" fill="#ce9178" font-size="11" font-family="monospace">Text('No items found'),</text>
|
||
|
|
<text x="740" y="490" fill="#ce9178" font-size="11" font-family="monospace">Text('Try a different search...'),</text>
|
||
|
|
<text x="730" y="505" fill="#fff" font-size="11" font-family="monospace">],</text>
|
||
|
|
|
||
|
|
<!-- Arrow from Empty state code to UI -->
|
||
|
|
<path d="M 700 450 L 460 330" stroke="#9C27B0" stroke-width="2" fill="none" marker-end="url(#arrowpurple)"/>
|
||
|
|
|
||
|
|
<!-- State variables -->
|
||
|
|
<rect x="700" y="540" width="650" height="150" fill="#1e1e1e" stroke="#F44336" stroke-width="1" rx="5"/>
|
||
|
|
<text x="710" y="560" fill="#6A9955" font-size="11" font-family="monospace">// 🔴 STATE variables in _TabManagerHomeState:</text>
|
||
|
|
<text x="710" y="580" fill="#fff" font-size="11" font-family="monospace">List<TabData> allItems = [];</text>
|
||
|
|
<text x="710" y="595" fill="#fff" font-size="11" font-family="monospace">List<TabData> filteredItems = [];</text>
|
||
|
|
<text x="710" y="610" fill="#fff" font-size="11" font-family="monospace">TextEditingController searchController;</text>
|
||
|
|
<text x="710" y="625" fill="#fff" font-size="11" font-family="monospace">bool isGridView = true;</text>
|
||
|
|
<text x="710" y="640" fill="#fff" font-size="11" font-family="monospace">String sortBy = 'recent';</text>
|
||
|
|
<text x="710" y="655" fill="#fff" font-size="11" font-family="monospace">String filterType = 'all';</text>
|
||
|
|
<text x="710" y="670" fill="#fff" font-size="11" font-family="monospace">bool isLoading = true;</text>
|
||
|
|
|
||
|
|
<!-- Legend -->
|
||
|
|
<text x="50" y="480" fill="#fff" font-size="14" font-weight="bold">UI Elements:</text>
|
||
|
|
<line x1="50" y1="495" x2="100" y2="495" stroke="#0175C2" stroke-width="3"/>
|
||
|
|
<text x="110" y="500" fill="#fff" font-size="12">AppBar</text>
|
||
|
|
|
||
|
|
<line x1="50" y1="515" x2="100" y2="515" stroke="#4CAF50" stroke-width="3"/>
|
||
|
|
<text x="110" y="520" fill="#fff" font-size="12">Search Field</text>
|
||
|
|
|
||
|
|
<line x1="50" y1="535" x2="100" y2="535" stroke="#FF9800" stroke-width="3"/>
|
||
|
|
<text x="110" y="540" fill="#fff" font-size="12">Filter Chips</text>
|
||
|
|
|
||
|
|
<line x1="50" y1="555" x2="100" y2="555" stroke="#9C27B0" stroke-width="3"/>
|
||
|
|
<text x="110" y="560" fill="#fff" font-size="12">Empty State</text>
|
||
|
|
|
||
|
|
<line x1="50" y1="575" x2="100" y2="575" stroke="#F44336" stroke-width="3"/>
|
||
|
|
<text x="110" y="580" fill="#fff" font-size="12">State Variables</text>
|
||
|
|
|
||
|
|
<!-- Key concepts -->
|
||
|
|
<rect x="50" y="610" width="600" height="250" fill="#2d2d2d" stroke="#555" stroke-width="1" rx="5"/>
|
||
|
|
<text x="60" y="635" fill="#fff" font-size="14" font-weight="bold">Key Concepts:</text>
|
||
|
|
|
||
|
|
<text x="60" y="660" fill="#4CAF50" font-size="12" font-weight="bold">setState(() { ... })</text>
|
||
|
|
<text x="70" y="677" fill="#ddd" font-size="11">• Updates STATE variables</text>
|
||
|
|
<text x="70" y="692" fill="#ddd" font-size="11">• Triggers UI rebuild automatically</text>
|
||
|
|
|
||
|
|
<text x="60" y="717" fill="#FF9800" font-size="12" font-weight="bold">StatefulWidget</text>
|
||
|
|
<text x="70" y="734" fill="#ddd" font-size="11">• _TabManagerHomeState holds all STATE</text>
|
||
|
|
<text x="70" y="749" fill="#ddd" font-size="11">• When STATE changes, UI updates</text>
|
||
|
|
|
||
|
|
<text x="60" y="774" fill="#9C27B0" font-size="12" font-weight="bold">StatelessWidget</text>
|
||
|
|
<text x="70" y="791" fill="#ddd" font-size="11">• ItemCard and ItemListTile receive data</text>
|
||
|
|
<text x="70" y="806" fill="#ddd" font-size="11">• Display data but don't manage STATE</text>
|
||
|
|
|
||
|
|
<text x="60" y="831" fill="#0175C2" font-size="12" font-weight="bold">Data Flow</text>
|
||
|
|
<text x="70" y="848" fill="#ddd" font-size="11">• User action → function called → setState → STATE changes → UI rebuilds</text>
|
||
|
|
|
||
|
|
<!-- Arrow markers -->
|
||
|
|
<defs>
|
||
|
|
<marker id="arrowblue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#0175C2"/>
|
||
|
|
</marker>
|
||
|
|
<marker id="arrowgreen" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#4CAF50"/>
|
||
|
|
</marker>
|
||
|
|
<marker id="arroworange" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#FF9800"/>
|
||
|
|
</marker>
|
||
|
|
<marker id="arrowpurple" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#9C27B0"/>
|
||
|
|
</marker>
|
||
|
|
</defs>
|
||
|
|
</svg>
|