build mobile workspace flow

apps/web/src/hooks/use-mobile-workspace.ts

@@ -0,0 +1,35 @@
+import type { FormEvent } from "react";
+import { useState } from "react";
+
+export const useMobileWorkspace = (initialExpanded = false) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [composerValue, setComposerValue] = useState("");
+  const [expanded, setExpanded] = useState(initialExpanded);
+  const [statusMessage, setStatusMessage] = useState<string>();
+
+  const handleComposerChange = (value: string) => {
+    setComposerValue(value);
+    setStatusMessage(undefined);
+  };
+
+  const handleComposerSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const message = composerValue.trim();
+    if (!message) {
+      return;
+    }
+    setComposerValue("");
+    setStatusMessage("Added to Zopu’s queue");
+  };
+
+  return {
+    activeIndex,
+    composerValue,
+    expanded,
+    handleActiveIndexChange: setActiveIndex,
+    handleComposerChange,
+    handleComposerSubmit,
+    setExpanded,
+    statusMessage,
+  };
+};