Spike native shells and define local-first integrations

spikes/floem-shell/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "lumbridge-spike-floem"
+description = "Floem implementation of the Lumbridge native shell spike"
+version = "0.0.1"
+edition = "2024"
+rust-version = "1.94"
+license = "Apache-2.0"
+publish = false
+
+[dependencies]
+floem = { git = "https://github.com/lapce/floem", rev = "778bb5f2aa08429e579ee2e6ac97e84fbf18b618", default-features = false, features = ["vger"] }
+lumbridge-spike-model = { path = "../ui-shell-model" }
+
+[workspace]

spikes/floem-shell/src/main.rs

@@ -0,0 +1,163 @@
+use floem::{Application, kurbo::Size, peniko::Color, prelude::*, window::WindowConfig};
+use lumbridge_spike_model::{
+    FOOTER_CENTER, FOOTER_LEFT, FOOTER_RIGHT, PANES, PaneFixture, WORKSPACES,
+};
+
+const BG: Color = Color::from_rgb8(12, 14, 19);
+const PANEL: Color = Color::from_rgb8(18, 23, 34);
+const PANEL_ALT: Color = Color::from_rgb8(23, 29, 41);
+const BORDER: Color = Color::from_rgb8(41, 50, 68);
+const TEXT: Color = Color::from_rgb8(217, 226, 242);
+const MUTED: Color = Color::from_rgb8(127, 139, 163);
+const ACCENT: Color = Color::from_rgb8(119, 189, 251);
+
+fn pane_card(pane: PaneFixture) -> impl IntoView {
+    let header = Stack::horizontal((
+        Label::new(pane.title).style(|s| s.flex_grow(1.0).color(TEXT)),
+        Label::new(pane.badge).style(|s| s.font_size(11.0).color(ACCENT)),
+    ))
+    .style(|s| {
+        s.items_center()
+            .height(34.0)
+            .padding_horiz(10.0)
+            .background(PANEL_ALT)
+            .border_bottom(1.0)
+            .border_color(BORDER)
+    });
+
+    let lines =
+        Stack::vertical(pane.lines.map(|line| {
+            Label::new(line).style(|s| s.font_size(12.0).color(TEXT).margin_bottom(5.0))
+        }));
+
+    Stack::vertical((
+        header,
+        Label::new(pane.target).style(|s| s.font_size(11.0).color(MUTED).padding(10.0)),
+        lines.style(|s| s.padding_horiz(10.0).padding_bottom(10.0)),
+    ))
+    .style(|s| {
+        s.flex_basis(0)
+            .flex_grow(1.0)
+            .min_width(0.0)
+            .min_height(0.0)
+            .margin(4.0)
+            .background(PANEL)
+            .border(1.0)
+            .border_color(BORDER)
+            .border_radius(6.0)
+    })
+}
+
+fn app_view() -> impl IntoView {
+    let sidebar_items = Stack::vertical(WORKSPACES.map(|name| {
+        Label::new(name).style(move |s| {
+            s.width_full()
+                .padding_vert(8.0)
+                .padding_horiz(12.0)
+                .margin_bottom(3.0)
+                .color(if name == "Lumbridge Code" {
+                    TEXT
+                } else {
+                    MUTED
+                })
+                .apply_if(name == "Lumbridge Code", |s| {
+                    s.background(PANEL_ALT).border_radius(6.0)
+                })
+        })
+    }));
+
+    let sidebar = Stack::vertical((
+        Label::new("WORKSPACES").style(|s| s.font_size(11.0).color(MUTED).padding(12.0)),
+        sidebar_items.style(|s| s.padding_horiz(8.0)),
+        Label::new("HOSTS").style(|s| {
+            s.font_size(11.0)
+                .color(MUTED)
+                .padding(12.0)
+                .margin_top(12.0)
+        }),
+        Label::new("● metal · connected").style(|s| s.color(ACCENT).padding_horiz(14.0)),
+        Label::new("● amd-server · connected")
+            .style(|s| s.color(MUTED).padding_horiz(14.0).margin_top(8.0)),
+        Label::new("○ spark-1 · sleeping")
+            .style(|s| s.color(MUTED).padding_horiz(14.0).margin_top(8.0)),
+    ))
+    .style(|s| {
+        s.width(220.0)
+            .height_full()
+            .flex_shrink(0.0)
+            .background(PANEL)
+            .border_right(1.0)
+            .border_color(BORDER)
+    });
+
+    let top_row = Stack::horizontal((
+        pane_card(PANES[0]),
+        pane_card(PANES[1]),
+        pane_card(PANES[2]),
+    ))
+    .style(|s| s.flex_basis(0).flex_grow(1.0).min_height(0.0).width_full());
+    let bottom_row = Stack::horizontal((
+        pane_card(PANES[3]),
+        pane_card(PANES[4]),
+        pane_card(PANES[5]),
+    ))
+    .style(|s| s.flex_basis(0).flex_grow(1.0).min_height(0.0).width_full());
+    let panes = Stack::vertical((top_row, bottom_row)).style(|s| {
+        s.flex_basis(0)
+            .flex_grow(1.0)
+            .min_width(0.0)
+            .height_full()
+            .padding(4.0)
+    });
+
+    let header = Stack::horizontal((
+        Label::new("Lumbridge").style(|s| s.font_size(18.0).color(TEXT).flex_grow(1.0)),
+        Label::new("UI spike · Floem").style(|s| s.color(MUTED).flex_grow(1.0)),
+        Label::new("⌘K  Command Palette").style(|s| s.color(ACCENT)),
+    ))
+    .style(|s| {
+        s.height(46.0)
+            .padding_horiz(14.0)
+            .items_center()
+            .background(PANEL_ALT)
+            .border_bottom(1.0)
+            .border_color(BORDER)
+    });
+
+    let body = Stack::horizontal((sidebar, panes))
+        .style(|s| s.flex_basis(0).flex_grow(1.0).min_height(0.0));
+
+    let footer = Stack::horizontal((
+        Label::new(FOOTER_LEFT).style(|s| s.flex_grow(1.0)),
+        Label::new(FOOTER_CENTER).style(|s| s.flex_grow(1.0)),
+        Label::new(FOOTER_RIGHT),
+    ))
+    .style(|s| {
+        s.height(30.0)
+            .padding_horiz(10.0)
+            .items_center()
+            .font_size(11.0)
+            .color(MUTED)
+            .background(PANEL_ALT)
+            .border_top(1.0)
+            .border_color(BORDER)
+    });
+
+    Stack::vertical((header, body, footer))
+        .style(|s| s.width_full().height_full().background(BG))
+        .window_title(|| "Lumbridge · Floem spike".to_owned())
+}
+
+fn main() {
+    Application::new()
+        .window(
+            |_| app_view(),
+            Some(
+                WindowConfig::default()
+                    .size(Size::new(1280.0, 800.0))
+                    .min_size(Size::new(900.0, 600.0))
+                    .title("Lumbridge · Floem spike"),
+            ),
+        )
+        .run();
+}