Display voice widget in chat rooms on mobile

src/app.css

@@ -422,6 +422,14 @@ body.keyboard-open .hide-on-keyboard {
   @apply cb cw fixed z-compose;
 }
 
+.chat__compose-zone {
+  @apply cb cw fixed z-compose;
+}
+
+.chat__compose-zone .chat__compose-inner {
+  @apply min-w-0;
+}
+
 .chat__scroll-down {
   @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -47,6 +47,8 @@
     PROTECTED,
     userSettingsValues,
   } from "@app/core/state"
+  import VoiceWidget from "@app/components/VoiceWidget.svelte"
+  import {currentVoiceSession} from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -444,52 +446,61 @@
   {/if}
 </PageContent>
 
-<div class="chat__compose bg-base-200" bind:this={chatCompose}>
+<div
-  {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+  class="chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0"
-    <!-- pass -->
+  bind:this={chatCompose}>
-  {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
+  <div class="chat__compose-inner min-w-0 flex-1">
-    <div class="bg-alt card m-4 flex flex-row items-center justify-between px-4 py-3">
+    {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
-      <p class="opacity-75">Only members are allowed to post to this room.</p>
+      <!-- pass -->
-      {#if !$room.isClosed}
+    {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
-        {#if $membershipStatus === MembershipStatus.Pending}
+      <div class="bg-alt card m-4 flex flex-row items-center justify-between px-4 py-3">
-          <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
+        <p class="opacity-75">Only members are allowed to post to this room.</p>
-            <Icon icon={ClockCircle} />
+        {#if !$room.isClosed}
-            Access Pending
+          {#if $membershipStatus === MembershipStatus.Pending}
-          </Button>
+            <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
-        {:else}
+              <Icon icon={ClockCircle} />
-          <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
+              Access Pending
-            {#if joining}
+            </Button>
-              <span class="loading loading-spinner loading-sm"></span>
+          {:else}
-            {:else}
+            <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
-              <Icon icon={Login2} />
+              {#if joining}
-            {/if}
+                <span class="loading loading-spinner loading-sm"></span>
-            Ask to Join
+              {:else}
-          </Button>
+                <Icon icon={Login2} />
+              {/if}
+              Ask to Join
+            </Button>
+          {/if}
         {/if}
-      {/if}
+      </div>
+    {:else}
+      <div>
+        {#if parent}
+          <RoomComposeParent event={parent} clear={clearParent} verb="Replying to" />
+        {/if}
+        {#if share}
+          <RoomComposeParent event={share} clear={clearShare} verb="Sharing" />
+        {/if}
+        {#if eventToEdit}
+          <RoomComposeEdit clear={clearEventToEdit} />
+        {/if}
+      </div>
+      {#key eventToEdit}
+        <RoomCompose
+          {url}
+          {h}
+          {onSubmit}
+          {onEscape}
+          {onEditPrevious}
+          content={eventToEdit?.content}
+          bind:this={compose} />
+      {/key}
+    {/if}
+  </div>
+  {#if $currentVoiceSession}
+    <div class="hide-on-keyboard flex-shrink-0 p-2 md:hidden">
+      <VoiceWidget />
     </div>
-  {:else}
-    <div>
-      {#if parent}
-        <RoomComposeParent event={parent} clear={clearParent} verb="Replying to" />
-      {/if}
-      {#if share}
-        <RoomComposeParent event={share} clear={clearShare} verb="Sharing" />
-      {/if}
-      {#if eventToEdit}
-        <RoomComposeEdit clear={clearEventToEdit} />
-      {/if}
-    </div>
-    {#key eventToEdit}
-      <RoomCompose
-        {url}
-        {h}
-        {onSubmit}
-        {onEscape}
-        {onEditPrevious}
-        content={eventToEdit?.content}
-        bind:this={compose} />
-    {/key}
   {/if}
 </div>