feat: add window controls & screen creation util

packages/ui/src/cmp/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:

packages/ui/src/screens/error.tsx

@@ -1,4 +1,5 @@
 import Link from "../link";
+import CreateScreen from "./util";
 
 /**
  * Executes Screen.
@@ -7,12 +8,12 @@ import Link from "../link";
  */
 export default function Screen(props: { error: string; description: string }) {
   return (
-    <div className="bg-background w-full h-screen flex flex-col justify-center items-center">
+    <CreateScreen>
       <p className="text-base font-semibold">{props.error}</p>
       <p className="pt-4 text-sm w-1/2 text-center text-muted-foreground pb-8">
         {props.description}
       </p>
       <Link label="status.tensamin.net" link="https://status.tensamin.net" />
-    </div>
+    </CreateScreen>
   );
 }

packages/ui/src/screens/loading.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import CreateScreen from "./util";
 
 const DELAY = 250;
 
@@ -58,14 +59,8 @@ export default function Screen(props: ScreenProps) {
     };
   }, [props.progress]);
 
-  const wrapperClass = props.fullscreen
-    ? "fixed inset-0 z-50 bg-background"
-    : "bg-background w-full h-screen";
-
   return (
-    <div
-      className={`${wrapperClass} flex flex-col justify-center items-center px-6`}
-    >
+    <CreateScreen>
       <h2 className="text-base font-semibold text-foreground">
         {props.title ?? "Loading"}
       </h2>
@@ -84,6 +79,6 @@ export default function Screen(props: ScreenProps) {
           }}
         />
       </div>
-    </div>
+    </CreateScreen>
   );
 }

packages/ui/src/screens/util.tsx

@@ -0,0 +1,19 @@
+import Controls from "@tensamin/tauri/controls";
+
+export default function CreateScreen({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className="bg-background w-screen h-screen flex flex-col justify-center items-center"
+      data-tauri-drag-region
+    >
+      <>
+        <Controls className="fixed top-0 right-0 m-[7px] mr-[7.6px]! ring-foreground/15" />
+        {children}
+      </>
+    </div>
+  );
+}