(feat): add basic voice buttons

bun.lock

@@ -242,7 +242,7 @@
   },
   "overrides": {
     "@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.12.tar.gz",
-    "@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.29.tar.gz",
+    "@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.30.tar.gz",
   },
   "packages": {
     "@antfu/ni": ["@antfu/ni@25.0.0", "", { "dependencies": { "ansis": "^4.0.0", "fzf": "^0.5.2", "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" }, "bin": { "na": "bin/na.mjs", "ni": "bin/ni.mjs", "nr": "bin/nr.mjs", "nci": "bin/nci.mjs", "nlx": "bin/nlx.mjs", "nun": "bin/nun.mjs", "nup": "bin/nup.mjs" } }, "sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA=="],
@@ -695,7 +695,7 @@
 
     "@tensamin/ttp-core": ["@tensamin/ttp-core@https://git.methanium.net/tensamin/ttp/archive/0.0.12.tar.gz", { "dependencies": { "@eslint/js": "^10.0.1", "@typescript-eslint/parser": "^8.58.1", "@webtransport-bun/webtransport": "^0.3.0", "globals": "^17.5.0", "typescript": "^6.0.2", "typescript-eslint": "^8.58.1", "zod": "^4.3.6" } }, "sha512-YdwOocPnNMoE0N/yqksJM9JizkhmNv7q8sc7JMI/TOKM/0wDlQqHLqJBMd7fAGkGLCSx+DKx5z8SJbrA9YlzVg=="],
 
-    "@tensamin/ui": ["@tensamin/ui@https://git.methanium.net/tensamin/ui/archive/0.0.29.tar.gz", { "dependencies": { "@base-ui/react": "^1.3.0", "@fontsource-variable/inter": "^5.2.6", "@tauri-apps/api": "^2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "embla-carousel-react": "^8.6.0", "input-otp": "^1.4.2", "lucide-react": "^1.8.0", "next-themes": "^0.4.6", "react-day-picker": "^9.14.0", "react-resizable-panels": "^4.10.0", "recharts": "3.8.0", "shadcn": "^3.5.0", "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", "tw-animate-css": "^1.3.0", "vaul": "^1.1.2" }, "peerDependencies": { "react": "^19.2.0", "react-dom": "^19.2.0" } }, "sha512-z83adnQtOLCr8ceVaUXZ7F7Hn/TrqsyqJM8hivhQxOX4OUNFaCBrbmfDpIK6OmtjRF/AnjqBNRua8FXAhJN35A=="],
+    "@tensamin/ui": ["@tensamin/ui@https://git.methanium.net/tensamin/ui/archive/0.0.30.tar.gz", { "dependencies": { "@base-ui/react": "^1.3.0", "@fontsource-variable/inter": "^5.2.6", "@tauri-apps/api": "^2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "embla-carousel-react": "^8.6.0", "input-otp": "^1.4.2", "lucide-react": "^1.8.0", "next-themes": "^0.4.6", "react-day-picker": "^9.14.0", "react-resizable-panels": "^4.10.0", "recharts": "3.8.0", "shadcn": "^3.5.0", "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", "tw-animate-css": "^1.3.0", "vaul": "^1.1.2" }, "peerDependencies": { "react": "^19.2.0", "react-dom": "^19.2.0" } }, "sha512-Eh/ko+4x4gF/25JyB38PNN2n/UVUIR6yxxZTpyZPx4maL00992pGmFt62kb1ejJQoooEpEfSo/ALtQDF5cjdoA=="],
 
     "@tensamin/user": ["@tensamin/user@workspace:packages/user"],
 

licenses/THIRD_PARTY_NOTICES.md

@@ -180,11 +180,11 @@ Generated from bun.lock and installed packages in workspace node_modules folders
 - Folder: `licenses/@tensamin_ttp-core@0.0.12`
 - Source package dir: `packages/ttp/node_modules/@tensamin/ttp-core`
 
-## @tensamin/ui@0.0.26
+## @tensamin/ui@0.0.30
 
 - License: UNKNOWN
 - Included files: none found
-- Folder: `licenses/@tensamin_ui@0.0.26`
+- Folder: `licenses/@tensamin_ui@0.0.30`
 - Source package dir: `apps/tauri/node_modules/@tensamin/ui`
 
 ## @types/node@25.6.0

licenses/sbom.cyclonedx.json

@@ -3,7 +3,7 @@
   "specVersion": "1.5",
   "version": 1,
   "metadata": {
-    "timestamp": "2026-04-19T14:27:01.395Z",
+    "timestamp": "2026-04-28T17:49:46.479Z",
     "tools": [
       {
         "vendor": "OpenAI",
@@ -633,15 +633,15 @@
     },
     {
       "type": "library",
-      "bomRef": "pkg:npm/%40tensamin/ui@0.0.26",
+      "bomRef": "pkg:npm/%40tensamin/ui@0.0.30",
       "name": "@tensamin/ui",
-      "version": "0.0.26",
+      "version": "0.0.30",
-      "purl": "pkg:npm/%40tensamin/ui@0.0.26",
+      "purl": "pkg:npm/%40tensamin/ui@0.0.30",
       "externalReferences": [],
       "properties": [
         {
           "name": "local:licenseFolder",
-          "value": "licenses/@tensamin_ui@0.0.26"
+          "value": "licenses/@tensamin_ui@0.0.30"
         },
         {
           "name": "local:sourcePackageDir",

licenses/third-party-credits.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-19T14:27:01.394Z",
+  "generatedAt": "2026-04-28T17:49:46.477Z",
   "packageCount": 57,
   "packages": [
     {
@@ -253,13 +253,13 @@
     },
     {
       "name": "@tensamin/ui",
-      "version": "0.0.26",
+      "version": "0.0.30",
       "license": "UNKNOWN",
       "homepage": null,
       "repository": null,
       "description": null,
       "files": [],
-      "licenseFolder": "licenses/@tensamin_ui@0.0.26",
+      "licenseFolder": "licenses/@tensamin_ui@0.0.30",
       "sourcePackageDir": "apps/tauri/node_modules/@tensamin/ui"
     },
     {

package.json

@@ -37,7 +37,7 @@
     "jsonc-parser": "^3.3.1"
   },
   "overrides": {
-    "@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.29.tar.gz",
+    "@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.30.tar.gz",
     "@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.12.tar.gz"
   },
   "dependencies": {

packages/call/src/components/buttons/screenshare.tsx

@@ -0,0 +1,44 @@
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
+import { MonitorDot, ScreenShare } from "lucide-react";
+import { useCall } from "../../context";
+
+export default function ScreenshareButton({
+  className,
+}: {
+  className?: string;
+}) {
+  const { room } = useCall();
+
+  const isScreensharing = room.localParticipant.isScreenShareEnabled;
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant={isScreensharing ? "secondary" : "default"}
+            className={className}
+          >
+            {isScreensharing ? <MonitorDot /> : <ScreenShare />}
+          </Button>
+        }
+      />
+      <PopoverContent className="w-auto flex flex-col gap-2">
+        <Button
+          disabled={isScreensharing}
+          onClick={() => room.localParticipant.setScreenShareEnabled(true)}
+        >
+          Start
+        </Button>
+        <Button
+          variant="destructive"
+          disabled={!isScreensharing}
+          onClick={() => room.localParticipant.setScreenShareEnabled(false)}
+        >
+          Stop
+        </Button>
+        <Button>idk</Button>
+      </PopoverContent>
+    </Popover>
+  );
+}

packages/call/src/components/sidebarBox.tsx

@@ -1,4 +1,4 @@
-import { Lock, LockOpen } from "lucide-react";
+import { Expand, Lock, LockOpen } from "lucide-react";
 import { useCall } from "../context";
 import {
   Button,
@@ -11,14 +11,17 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  useIsMobile,
 } from "@tensamin/ui";
 import { LeaveIcon } from "@livekit/components-react";
+import ScreenshareButton from "./buttons/screenshare";
 
 export default function SidebarBox() {
-  const { state, room, disconnect } = useCall();
+  const { state, room, disconnect, openCallPage, callId } = useCall();
+  const isMobile = useIsMobile();
 
   return state === "closed" ? null : (
-    <Card className="p-1.5 gap-1">
+    <Card className="p-1.5 gap-1" hidden={isMobile}>
       <CardHeader className="p-0!">
         <ConnectionBar
           state={state}
@@ -28,7 +31,11 @@ export default function SidebarBox() {
           }
         />
       </CardHeader>
-      <CardContent className="p-0! flex justify-end">
+      <CardContent className="p-0! flex justify-end gap-1">
+        <Button className="w-9 h-9" onClick={() => openCallPage(callId || "")}>
+          <Expand />
+        </Button>
+        <ScreenshareButton className="w-9 h-9" />
         <Button
           size="lg"
           className="w-9 h-9"
@@ -56,18 +63,11 @@ function ConnectionBar({
           <Button
             size="lg"
             variant={
-              state === "open"
+              state === "open" && encrypted ? "subtleDefault" : "destructive"
-                ? encrypted
-                  ? "subtleDefault"
-                  : "destructive"
-                : state === "closed" ||
-                    state === "closing" ||
-                    state === "connecting"
-                  ? "outline"
-                  : "outline"
             }
             className="flex justify-between items-center"
           >
+            {state === "encrypting" && "Encrypting..."}
             {state === "connecting" && "Connecting..."}
             {state === "open" && "Connected"}
             {state === "closed" && "Closed"}
@@ -77,7 +77,7 @@ function ConnectionBar({
               <TooltipTrigger
                 render={
                   encrypted ? (
-                    <Lock color="var(--primary-foreground)" />
+                    <Lock color="var(--primary-foreground-alt)" />
                   ) : (
                     <LockOpen color="var(--destructive)" />
                   )

packages/call/src/context.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { log, toast } from "@tensamin/shared/log";
-import { useNavigate } from "@tanstack/react-router";
+import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useTTP } from "@tensamin/ttp";
 import z from "zod";
 import { ttp } from "@tensamin/shared/data";
@@ -20,12 +20,16 @@ export default function Provider(props: { children: React.ReactNode }) {
   const { getSharedSecret, decryptText } = useCrypto();
   const { load } = useStorage();
   const { get } = useUser();
+  const location = useLocation();
+  const search = new URLSearchParams(location.searchStr);
 
   const [state, setState] = useState<
     "closed" | "closing" | "connecting" | "open" | "encrypting"
   >("closed");
 
-  const [callId, setCallId] = useState<string | null>(null);
+  const [callId, setCallId] = useState<string | null>(
+    location.pathname.startsWith("/call") ? search.get("id") : null,
+  );
   const [callSecret, setCallSecret] = useState<string | null>(null);
   const [livekitToken, setLivekitToken] = useState<string | null>(null);
 
@@ -40,9 +44,8 @@ export default function Provider(props: { children: React.ReactNode }) {
   };
 
   async function connect(callId: string) {
-    setState("connecting");
+    setState("encrypting");
     setCallId(callId);
-    setCallSecret(callSecret);
     setLivekitToken(await getCallToken(callId));
     log(2, "call", "purple", "Connecting to call", { callId, callSecret });
   }
@@ -74,23 +77,29 @@ export default function Provider(props: { children: React.ReactNode }) {
           await get(userId).then((res) => res.public_key),
         );
         const decryptedSecret = await decryptText(sharedSecret, callSecret);
+        await keyProvider.setKey(decryptedSecret);
+        await room.setE2EEEnabled(true);
         setCallSecret(decryptedSecret);
+        setState("connecting");
       } catch (err) {
         log(1, "call", "red", "Failed getting call secret", err);
         disconnect();
       }
     } else {
-      setCallSecret(crypto.randomUUID());
+      const random = crypto.randomUUID();
+      await keyProvider.setKey(random);
+      await room.setE2EEEnabled(true);
+      setCallSecret(random);
+      setState("connecting");
     }
     try {
       // check if user is already in call
 
       // connect to call
-      connect(callId || crypto.randomUUID());
+      const finalId = callId || crypto.randomUUID();
+      connect(finalId);
       setView("grid");
-
+      openCallPage(finalId);
-      // navigate to call page
-      navigate({ to: "/call", search: { userId: userId, callId: callId } });
     } catch (err) {
       log(1, "call", "red", "Failed to join call [navbar level]", err);
     }
@@ -107,6 +116,9 @@ export default function Provider(props: { children: React.ReactNode }) {
     typeof ttp.call_data.response
   > | null>(null);
 
+  const openCallPage = (callId: string) =>
+    navigate({ to: "/call", search: { id: callId } });
+
   // Get current call information for preview view
   useEffect(() => {
     if (view !== "preview" || !callId) return;
@@ -134,22 +146,15 @@ export default function Provider(props: { children: React.ReactNode }) {
   const [room] = useState(
     () =>
       new Room({
+        dynacast: true,
+        adaptiveStream: true,
         encryption: {
           keyProvider,
           worker: e2eeWorker,
         },
-        loggerName: "call",
       }),
   );
 
-  useEffect(() => {
-    async function enableStuff() {
-      await keyProvider.setKey(callSecret || "");
-      await room.setE2EEEnabled(true);
-    }
-    enableStuff();
-  }, [callSecret, keyProvider, room]);
-
   return (
     <context.Provider
       value={{
@@ -158,7 +163,9 @@ export default function Provider(props: { children: React.ReactNode }) {
         setView,
         room,
 
-        connect,
+        callId,
+        openCallPage,
+
         disconnect,
         joinCall,
         currentCallData,
@@ -239,11 +246,12 @@ type contextType = {
   state: "closed" | "closing" | "connecting" | "open" | "encrypting";
   view: "preview" | "focused" | "grid";
   setView: (view: "preview" | "focused" | "grid") => void;
-  connect: (callId: string, callSecret: string) => void;
   disconnect: () => void;
   joinCall: (userId: number, callSecret?: string, callId?: string) => void;
   currentCallData: z.infer<typeof ttp.call_data.response> | null;
   room: Room;
+  openCallPage: (callId: string) => Promise<void>;
+  callId: string | null;
 };
 
 export function useCall(): contextType {