feat: add Pro interface

2026-05-18 19:17:39 +02:00
parent cf9292262d
commit 98879802ae
19 changed files with 1269 additions and 58 deletions
@@ -45,6 +45,7 @@ import { NavigationRail } from "@/components/layout/navigation-rail";
 import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { useIsEmbedded } from "@/hooks/use-is-embedded";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { sanitizeOutgoingCalendarEventData } from "@/lib/calendar-event-normalization";
 import { getEventStartDate } from "@/lib/calendar-utils";
@@ -75,6 +76,7 @@ export default function CalendarPage() {
  const t = useTranslations("calendar");
  const tWebcalAction = useTranslations("calendar.webcal_action");
  const isMobile = useIsMobile();
+  const isEmbedded = useIsEmbedded();
  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
  const { client, isAuthenticated, logout, checkAuth, switchAccount, activeAccountId, isLoading: authLoading } = useAuthStore();
  const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
@@ -1217,11 +1219,11 @@ export default function CalendarPage() {
  };

  return (
-    <div className="flex flex-col h-dvh bg-background overflow-hidden pt-[env(safe-area-inset-top)]">
+    <div className={cn("flex flex-col bg-background overflow-hidden pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
      <AppTopBannerSlot />
      <div className={cn("flex flex-1 min-h-0 overflow-hidden", isMobile && "flex-col")}>
-      {/* Left Navigation Rail */}
-      {!isMobile && (
+      {/* Left Navigation Rail (hidden when embedded in Pro shell) */}
+      {!isMobile && !isEmbedded && (
        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
          <NavigationRail
            collapsed
@@ -1413,7 +1415,7 @@ export default function CalendarPage() {
      )}

      {/* Mobile Bottom Navigation */}
-      {isMobile && (
+      {isMobile && !isEmbedded && (
        <div className="shrink-0">
          <NavigationRail
            orientation="horizontal"
@@ -26,6 +26,7 @@ import { NavigationRail } from "@/components/layout/navigation-rail";
 import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { useIsEmbedded } from "@/hooks/use-is-embedded";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { useIsMobile } from "@/hooks/use-media-query";
 import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
@@ -96,6 +97,7 @@ export default function ContactsPage() {
  const hasFetched = useRef(false);
  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
  const isMobile = useIsMobile();
+  const isEmbedded = useIsEmbedded();

  // Panel resize state - sidebar (categories)
  const [sidebarWidth, setSidebarWidth] = useState(() => {
@@ -664,11 +666,11 @@ export default function ContactsPage() {
  };

  return (
-    <div className="flex flex-col h-dvh bg-background overflow-hidden pt-[env(safe-area-inset-top)]">
+    <div className={cn("flex flex-col bg-background overflow-hidden pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
      <AppTopBannerSlot />
      <div className={cn("flex flex-1 min-h-0 overflow-hidden", isMobile && "flex-col")}>
-      {/* Navigation Rail - desktop only */}
-      {!isMobile && (
+      {/* Navigation Rail - desktop only (hidden when embedded in Pro shell) */}
+      {!isMobile && !isEmbedded && (
        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
          <NavigationRail
            collapsed
@@ -818,7 +820,7 @@ export default function ContactsPage() {
          )}
        </div>

-        {isMobile && (
+        {isMobile && !isEmbedded && (
          <NavigationRail
            orientation="horizontal"
            onManageApps={handleManageApps}
@@ -16,6 +16,7 @@ import { NavigationRail } from "@/components/layout/navigation-rail";
 import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { useIsEmbedded } from "@/hooks/use-is-embedded";
 import { useIsMobile } from "@/hooks/use-media-query";
 import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
 import { usePolicyStore } from "@/stores/policy-store";
@@ -84,6 +85,7 @@ export default function FilesPage() {
  } = useFileStore();

  const isMobile = useIsMobile();
+  const isEmbedded = useIsEmbedded();
  const [folderLayout, setFolderLayout] = useState<FolderLayout>(() => loadFilesSettings().folderLayout);
  const hasFetched = useRef(false);

@@ -375,10 +377,10 @@ export default function FilesPage() {
  if (!isAuthenticated) return null;

  return (
-    <div className="flex flex-col h-dvh bg-background overflow-hidden pt-[env(safe-area-inset-top)]">
+    <div className={cn("flex flex-col bg-background overflow-hidden pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
      <AppTopBannerSlot />
      <div className="flex flex-1 min-h-0 overflow-hidden">
-      {!isMobile && (
+      {!isMobile && !isEmbedded && (
        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
          <NavigationRail
            collapsed
@@ -484,7 +486,7 @@ export default function FilesPage() {
          </div>
        </div>

-        {isMobile && (
+        {isMobile && !isEmbedded && (
          <NavigationRail
            orientation="horizontal"
            onManageApps={handleManageApps}
@@ -49,6 +49,8 @@ import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { useIdentitySync } from "@/hooks/use-identity-sync";
+import { useIsEmbedded } from "@/hooks/use-is-embedded";
+import { useProTabStore } from "@/stores/pro-tab-store";
 import { Input } from "@/components/ui/input";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { isFilePreviewable } from "@/lib/file-preview";
@@ -217,6 +219,7 @@ export default function Home() {

  // Mobile/tablet responsive hooks
  const { isMobile, isTablet } = useDeviceDetection();
+  const isEmbedded = useIsEmbedded();
  const { activeView, sidebarOpen, setSidebarOpen, setActiveView, tabletListVisible, setTabletListVisible, sidebarWidth, emailListWidth, emailListHeight, setSidebarWidth, setEmailListWidth, setEmailListHeight, persistColumnWidths, sidebarCollapsed, resetSidebarWidth, resetEmailListWidth, resetEmailListHeight } = useUIStore();
  const {
    emails,
@@ -629,6 +632,65 @@ export default function Home() {
    document.title = title;
  }, [showComposer, composerMode, selectedEmail, selectedMailbox, mailboxes, t, appName]);

+  // When this page is rendered inside the Pro shell as the Mail tab body,
+  // we hoist every "show composer" intent into its own Pro tab and reset
+  // the in-page state so the inline composer never appears in the Mail tab.
+  // This makes the Pro composer behave like Thunderbird's pop-out window.
+  useEffect(() => {
+    if (!isEmbedded || !showComposer) return;
+    const replyTo = selectedEmail ? {
+      from: selectedEmail.from,
+      replyToAddresses: selectedEmail.replyTo,
+      to: selectedEmail.to,
+      cc: selectedEmail.cc,
+      bcc: selectedEmail.bcc,
+      subject: selectedEmail.subject,
+      body: selectedEmail.bodyValues?.[selectedEmail.textBody?.[0]?.partId || '']?.value || selectedEmail.preview || '',
+      htmlBody: selectedEmail.bodyValues?.[selectedEmail.htmlBody?.[0]?.partId || '']?.value || undefined,
+      receivedAt: selectedEmail.receivedAt,
+      attachments: selectedEmail.attachments,
+      messageId: selectedEmail.messageId,
+      inReplyTo: selectedEmail.inReplyTo,
+      references: selectedEmail.references,
+      quoteHeaderHtml: composerQuoteHeader?.html,
+      quoteHeaderText: composerQuoteHeader?.text,
+      quoteWrapInBlockquote: composerQuoteHeader?.wrapInBlockquote,
+    } : undefined;
+
+    const effectiveMode = pendingDraft?.mode ?? composerMode;
+    const baseSubject = (pendingDraft?.subject?.trim() || selectedEmail?.subject?.trim()) ?? '';
+    let title = t('email_composer.new_message');
+    if (baseSubject) {
+      if (effectiveMode === 'reply' || effectiveMode === 'replyAll') {
+        title = baseSubject.startsWith('Re:') ? baseSubject : `Re: ${baseSubject}`;
+      } else if (effectiveMode === 'forward') {
+        title = baseSubject.startsWith('Fwd:') ? baseSubject : `Fwd: ${baseSubject}`;
+      } else {
+        title = baseSubject;
+      }
+    }
+
+    useProTabStore.getState().openComposeTab({
+      sessionId: composerSessionId + 1,
+      mode: effectiveMode,
+      replyTo,
+      initialDraftText: composerDraftText,
+      initialData: pendingDraft,
+      sourceEmailId: selectedEmail?.id ?? null,
+      title,
+    });
+
+    setComposerSessionId((s) => s + 1);
+    setShowComposer(false);
+    setComposerDraftText("");
+    setPendingDraft(null);
+    setComposerQuoteHeader(null);
+    // We only react to the rising edge of `showComposer` here; the other
+    // variables read above are captured-but-stale-safe because the next
+    // open will fire a fresh effect with new values.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEmbedded, showComposer]);
+
  // Check auth on mount – skip when already authenticated so that navigating
  // between routes doesn't retrigger checkAuth's transient `{ client: null,
  // isLoading: true }` reset, which was flashing the spinner on every nav.
@@ -2022,7 +2084,7 @@ export default function Home() {

  return (
    <DragDropProvider>
-      <div className="flex flex-col h-dvh bg-background overflow-hidden pt-[env(safe-area-inset-top)]">
+      <div className={cn("flex flex-col bg-background overflow-hidden pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
        <AppTopBannerSlot />
        {isRateLimited && rateLimitSecondsLeft !== null && (
          <div className="flex items-center justify-center gap-2 bg-amber-500/10 border-b border-amber-500/30 text-amber-700 dark:text-amber-300 text-sm py-1.5 px-4 flex-shrink-0">
@@ -2038,8 +2100,8 @@ export default function Home() {
          </div>
        )}
        <div className="flex flex-1 overflow-hidden">
-        {/* Desktop Navigation Rail */}
-        {!isMobile && !isTablet && (
+        {/* Desktop Navigation Rail (hidden when embedded inside Pro shell) */}
+        {!isMobile && !isTablet && !isEmbedded && (
          <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
            <NavigationRail
              collapsed
@@ -2385,6 +2447,14 @@ export default function Home() {
                selectedEmailId={selectedEmail?.id}
                isLoading={isLoading}
                onEmailSelect={handleEmailSelect}
+                onEmailDoubleClick={isEmbedded ? ((email) => {
+                  useProTabStore.getState().openEmailTab({
+                    accountId: email.accountId ?? '',
+                    emailId: email.id,
+                    mailboxId: selectedMailbox,
+                    title: email.subject?.trim() || t('email_composer.new_message'),
+                  });
+                }) : undefined}
                onOpenConversation={handleOpenConversation}
                // Context menu handlers
                onReply={(email) => {
@@ -2490,8 +2560,10 @@ export default function Home() {
              shouldHideHorizontalViewerPane && "md:hidden"
            )}
          >
-            {/* Inline Composer - shown in viewer pane */}
-            {showComposer ? (
+            {/* Inline Composer - shown in viewer pane.
+                In Pro/embedded mode the composer is hoisted into its own
+                Pro tab (see the effect below), so we never render it inline. */}
+            {(showComposer && !isEmbedded) ? (
              <ErrorBoundary
                fallback={ComposerErrorFallback}
                onReset={() => {
@@ -2653,8 +2725,8 @@ export default function Home() {
          </div>
          </div>

-          {/* Bottom Navigation - mobile and tablet */}
-          {(isMobile || isTablet) && activeView !== "viewer" && (
+          {/* Bottom Navigation - mobile and tablet (hidden when embedded) */}
+          {(isMobile || isTablet) && activeView !== "viewer" && !isEmbedded && (
            <NavigationRail
              orientation="horizontal"
              onManageApps={handleManageApps}
@@ -0,0 +1,209 @@
+"use client";
+
+import { useEffect, useMemo, useState, type ComponentType } from "react";
+import { useTranslations } from "next-intl";
+import { NavigationRail } from "@/components/layout/navigation-rail";
+import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
+import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
+import { InlineAppView } from "@/components/layout/inline-app-view";
+import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
+import { useEmailStore } from "@/stores/email-store";
+import { useDeviceDetection } from "@/hooks/use-media-query";
+import { EmbeddedContext } from "@/hooks/use-is-embedded";
+import { ProTabBar } from "@/components/pro/pro-tab-bar";
+import { useProTabStore, type ProTabKind } from "@/stores/pro-tab-store";
+import { cn } from "@/lib/utils";
+
+import MailPage from "@/app/[locale]/page";
+import CalendarPage from "@/app/[locale]/calendar/page";
+import ContactsPage from "@/app/[locale]/contacts/page";
+import FilesPage from "@/app/[locale]/files/page";
+import SettingsPage from "@/app/[locale]/settings/page";
+import { ProComposeTabBody } from "@/components/pro/pro-compose-tab-body";
+import { ProEmailTabBody } from "@/components/pro/pro-email-tab-body";
+
+const APP_TAB_COMPONENTS: Partial<Record<ProTabKind, ComponentType>> = {
+  mail: MailPage,
+  calendar: CalendarPage,
+  contacts: ContactsPage,
+  files: FilesPage,
+  settings: SettingsPage,
+};
+
+export default function ProHome() {
+  const t = useTranslations();
+  const { isMobile, isTablet, isDesktop } = useDeviceDetection();
+
+  const [initialCheckDone, setInitialCheckDone] = useState(
+    () => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client
+  );
+  const [showShortcutsModal, setShowShortcutsModal] = useState(false);
+  const {
+    showAppsModal,
+    inlineApp,
+    loadedApps,
+    handleManageApps,
+    handleInlineApp,
+    closeInlineApp,
+    closeAppsModal,
+  } = useSidebarApps();
+
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const client = useAuthStore((s) => s.client);
+  const logout = useAuthStore((s) => s.logout);
+  const checkAuth = useAuthStore((s) => s.checkAuth);
+  const authLoading = useAuthStore((s) => s.isLoading);
+  const quota = useEmailStore((s) => s.quota);
+  const isPushConnected = useEmailStore((s) => s.isPushConnected);
+
+  const tabs = useProTabStore((s) => s.tabs);
+  const activeTabId = useProTabStore((s) => s.activeTabId);
+  const loadedTabIds = useProTabStore((s) => s.loadedTabIds);
+  const openTab = useProTabStore((s) => s.openTab);
+  const closeTab = useProTabStore((s) => s.closeTab);
+  const setActiveTab = useProTabStore((s) => s.setActiveTab);
+
+  // Auth bootstrap (mirrors standard page)
+  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
+    checkAuth().finally(() => {
+      setInitialCheckDone(true);
+    });
+  }, [checkAuth]);
+
+  useEffect(() => {
+    if (initialCheckDone && !isAuthenticated && !authLoading) {
+      redirectToLogin();
+    }
+  }, [initialCheckDone, isAuthenticated, authLoading]);
+
+  // Pro is desktop-only — fall back to standard on mobile/tablet
+  useEffect(() => {
+    if (initialCheckDone && (isMobile || isTablet) && typeof window !== "undefined") {
+      window.location.replace("/");
+    }
+  }, [initialCheckDone, isMobile, isTablet]);
+
+  const activeTab = useMemo(
+    () => tabs.find((tab) => tab.id === activeTabId) ?? tabs[0],
+    [tabs, activeTabId]
+  );
+
+  const handleRailNavigate = (itemId: 'mail' | 'calendar' | 'contacts' | 'files' | 'settings') => {
+    openTab(itemId);
+    return true;
+  };
+
+  // Only highlight the rail when an "app" tab is active; compose/email tabs
+  // don't correspond to any rail item.
+  const railActiveItemId: 'mail' | 'calendar' | 'contacts' | 'files' | 'settings' | null =
+    activeTab && (
+      activeTab.kind === 'mail' || activeTab.kind === 'calendar'
+      || activeTab.kind === 'contacts' || activeTab.kind === 'files'
+      || activeTab.kind === 'settings'
+    ) ? activeTab.kind : null;
+
+  // Loading state (matches standard page exactly)
+  if (!initialCheckDone || authLoading || !isAuthenticated || !client) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto"></div>
+          <p className="mt-4 text-sm text-muted-foreground">{t("common.loading")}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isDesktop) return null;
+
+  return (
+    <EmbeddedContext.Provider value={true}>
+      <div className="flex flex-col h-dvh bg-background overflow-hidden pt-[env(safe-area-inset-top)]">
+        <div className="flex flex-1 overflow-hidden">
+          {/* Leftmost Navigation Rail — identical to the standard layout */}
+          <div
+            className="w-14 bg-secondary flex flex-col flex-shrink-0"
+            style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}
+          >
+            <NavigationRail
+              collapsed
+              quota={quota}
+              isPushConnected={isPushConnected}
+              onLogout={logout}
+              onShowShortcuts={() => setShowShortcutsModal(true)}
+              onManageApps={handleManageApps}
+              onInlineApp={handleInlineApp}
+              onCloseInlineApp={closeInlineApp}
+              activeAppId={inlineApp?.id ?? null}
+              onNavigate={handleRailNavigate}
+              activeItemId={railActiveItemId}
+            />
+          </div>
+
+          {inlineApp && (
+            <InlineAppView
+              apps={loadedApps}
+              activeAppId={inlineApp.id}
+              onClose={closeInlineApp}
+              className="flex-1"
+            />
+          )}
+
+          {!inlineApp && (
+            <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+              <ProTabBar
+                tabs={tabs}
+                activeTabId={activeTabId}
+                onActivate={setActiveTab}
+                onClose={closeTab}
+              />
+
+              {/* Tab bodies — every loaded tab stays mounted so flipping tabs
+                  preserves the page's internal state (selection, scroll,
+                  drafts). Inactive ones are hidden via CSS. */}
+              <div className="relative flex-1 min-h-0">
+                {tabs
+                  .filter((tab) => loadedTabIds.includes(tab.id))
+                  .map((tab) => {
+                    const isActive = tab.id === activeTabId;
+                    let body: React.ReactNode = null;
+                    if (tab.kind === 'compose' && tab.composeData) {
+                      body = <ProComposeTabBody tabId={tab.id} data={tab.composeData} />;
+                    } else if (tab.kind === 'email' && tab.emailData) {
+                      body = <ProEmailTabBody tabId={tab.id} data={tab.emailData} />;
+                    } else {
+                      const Component = APP_TAB_COMPONENTS[tab.kind];
+                      if (Component) body = <Component />;
+                    }
+                    return (
+                      <div
+                        key={tab.id}
+                        className={cn("absolute inset-0 overflow-hidden", !isActive && "hidden")}
+                        aria-hidden={!isActive}
+                      >
+                        {body}
+                      </div>
+                    );
+                  })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <KeyboardShortcutsModal
+          isOpen={showShortcutsModal}
+          onClose={() => setShowShortcutsModal(false)}
+        />
+        {showAppsModal && (
+          <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
+        )}
+      </div>
+    </EmbeddedContext.Provider>
+  );
+}
@@ -76,6 +76,7 @@ import { NavigationRail } from '@/components/layout/navigation-rail';
 import { SidebarAppsModal } from '@/components/layout/sidebar-apps-modal';
 import { InlineAppView } from '@/components/layout/inline-app-view';
 import { useSidebarApps } from '@/hooks/use-sidebar-apps';
+import { useIsEmbedded } from '@/hooks/use-is-embedded';
 import { ResizeHandle } from '@/components/layout/resize-handle';
 import { useConfig } from '@/hooks/use-config';
 import { usePolicyStore } from '@/stores/policy-store';
@@ -346,6 +347,7 @@ export default function SettingsPage() {
  const tSidebar = useTranslations('sidebar');
  const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
+  const isEmbedded = useIsEmbedded();
  const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
  const { quota, isPushConnected } = useEmailStore();
  const { stalwartFeaturesEnabled } = useConfig();
@@ -687,7 +689,7 @@ export default function SettingsPage() {
  if (!isDesktop) {
    if (mobileShowContent) {
      return (
-        <div className="flex flex-col h-dvh bg-background pt-[env(safe-area-inset-top)]">
+        <div className={cn("flex flex-col bg-background pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
          <AppTopBannerSlot />
          <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
            <Button
@@ -705,20 +707,22 @@ export default function SettingsPage() {
            {renderTabContent()}
          </div>

-          <NavigationRail
-            orientation="horizontal"
-            onManageApps={handleManageApps}
-            onInlineApp={handleInlineApp}
-            onCloseInlineApp={closeInlineApp}
-            activeAppId={inlineApp?.id ?? null}
-          />
+          {!isEmbedded && (
+            <NavigationRail
+              orientation="horizontal"
+              onManageApps={handleManageApps}
+              onInlineApp={handleInlineApp}
+              onCloseInlineApp={closeInlineApp}
+              activeAppId={inlineApp?.id ?? null}
+            />
+          )}
          <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
        </div>
      );
    }

    return (
-      <div className="flex flex-col h-dvh bg-background pt-[env(safe-area-inset-top)]">
+      <div className={cn("flex flex-col bg-background pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
        <AppTopBannerSlot />
        <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
          <Button
@@ -815,13 +819,15 @@ export default function SettingsPage() {
          </div>
        </div>

-        <NavigationRail
-          orientation="horizontal"
-          onManageApps={handleManageApps}
-          onInlineApp={handleInlineApp}
-          onCloseInlineApp={closeInlineApp}
-          activeAppId={inlineApp?.id ?? null}
-        />
+        {!isEmbedded && (
+          <NavigationRail
+            orientation="horizontal"
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+        )}
        <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
      </div>
    );
@@ -829,21 +835,23 @@ export default function SettingsPage() {

  // Desktop layout
  return (
-    <div className="flex flex-col h-dvh bg-background pt-[env(safe-area-inset-top)]">
+    <div className={cn("flex flex-col bg-background pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
      <AppTopBannerSlot />
      <div className="flex flex-1 min-h-0">
-      <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
-        <NavigationRail
-          collapsed
-          quota={quota}
-          isPushConnected={isPushConnected}
-          onLogout={logout}
-          onManageApps={handleManageApps}
-          onInlineApp={handleInlineApp}
-          onCloseInlineApp={closeInlineApp}
-          activeAppId={inlineApp?.id ?? null}
-        />
-      </div>
+      {!isEmbedded && (
+        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
+          <NavigationRail
+            collapsed
+            quota={quota}
+            isPushConnected={isPushConnected}
+            onLogout={logout}
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+        </div>
+      )}

      {inlineApp && (
        <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} className="flex-1" />