feat: add suspend state and make all buttons related to state working

src/App.tsx

@@ -14,7 +14,7 @@ const AppRoot = () => {
 
   const opacity = clamp(0.5 - (0.5 * brightness) / 100, 0, 0.5);
 
-  if (state === "off") {
+  if (state === "off" || state === "reboot" || state === "suspend") {
     return <Off />;
   }
 

src/components/Boot.tsx

@@ -22,7 +22,11 @@ export const Boot = () => {
 
     const timeout = setTimeout(
       () => setLine(line + 1),
-      Math.random() * 750 + 200,
+      line === 0
+        ? 3500
+        : line === LINES.length - 1
+          ? 1200
+          : Math.random() * 750 + 200,
     );
     return () => clearTimeout(timeout);
   }, [setState, line]);

src/components/Off.tsx

@@ -1,25 +1,31 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useApp } from "~/hooks/useApp";
 
 export const Off = () => {
-  const { setState } = useApp();
+  const { state, setState } = useApp();
-  const [clicked, setClicked] = useState(false);
+  const [booting, setBooting] = useState(state === "reboot");
 
-  const handleClick = () => {
+  useEffect(() => {
-    setClicked(true);
+    if (booting) {
+      const timout = setTimeout(() => {
+        if (state === "suspend") {
+          setState("login");
+        } else {
+          setState("boot");
+        }
+      }, 1000);
 
-    setTimeout(() => {
+      return () => clearTimeout(timout);
-      setState("boot");
+    }
-    }, 1000);
+  }, [booting]);
-  };
 
   return (
     <div className="flex h-screen w-screen items-center justify-center bg-black">
       <button
         className={`drop-shadow-white cursor-pointer transition-all ${
-          clicked ? "animate-disappear" : "animate-breathing"
+          booting ? "animate-disappear" : "animate-breathing"
         }`}
-        onClick={handleClick}
+        onClick={() => setBooting(true)}
       >
         <svg viewBox="0 0 34 34" width="128">
           <path

src/components/Sddm.tsx

@@ -50,7 +50,7 @@ export const Sddm = () => {
           Math.random() > 0.18;
         setPassword(Math.max(0, password + (canType ? 1 : -1)));
       },
-      password === 0 ? 3000 : Math.random() * 250 + 250,
+      password === 0 ? 3000 : Math.random() * 250 + 175,
     );
     return () => clearTimeout(timeout);
   }, [password]);
@@ -141,6 +141,7 @@ export const Sddm = () => {
             <div className="flex gap-8">
               <SddmActionButton
                 key="suspend"
+                onClick={() => setState("suspend")}
                 icon={
                   <svg viewBox="0 0 34 34" width="38">
                     <path
@@ -154,6 +155,7 @@ export const Sddm = () => {
 
               <SddmActionButton
                 key="reboot"
+                onClick={() => setState("reboot")}
                 icon={
                   <svg width="38" viewBox="0 0 34 34">
                     <g transform="matrix(1.000593,0,0,1.0006688,0.99050505,-287.73702)">
@@ -169,6 +171,7 @@ export const Sddm = () => {
               />
               <SddmActionButton
                 key="shutdown"
+                onClick={() => setState("off")}
                 icon={
                   <svg viewBox="0 0 34 34" width="38">
                     <path

src/components/Waybar/Widgets/WaybarLockWidget.tsx

@@ -1,9 +1,12 @@
+import { useApp } from "~/hooks/useApp";
 import { WaybarWidget } from "../WaybarWidget";
 
 export const WaybarLockWidget = () => {
+  const { setState } = useApp();
+
   return (
     <WaybarWidget className="pl-3 pr-[0.625rem]" interactable>
-      
+      <button onClick={() => setState("login")}></button>
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarPowerWidget.tsx

@@ -1,9 +1,12 @@
+import { useApp } from "~/hooks/useApp";
 import { WaybarWidget } from "../WaybarWidget";
 
 export const WaybarPowerWidget = () => {
+  const { setState } = useApp();
+
   return (
     <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
-      
+      <button onClick={() => setState("off")}></button>
     </WaybarWidget>
   );
 };

src/context/AppContext.tsx

@@ -4,7 +4,7 @@ import { type Prettify, type State } from "~/utils/types";
 export const AppContext = createContext<AppContextProps | undefined>(undefined);
 
 export type AppContextProps = Prettify<
-  State<"state", "off" | "boot" | "login" | "desktop"> &
+  State<"state", "off" | "suspend" | "reboot" | "boot" | "login" | "desktop"> &
     State<"activeKitty", string> &
     State<"brightness", number> &
     State<"volume", number> & { screenWidth: number }