(feat): add message states, tweaks chat ui

(feat): add drag and drop to login page

.forgejo/workflows/deploy-prod.yml

@@ -147,7 +147,7 @@ jobs:
         run: |
           VERSION="$(node -p "require('./package.json').version")"
           echo "version=$VERSION" >> "$FORGEJO_OUTPUT"
-          echo "tag=${VERSION}-prod" >> "$FORGEJO_OUTPUT"
+          echo "tag=$VERSION" >> "$FORGEJO_OUTPUT"
 
       - name: Create release and upload files
         env:

.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "tauri-apps.tauri-vscode",
     "rust-lang.rust-analyzer",
-    "bradlc.vscode-tailwindcss",
-    "antfu.vite"
+    "bradlc.vscode-tailwindcss"
   ]
 }

apps/tauri/logo.svg

@@ -0,0 +1,237 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="90mm"
+   height="90mm"
+   viewBox="0 0 90 90"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   sodipodi:docname="logo_raw.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.99999999"
+     inkscape:cx="450"
+     inkscape:cy="291.5"
+     inkscape:window-width="1223"
+     inkscape:window-height="1369"
+     inkscape:window-x="26"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1"><linearGradient
+       id="swatch15"
+       inkscape:swatch="solid"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop15" /></linearGradient><linearGradient
+       id="swatch10"
+       inkscape:swatch="solid"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop10" /></linearGradient><linearGradient
+       id="swatch3"
+       inkscape:swatch="solid"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3" /></linearGradient><linearGradient
+       id="swatch2"
+       inkscape:swatch="solid"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop2" /></linearGradient><linearGradient
+       id="swatch1"
+       inkscape:swatch="solid"><stop
+         style="stop-color:#031616;stop-opacity:1;"
+         offset="0"
+         id="stop1" /></linearGradient><inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect2"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0.79374998,0,1 @ F,0,0,1,0,0.79374998,0,1 @ F,0,0,1,0,0.79374998,0,1 @ F,0,0,1,0,0.79374998,0,1 @ F,0,0,1,0,0.79374998,0,1 @ F,0,0,1,0,0.79374998,0,1 @ F,0,0,1,0,0.79374998,0,1"
+       radius="3"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" /><inkscape:path-effect
+       effect="bspline"
+       id="path-effect6"
+       is_visible="true"
+       lpeversion="1.3"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false"
+       uniform="false" /><inkscape:path-effect
+       effect="spiro"
+       id="path-effect5"
+       is_visible="true"
+       lpeversion="1" /><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath1"><path
+         id="path3"
+         style="fill:#043b3c;stroke-width:0.320821"
+         inkscape:label="arrow"
+         d="m 244.98648,261.60864 -9.19072,26.71639 23.35523,-11.66051 c -4.69011,-5.05439 -10.12762,-9.5023 -14.16451,-15.05588 z m 40.12749,-74.6916 50.72412,18.76364 c 6.70121,39.09457 -10.8946,70.48625 -50.72412,85.29337 z m 0,0 -50.72412,18.76364 c -6.7012,39.09457 10.89461,70.48625 50.72412,85.29337 z"
+         sodipodi:nodetypes="cccccccccccc" /></clipPath><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient15"
+       x1="232.99823"
+       y1="238.94554"
+       x2="337.22971"
+       y2="238.94554"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient16"
+       x1="63.191292"
+       y1="148.5"
+       x2="146.82355"
+       y2="148.5"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient17"
+       gradientUnits="userSpaceOnUse"
+       x1="232.99823"
+       y1="238.94554"
+       x2="337.22971"
+       y2="238.94554" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient18"
+       gradientUnits="userSpaceOnUse"
+       x1="232.99823"
+       y1="238.94554"
+       x2="337.22971"
+       y2="238.94554" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient19"
+       gradientUnits="userSpaceOnUse"
+       x1="232.99823"
+       y1="238.94554"
+       x2="337.22971"
+       y2="238.94554" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient20"
+       gradientUnits="userSpaceOnUse"
+       x1="232.99823"
+       y1="238.94554"
+       x2="337.22971"
+       y2="238.94554" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient21"
+       gradientUnits="userSpaceOnUse"
+       x1="232.99823"
+       y1="238.94554"
+       x2="337.22971"
+       y2="238.94554" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient22"
+       gradientUnits="userSpaceOnUse"
+       x1="63.191292"
+       y1="148.5"
+       x2="146.82355"
+       y2="148.5" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient23"
+       gradientUnits="userSpaceOnUse"
+       x1="63.191292"
+       y1="148.5"
+       x2="146.82355"
+       y2="148.5" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient24"
+       gradientUnits="userSpaceOnUse"
+       x1="63.191292"
+       y1="148.5"
+       x2="146.82355"
+       y2="148.5" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch1"
+       id="linearGradient25"
+       gradientUnits="userSpaceOnUse"
+       x1="63.191292"
+       y1="148.5"
+       x2="146.82355"
+       y2="148.5" /></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-62.941767,-104.13688)"><g
+       id="g2"
+       transform="matrix(0.78671048,0,0,0.83608014,-116.36038,-50.640745)"
+       inkscape:label="background"
+       style="display:inline;stroke:url(#linearGradient15);stroke-width:0.616508;stroke-dasharray:none"
+       clip-path="url(#clipPath1)"><path
+         id="rect1"
+         style="fill:#004b4a;stroke:url(#linearGradient17);stroke-width:0.616508;stroke-dasharray:none"
+         transform="rotate(-75)"
+         d="m -227.83395,273.59631 h 146.303341 v 24.39636 H -227.83395 Z" /><path
+         id="rect1-1"
+         style="fill:#00524e;stroke:url(#linearGradient18);stroke-width:0.616508;stroke-dasharray:none"
+         transform="rotate(-75)"
+         d="m -227.83395,297.99268 h 146.303341 v 24.39636 H -227.83395 Z" /><path
+         id="rect1-1-3"
+         style="fill:#006560;stroke:url(#linearGradient19);stroke-width:0.616508;stroke-dasharray:none"
+         transform="rotate(-75)"
+         d="m -227.83395,322.3891 h 146.303341 v 24.39636 H -227.83395 Z" /><path
+         id="rect1-1-3-6"
+         style="fill:#02857d;stroke:url(#linearGradient20);stroke-width:0.616508;stroke-dasharray:none"
+         transform="rotate(-75)"
+         d="m -227.83395,346.78546 h 146.303341 v 24.39636 H -227.83395 Z" /><path
+         id="rect1-1-3-6-2"
+         style="fill:#12a89e;stroke:url(#linearGradient21);stroke-width:0.616508;stroke-dasharray:none"
+         transform="rotate(-75)"
+         d="m -227.83395,371.18179 h 146.303341 v 24.39636 H -227.83395 Z" /></g><g
+       id="g3"
+       inkscape:label="foreground"
+       style="stroke:url(#linearGradient16);stroke-width:0.5;stroke-dasharray:none"
+       transform="translate(3.3653788,0.84760028)"><g
+         id="g1"
+         inkscape:label="outline"
+         style="stroke:url(#linearGradient23);stroke-width:0.5;stroke-dasharray:none"><path
+           id="path15-3-5"
+           style="opacity:0.352;fill:#000000;fill-opacity:1;stroke:url(#linearGradient22);stroke-width:0.5;stroke-dasharray:none"
+           inkscape:label="filler"
+           d="m -54.535435,65.443954 -38.869976,15.14533 c -2.902661,17.83718 0.143161,33.687786 8.852689,46.257116 l -5.823934,18.52239 15.016655,-8.2765 c 5.699447,4.98296 12.651108,9.14382 20.824566,12.34447 30.52177,-11.95203 44.00571,-37.29104 38.8705,-68.847476 z m -0.01808,2.85099 36.24585,14.11438 c 4.61111,37.589746 -14.17784,55.293626 -36.24585,64.158876 -21.698042,-8.5864 -40.914886,-26.53641 -36.245337,-64.158876 z"
+           transform="translate(159.54375,40.87617)" /></g><path
+         style="opacity:1;fill:#b8f8ff;fill-opacity:1;stroke:url(#linearGradient24);stroke-width:0.5;stroke-dasharray:none"
+         d="m 98.103726,126.47621 21.412544,0.16758 a 0.41189664,0.41189664 63.022469 0 1 0.33171,0.65164 l -8.29596,11.58914 a 0.41184923,0.41184923 63.019773 0 0 0.33171,0.65157 l 10.05254,0.0777 a 0.3104736,0.3104736 69.080154 0 1 0.20649,0.54017 l -30.495516,27.73194 a 0.15466019,0.15466019 36.691517 0 1 -0.243455,-0.18141 l 10.172421,-21.16912 a 0.50438266,0.50438266 58.099348 0 0 -0.44993,-0.72282 l -11.312564,-0.10524 a 0.52748832,0.52748832 56.926855 0 1 -0.479488,-0.73628 l 7.661544,-17.7722 a 1.1963277,1.1963277 146.88457 0 1 1.107954,-0.72269 z"
+         id="path2"
+         sodipodi:nodetypes="cccccccc"
+         inkscape:label="bolt" /><path
+         id="path1"
+         style="fill:#043b3c;stroke:url(#linearGradient25);stroke-width:0.5;stroke-dasharray:none"
+         inkscape:label="dark_outline"
+         d="m 104.99968,104.40528 -40.706558,15.90239 c -2.948156,18.16379 0.05742,34.31077 8.566402,47.3046 l -7.438306,22.73763 18.798853,-9.90998 c 5.772204,4.86637 12.68201,8.97564 20.779609,12.15481 31.96374,-12.54919 46.08489,-39.15399 40.70708,-72.28706 z m 0,1.91926 38.88755,15.13603 c 4.9985,39.45937 -15.37196,59.52899 -38.88755,68.8573 -7.461219,-2.95976 -14.605741,-7.00102 -20.723799,-12.39976 l -1.849499,0.95188 -13.267924,7.37991 5.196582,-16.46463 0.704866,-2.3027 c 0.02259,0.0331 0.04422,0.065 0,-5.2e-4 -0.02016,-0.0296 -0.04036,-0.0594 -0.01292,-0.0196 -7.707836,-11.18647 -11.48502,-25.8661 -8.934338,-46.00184 z m 5.2e-4,2.85151 -36.245852,14.11438 c -4.788427,29.4077 7.785188,53.02119 36.245852,64.15939 28.46066,-11.1382 41.03376,-34.75169 36.24533,-64.15939 z m 0,1.70377 34.62527,13.43381 c 4.45069,35.0227 -13.68688,52.83618 -34.62527,61.11564 -20.938395,-8.27946 -39.076477,-26.09294 -34.625796,-61.11564 z" /></g></g></svg>

