feat: add window controls & screen creation util

apps/web/src/components/navbar.tsx

@@ -14,6 +14,7 @@ import { displayCallId } from "@tensamin/call/utils";
 import { useState } from "react";
 import { SidebarTrigger, useSidebar } from "@tensamin/ui/cmp/sidebar";
 import { useTTP } from "@tensamin/ttp/context";
+import Controls from "@tensamin/tauri/controls";
 
 export default function Navbar({ forMobile }: { forMobile: boolean }) {
   const navigate = useNavigate();
@@ -30,7 +31,8 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
 
   return (
     <div
-      className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-center`}
+      data-tauri-drag-region
+      className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-between`}
     >
       {forMobile ? (
         <SidebarTrigger
@@ -57,7 +59,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
           loading={<Skeleton className="ml-3 w-40 h-5" />}
         />
       )}
-      <div className="w-full" />
+      {/* Empty space */}
       {pathname === "/chat" && id && (
         <>
           {currentCalls.length === 0 ? (
@@ -77,7 +79,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
               onClick={() => {
                 joinCall(id, currentCalls[0]);
               }}
-              className="w-9 h-9 aspect-square rounded-lg mr-2"
+              className="w-9 h-9 aspect-square rounded-lg"
             >
               <Phone />
             </Button>
@@ -85,7 +87,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
             <>
               <Button
                 onClick={() => setSelectOpen((prev) => !prev)}
-                className="w-9! h-9! aspect-square rounded-lg mr-2"
+                className="w-9! h-9! aspect-square rounded-lg"
               >
                 <Phone />
               </Button>
@@ -109,6 +111,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
           )}
         </>
       )}
+      <Controls className="mr-2 ring-border" notPresentClassName="mr-2" />
     </div>
   );
 }

apps/web/src/components/sidebar.tsx

@@ -23,7 +23,9 @@ export default function Sidebar() {
   return (
     <SidebarRoot>
       <SidebarContent
-        className={isTauri() && isMobile ? "pt-[env(safe-area-inset-top)]" : "pt-2"}
+        className={
+          isTauri() && isMobile ? "pt-[env(safe-area-inset-top)]" : "pt-2"
+        }
       >
         <div className="h-full w-full flex flex-col gap-3 p-2 pt-0!">
           <div>

apps/web/src/features/legal/screen.tsx

@@ -10,6 +10,7 @@ import { legalDocsSchema } from "@tensamin/shared/features/legal/schema";
 import { log } from "@tensamin/shared/log";
 import Link from "@tensamin/ui/link";
 import { Label } from "@tensamin/ui/cmp/label";
+import CreateScreen from "@tensamin/ui/screens/util";
 
 // Prevents the user from using Tensamin without accepting the privacy policy and terms of service.
 export default function Screen(props: { children: React.ReactNode }) {
@@ -160,7 +161,7 @@ export default function Screen(props: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="w-full h-full flex items-center justify-center py-15">
+    <CreateScreen>
       <div className="h-full flex flex-col gap-15 p-10 md:p-40 w-full lg:w-2/3">
         <h1 className="text-3xl md:text-4xl font-bold">
           Privacy Policy & ToS
@@ -198,7 +199,7 @@ export default function Screen(props: { children: React.ReactNode }) {
           onClick={handleContinueLegal}
         />
       </div>
-    </div>
+    </CreateScreen>
   );
 }
 

apps/web/src/index.tsx

@@ -17,7 +17,6 @@ import Home from "@/routes/app/home";
 import ChatScreen from "@tensamin/chat/screen";
 import CallScreen from "@tensamin/call/screen";
 import Login from "@/routes/screens/login";
-import Signup from "@/routes/screens/signup";
 
 import ChatContext from "@tensamin/chat/context";
 import CallContext from "@tensamin/call/context";
@@ -117,16 +116,9 @@ const loginRoute = createRoute({
   component: Login,
 });
 
-const signupRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "signup",
-  component: Signup,
-});
-
 const routeTree = rootRoute.addChildren([
   appRoute.addChildren([homeRoute, chatRoute, callRoute]),
   loginRoute,
-  signupRoute,
 ]);
 
 const router = createRouter({

apps/web/src/routes/screens/login.tsx

@@ -1,4 +1,5 @@
 import Form from "@/components/screens/login/form";
+import CreateScreen from "@tensamin/ui/screens/util";
 
 /**
  * Executes Page.
@@ -7,7 +8,7 @@ import Form from "@/components/screens/login/form";
  */
 export default function Page() {
   return (
-    <div className="w-full h-full flex flex-col gap-10 items-center justify-center">
+    <CreateScreen>
       <Form />
       <div className="flex">
         <a target="_blank" href="https://docs.tensamin.net/installation/#iota">
@@ -17,6 +18,6 @@ export default function Page() {
           </p>
         </a>
       </div>
-    </div>
+    </CreateScreen>
   );
 }

apps/web/src/routes/screens/signup.tsx

@@ -1,8 +0,0 @@
-/**
- * Executes Page.
- * @param none This function has no parameters.
- * @returns unknown.
- */
-export default function Page() {
-  return <div>Signup Page</div>;
-}