session screen

Switch from wlogout

app.tsx

@@ -5,6 +5,7 @@ import Launcher from "./src/modules/launcher";
 import NotifPopups from "./src/modules/notifpopups";
 import Osds from "./src/modules/osds";
 import Popdowns from "./src/modules/popdowns";
+import Session from "./src/modules/session";
 import Monitors from "./src/services/monitors";
 import Players from "./src/services/players";
 
@@ -30,6 +31,7 @@ App.start({
         <Launcher />;
         <NotifPopups />;
         <Osds />;
+        <Session />;
         Monitors.get_default().forEach(m => <Bar monitor={m} />);
         <Popdowns />;
 

scss/session.scss

@@ -0,0 +1,55 @@
+@use "sass:color";
+@use "scheme";
+@use "lib";
+@use "font";
+
+.session {
+    background-color: #0000009e;
+
+    .inner {
+        @include lib.rounded(8);
+        @include lib.border(scheme.$overlay0, 0.1);
+        @include lib.shadow;
+        @include font.mono;
+
+        background-color: scheme.$mantle;
+        color: scheme.$text;
+        padding: lib.s(18) lib.s(20);
+
+        @include lib.spacing(10, true);
+
+        & > * {
+            @include lib.spacing(20);
+        }
+
+        .item {
+            font-size: lib.s(14);
+
+            @include lib.spacing($vertical: true);
+
+            button {
+                @include lib.rounded(100);
+                @include lib.element-decel(300ms);
+
+                background-color: scheme.$base;
+                min-width: lib.s(100);
+                min-height: lib.s(100);
+                font-size: lib.s(32);
+
+                &:hover,
+                &:focus {
+                    background-color: color.mix(scheme.$flamingo, scheme.$base, 70%);
+                    color: scheme.$base;
+                }
+
+                &:active {
+                    background-color: color.mix(scheme.$flamingo, scheme.$base, 50%);
+                }
+            }
+
+            .label {
+                font-weight: 500;
+            }
+        }
+    }
+}

src/modules/bar.tsx

@@ -452,11 +452,7 @@ const DateTime = () => (
 );
 
 const Power = () => (
-    <button
-        className="module power"
-        label="power_settings_new"
-        onClicked={() => execAsync("fish -c 'pkill wlogout || wlogout -p layer-shell'").catch(console.error)}
-    />
+    <button className="module power" label="power_settings_new" onClicked={() => App.toggle_window("session")} />
 );
 
 export default ({ monitor }: { monitor: Monitor }) => (

src/modules/session.tsx

@@ -0,0 +1,34 @@
+import { execAsync } from "astal";
+import { Astal, Gtk } from "astal/gtk3";
+import PopupWindow from "../widgets/popupwindow";
+
+const Item = ({ icon, label, cmd }: { icon: string; label: string; cmd: string }) => (
+    <box vertical className="item">
+        <button cursor="pointer" onClicked={() => execAsync(cmd).catch(console.error)}>
+            <label className="icon" label={icon} />
+        </button>
+        <label className="label" label={label} />
+    </box>
+);
+
+export default () => (
+    <PopupWindow
+        className="session"
+        name="session"
+        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.RIGHT}
+        keymode={Astal.Keymode.EXCLUSIVE}
+        layer={Astal.Layer.OVERLAY}
+        borderWidth={0} // Don't need border width cause takes up entire screen
+    >
+        <box vertical halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} className="inner">
+            <box>
+                <Item icon="logout" label="Logout" cmd="uwsm stop" />
+                <Item icon="cached" label="Reboot" cmd="systemctl reboot" />
+            </box>
+            <box>
+                <Item icon="downloading" label="Hibernate" cmd="systemctl hibernate" />
+                <Item icon="power_settings_new" label="Shutdown" cmd="systemctl poweroff" />
+            </box>
+        </box>
+    </PopupWindow>
+);

src/widgets/popupwindow.ts

@@ -13,6 +13,7 @@ export default class PopupWindow extends Widget.Window {
         super({
             keymode: Astal.Keymode.ON_DEMAND,
             exclusivity: Astal.Exclusivity.IGNORE,
+            borderWidth: 20, // To allow shadow, cause if not it gets cut off
             ...props,
             visible: false,
             application: App,
@@ -24,7 +25,6 @@ export default class PopupWindow extends Widget.Window {
 
                 return props.onKeyPressEvent?.(self, event);
             },
-            borderWidth: 20, // To allow shadow, cause if not it gets cut off
         });
     }
 

style.scss

@@ -7,6 +7,7 @@
 @use "scss/launcher";
 @use "scss/osds";
 @use "scss/popdowns";
+@use "scss/session";
 
 * {
     all: unset; // Remove GTK theme styles