|
|
@@ -35,6 +35,7 @@ import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/
|
|
|
import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
|
|
|
import { makeEventListener } from "@solid-primitives/event-listener"
|
|
|
import { createResizeObserver } from "@solid-primitives/resize-observer"
|
|
|
+import { createMediaQuery } from "@solid-primitives/media"
|
|
|
import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "@/components/titlebar-session-events"
|
|
|
import { useGlobal } from "@/context/global"
|
|
|
import { ServerConnection, useServer } from "@/context/server"
|
|
|
@@ -87,6 +88,10 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
|
|
|
const location = useLocation()
|
|
|
const params = useParams()
|
|
|
const useV2Titlebar = createMemo(() => settings.general.newLayoutDesigns())
|
|
|
+ const mobile = createMediaQuery("(max-width: 767px)")
|
|
|
+ const bottom = createMemo(
|
|
|
+ () => useV2Titlebar() && mobile() && settings.general.mobileTitlebarPosition() === "bottom",
|
|
|
+ )
|
|
|
|
|
|
const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
|
|
|
const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
|
|
|
@@ -98,6 +103,10 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
|
|
|
const counterZoom = () => (windows() && titlebarZoom() < 1 ? 1 / titlebarZoom() : 1)
|
|
|
const minHeight = () => {
|
|
|
const height = useV2Titlebar() ? v2TitlebarHeight : legacyTitlebarHeight
|
|
|
+ if (useV2Titlebar() && mobile()) {
|
|
|
+ const inset = bottom() ? "env(safe-area-inset-bottom, 0px)" : "env(safe-area-inset-top, 0px)"
|
|
|
+ return `calc(${height}px + ${inset})`
|
|
|
+ }
|
|
|
if (mac()) return `${height / zoom()}px`
|
|
|
if (windows()) return `${height / Math.min(titlebarZoom(), 1)}px`
|
|
|
return undefined
|
|
|
@@ -235,10 +244,13 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
|
|
|
"shrink-0 relative flex flex-row": true,
|
|
|
"h-9 bg-v2-background-bg-deep overflow-visible": useV2Titlebar(),
|
|
|
"h-10 bg-background-base overflow-hidden": !useV2Titlebar(),
|
|
|
+ "order-last": bottom(),
|
|
|
}}
|
|
|
style={{
|
|
|
"min-height": minHeight(),
|
|
|
- "padding-left": mac() ? `${84 / zoom()}px` : 0,
|
|
|
+ "padding-top": useV2Titlebar() && mobile() && !bottom() ? "env(safe-area-inset-top, 0px)" : undefined,
|
|
|
+ "padding-bottom": bottom() ? "env(safe-area-inset-bottom, 0px)" : undefined,
|
|
|
+ "padding-left": mac() && !mobile() ? `${84 / zoom()}px` : 0,
|
|
|
width: electronWindows() ? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))` : undefined,
|
|
|
"max-width": electronWindows()
|
|
|
? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))`
|
|
|
@@ -426,10 +438,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
|
|
|
|
|
|
return (
|
|
|
<div
|
|
|
- class="h-full flex-1 overflow-hidden flex flex-row items-center gap-1.5 pr-3 pt-2"
|
|
|
+ class="h-full flex-1 overflow-hidden flex flex-row items-center gap-1.5 px-2 md:pr-3"
|
|
|
classList={{
|
|
|
- "pl-2": mac(),
|
|
|
- "pl-4": !mac(),
|
|
|
+ "pt-2": !bottom(),
|
|
|
+ "pb-2": bottom(),
|
|
|
+ "md:pl-2": mac(),
|
|
|
+ "md:pl-4": !mac(),
|
|
|
}}
|
|
|
>
|
|
|
<ChannelIndicator />
|
Brendan Allan