feat: enhance styling and layout for toolbar, map components, and editor

- Updated toolbar styles for improved layout and appearance, including padding and margin adjustments.
- Introduced new styles for scale menu and compact dropdowns.
- Enhanced map pin tooltips with better positioning and hover effects.
- Added new styles for map sheet filters, including search and date range controls.
- Improved editor styles for a more cohesive look and feel, including transport controls for video editing.
- Expanded GeoLocation interface to include additional address fields and formatted address.
- Updated MediaItem interface to include storage reference and uploadedBy fields.
- Enhanced MediaComment interface with author details for better user identification.
- Introduced GalleryUser interface to represent signed-in users in the host app.

packages/photo-sdk/src/components/Sidebar.tsx

@@ -116,8 +116,15 @@ export function Sidebar() {
   const api = useGalleryStoreApi();
   const sidebarOpen = useGallery((s) => s.sidebarOpen);
   const albums = useGallery((s) => s.albums);
+  // Views the host asked to hide (e.g. Screenshots, Documents). A row is dropped
+  // when its `view` is listed; a section label is dropped when every row under it
+  // would be hidden.
+  const hiddenViews = useGallery((s) => s.config.hiddenViews);
+  const hidden = new Set<ViewId>(hiddenViews ?? []);
+  const shown = (view: ViewId) => !hidden.has(view);
+  const anyShown = (...views: ViewId[]) => views.some(shown);
   // Recently Deleted lock state → closed lock when protected & not yet opened.
-  const locked = useGallery((s) => s.lock.hash !== null && !s.lockUnlocked);
+  const locked = useGallery((s) => s.lockConfigured && !s.lockUnlocked);
   const lockIcon: IconName = locked ? 'lock' : 'unlock';
   const [sharingOpen, setSharingOpen] = useState(true);
   const [albumsOpen, setAlbumsOpen] = useState(true);
@@ -126,7 +133,7 @@ export function Sidebar() {
   // Sidebar lock toggle: no password → set one; unlocked → re-lock; locked → go unlock.
   const toggleLock = () => {
     const s = api.getState();
-    if (!s.lock.hash) openSecuritySettings();
+    if (!s.lockConfigured) openSecuritySettings();
     else if (s.lockUnlocked) s.relock();
     else s.setView('recently-deleted');
   };
@@ -207,22 +214,41 @@ export function Sidebar() {
       <Row icon="library" label="Library" view="library" />
       <Row icon="collections" label="Collections" view="collections" />
 
-      <SectionLabel>Pinned</SectionLabel>
-      <Row icon="heart" label="Favourites" view="favourites" />
-      <Row icon="download" label="Recently Saved" view="recently-saved" />
-      <Row icon="map" label="Map" view="map" />
-      <Row icon="video" label="Videos" view="videos" />
-      <Row icon="screenshot" label="Screenshots" view="screenshots" />
-      <Row icon="document" label="Documents" view="sys:documents" />
-      <Row icon="person-circle" label="People" view="people" />
-      <Row
-        icon="trash"
-        label="Recently Deleted"
-        view="recently-deleted"
-        trailing={lockIcon}
-        onTrailingClick={toggleLock}
-        trailingLabel={locked ? 'Unlock Recently Deleted' : 'Lock Recently Deleted'}
-      />
+      {anyShown(
+        'favourites',
+        'recently-saved',
+        'map',
+        'videos',
+        'screenshots',
+        'sys:documents',
+        'people',
+        'recently-deleted',
+      ) ? (
+        <SectionLabel>Pinned</SectionLabel>
+      ) : null}
+      {shown('favourites') ? <Row icon="heart" label="Favourites" view="favourites" /> : null}
+      {shown('recently-saved') ? (
+        <Row icon="download" label="Recently Saved" view="recently-saved" />
+      ) : null}
+      {shown('map') ? <Row icon="map" label="Map" view="map" /> : null}
+      {shown('videos') ? <Row icon="video" label="Videos" view="videos" /> : null}
+      {shown('screenshots') ? (
+        <Row icon="screenshot" label="Screenshots" view="screenshots" />
+      ) : null}
+      {shown('sys:documents') ? (
+        <Row icon="document" label="Documents" view="sys:documents" />
+      ) : null}
+      {shown('people') ? <Row icon="person-circle" label="People" view="people" /> : null}
+      {shown('recently-deleted') ? (
+        <Row
+          icon="trash"
+          label="Recently Deleted"
+          view="recently-deleted"
+          trailing={lockIcon}
+          onTrailingClick={toggleLock}
+          trailingLabel={locked ? 'Unlock Recently Deleted' : 'Lock Recently Deleted'}
+        />
+      ) : null}
 
       <div
         onContextMenu={(e) => {
@@ -304,19 +330,23 @@ export function Sidebar() {
       />
       {sharingOpen ? <Row icon="chat" label="Activity" view="activity" indent /> : null}
 
-      <SectionLabel>Utilities</SectionLabel>
-      <Row
-        icon="trash"
-        label="Recently Deleted"
-        view="recently-deleted"
-        trailing={lockIcon}
-        noActive
-        onTrailingClick={toggleLock}
-        trailingLabel={locked ? 'Unlock Recently Deleted' : 'Lock Recently Deleted'}
-      />
-      <Row icon="duplicates" label="Duplicates" view="duplicates" />
-      <Row icon="clock" label="Versions & Audit" view="versions" />
-      <Row icon="map" label="Map" view="map" noActive />
+      {anyShown('recently-deleted', 'duplicates', 'versions', 'map') ? (
+        <SectionLabel>Utilities</SectionLabel>
+      ) : null}
+      {shown('recently-deleted') ? (
+        <Row
+          icon="trash"
+          label="Recently Deleted"
+          view="recently-deleted"
+          trailing={lockIcon}
+          noActive
+          onTrailingClick={toggleLock}
+          trailingLabel={locked ? 'Unlock Recently Deleted' : 'Lock Recently Deleted'}
+        />
+      ) : null}
+      {shown('duplicates') ? <Row icon="duplicates" label="Duplicates" view="duplicates" /> : null}
+      {shown('versions') ? <Row icon="clock" label="Versions & Audit" view="versions" /> : null}
+      {shown('map') ? <Row icon="map" label="Map" view="map" noActive /> : null}
     </nav>
   );
 }