hideo-shell: Made notifications dismisable.

sleepy-monax · sleepy-monax · commit 99a5ac2ccf70 · 2023-10-07T19:02:59.000+02:00
diff --git a/src/apps/hideo-shell/app.h b/src/apps/hideo-shell/app.h
@@ -21,9 +21,9 @@ inline auto panel(Math::Vec2i size = {500, 400}) {
 
 Ui::Child lock(State const &state);
 
-Ui::Child appsPanel();
+Ui::Child appsPanel(State const &state);
 
-Ui::Child appsFlyout();
+Ui::Child appsFlyout(State const &state);
 
 Ui::Child sysPanel(State const &state);
 
diff --git a/src/apps/hideo-shell/main.cpp b/src/apps/hideo-shell/main.cpp
@@ -86,7 +86,7 @@ Ui::Child taskbar(State const &) {
 
 Ui::Child tabletPanels(State const &state) {
     return Ui::stack(
-        state.activePanel == Panel::APPS ? appsFlyout() : Ui::empty(),
+        state.activePanel == Panel::APPS ? appsFlyout(state) : Ui::empty(),
         state.activePanel == Panel::SYS ? sysFlyout(state) : Ui::empty());
 }
 
@@ -102,7 +102,7 @@ Ui::Child tablet(State const &state) {
 
 Ui::Child desktopPanels(State const &state) {
     return Ui::stack(
-               state.activePanel == Panel::APPS ? appsPanel() | Ui::align(Layout::Align::START | Layout::Align::TOP) | Ui::slideIn(Ui::SlideFrom::TOP) : Ui::empty(),
+               state.activePanel == Panel::APPS ? appsPanel(state) | Ui::align(Layout::Align::START | Layout::Align::TOP) | Ui::slideIn(Ui::SlideFrom::TOP) : Ui::empty(),
                state.activePanel == Panel::NOTIS ? notiPanel(state) | Ui::align(Layout::Align::HCENTER | Layout::Align::TOP) | Ui::slideIn(Ui::SlideFrom::TOP) : Ui::empty(),
                state.activePanel == Panel::SYS ? sysPanel(state) | Ui::align(Layout::Align::END | Layout::Align::TOP) | Ui::slideIn(Ui::SlideFrom::TOP) : Ui::empty()) |
            Ui::spacing({8, 38});
@@ -118,22 +118,110 @@ Ui::Child desktop(State const &state) {
 }
 
 Ui::Child app(bool isMobile) {
-    return Ui::reducer<Model>({.isMobile = isMobile}, [](auto state) {
-        auto wallpapers = Media::loadImageOrFallback("bundle://skift-wallpapers/images/abstract.qoi"_url).unwrap();
-        auto background = Ui::align(Layout::Align::COVER, Ui::image(wallpapers));
-
-        return Ui::stack(
-                   background,
-                   state.locked ? lock(state)
-                                : (state.isMobile ? tablet(state)
-                                                  : desktop(state)),
-                   state.isMobile ? tabletPanels(state)
-                                  : desktopPanels(state)) |
-               Ui::dialogLayer() |
-               Ui::pinSize(
-                   state.isMobile ? Math::Vec2i{411, 731}
-                                  : Math::Vec2i{1280, 720});
-    });
+    return Ui::reducer<Model>(
+        {
+            .isMobile = isMobile,
+            .noti = {
+                {
+                    1,
+                    {{Mdi::INFORMATION_OUTLINE, Gfx::BLUE_RAMP}, "About"},
+                    "Hello",
+                    "Hello, world!",
+                },
+                {
+                    2,
+                    {{Mdi::INFORMATION_OUTLINE, Gfx::BLUE_RAMP}, "About"},
+                    "Hello",
+                    "Hello, world!",
+                },
+                {
+                    3,
+                    {{Mdi::INFORMATION_OUTLINE, Gfx::BLUE_RAMP}, "About"},
+                    "Hello",
+                    "Hello, world!",
+                },
+                {
+                    4,
+                    {{Mdi::INFORMATION_OUTLINE, Gfx::BLUE_RAMP}, "About"},
+                    "Hello",
+                    "Hello, world!",
+                },
+            },
+            .entries = {
+                {
+                    {Mdi::INFORMATION_OUTLINE, Gfx::BLUE_RAMP},
+                    "About",
+                },
+                {
+                    {Mdi::CALCULATOR, Gfx::ORANGE_RAMP},
+                    "Calculator",
+                },
+                {
+                    {Mdi::PALETTE_SWATCH, Gfx::RED_RAMP},
+                    "Color Picker",
+                },
+                {
+                    {Mdi::COUNTER, Gfx::GREEN_RAMP},
+                    "Counter",
+                },
+                {
+                    {Mdi::DUCK, Gfx::YELLOW_RAMP},
+                    "Demos",
+                },
+                {
+                    {Mdi::FILE, Gfx::ORANGE_RAMP},
+                    "Files",
+                },
+                {
+                    {Mdi::FORMAT_FONT, Gfx::BLUE_RAMP},
+                    "Fonts",
+                },
+                {
+                    {Mdi::EMOTICON, Gfx::RED_RAMP},
+                    "Hello World",
+                },
+                {
+                    {Mdi::IMAGE, Gfx::GREEN_RAMP},
+                    "Icons",
+                },
+                {
+                    {Mdi::IMAGE, Gfx::YELLOW_RAMP},
+                    "Image Viewer",
+                },
+                {
+                    {Mdi::CUBE, Gfx::BLUE_RAMP},
+                    "Ray Tracer",
+                },
+                {
+                    {Mdi::COG, Gfx::ZINC_RAMP},
+                    "Settings",
+                },
+                {
+                    {Mdi::TABLE, Gfx::GREEN_RAMP},
+                    "Spreadsheet",
+                },
+                {
+                    {Mdi::WIDGETS, Gfx::BLUE_RAMP},
+                    "Widget Gallery",
+                },
+            },
+        },
+        [](auto state) {
+            auto wallpapers = Media::loadImageOrFallback("bundle://skift-wallpapers/images/abstract.qoi"_url).unwrap();
+            auto background = Ui::align(Layout::Align::COVER, Ui::image(wallpapers));
+
+            return Ui::stack(
+                       background,
+                       state.locked ? lock(state)
+                                    : (state.isMobile ? tablet(state)
+                                                      : desktop(state)),
+                       state.isMobile ? tabletPanels(state)
+                                      : desktopPanels(state)) |
+                   Ui::dialogLayer() |
+                   Ui::pinSize(
+                       state.isMobile ? Math::Vec2i{411, 731}
+                                      : Math::Vec2i{1280, 720});
+        });
 }
 
 } // namespace Shell
diff --git a/src/apps/hideo-shell/model.cpp b/src/apps/hideo-shell/model.cpp
@@ -16,6 +16,9 @@ void reduce(State &s, Action a) {
         [&](Unlock) {
             s.locked = false;
         },
+        [&](DimisNoti dismis) {
+            s.noti.removeAt(dismis.index);
+        },
         [&](Activate panel) {
             if (s.activePanel != panel.panel) {
                 s.activePanel = panel.panel;
diff --git a/src/apps/hideo-shell/model.h b/src/apps/hideo-shell/model.h
@@ -4,15 +4,22 @@
 
 namespace Shell {
 
-struct App {
+struct MenuIcon {
     Mdi::Icon icon;
-    Gfx::ColorRamp color;
+    Gfx::ColorRamp colors;
+};
+
+struct MenuEntry {
+    MenuIcon icon;
     String name;
 };
 
 struct Noti {
+    usize id;
+    MenuEntry entry;
     String title;
-    String msg;
+    String body;
+    Vec<String> actions{};
 };
 
 enum struct Panel {
@@ -22,11 +29,18 @@ enum struct Panel {
     SYS,
 };
 
+struct Surface {
+};
+
 struct State {
     bool locked = true;
     bool isMobile = true;
     Panel activePanel = Panel::NIL;
     bool isSysPanelColapsed = true;
+
+    Vec<Noti> noti;
+    Vec<MenuEntry> entries;
+    Vec<Surface> surfaces;
 };
 
 struct ToggleTablet {};
@@ -35,13 +49,17 @@ struct Lock {};
 
 struct Unlock {};
 
-struct Activate {
-    Panel panel;
+struct DimisNoti {
+    usize index;
 };
 
 struct ToggleSysPanel {};
 
-using Action = Var<ToggleTablet, Lock, Unlock, Activate, ToggleSysPanel>;
+struct Activate {
+    Panel panel;
+};
+
+using Action = Var<ToggleTablet, Lock, Unlock, DimisNoti, Activate, ToggleSysPanel>;
 
 void reduce(State &, Action);
 
diff --git a/src/apps/hideo-shell/tray-apps.cpp b/src/apps/hideo-shell/tray-apps.cpp
@@ -25,28 +25,28 @@ Ui::Child searchInput() {
            Ui::button(Keyboard::show);
 }
 
-Ui::Child appIcon(Mdi::Icon icon, Gfx::ColorRamp colors, isize size = 22) {
-    return Ui::icon(icon, size) |
+Ui::Child appIcon(MenuIcon const &icon, isize size = 22) {
+    return Ui::icon(icon.icon, size) |
            Ui::spacing(size / 2.75) |
            Ui::center() |
            Ui::box({
                .borderRadius = size * 0.25,
                .borderWidth = 1,
-               .borderPaint = colors[5],
-               .backgroundPaint = colors[6],
-               .foregroundPaint = colors[1],
+               .borderPaint = icon.colors[5],
+               .backgroundPaint = icon.colors[6],
+               .foregroundPaint = icon.colors[1],
            });
 }
 
-Ui::Child appRow(Mdi::Icon icon, Gfx::ColorRamp colors, String title) {
+Ui::Child appRow(MenuEntry const &entry) {
     return Ui::button(
         Ui::NOP,
         Ui::ButtonStyle::subtle(),
         Ui::hflow(
             12,
             Layout::Align::START | Layout::Align::VCENTER,
-            appIcon(icon, colors),
-            Ui::labelLarge(title)) |
+            appIcon(entry.icon),
+            Ui::labelLarge(entry.name)) |
             Ui::spacing(6));
 }
 
@@ -63,35 +63,21 @@ Ui::Child apps(Ui::Children apps) {
             Ui::grow());
 }
 
-Ui::Child appsList() {
-    Ui::Children appItems = {
-        appRow(Mdi::INFORMATION_OUTLINE, Gfx::BLUE_RAMP, "About"),
-        appRow(Mdi::CALCULATOR, Gfx::ORANGE_RAMP, "Calculator"),
-        appRow(Mdi::PALETTE_SWATCH, Gfx::RED_RAMP, "Color Picker"),
-        appRow(Mdi::COUNTER, Gfx::GREEN_RAMP, "Counter"),
-        appRow(Mdi::DUCK, Gfx::YELLOW_RAMP, "Demos"),
-        appRow(Mdi::FILE, Gfx::ORANGE_RAMP, "Files"),
-        appRow(Mdi::FORMAT_FONT, Gfx::BLUE_RAMP, "Fonts"),
-        appRow(Mdi::EMOTICON, Gfx::RED_RAMP, "Hello World"),
-        appRow(Mdi::IMAGE, Gfx::GREEN_RAMP, "Icons"),
-        appRow(Mdi::IMAGE, Gfx::YELLOW_RAMP, "Image Viewer"),
-        appRow(Mdi::CUBE, Gfx::BLUE_RAMP, "Ray Tracer"),
-        appRow(Mdi::COG, Gfx::ZINC_RAMP, "Settings"),
-        appRow(Mdi::TABLE, Gfx::GREEN_RAMP, "Spreadsheet"),
-        appRow(Mdi::WIDGETS, Gfx::BLUE_RAMP, "Widget Gallery"),
-    };
-
-    return apps(appItems);
+Ui::Child appsList(State const &state) {
+    return apps(
+        iter(state.entries)
+            .map(appRow)
+            .collect<Ui::Children>());
 }
 
-Ui::Child appsPanel() {
-    return appsList() | panel();
+Ui::Child appsPanel(State const &state) {
+    return appsList(state) | panel();
 }
 
-Ui::Child appsFlyout() {
+Ui::Child appsFlyout(State const &state) {
     return Ui::vflow(
                Ui::dragHandle(),
-               appsList() | Ui::grow()) |
+               appsList(state) | Ui::grow()) |
            Ui::box({
                .margin = {8, 8 + 64, 8, 8},
                .padding = {12, 0},
diff --git a/src/apps/hideo-shell/tray-sys.cpp b/src/apps/hideo-shell/tray-sys.cpp
