Refactor code structure for improved readability and maintainability

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

@@ -7,7 +7,7 @@ import { Icon, type IconName } from '../icons';
 import { useGallery, useGalleryStoreApi } from '../store/context';
 import type { Album, ViewId } from '../types';
 import { closeContextMenu, openContextMenu } from './ContextMenu';
-import { openSecuritySettings, promptAlbumName } from './modals';
+import { confirmAction, openSecuritySettings, promptAlbumName } from './modals';
 
 interface RowProps {
   icon: IconName;
@@ -161,6 +161,38 @@ export function Sidebar() {
     ]);
   };
 
+  // Right-click an auto object album → permanently rename its tag (e.g. car → excavator).
+  const objectMenu = (album: Album) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    const label = album.id.slice('sys:obj:'.length);
+    openContextMenu(e.clientX, e.clientY, [
+      {
+        label: 'Rename Tag',
+        icon: 'tag',
+        onClick: () =>
+          promptAlbumName(
+            'Rename Tag',
+            album.name,
+            (name) => api.getState().renameLabel(label, name),
+            { placeholder: 'Tag name' },
+          ),
+      },
+      {
+        label: 'Delete Tag',
+        icon: 'trash',
+        danger: true,
+        onClick: () =>
+          confirmAction({
+            title: 'Delete Tag',
+            message: `Remove the "${album.name}" tag? It's deleted from all photos and won't be created again.`,
+            confirmLabel: 'Delete',
+            danger: true,
+            onConfirm: () => api.getState().deleteLabel(label),
+          }),
+      },
+    ]);
+  };
+
   const newAlbum = () =>
     promptAlbumName('New Album', '', (name) => {
       const id = api.getState().createAlbum(name);
@@ -182,7 +214,7 @@ export function Sidebar() {
       <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 & Pets" view="people" />
+      <Row icon="person-circle" label="People" view="people" />
       <Row
         icon="trash"
         label="Recently Deleted"
@@ -251,6 +283,7 @@ export function Sidebar() {
                   label={a.name}
                   view={a.id as ViewId}
                   indent
+                  onContextMenu={objectMenu(a)}
                 />
               ))
             : null}