feat: add core domain types for Photo Gallery SDK including media items, albums, and annotations

This commit is contained in:
2026-07-23 07:39:01 +05:30
parent 7bcd1a2a2d
commit 2613c767a6
107 changed files with 20699 additions and 7 deletions
+61
View File
@@ -0,0 +1,61 @@
'use client';
import { useEffect, useRef } from 'react';
import { useIsMobile } from '../hooks/useMediaQuery';
import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
import { useGallery, useGalleryStoreApi } from '../store/context';
import { Sidebar } from './Sidebar';
import { SelectionBar } from './SelectionBar';
import { TopToolbar } from './TopToolbar';
import { ViewRouter } from './ViewRouter';
export function AppShell() {
const api = useGalleryStoreApi();
const sidebarOpen = useGallery((s) => s.sidebarOpen);
const showSidebar = useGallery((s) => s.config.chrome.sidebar);
const showToolbar = useGallery((s) => s.config.chrome.toolbar);
const shortcutsEnabled = useGallery((s) => s.config.keyboardShortcuts);
const view = useGallery((s) => s.view);
const hiddenViews = useGallery((s) => s.config.hiddenViews);
const isMobile = useIsMobile();
// If the active view becomes hidden (host toggled `hiddenViews`, or a deep link
// landed on one), fall back to the Library instead of rendering a dead view.
useEffect(() => {
if (hiddenViews && hiddenViews.includes(view) && view !== 'library') {
api.getState().setView('library');
}
}, [api, view, hiddenViews]);
// The hook is always called (stable hook order); it binds nothing when disabled.
useKeyboardShortcuts(shortcutsEnabled);
// Collapse the sidebar by default on phones; expand on larger screens.
const lastMobile = useRef<boolean | null>(null);
useEffect(() => {
if (lastMobile.current === isMobile) return;
lastMobile.current = isMobile;
api.getState().setSidebar(!isMobile);
}, [isMobile, api]);
return (
<>
{showSidebar ? <Sidebar /> : null}
{showSidebar ? (
<div
className={['apg-scrim', isMobile && sidebarOpen ? 'apg-scrim--show' : '']
.filter(Boolean)
.join(' ')}
onClick={() => api.getState().setSidebar(false)}
/>
) : null}
<div className="apg-main">
{showToolbar ? <TopToolbar /> : null}
<div className="apg-viewport">
<ViewRouter />
<SelectionBar />
</div>
</div>
</>
);
}