feat: implement client backend

This includes temporary AI-generated frontend scaffolding, none of this will be used in production. It was just used during development for the backend.
2026-10-09 19:46:02 +01:00
parent 88a64768a2
commit 5eb47e45ef
49 changed files with 3576 additions and 17 deletions
@@ -0,0 +1,141 @@
+/// TEMPORARY AI GENERATED FRONTEND \\\
+///   NOT TO BE USED IN PRODUCTION  \\\
+
+import { Theme } from "../theme.slint";
+import { Icons } from "../icons.slint";
+import { Icon } from "icon.slint";
+import { ToolButton } from "tool-button.slint";
+
+// ToolButton has a fixed height, so wrap it to centre it in the 48px header.
+component HeaderTool inherits Rectangle {
+    in property <image> glyph;
+    in property <bool> active;
+    callback clicked();
+    width: 32px;
+    ToolButton {
+        glyph: root.glyph;
+        active: root.active;
+        y: (parent.height - self.height) / 2;
+        clicked => {
+            root.clicked();
+        }
+    }
+}
+
+export component ChatHeader inherits Rectangle {
+    in property <string> room-name;
+    in property <string> topic;
+    in property <bool> is-dm;
+    in property <bool> encrypted;
+    in-out property <bool> show-members;
+    callback open-threads();
+    callback open-pins();
+    callback open-search();
+
+    height: Theme.header-height;
+    background: Theme.chat-bg;
+
+    Rectangle {
+        y: parent.height - 1px;
+        height: 1px;
+        background: Theme.rail-bg;
+    }
+
+    // Left: "# name | topic"
+    HorizontalLayout {
+        padding-left: 16px;
+        padding-right: 8px;
+        spacing: 8px;
+
+        Rectangle {
+            width: 22px;
+            if !root.is-dm: Icon {
+                source: Icons.hash;
+                tint: Theme.text-muted;
+                icon-size: 22px;
+                y: (parent.height - self.height) / 2;
+            }
+            if root.is-dm: Text {
+                text: "@";
+                color: Theme.text-muted;
+                font-size: 20px;
+                font-weight: 700;
+                horizontal-alignment: center;
+                vertical-alignment: center;
+            }
+        }
+
+        Text {
+            text: root.room-name;
+            color: Theme.text-header;
+            font-size: 16px;
+            font-weight: 700;
+            vertical-alignment: center;
+            overflow: elide;
+            width: min(self.preferred-width, 280px);
+        }
+
+        if root.encrypted: Rectangle {
+            width: 16px;
+            Icon {
+                source: Icons.lock;
+                tint: Theme.text-muted;
+                icon-size: 14px;
+                y: (parent.height - self.height) / 2;
+            }
+        }
+
+        if root.topic != "": Rectangle {
+            width: 1px;
+            Rectangle {
+                width: 1px;
+                height: 24px;
+                y: (parent.height - self.height) / 2;
+                background: Theme.divider;
+            }
+        }
+
+        if root.topic != "": Text {
+            text: root.topic;
+            color: Theme.text-muted;
+            font-size: 14px;
+            vertical-alignment: center;
+            overflow: elide;
+        }
+
+        Rectangle {
+            width: 0px;
+            horizontal-stretch: 1;
+        }
+
+        // Right: toolbar. These open panels that aren't built yet (see docs/DISCORD-PARITY.md).
+        HeaderTool {
+            glyph: Icons.thread;
+            clicked => {
+                root.open-threads();
+            }
+        }
+
+        HeaderTool {
+            glyph: Icons.pin;
+            clicked => {
+                root.open-pins();
+            }
+        }
+
+        HeaderTool {
+            glyph: Icons.users;
+            active: root.show-members;
+            clicked => {
+                root.show-members = !root.show-members;
+            }
+        }
+
+        HeaderTool {
+            glyph: Icons.search;
+            clicked => {
+                root.open-search();
+            }
+        }
+    }
+}