apps/tauri/package.json

@@ -25,12 +25,12 @@
     "dev:mobile:raw": "tauri android dev",
     "build:mobile:raw": "tauri android build",
     "dev:mobile": "if command -v nix >/dev/null 2>&1; then nix develop --command bun dev:mobile:raw; else bun dev:mobile:raw; fi",
-    "build:mobile": "if command -v nix >/dev/null 2>&1; then nix develop --command bun build:mobile:raw; else bun build:mobile:raw; fi",
+    "build:mobile": "bun run render-version.ts && if command -v nix >/dev/null 2>&1; then nix develop --command bun build:mobile:raw; else bun build:mobile:raw; fi && bun run render-version.ts --unrender",
     "dev:desktop:raw": "tauri dev",
     "build:desktop:raw": "tauri build",
     "dev:desktop": "if command -v nix >/dev/null 2>&1; then nix develop --command bun dev:desktop:raw; else bun dev:desktop:raw; fi",
     "build:desktop": "if command -v nix >/dev/null 2>&1; then nix develop --command bun build:desktop:raw; else bun build:desktop:raw; fi",
-    "gen-icons": "tauri icon ./logo.png",
+    "gen-icons": "tauri icon ./logo.svg",
     "format": "bunx prettier --write .",
     "lint": "eslint src"
   },
@@ -46,6 +46,7 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^2"
+    "@tauri-apps/cli": "^2",
+    "@types/node": "^25.9.1"
   }
 }

apps/tauri/render-version.ts

@@ -0,0 +1,75 @@
+import fs from "fs";
+import path from "path";
+
+// Config
+const PLACEHOLDER_VERSION = "0.0.0";
+
+const rootPackageJsonPath = path.resolve(__dirname, "../../package.json");
+const cargoTomlPath = path.resolve(__dirname, "./src-tauri/Cargo.toml");
+const tauriConfigPath = path.resolve(__dirname, "./src-tauri/tauri.conf.json");
+
+// Args
+const isUnrender = process.argv.includes("--unrender");
+
+// Version Source
+const packageJson = JSON.parse(
+  fs.readFileSync(rootPackageJsonPath, "utf8")
+);
+
+const packageVersion: string = packageJson.version;
+
+if (!packageVersion && !isUnrender) {
+  throw new Error("No version found in package.json");
+}
+
+const targetVersion = isUnrender
+  ? PLACEHOLDER_VERSION
+  : packageVersion;
+
+// Helpers
+function updateCargoToml(content: string): string {
+  const regex = /^version\s*=\s*".*"$/m;
+
+  if (!regex.test(content)) {
+    throw new Error("Could not find version field in Cargo.toml");
+  }
+
+  return content.replace(
+    regex,
+    `version = "${targetVersion}"`
+  );
+}
+
+function updateTauriConfig(content: string): string {
+  const regex = /"version"\s*:\s*".*"/;
+
+  if (!regex.test(content)) {
+    throw new Error("Could not find version field in tauri.conf.json");
+  }
+
+  return content.replace(
+    regex,
+    `"version": "${targetVersion}"`
+  );
+}
+
+// Update Cargo.toml
+const cargoToml = fs.readFileSync(cargoTomlPath, "utf8");
+
+const updatedCargoToml = updateCargoToml(cargoToml);
+
+fs.writeFileSync(cargoTomlPath, updatedCargoToml, "utf8");
+
+// Update tauri.conf.json
+const tauriConfig = fs.readFileSync(tauriConfigPath, "utf8");
+
+const updatedTauriConfig = updateTauriConfig(tauriConfig);
+
+fs.writeFileSync(tauriConfigPath, updatedTauriConfig, "utf8");
+
+// Finished
+if (isUnrender) {
+  console.log(`Unrendered versions back to ${PLACEHOLDER_VERSION}`);
+} else {
+  console.log(`Rendered version ${targetVersion}`);
+}

