feat(waybar): implement all dummy widgets

src/App.tsx

@@ -3,20 +3,36 @@ import { Kitty } from "./components/Kitty";
 import { AppProvider } from "./providers/AppProvider";
 import { Music } from "./components/Music";
 import { Nvim } from "./components/Nvim";
+import { Waybar } from "./components/Waybar";
+import { useApp } from "./hooks/useApp";
+import { clamp } from "./utils/math";
 
-export default function App() {
+const AppRoot = () => {
   const [loggedIn, setLoggedIn] = useState(false);
+  const { brightness } = useApp();
+
+  const opacity = clamp(0.5 - (0.5 * brightness) / 100, 0, 0.5);
 
   return (
-    <AppProvider>
+    <>
+      <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 ? (
-          <div className="flex h-full w-full flex-col">
-            <Kitty className="w-full flex-1 pb-1 pl-2 pr-2 pt-2">
-              <Nvim />
-            </Kitty>
+          <div className="h-full flex-col">
+            <div className="px-2 py-2">
+              <Waybar />
+            </div>
 
-            <Music />
+            <div className="flex h-[calc(100%-50px)] w-full flex-col">
+              <Kitty className="w-full flex-1 pb-1 pl-2 pr-2 pt-1">
+                <Nvim />
+              </Kitty>
+
+              <Music />
+            </div>
           </div>
         ) : (
           <div className="flex h-full items-center justify-center">
@@ -29,6 +45,14 @@ export default function App() {
           </div>
         )}
       </main>
+    </>
+  );
+};
+
+export default function App() {
+  return (
+    <AppProvider>
+      <AppRoot />
     </AppProvider>
   );
 }