feat: impl design header

ui/browser_item.slint

@@ -1,44 +1,98 @@
 import {
-    Button,
     HorizontalBox,
+    VerticalBox,
 } from "std-widgets.slint";
-
 import { BrowserConfig } from "./types.slint";
 
 export component BrowserItem {
-    height: 80px;
     in property <BrowserConfig> browser;
+    in property <bool> selected;
+
+    height: 88px;
+    width: 100%;
 
     Rectangle {
-        height: 100%;
         width: 100%;
-        background: rgba(30, 41,  59, 0.3);
+        height: 100%;
+        border-radius: 16px;
+        background: selected ? #1e293b : #0f172a;
+
         HorizontalBox {
-            height: 80px;
-            padding: 8px;
-            alignment: space-between;
-            Image {
-                height: 48px;
+            padding: 16px;
+            spacing: 16px;
+
+            Rectangle {
                 width: 48px;
-                source: @image-url("../logos/firefox_48x48.png");
+                height: 48px;
+                border-radius: 12px;
+                background: #1e293b;
+
+                Text {
+                    width: 100%;
+                    height: 100%;
+                    horizontal-alignment: center;
+                    vertical-alignment: center;
+                    text: browser.icon;
+                    font-size: 24px;
+                }
             }
 
-            Text {
-                text: browser.path;
-                vertical_alignment: center;
-            }
-
-            Text {
-                text: browser.flags;
-                vertical_alignment: center;
-            }
-
-            VerticalLayout {
+            VerticalBox {
                 alignment: center;
-                Button {
-                    text: "use";
+                spacing: 4px;
+
+                Text {
+                    text: browser.name;
+                    color: #f8fafc;
+                    font-size: 16px;
+                    font-weight: 500;
+                }
+
+                if (browser.is-default): Rectangle {
+                    height: 22px;
+                    border-radius: 4px;
+                    background: #3b82f6;
+
+                    Text {
+                        text: "По умолчанию";
+                        color: #60a5fa;
+                        font-size: 12px;
+                    }
+                }
+            }
+
+            VerticalBox {
+                alignment: center;
+                width: 24px;
+                height: 24px;
+
+                if (selected): Rectangle {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 12px;
+                    background: #3b82f6;
+
+                    Text {
+                        width: 100%;
+                        height: 100%;
+                        horizontal-alignment: center;
+                        vertical-alignment: center;
+                        text: "✓";
+                        color: #ffffff;
+                        font-size: 14px;
+                    }
+                }
+
+                if (!selected): Text {
+                    width: 100%;
+                    height: 100%;
+                    horizontal-alignment: center;
+                    vertical-alignment: center;
+                    text: ">";
+                    color: #64748b;
+                    font-size: 18px;
                 }
             }
         }
     }
-}
+}