apps/tauri/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
-name = "tensamin"
-version = "0.1.0"
+name = "Tensamin"
+version = "0.0.0"
 description = "Privacy focused messanger"
 authors = ["methanium"]
 edition = "2021"

apps/tauri/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Tensamin",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "mainBinaryName": "tensamin",
   "identifier": "net.tensamin.client",
   "build": {

apps/tauri/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["node"],
     "target": "ES2022",
     "module": "ESNext",
     "moduleResolution": "bundler",
@@ -8,5 +9,5 @@
     "skipLibCheck": true,
     "noEmit": true
   },
-  "include": ["src"]
+  "include": ["src", "./render-version.ts"]
 }

apps/web/src/components/navbar.tsx

@@ -1,5 +1,12 @@
 import { Button } from "@tensamin/ui";
-import { ArrowLeft, House, Phone, Settings, User } from "lucide-react";
+import {
+  ArrowLeft,
+  ChevronDown,
+  House,
+  Phone,
+  Settings,
+  User,
+} from "lucide-react";
 import { useLocation, useNavigate, useSearch } from "@tanstack/react-router";
 import { joinCall, useCall } from "@tensamin/call/store";
 import Wrapper from "@tensamin/user/wrapper";
@@ -62,7 +69,16 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
           <Wrapper
             userId={id}
             component={(user) => (
-              <p className="font-medium text-md">{user?.display}</p>
+              <Button
+                variant="link"
+                className="px-0! text-foreground"
+                style={{
+                  textDecorationLine: "none",
+                }}
+              >
+                <p className="font-medium text-md">{user?.display}</p>
+                <ChevronDown />
+              </Button>
             )}
             loading={<Skeleton className="ml-3 w-40 h-5" />}
           />

apps/web/src/components/screens/login/form.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@tensamin/ui";
+import { Button, cn } from "@tensamin/ui";
 import { Input } from "@tensamin/ui";
 import { Label } from "@tensamin/ui";
 import { useStorage } from "@tensamin/storage/context";
@@ -83,25 +83,18 @@ function parseTuFileContent(rawFileContent: string): {
   return { userId, privateKey, domain };
 }
 
