feat: add off, booting and sddm view

src/App.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Kitty } from "./components/Kitty";
 import { AppProvider } from "./providers/AppProvider";
 import { Music } from "./components/Music";
@@ -6,21 +5,33 @@ import { Nvim } from "./components/Nvim";
 import { Waybar } from "./components/Waybar";
 import { useApp } from "./hooks/useApp";
 import { clamp } from "./utils/math";
+import { Sddm } from "./components/Sddm";
+import { Boot } from "./components/Boot";
+import { Off } from "./components/Off";
 
 const AppRoot = () => {
-  const [loggedIn, setLoggedIn] = useState(false);
-  const { brightness } = useApp();
+  const { brightness, state } = useApp();
 
   const opacity = clamp(0.5 - (0.5 * brightness) / 100, 0, 0.5);
 
+  if (state === "off") {
+    return <Off />;
+  }
+
+  if (state === "boot") {
+    return <Boot />;
+  }
+
   return (
     <>
       <div
         className="pointer-events-none fixed inset-0 z-10 bg-black"
         style={{ opacity }}
       />
-      <main className="h-screen w-screen overflow-hidden bg-[url(/wallpaper.jpg)] bg-cover">
-        {loggedIn ? (
+      <main className="h-screen w-screen overflow-hidden bg-[url(/wallpaper.jpg)] bg-cover bg-center">
+        {state === "login" ? (
+          <Sddm />
+        ) : (
           <div className="h-full flex-col">
             <div className="relative z-10 px-2 py-2">
               <Waybar />
@@ -34,15 +45,6 @@ const AppRoot = () => {
               <Music />
             </div>
           </div>
-        ) : (
-          <div className="flex h-full items-center justify-center">
-            <button
-              className="rounded-md border border-black px-2 py-1 hover:border-2 hover:font-bold"
-              onClick={() => setLoggedIn(true)}
-            >
-              Log in
-            </button>
-          </div>
         )}
       </main>
     </>