mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-11-04 08:15:41 +00:00
Linus Rath
383e579eec
The desktop app and an installed PWA had a row across the whole window with the title and the window controls. That row is gone. The rail, sidebar, list and reader run to the top of the window in their own colours, and the controls sit in the top row of whatever is rightmost. - `lib/window-controls-overlay.ts` finds and marks those rows before paint, and they reserve the controls' width through `--titlebar-right-inset` - the rows and the rail are the drag area, everything clickable is `no-drag`, and an invisible band lets a page with no row still move - settings and the admin shell get a row only under the overlay, Pro's tab strip and Mountain View's bar match the controls' height - Alt floats the menu over the top left, in `window-menu-bar.tsx` - skeletons carry the same marks, so nothing shifts when the app loads
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { X } from '@/components/icons';
|
|
import { IconButton } from '@/components/ui/icon-button';
|
|
import { cn } from '@/lib/utils';
|
|
import type { InlineAppState } from '@/hooks/use-sidebar-apps';
|
|
|
|
interface InlineAppViewProps {
|
|
apps: InlineAppState[];
|
|
activeAppId: string;
|
|
onClose: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function InlineAppView({ apps, activeAppId, onClose, className }: InlineAppViewProps) {
|
|
const tCommon = useTranslations('common');
|
|
const activeApp = apps.find((a) => a.id === activeAppId);
|
|
|
|
return (
|
|
<div className={cn('flex flex-col h-full bg-background', className)}>
|
|
{/* Header bar */}
|
|
<div data-window-top-row="" className="flex items-center justify-between px-4 py-2 border-b border-border bg-secondary/50 flex-shrink-0">
|
|
<h3 className="text-sm font-medium truncate">{activeApp?.name}</h3>
|
|
<IconButton label={tCommon("close")} onClick={onClose} className="text-muted-foreground">
|
|
<X />
|
|
</IconButton>
|
|
</div>
|
|
{/* Iframes - active one visible, rest hidden but alive */}
|
|
<div className="flex-1 relative">
|
|
{apps.map((app) => (
|
|
<iframe
|
|
key={app.id}
|
|
src={app.url}
|
|
title={app.name}
|
|
className={cn(
|
|
'absolute inset-0 w-full h-full border-0',
|
|
app.id !== activeAppId && 'hidden'
|
|
)}
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
|
|
referrerPolicy="no-referrer"
|
|
loading="lazy"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|