feat: add window controls & screen creation util

packages/shared/src/log.tsx

@@ -45,7 +45,9 @@ export function log(
     return;
   }
 
-  console.groupCollapsed(`${colorCodes[color]}${logger}${resetCode} ${args[0]}`);
+  console.groupCollapsed(
+    `${colorCodes[color]}${logger}${resetCode} ${args[0]}`,
+  );
   try {
     for (const arg of args.slice(1)) {
       console.log(arg);

packages/ttp/src/context.tsx

@@ -189,8 +189,8 @@ export default function Provider(props: {
    * Sends typed protocol messages through the active transport client.
    * @param type Protocol message type.
    * @param data Optional request payload.
-    * @param options Optional request id.
-    * @returns A promise for the typed message payload.
+   * @param options Optional request id.
+   * @returns A promise for the typed message payload.
    */
   const send = useCallback<BoundSendFn<Schemas>>(
     ((

packages/ttp/src/core.test.ts

@@ -61,9 +61,9 @@ function createMockWebTransport() {
 
   let readyResolve!: () => void;
   let closedResolve!: () => void;
-  let incomingController:
-    | ReadableStreamDefaultController<ReadableStream<Uint8Array>>
-    | null = null;
+  let incomingController: ReadableStreamDefaultController<
+    ReadableStream<Uint8Array>
+  > | null = null;
   const outgoingMessages: TypedMessage[] = [];
 
   const ready = new Promise<void>((resolve) => {
@@ -426,7 +426,11 @@ describe("Core Protocol", () => {
       const firstSend = client.send("ping", {});
       const secondSend = client.send("ping", {});
 
-      for (let attempt = 0; attempt < 10 && outgoingMessages.length === 0; attempt += 1) {
+      for (
+        let attempt = 0;
+        attempt < 10 && outgoingMessages.length === 0;
+        attempt += 1
+      ) {
         await Promise.resolve();
       }
 
@@ -439,7 +443,11 @@ describe("Core Protocol", () => {
       });
 
       await firstSend;
-      for (let attempt = 0; attempt < 10 && outgoingMessages.length === 1; attempt += 1) {
+      for (
+        let attempt = 0;
+        attempt < 10 && outgoingMessages.length === 1;
+        attempt += 1
+      ) {
         await Promise.resolve();
       }
 

packages/ttp/src/core.ts

@@ -523,8 +523,8 @@ export function createTransportClient<T extends SchemaMap>(
    * Sends a typed protocol request over the current connection.
    * @param type Protocol message type.
    * @param input Optional request payload.
-    * @param options Optional request id.
-    * @returns Promise for the typed response message.
+   * @param options Optional request id.
+   * @returns Promise for the typed response message.
    */
   const send: BoundSendFn<T> = ((
     type: string,
@@ -612,14 +612,15 @@ export function createTransportClient<T extends SchemaMap>(
             timeoutId,
           });
 
-          void writeMessageOnPersistentStream(enqueuedConnection, messageBytes).catch(
-            (error) => {
-              handleConnectionFailure(enqueuedConnection, error);
-              clearTimeout(timeoutId);
-              pending.delete(requestId);
-              reject(error);
-            },
-          );
+          void writeMessageOnPersistentStream(
+            enqueuedConnection,
+            messageBytes,
+          ).catch((error) => {
+            handleConnectionFailure(enqueuedConnection, error);
+            clearTimeout(timeoutId);
+            pending.delete(requestId);
+            reject(error);
+          });
         });
       });
     } catch (error) {

packages/ui/package.json

@@ -17,6 +17,7 @@
     "build": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@tensamin/tauri": "workspace:*",
     "@base-ui/react": "^1.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

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>
+  );
+}