refactor: organize desktop vs. mobile into separate folders

2026-04-29 08:42:56 -07:00
parent 3d9fe67936
commit 3a11a82cd3
194 changed files with 213 additions and 213 deletions
@@ -0,0 +1,47 @@
+import type { Human } from "@/api/types";
+import { resolveHumanDisplay } from "@/lib/humans";
+import type { ComposingUser } from "@/features/particles/stream-presence-context";
+
+interface ComposingIndicatorProps {
+  users: ComposingUser[];
+  networkHumans?: Human[];
+}
+
+/**
+ * Composing indicators pinned to the left edge, text running bottom-to-top
+ * via writing-mode so it hugs the edge without transform math issues.
+ */
+export function ComposingIndicator({
+  users,
+  networkHumans,
+}: ComposingIndicatorProps) {
+  if (users.length === 0) return null;
+
+  return (
+    <div
+      className="z-100 absolute left-2 top-1/2 z-20 flex -translate-y-1/2 flex-col gap-1.5 animate-in fade-in duration-200"
+      style={{ writingMode: "vertical-rl" }}
+    >
+      {users.map((u) => {
+        const { displayName } = resolveHumanDisplay(u.humanId, networkHumans);
+        const modeLabel = u.mode === "typing" ? "typing" : "recording";
+
+        return (
+          <div
+            key={u.humanId}
+            className="flex rotate-180 items-center gap-1.5 rounded-full bg-white/10 px-2 py-1 backdrop-blur-sm"
+          >
+            <span className="flex gap-0.5">
+              <span className="size-1 rounded-full bg-white/70 animate-bounce [animation-delay:0ms]" />
+              <span className="size-1 rounded-full bg-white/70 animate-bounce [animation-delay:150ms]" />
+              <span className="size-1 rounded-full bg-white/70 animate-bounce [animation-delay:300ms]" />
+            </span>
+            <span className="whitespace-nowrap text-[10px] text-white/50">
+              {displayName} {modeLabel}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}