mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat: offset layout padding when connection banner is visible
This commit is contained in:
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
|
|||||||
import { useMobile } from "@/hooks/use-mobile";
|
import { useMobile } from "@/hooks/use-mobile";
|
||||||
import { apiGet } from "@/lib/api";
|
import { apiGet } from "@/lib/api";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { useConnectionStore } from "@/stores/connection-store";
|
||||||
import { Dropzone } from "../common/dropzone";
|
import { Dropzone } from "../common/dropzone";
|
||||||
import { GemLogo } from "../common/gem-logo";
|
import { GemLogo } from "../common/gem-logo";
|
||||||
import { HelpDialog } from "../help/help-dialog";
|
import { HelpDialog } from "../help/help-dialog";
|
||||||
@@ -25,6 +26,8 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
|
|||||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||||
const isMobile = useMobile();
|
const isMobile = useMobile();
|
||||||
const [customLogo, setCustomLogo] = useState(false);
|
const [customLogo, setCustomLogo] = useState(false);
|
||||||
|
const connectionStatus = useConnectionStore((s) => s.status);
|
||||||
|
const bannerVisible = connectionStatus !== "connected";
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
apiGet<{ settings: Record<string, string> }>("/v1/settings")
|
apiGet<{ settings: Record<string, string> }>("/v1/settings")
|
||||||
@@ -33,7 +36,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-background text-foreground overflow-hidden">
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex h-screen bg-background text-foreground overflow-hidden",
|
||||||
|
bannerVisible && "pt-9",
|
||||||
|
)}
|
||||||
|
>
|
||||||
{/* Desktop sidebar */}
|
{/* Desktop sidebar */}
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<Sidebar
|
<Sidebar
|
||||||
@@ -92,7 +100,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
|
|||||||
|
|
||||||
{/* Mobile top bar */}
|
{/* Mobile top bar */}
|
||||||
{isMobile && (
|
{isMobile && (
|
||||||
<div className="fixed top-0 left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-b border-border px-3 py-2 flex items-center gap-3">
|
<div
|
||||||
|
className={cn(
|
||||||
|
"fixed left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-b border-border px-3 py-2 flex items-center gap-3",
|
||||||
|
bannerVisible ? "top-9" : "top-0",
|
||||||
|
)}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setMobileSidebarOpen(true)}
|
onClick={() => setMobileSidebarOpen(true)}
|
||||||
|
|||||||
Reference in New Issue
Block a user