From 251988031c81abaee0888cf92cd6a428a295133e Mon Sep 17 00:00:00 2001 From: mplorentz Date: Mon, 6 Apr 2026 13:23:32 -0400 Subject: [PATCH] incorporate page layout changes from dev and other cleanup --- ios/App/App/Info.plist | 4 +- src/app.css | 63 +--- src/app/components/VideoCallContent.svelte | 8 +- src/app/components/VoiceWidget.svelte | 2 +- src/lib/components/PageContent.svelte | 7 +- src/routes/spaces/[relay]/[h]/+page.svelte | 324 +++++++++++---------- 6 files changed, 182 insertions(+), 226 deletions(-) diff --git a/ios/App/App/Info.plist b/ios/App/App/Info.plist index e69b5747..a4078e58 100644 --- a/ios/App/App/Info.plist +++ b/ios/App/App/Info.plist @@ -25,9 +25,9 @@ LSRequiresIPhoneOS NSCameraUsageDescription - Flotilla uses the camera for video in voice rooms. + Flotilla uses the camera when you enable it in a voice room. NSMicrophoneUsageDescription - Flotilla uses the microphone for voice chat in rooms. + Flotilla uses the microphone when you enable it in a voice room. UIBackgroundModes remote-notification diff --git a/src/app.css b/src/app.css index 68376f54..201eef57 100644 --- a/src/app.css +++ b/src/app.css @@ -50,7 +50,6 @@ --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom)); --sail: var(--safe-area-inset-left, env(safe-area-inset-left)); --sair: var(--safe-area-inset-right, env(safe-area-inset-right)); - --video-call-panel-bg: #181e24; } [data-theme] { @@ -389,53 +388,6 @@ progress[value]::-webkit-progress-value { transition: width 0.5s; } -/* content width for fixed elements */ - -.cw { - @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))]; -} - -.cw-video-call-content { - @apply w-full md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))]; -} - -/* Voice: desktop split — plain CSS so / in calc is not parsed as Tailwind slash syntax */ -.cw-split-video { - width: 100%; -} - -.cw-split-chat { - width: 100%; -} - -@media (min-width: 768px) { - .cw-split-video { - left: 18.5rem; - right: auto; - width: calc((100vw - 18.5rem - var(--sair)) / 2); - max-width: none; - } - - .cw-split-chat { - left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2); - right: auto; - width: calc((100vw - 18.5rem - var(--sair)) / 2); - max-width: none; - } -} - -.cw-full { - @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))]; -} - -.cb { - @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)]; -} - -.ct { - @apply top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)]; -} - .left-content { @apply md:left-[calc(18.5rem+var(--sail))]; } @@ -449,26 +401,13 @@ body.keyboard-open .hide-on-keyboard { /* chat view */ .chat__compose { - @apply relative z-compose mb-14 flex-grow md:mb-0; + @apply relative z-compose mb-14 shrink-0 md:mb-0; } .chat__compose .chat__compose-inner { @apply min-w-0; } -.chat__compose-zone.cw-video-call-content { - @apply md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))]; -} - -@media (min-width: 768px) { - .chat__compose-zone.cw-split-chat { - left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2); - right: auto; - width: calc((100vw - 18.5rem - var(--sair)) / 2); - max-width: none; - } -} - .chat__scroll-down { @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16; } diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte index 6fda6390..b947ce03 100644 --- a/src/app/components/VideoCallContent.svelte +++ b/src/app/components/VideoCallContent.svelte @@ -152,11 +152,11 @@ const panelChrome = $derived( cx( variant === "mobile" && - "cb top-[calc(var(--sait)+6rem)] cw z-compose bg-[var(--video-call-panel-bg)] fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 pb-2 pt-1 md:hidden", + "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-base-200 px-2 pt-4 md:hidden pb-[calc(3.5rem+var(--saib))]", variant === "desktop-split" && - "cb ct cw-split-video z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex", + "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4", variant === "desktop-full" && - "cb ct cw z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex", + "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4", className, ), ) @@ -246,7 +246,7 @@
{@render videoPanelBody()}
-
+
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte index 6287f106..ec9afd81 100644 --- a/src/app/components/VoiceWidget.svelte +++ b/src/app/components/VoiceWidget.svelte @@ -123,7 +123,7 @@ const onLayoutToggle = () => { if (!showVoiceLayoutToggle) return if (isMd) { - voiceDesktopRoomPanel.update(p => (p === "split" ? "chat" : "split")) + voiceDesktopRoomPanel.update(p => (p === "split" ? "video" : "split")) } else { voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat")) } diff --git a/src/lib/components/PageContent.svelte b/src/lib/components/PageContent.svelte index 6b7f6ae2..f8d021fe 100644 --- a/src/lib/components/PageContent.svelte +++ b/src/lib/components/PageContent.svelte @@ -5,18 +5,15 @@ interface Props { element?: Element children?: Snippet - /** Desktop voice: chat occupies the right half in split view. */ - contentFrame?: "default" | "split-right" [key: string]: any } - let {children, element = $bindable(), contentFrame = "default", ...props}: Props = $props() + let {children, element = $bindable(), ...props}: Props = $props() const className = $derived( cx( props.class, - "scroll-container cb ct fixed z-feature overflow-y-auto overflow-x-hidden", - contentFrame === "split-right" ? "cw-split-chat" : "cw", + "scroll-container z-feature flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden", ), ) diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte index bf2155ba..ab728b81 100644 --- a/src/routes/spaces/[relay]/[h]/+page.svelte +++ b/src/routes/spaces/[relay]/[h]/+page.svelte @@ -77,10 +77,6 @@ isVoiceRoom && $voiceState === VoiceState.Connected && $voiceMobileRoomPanel === "video", ) - const pageContentFrame = $derived<"default" | "split-right">( - voiceConnectedHere && $voiceDesktopRoomPanel === "split" ? "split-right" : "default", - ) - const pageContentHiddenDesktopVideoOnly = $derived( voiceConnectedHere && $voiceDesktopRoomPanel === "video", ) @@ -422,157 +418,181 @@ {/snippet} - -
- {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted} -
-
-

You aren't currently a member of this room.

- {#if $membershipStatus === MembershipStatus.Pending} - - {:else} - - {/if} -
-
- {:else} - {#if loadingForward} -

- Looking for messages... -

- {/if} - {#each elements as { type, id, value, showPubkey } (id)} - {#if type === "new-messages"} -
-
-

New Messages

-
-
- {:else if type === "date"} - {value} - {:else} - {@const event = $state.snapshot(value as TrustedEvent)} - {#if event.kind === ROOM_ADD_MEMBER} - - {:else} -
- -
- {/if} - {/if} - {/each} -

- {#if loadingBackward} - Looking for messages... - {:else} - End of message history - {/if} -

- {/if} -
- - -{#if voiceConnectedHere} - - -{/if} - -{#if isVoiceRoom && $voiceState === VoiceState.Connected} - -{/if} -
-
- {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted} - - {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted} -
-

Only members are allowed to post to this room.

- {#if $membershipStatus === MembershipStatus.Pending} - - {:else} - - {/if} -
- {:else} -
- {#if parent} - - {/if} - {#if share} - - {/if} - {#if eventToEdit} - - {/if} -
- {#key eventToEdit} - - {/key} - {/if} -
- {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected} -
- -
+ "flex min-h-0 flex-1 flex-col", + voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "md:flex-row", + )}> + {#if voiceConnectedHere} +
{#if showScrollButton}