-/**
- * Renders the login form for file upload and manual credential login.
- * @returns Login form JSX.
- */
 export default function Form() {
   const uploadRef = React.useRef<HTMLInputElement | null>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
   const { save } = useStorage();
 
-  /**
-   * Handles uploaded .tu files and stores resolved credentials.
-   * @param event Change event from the hidden file input.
-   * @returns Promise that resolves when processing has finished.
-   */
-  const handleFileInputChange = React.useCallback(
-    async (event: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+  // Process dropped files
+  const processDroppedFile = React.useCallback(
+    async (file: globalThis.File): Promise<void> => {
       try {
-        const file = event.currentTarget.files?.[0];
-        if (!file) {
-          throw new Error("No file selected");
+        if (!file.name.endsWith(".tu")) {
+          toast("error", "Please upload a .tu file");
+          return;
         }
 
         const raw = await file.text();
@@ -123,13 +116,94 @@ export default function Form() {
     [save],
   );
 
+  // Handle .tu files
+  const handleFileInputChange = React.useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+      const file = event.currentTarget.files?.[0];
+
+      if (!file) {
+        toast("error", "No file selected");
+        return;
+      }
+
+      await processDroppedFile(file);
+    },
+    [processDroppedFile],
+  );
+
+  // Drag and drop listener
+  React.useEffect(() => {
+    let dragCounter = 0;
+
+    const handleDragEnter = (event: DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      dragCounter++;
+
+      if (event.dataTransfer?.items?.length) {
+        setIsDragging(true);
+      }
+    };
+
+    const handleDragLeave = (event: DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      dragCounter--;
+
+      if (dragCounter <= 0) {
+        setIsDragging(false);
+      }
+    };
+
+    const handleDragOver = (event: DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+    };
+
+    const handleDrop = async (event: DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      dragCounter = 0;
+
+      setIsDragging(false);
+
+      const file = event.dataTransfer?.files?.[0];
+
+      if (!file) {
+        toast("error", "No file dropped");
+        return;
+      }
+
+      await processDroppedFile(file);
+    };
+
+    window.addEventListener("dragenter", handleDragEnter);
+    window.addEventListener("dragleave", handleDragLeave);
+    window.addEventListener("dragover", handleDragOver);
+    window.addEventListener("drop", handleDrop);
+
+    return () => {
+      window.removeEventListener("dragenter", handleDragEnter);
+      window.removeEventListener("dragleave", handleDragLeave);
+      window.removeEventListener("dragover", handleDragOver);
+      window.removeEventListener("drop", handleDrop);
+    };
+  }, [processDroppedFile]);
+
   /**
    * Handles username and private key login submission.
    * @param event Form submit event.
    * @returns Promise that resolves after login processing.
    */
   const handleCredentialsSubmit = React.useCallback(
-    async (event: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
+    async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
       event.preventDefault();
 
       const formData = new FormData(event.currentTarget);
@@ -190,34 +264,35 @@ export default function Form() {
     [save],
   );
 
-  const isTauriEnv = isTauri();
-
   return (
-    <div className="flex md:flex-row flex-col gap-15">
-      {isTauriEnv ? (
+    <div className="relative flex md:flex-row flex-col gap-15">
+      {isTauri() ? (
         <>
           <QrCodeScanner
             onData={async (data) => {
               if (!data.startsWith("tensamin://tu::")) {
                 toast("error", "Invalid QR code");
                 return;
-              } else {
-                const decoded = data.replace("tensamin://tu::", "");
+              }
 
-                try {
-                  const { userId, privateKey, domain } =
-                    parseTuFileContent(decoded);
-                  await save("session_id", Date.now());
-                  await save("user_id", userId);
-                  await save("private_key", privateKey);
-                  if (domain) {
-                    await save("ttp_url", `https://${domain}/`);
-                  }
-                  location.href = "/";
-                } catch (error) {
-                  log(0, "login", "red", error);
-                  toast("error", "Failed to parse QR code data");
+              const decoded = data.replace("tensamin://tu::", "");
+
+              try {
+                const { userId, privateKey, domain } =
+                  parseTuFileContent(decoded);
+
+                await save("session_id", Date.now());
+                await save("user_id", userId);
+                await save("private_key", privateKey);
+
+                if (domain) {
+                  await save("ttp_url", `https://${domain}/`);
                 }
+
+                location.href = "/";
+              } catch (error) {
+                log(0, "login", "red", error);
+                toast("error", "Failed to parse QR code data");
               }
             }}
           />
@@ -228,10 +303,30 @@ export default function Form() {
       ) : (
         <div
           onClick={() => uploadRef.current?.click()}
-          className="flex flex-col gap-3 cursor-pointer w-55 aspect-square bg-input/13 hover:bg-input/30 transition-all duration-300 ease-in-out border-3 items-center justify-center rounded-lg"
+          className={cn(
+            "flex flex-col gap-3 cursor-pointer w-55 aspect-square",
+            "border-3 items-center justify-center rounded-lg",
+            "transition-all duration-300 ease-in-out",
+            "border-input",
+            "bg-input/13 hover:bg-input/30",
+            isDragging ? "animate-wiggle" : "",
+          )}
         >
-          <File className="text-foreground" size={27} />
-          <p className="text-md">Select .tu file</p>
+          <File
+            className={["transition-all duration-300 text-foreground"].join(
+              " ",
+            )}
+            size={27}
+          />
+
+          <p
+            className={[
+              "text-md transition-all duration-300",
+              isDragging ? "font-medium" : "",
+            ].join(" ")}
+          >
+            Select .tu file
+          </p>
         </div>
       )}
       <input

apps/web/src/features/settings/components.tsx

@@ -36,7 +36,7 @@ export function Switch({
   label,
   id,
 }: {
-  label: string;
+  label: React.ReactNode;
   id: keyof typeof settingsStorageDefaults & BooleanStorageKey;
 }) {
   const { save, load } = useStorage();

apps/web/src/index.css

@@ -6,6 +6,20 @@
 @source "./**/*.{ts,tsx}";
 @source "../../../packages/**/src/**/*.{ts,tsx}";
 
+@theme {
+  --animate-wiggle: wiggle 0.5s ease-in-out infinite;
+
+  @keyframes wiggle {
+    0%,
+    100% {
+      transform: rotate(-2deg);
+    }
+    50% {
+      transform: rotate(2deg);
+    }
+  }
+}
+
 html,
 body,
 #root {
@@ -17,3 +31,32 @@ body,
 #root {
   min-height: 0;
 }
+
+@layer base {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    opacity: 0.8;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}

apps/web/src/routes/settings/chat.tsx

@@ -1,12 +1,30 @@
 import { Switch } from "@/features/settings/components";
+import { Kbd } from "@tensamin/ui";
 
 export default function Page() {
   return (
-    <div>
+    <div className="flex flex-col gap-2">
       <Switch
-        label="Reverse Enter Key Behavior"
+        label={
+          <p>
+            Change <Kbd>Enter</Kbd> behavior to <Kbd>Shift</Kbd> +{" "}
+            <Kbd>Enter</Kbd>
+          </p>
+        }
         id="settings.reverse_enter_behavior"
       />
+      <Switch
+        label="Enable read confirmations"
+        id="settings.read_confirmations"
+      />
+      <Switch
+        label="Enable receive confirmations"
+        id="settings.receive_confirmations"
+      />
+      <Switch
+        label="Sidebar message preview"
+        id="settings.show_start_of_last_message_in_sidebar"
+      />
     </div>
   );
 }

apps/web/src/routes/settings/security.tsx

@@ -46,6 +46,7 @@ function QrCodeLogin() {
   const [qrCodeBase64, setQrCodeBase64] = useState<string | undefined>(
     undefined,
   );
+  const [connectionString, setConnectionString] = useState<string | null>(null);
 
   useEffect(() => {
     load("private_key").then((value) => {
@@ -58,15 +59,25 @@ function QrCodeLogin() {
         setUserId(value);
       }
     });
+    load("ttp_url")
+      .then((value) => {
+        if (value) {
+          const url = new URL(value);
+          setConnectionString(`@${url.host}`);
+        } else {
+          setConnectionString("");
+        }
+      })
+      .catch(() => setConnectionString(""));
   }, [load]);
 
   useEffect(() => {
-    if (userId && privateKey) {
-      generateQR(`tensamin://tu::${userId}::${privateKey}`).then(
-        setQrCodeBase64,
-      );
+    if (userId && privateKey && connectionString !== null) {
+      generateQR(
+        `tensamin://tu::${userId}${connectionString}::${privateKey}`,
+      ).then(setQrCodeBase64);
     }
-  }, [userId, privateKey]);
+  }, [userId, privateKey, connectionString]);
 
   const [qrCodeVisible, setQrCodeVisible] = useState(false);
 

bun.lock

@@ -40,6 +40,7 @@
       },
       "devDependencies": {
         "@tauri-apps/cli": "^2",
+        "@types/node": "^25.9.1",
       },
     },
     "apps/web": {
@@ -1661,6 +1662,8 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@tensamin/tauri/@types/node": ["@types/node@25.9.1", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg=="],
+
     "@tensamin/ui/recharts": ["recharts@3.8.0", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ=="],
 
     "@tensamin/ui/shadcn": ["shadcn@3.8.5", "", { "dependencies": { "@antfu/ni": "^25.0.0", "@babel/core": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/plugin-transform-typescript": "^7.28.0", "@babel/preset-typescript": "^7.27.1", "@dotenvx/dotenvx": "^1.48.4", "@modelcontextprotocol/sdk": "^1.26.0", "@types/validate-npm-package-name": "^4.0.2", "browserslist": "^4.26.2", "commander": "^14.0.0", "cosmiconfig": "^9.0.0", "dedent": "^1.6.0", "deepmerge": "^4.3.1", "diff": "^8.0.2", "execa": "^9.6.0", "fast-glob": "^3.3.3", "fs-extra": "^11.3.1", "fuzzysort": "^3.1.0", "https-proxy-agent": "^7.0.6", "kleur": "^4.1.5", "msw": "^2.10.4", "node-fetch": "^3.3.2", "open": "^11.0.0", "ora": "^8.2.0", "postcss": "^8.5.6", "postcss-selector-parser": "^7.1.0", "prompts": "^2.4.2", "recast": "^0.23.11", "stringify-object": "^5.0.0", "tailwind-merge": "^3.0.1", "ts-morph": "^26.0.0", "tsconfig-paths": "^4.2.0", "validate-npm-package-name": "^7.0.1", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.6" }, "bin": { "shadcn": "dist/index.js" } }, "sha512-jPRx44e+eyeV7xwY3BLJXcfrks00+M0h5BGB9l6DdcBW4BpAj4x3lVmVy0TXPEs2iHEisxejr62sZAAw6B1EVA=="],
@@ -1721,6 +1724,8 @@
 
     "@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
 
+    "@tensamin/tauri/@types/node/undici-types": ["undici-types@7.24.6", "", {}, "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg=="],
+
     "@tensamin/ui/shadcn/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
     "ajv-formats/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tensamin",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "workspaces": [
     "packages/*",

packages/call/src/components/sidebarBox.tsx

@@ -1,5 +1,5 @@
 import { Lock, LockOpen } from "lucide-react";
-import { openCallPage, useCall } from "../store";
+import { openCallPage, useCall, getRoom } from "../store";
 import {
   Button,
   Card,
@@ -78,7 +78,7 @@ function ConnectionBar() {
 }
 
 export function TinyPingGraph() {
-  const room = useCall((store) => store.room);
+  const room = getRoom();
 
   const [mapData, setMapData] = useState<Map<number, number>>(() => new Map());
 

packages/call/src/components/top.tsx

@@ -1,5 +1,5 @@
 import { useUser, type User } from "@tensamin/user/context";
-import { useCall } from "../store";
+import { useCall, getRoom } from "../store";
 import { useEffect, useState } from "react";
 import { useStorage } from "@tensamin/storage/context";
 import {
@@ -14,7 +14,7 @@ import {
 export default function TopBar() {
   const { get } = useUser();
   const { load } = useStorage();
-  const room = useCall((state) => state.room);
+  const room = getRoom();
   const screenRef = useCall((state) => state.screenRef);
   const [portalContainer, setPortalContainer] = useState<HTMLElement>();
 

packages/call/src/components/videoViewer.tsx

@@ -1,6 +1,6 @@
 import { VideoTrack, useParticipantTracks } from "@livekit/components-react";
 import { TrackPublication } from "livekit-client";
-import { useCall } from "../store";
+import { getRoom } from "../store";
 import { cn } from "@tensamin/ui";
 import { Loader2 } from "lucide-react";
 
@@ -17,7 +17,7 @@ export default function VideoViewer({
   publication: TrackPublication;
   participantId: string;
 }) {
-  const room = useCall((state) => state.room);
+  const room = getRoom();
   const tracks = useParticipantTracks([publication.source], {
     participantIdentity: participantId,
     room,

packages/call/src/store.tsx

@@ -101,27 +101,46 @@ type CallStore = {
   callIsPopout: boolean;
   layoutVersion: number;
   screenRef: React.RefObject<HTMLDivElement | null> | null;
-  room: Room;
-  keyProvider: ExternalE2EEKeyProvider;
-  e2eeWorker: Worker;
   runtime: Runtime | null;
   speakingParticipantIds: Set<number>;
   micGated: boolean;
 };
 
-const keyProvider = new ExternalE2EEKeyProvider();
-const e2eeWorker = new Worker(
-  new URL("livekit-client/e2ee-worker", import.meta.url),
-);
-const room = new Room({
-  dynacast: true,
-  adaptiveStream: true,
-  loggerName: "tensamin",
-  encryption: {
-    keyProvider,
-    worker: e2eeWorker,
-  },
-});
+let _keyProvider: ExternalE2EEKeyProvider | null = null;
+let _e2eeWorker: Worker | null = null;
+let _room: Room | null = null;
+
+function getKeyProvider(): ExternalE2EEKeyProvider {
+  if (!_keyProvider) {
+    _keyProvider = new ExternalE2EEKeyProvider();
+  }
+  return _keyProvider;
+}
+
+function getE2EEWorker(): Worker {
+  if (!_e2eeWorker) {
+    _e2eeWorker = new Worker(
+      new URL("livekit-client/e2ee-worker", import.meta.url),
+    );
+  }
+  return _e2eeWorker;
+}
+
+export function getRoom(): Room {
+  if (!_room) {
+    _room = new Room({
+      dynacast: true,
+      adaptiveStream: true,
+      loggerName: "tensamin",
+      encryption: {
+        keyProvider: getKeyProvider(),
+        worker: getE2EEWorker(),
+      },
+    });
+  }
+  return _room;
+}
+
 const remoteAudioElements = new Map<string, HTMLMediaElement>();
 
 const SCREEN_SHARE_PREVIEW_MAX_WIDTH = 320;
@@ -170,6 +189,7 @@ export function getParticipantId(identity: string | undefined): number | null {
 }
 
 function getAllParticipants(): Participant[] {
+  const room = getRoom();
   return [...room.remoteParticipants.values(), room.localParticipant];
 }
 
@@ -187,7 +207,7 @@ function getTrackPublicationBySource(
 }
 
 function getRemoteParticipant(participantId: number) {
-  return [...room.remoteParticipants.values()].find(
+  return [...getRoom().remoteParticipants.values()].find(
     (participant) => getParticipantId(participant.identity) === participantId,
   );
 }
@@ -215,7 +235,7 @@ function syncRemoteParticipantTrackSubscriptions(participantId: number) {
 }
 
 function syncAllRemoteTrackSubscriptions() {
-  for (const participant of room.remoteParticipants.values()) {
+  for (const participant of getRoom().remoteParticipants.values()) {
     const participantId = getParticipantId(participant.identity);
 
     if (participantId != null) {
@@ -256,7 +276,7 @@ function hasParticipant(participantId: number) {
 
 function getLocalScreenShareTrack(): MediaStreamTrack | null {
   const track = getTrackPublicationBySource(
-    room.localParticipant,
+    getRoom().localParticipant,
     Track.Source.ScreenShare,
   )?.track;
 
@@ -275,7 +295,7 @@ async function updateLocalParticipantAttributes(
     screenSharePreviewLength: attributes.screenSharePreview?.length ?? 0,
   });
 
-  await room.localParticipant.setAttributes(attributes).catch((error) => {
+  await getRoom().localParticipant.setAttributes(attributes).catch((error) => {
     log(1, "call", "red", "Failed to update local participant attributes", {
       attributes: Object.keys(attributes),
       error,
@@ -487,7 +507,7 @@ function requireRuntime(runtime: Runtime | null): Runtime {
 }
 
 export function getRoomMetadata() {
-  const roomMetadata = room.metadata;
+  const roomMetadata = getRoom().metadata;
   try {
     const data = JSON.parse(roomMetadata || '{"admins": []}');
     return data as { admins: number[] };
@@ -498,7 +518,8 @@ export function getRoomMetadata() {
 
 // Sync local participant flags and screen-share derived state for the active call UI.
 export function syncParticipantState() {
-  const { room, screenShareSession } = useCall.getState();
+  const { screenShareSession } = useCall.getState();
+  const room = getRoom();
 
   useCall.setState({
     micEnabled: room.localParticipant.isMicrophoneEnabled,
@@ -721,7 +742,7 @@ let screenShareController: ReturnType<
 function getScreenShareController() {
   if (!screenShareController) {
     screenShareController = createScreenShareController({
-      room,
+      room: getRoom(),
       getState: () => ({
         screenShareSession: useCall.getState().screenShareSession,
       }),
@@ -733,7 +754,7 @@ function getScreenShareController() {
         );
       },
       getLocalParticipantId: () =>
-        getParticipantId(room.localParticipant.identity),
+        getParticipantId(getRoom().localParticipant.identity),
       startWatching: startWatchingStream,
       stopWatching: stopWatchingStream,
       syncParticipantState,
@@ -758,7 +779,7 @@ export async function connect(callId: string) {
     callSecret: useCall.getState().callSecret,
   });
 
-  await room
+  await getRoom()
     .connect("wss://call.tensamin.net", token, {
       autoSubscribe: false,
     })
@@ -774,7 +795,7 @@ export async function connect(callId: string) {
 
   syncAllRemoteTrackSubscriptions();
 
-  await room.localParticipant.setMicrophoneEnabled(true).catch((error) => {
+  await getRoom().localParticipant.setMicrophoneEnabled(true).catch((error) => {
     log(1, "call", "red", "Failed to enable microphone", error);
     toast("error", "Failed to enable microphone.");
     throw error;
@@ -819,12 +840,12 @@ export async function disconnect() {
     micGated: false,
   });
 
-  room.remoteParticipants.forEach((participant) => {
+  getRoom().remoteParticipants.forEach((participant) => {
     participant.setVolume(1);
   });
 
   try {
-    await room.disconnect();
+    await getRoom().disconnect();
   } catch (error) {
     log(1, "call", "red", "Failed to disconnect from room", error);
   } finally {
@@ -867,8 +888,8 @@ export async function joinCall(
         callSecret,
       );
 
-      await keyProvider.setKey(decryptedSecret);
-      await room.setE2EEEnabled(true);
+      await getKeyProvider().setKey(decryptedSecret);
+      await getRoom().setE2EEEnabled(true);
       useCall.setState({ callSecret: decryptedSecret });
     } catch (err) {
       log(1, "call", "red", "Failed getting call secret", err);
@@ -878,8 +899,8 @@ export async function joinCall(
   } else {
     const random = crypto.randomUUID();
 
-    await keyProvider.setKey(random);
-    await room.setE2EEEnabled(true);
+    await getKeyProvider().setKey(random);
+    await getRoom().setE2EEEnabled(true);
     useCall.setState({ callSecret: random });
   }
 
@@ -898,11 +919,11 @@ export async function joinCall(
 export async function toggleDeaf() {
   const nextDeaf = !useCall.getState().deaf;
 
-  room.remoteParticipants.forEach((participant) => {
+  getRoom().remoteParticipants.forEach((participant) => {
     participant.setVolume(nextDeaf ? 0 : 1);
   });
 
-  if (nextDeaf && room.localParticipant.isMicrophoneEnabled) {
+  if (nextDeaf && getRoom().localParticipant.isMicrophoneEnabled) {
     await toggleMute();
   }
 
@@ -922,7 +943,7 @@ export async function toggleMute() {
     await toggleDeaf();
   }
 
-  await room.localParticipant.setMicrophoneEnabled(!micEnabled);
+  await getRoom().localParticipant.setMicrophoneEnabled(!micEnabled);
   syncParticipantState();
 }
 
@@ -986,7 +1007,7 @@ export function resetCallState() {
 async function ensureNoiseFilter(
   noiseFilter: DeepFilterNoiseFilterProcessor,
 ): Promise<void> {
-  const microphoneTrack = room.localParticipant.getTrackPublication(
+  const microphoneTrack = getRoom().localParticipant.getTrackPublication(
     Track.Source.Microphone,
   )?.track;
 
@@ -1001,7 +1022,7 @@ async function ensureNoiseFilter(
     log(1, "call", "red", "Failed to enable noise filter", err);
   });
 
-  const participantId = getParticipantId(room.localParticipant.identity);
+  const participantId = getParticipantId(getRoom().localParticipant.identity);
   if (participantId != null) {
     const processedTrack = microphoneTrack.mediaStreamTrack;
     getSpeakingDetector().addTrack(
@@ -1021,8 +1042,8 @@ export const useCall = create<CallStore>(() => ({
   livekitToken: null,
   currentCallData: null,
   deaf: false,
-  micEnabled: room.localParticipant.isMicrophoneEnabled,
-  screenShareEnabled: room.localParticipant.isScreenShareEnabled,
+  micEnabled: false,
+  screenShareEnabled: false,
   screenShareSession: null,
   focusedParticipantId: null,
   focusedParticipantType: null,
@@ -1030,15 +1051,11 @@ export const useCall = create<CallStore>(() => ({
   watchedStreamParticipantIds: [],
   pendingWatchedParticipantIds: [],
   activeScreenShareParticipantIds: [],
-  isEncrypted:
-    room.localParticipant.isE2EEEnabled && room.localParticipant.isEncrypted,
+  isEncrypted: false,
   callIsFullscreen: false,
   callIsPopout: false,
   layoutVersion: 0,
   screenRef: null,
-  room,
-  keyProvider,
-  e2eeWorker,
   runtime: null,
   speakingParticipantIds: new Set(),
   micGated: false,
@@ -1384,6 +1401,7 @@ export function useInitializeCall() {
       syncParticipantState();
     };
 
+    const room = getRoom();
     room.on(RoomEvent.Connected, onConnected);
     room.on(RoomEvent.Reconnected, onConnected);
     room.on(RoomEvent.Disconnected, onDisconnected);
@@ -1424,7 +1442,7 @@ export function useInitializeCall() {
       clearRemoteAudio();
       listenersRegistered.current = false;
       room.disconnect();
-      e2eeWorker.terminate();
+      if (_e2eeWorker) _e2eeWorker.terminate();
     };
   }, [noiseFilter, load]);
 

packages/call/src/views/main/focused.tsx

@@ -1,13 +1,13 @@
 import { RoomEvent } from "livekit-client";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useCall } from "../../store";
+import { useCall, getRoom } from "../../store";
 import Base from "../../components/modals/base";
 
 const SECONDARY_ROW_HEIGHT_PX = 180;
 const STACK_GAP_PX = 12;
 
 export default function View() {
-  const room = useCall((state) => state.room);
+  const room = getRoom();
   const layoutVersion = useCall((state) => state.layoutVersion);
 
   const usersInFocusedViewHidden = useCall(

packages/call/src/views/main/grid.tsx

@@ -1,6 +1,6 @@
 import { RoomEvent } from "livekit-client";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useCall } from "../../store";
+import { useCall, getRoom } from "../../store";
 import Base from "../../components/modals/base";
 
 const TILE_ASPECT_RATIO = 16 / 9;
@@ -82,7 +82,7 @@ function calculateOptimalGridLayout(
 }
 
 export default function View() {
-  const room = useCall((state) => state.room);
+  const room = getRoom();
   const layoutVersion = useCall((state) => state.layoutVersion);
   const activeScreenShareParticipantIds = useCall(
     (state) => state.activeScreenShareParticipantIds,

packages/chat/src/components/message.tsx

@@ -3,54 +3,98 @@ import type { RawMessage } from "../values";
 import Text from "@tensamin/markdown/text";
 import { AlertTriangle } from "lucide-react";
 
-import { cn, Tooltip, TooltipContent, TooltipTrigger } from "@tensamin/ui";
-import { useIsMobile } from "@tensamin/ui";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  cn,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@tensamin/ui";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@tensamin/ui";
+import Wrapper from "@tensamin/user/wrapper";
+import { useChat } from "../context";
 
 function MessageComponent({
+  grouped,
   message,
 }: {
+  grouped: boolean;
   message: RawMessage & {
     failed?: boolean;
   };
 }) {
-  const isMobile = useIsMobile();
+  const { userId } = useChat();
   const actuallyFailed = message.failed && message.message_state === "awaiting";
 
   return (
     <div
-      className={`w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
+      // pt-3 is to get a gap between messages
+      className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
     >
       <ContextMenu>
         <ContextMenuTrigger
           render={
             <div
               className={cn(
-                "selection-foreground flex gap-1 items-center justify-center max-w-[80%] rounded-lg px-2 py-px whitespace-pre-wrap break-all",
+                "group hover:bg-muted/50 select-text! justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
                 {
-                  "bg-(--destructive)/75 text-destructive-foreground":
+                  "bg-(--destructive)/15 text-destructive-foreground":
                     actuallyFailed,
-                  "bg-primary text-primary-foreground":
-                    !actuallyFailed && message.sent_by_self,
-                  "bg-muted": !message.sent_by_self,
-                  "select-none": isMobile,
                 },
               )}
             >
-              {message.failed && message.message_state === "awaiting" && (
-                <Tooltip>
-                  <TooltipContent>
-                    <p>Failed to send message</p>
-                  </TooltipContent>
-                  <TooltipTrigger render={<AlertTriangle size={17} />} />
-                </Tooltip>
-              )}
-              <Text value={message.content} />
+              <Wrapper
+                loading={"State not achievable"}
+                userId={message.sent_by_self ? "own" : userId}
+                component={(user) => (
+                  <>
+                    {grouped ? (
+                      <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
+                        {new Date(message.send_time).toLocaleString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </p>
+                    ) : (
+                      <Avatar className="mr-1 mb-auto mt-1 w-10">
+                        <AvatarImage src={user.avatar} />
+                        <AvatarFallback>
+                          {user.display.slice(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                    )}
+                    {message.failed && message.message_state === "awaiting" && (
+                      <Tooltip>
+                        <TooltipContent>
+                          <p>Failed to send message</p>
+                        </TooltipContent>
+                        <TooltipTrigger render={<AlertTriangle size={17} />} />
+                      </Tooltip>
+                    )}
+                    <div className="flex flex-col">
+                      {!grouped && (
+                        <div className="flex items-center gap-1">
+                          <p className="font-medium">{user.display}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {new Date(message.send_time).toLocaleString([], {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })}
+                          </p>
+                        </div>
+                      )}
+                      <Text value={message.content} />
+                    </div>
+                  </>
+                )}
+              />
             </div>
           }
         />

packages/chat/src/screen.tsx

@@ -435,10 +435,10 @@ export default function Screen() {
       <div
         ref={scrollRef}
         id="chat_container"
-        className="min-h-0 flex-1 overflow-y-auto px-2.5"
+        className="min-h-0 flex-1 overflow-y-auto"
         style={{
           overflowAnchor: "none",
-          paddingBottom: "8px",
+          paddingBottom: "22px",
         }}
         onScroll={handleContainerScroll}
       >
@@ -461,12 +461,11 @@ export default function Screen() {
                     left: 0,
                     width: "100%",
                     transform: `translateY(${virtualRow.start + verticalOffset}px)`,
-                    padding: "4px 0",
                   }}
                 >
                   <div className="w-full flex justify-start">
-                    <div className="max-w-[80%] rounded-lg bg-muted px-2 py-px text-sm text-foreground/55 whitespace-pre-wrap break-all">
-                      This is the start of your conversation with{" "}
+                    <div className="text-sm text-foreground/55 px-2.5">
+                      Conversation start
                     </div>
                   </div>
                 </div>
@@ -481,6 +480,13 @@ export default function Screen() {
               return null;
             }
 
+            const lastMessage = messages[messageIndex - 1];
+            const isGrouped =
+              lastMessage &&
+              lastMessage.sent_by_self === message.sent_by_self &&
+              Math.round(lastMessage.send_time / 10000) ===
+                Math.round(message.send_time / 10000);
+
             return (
               <div
                 key={message.send_time}
@@ -492,10 +498,9 @@ export default function Screen() {
                   left: 0,
                   width: "100%",
                   transform: `translateY(${virtualRow.start + verticalOffset}px)`,
-                  padding: "4px 0",
                 }}
               >
-                <Message message={message} />
+                <Message grouped={isGrouped} message={message} />
               </div>
             );
           })}
@@ -509,17 +514,25 @@ export default function Screen() {
         className="pointer-events-none absolute left-0 top-0 -z-10 overflow-hidden opacity-0"
         style={{ width: scrollWidth > 0 ? `${scrollWidth}px` : "100%" }}
       >
-        {messages.map((message) => (
-          <div
-            key={`measure-${message.send_time}`}
-            ref={(element) => {
-              setMeasurementRef(message.send_time, element);
-            }}
-            style={{ padding: "4px 0" }}
-          >
-            <Message message={message} />
-          </div>
-        ))}
+        {messages.map((message, messageIndex) => {
+          const lastMessage = messages[messageIndex - 1];
+          const isGrouped =
+            lastMessage &&
+            lastMessage.sent_by_self === message.sent_by_self &&
+            Math.round(lastMessage.send_time / 10000) ===
+              Math.round(message.send_time / 10000);
+
+          return (
+            <div
+              key={`measure-${message.send_time}`}
+              ref={(element) => {
+                setMeasurementRef(message.send_time, element);
+              }}
+            >
+              <Message grouped={isGrouped} message={message} />
+            </div>
+          );
+        })}
       </div>
     </div>
   );

packages/markdown/src/markdown.tsx

@@ -560,7 +560,7 @@ export function renderBlocks(blocks: MarkdownBlock[]): React.ReactElement {
         }
 
         return (
-          <p key={blockIndex} className="tm-md-p">
+          <p key={blockIndex}>
             {block.text.split("\n").map((line, lineIndex) => (
               <React.Fragment key={lineIndex}>
                 {lineIndex > 0 ? <br /> : null}
@@ -645,7 +645,6 @@ export const markdownStyles = `
 .tm-md-h4 { font-size: 1.1rem; }
 .tm-md-h5 { font-size: 1rem; }
 .tm-md-h6 { font-size: 0.95rem; opacity: 0.9; }
-.tm-md-p { margin: 0.25rem 0; }
 .tm-md-blockquote { margin: 0.45rem 0; padding-left: 0.75rem; opacity: 0.95; }
 .tm-md-blockquote p { margin: 0.2rem 0; }
 .tm-md-pre { margin: 0.45rem 0; padding: 0.65rem 0.75rem; border-radius: 0.5rem; background: hsl(var(--muted)); overflow-x: auto; }

packages/notifications/src/context.tsx

@@ -23,7 +23,7 @@ function reduceDisplay(display: string) {
 }
 
 export default function Provider(props: { children: React.ReactNode }) {
-  const { subscribePush } = useTTP();
+  const { subscribePush, send } = useTTP();
   const { load } = useStorage();
   const { get } = useUser();
   const { decryptText, getSharedSecret } = useCrypto();
@@ -49,7 +49,32 @@ export default function Provider(props: { children: React.ReactNode }) {
           message.content,
         );
 
-        console.log(userId, sender_id, userId === sender_id);
+        // Update message state
+        if (
+          (await load("settings.read_confirmations")) &&
+          userId === sender_id
+        ) {
+          await send(
+            "message_state",
+            {
+              message_state: "read",
+            },
+            {
+              id: ttpMessage.id,
+            },
+          );
+        } else {
+          await send(
+            "message_state",
+            {
+              message_state: "received",
+            },
+            {
+              id: ttpMessage.id,
+            },
+          );
+        }
+
         if (userId === sender_id) {
           addLiveMessage({
             ...message,
@@ -60,7 +85,7 @@ export default function Provider(props: { children: React.ReactNode }) {
           return;
         }
 
-        // add notification symbol to conversation cards
+        // todo: add notification symbol to conversation cards (incl. message start)
 
         moveUserIdToTop(sender_id);
 
@@ -91,6 +116,7 @@ export default function Provider(props: { children: React.ReactNode }) {
     addLiveMessage,
     userId,
     moveUserIdToTop,
+    send,
   ]);
 
   return (

packages/shared/src/data.ts

@@ -167,11 +167,17 @@ export const ttp = {
     response: z.object({}),
   },
   message_state: {
-    request: z.object({
-      chat_partner_id: z.number(),
-      send_time: z.number(),
-      message_state: message.shape.message_state,
-    }),
+    request: z
+      .object({
+        chat_partner_id: z.number(),
+        send_time: z.number(),
+        message_state: message.shape.message_state,
+      })
+      .or(
+        z.object({
+          message_state: message.shape.message_state,
+        }),
+      ),
     response: z.object({
       chat_partner_id: z.number(),
       message_state: message.shape.message_state,

packages/shared/src/settings.ts

@@ -28,6 +28,21 @@ const settings = {
         type: "boolean",
         default: false,
       },
+      read_confirmations: {
+        display: "Enable Read Confirmations",
+        type: "boolean",
+        default: true,
+      },
+      receive_confirmations: {
+        display: "Enable Receive Confirmations",
+        type: "boolean",
+        default: true,
+      },
+      show_start_of_last_message_in_sidebar: {
+        display: "Show Start of Last Message in Sidebar",
+        type: "boolean",
+        default: true,
+      },
     },
   },
   application: {
@@ -35,6 +50,7 @@ const settings = {
   },
 } as const satisfies SettingsSchema;
 
+// Assemble storage defaults
 export default settings;
 
 type BooleanSettingNames<T extends SettingsSchema> = {

packages/ttp/src/context.tsx

@@ -191,6 +191,7 @@ export function Provider(props: {
     typeof createTransportClient<Schemas>
   > | null>(null);
   const identificationStartedRef = useRef(false);
+  const identificationCancelRef = useRef(false);
 
   // Load ttp url
   const [ttpUrl, setTtpUrl] = useState<string | null>(null);
@@ -242,6 +243,23 @@ export function Provider(props: {
     return client.subscribePush(handler);
   }, []);
 
+  // Check for error_no_iota
+  useEffect(() => {
+    if (!connected) return;
+
+    return subscribePush((message) => {
+      if (message.type !== "error_no_iota") return;
+
+      identificationCancelRef.current = true;
+      setIdentified(false);
+      setIdentifying(false);
+      setError("We couldn't reach your Iota");
+      setErrorDescription(
+        "You could try to restart your Iota, check for updates or check your network connection.",
+      );
+    })
+  }, [connected, subscribePush]);
+
   useEffect(() => {
     if (!connected || !identified) {
       return;
@@ -363,6 +381,7 @@ export function Provider(props: {
               clearReconnectTimer();
               scheduleReconnectReset();
               identificationStartedRef.current = false;
+              identificationCancelRef.current = false;
               setConnected(true);
               setIdentified(false);
               setError("");
@@ -483,6 +502,11 @@ export function Provider(props: {
       return;
     }
 
+    if (identificationCancelRef.current) {
+      identificationStartedRef.current = false;
+      return;
+    }
+
     if (identificationStartedRef.current) {
       return;
     }
@@ -551,10 +575,12 @@ export function Provider(props: {
         const finalResponse = await send("challenge_response", {
           challenge: decryptedChallenge,
         }).catch((error) => {
-          setError("Identification Failed");
-          setErrorDescription(
-            "Unable to complete secure identification. Please verify your credentials and try again.",
-          );
+          if (!identificationCancelRef.current) {
+            setError("Identification Failed");
+            setErrorDescription(
+              "Unable to complete secure identification. Please verify your credentials and try again.",
+            );
+          }
           throw error;
         });
 
@@ -562,7 +588,7 @@ export function Provider(props: {
         setFreshContacts(finalResponse.data.contacts);
         setFreshCommunities(finalResponse.data.communities);
         setFreshCalls(finalResponse.data.calls);
-        if (cancelled) {
+        if (cancelled || identificationCancelRef.current) {
           return;
         }
 
@@ -574,6 +600,10 @@ export function Provider(props: {
           return;
         }
 
+        if (identificationCancelRef.current) {
+          return;
+        }
+
         if (isStopSendingError(identificationError)) {
           setError("Connection closed");
           setErrorDescription(
@@ -604,7 +634,7 @@ export function Provider(props: {
             : "Unable to complete secure identification because the transport request failed.",
         );
       } finally {
-        if (!cancelled) {
+        if (!cancelled && !identificationCancelRef.current) {
           setIdentifying(false);
         }
       }