From db3fcdf61a6201fb0048ef2a8a826c29b2305cb2 Mon Sep 17 00:00:00 2001
From: priyanshuuu777 <priyanshu22112006@gmail.com>
Date: Wed, 19 Aug 2026 10:56:47 +0530
Subject: [PATCH 1/2] feat: add album detail share action

---
 frontend/src/pages/Album/AlbumDetail.tsx | 44 ++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Album/AlbumDetail.tsx b/frontend/src/pages/Album/AlbumDetail.tsx
index c65e1e856..0d778ec3c 100644
--- a/frontend/src/pages/Album/AlbumDetail.tsx
+++ b/frontend/src/pages/Album/AlbumDetail.tsx
@@ -2,17 +2,24 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams, useNavigate, useLocation } from 'react-router';
 import { Button } from '@/components/ui/button';
-import { ArrowLeft, Plus, Trash2 } from 'lucide-react';
+import { ArrowLeft, Plus, Share2, Trash2 } from 'lucide-react';
 import { ImageCard } from '@/components/Media/ImageCard';
 import { MediaView } from '@/components/Media/MediaView';
 import { AddImagesToAlbumDialog } from '@/components/Albums/AddImagesToAlbumDialog';
-import { usePictoQuery, usePictoMutation } from '@/hooks/useQueryExtension';
+import { ShareAlbumDialog } from '@/components/Albums/ShareAlbumDialog';
+import {
+  usePictoQuery,
+  usePictoMutation,
+  type BackendRes,
+} from '@/hooks/useQueryExtension';
 import {
   getAlbumById,
   getAlbumImages,
+  getShares,
   removeMultipleImagesFromAlbum,
   fetchAllImages,
 } from '@/api/api-functions';
+import { Share } from '@/types/Share';
 import {
   setSelectedAlbum,
   setAlbumImages,
@@ -52,6 +59,7 @@ export const AlbumDetail = () => {
   const isImageViewOpen = useSelector(selectIsImageViewOpen);
 
   const [isAddImagesDialogOpen, setIsAddImagesDialogOpen] = useState(false);
+  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
   const [selectedImages, setSelectedImages] = useState<Set<string>>(new Set());
   const [isSelectionMode, setIsSelectionMode] = useState(false);
 
@@ -88,6 +96,21 @@ export const AlbumDetail = () => {
   // carries their details.
   const isLoadingContent = isLoadingImages || isLoadingAllImages;
 
+  // Shares are held in memory on the backend, so this is the source of truth
+  // for whether this album is currently being served on the local network.
+  const { successData: allShares, refetch: refetchShares } = usePictoQuery<
+    BackendRes<Share[]>,
+    unknown,
+    Share[]
+  >({
+    queryKey: ['shares'],
+    queryFn: () => getShares(),
+  });
+
+  const albumShares = (allShares ?? []).filter(
+    (share) => share.album_id === albumId,
+  );
+
   const removeImagesMutation = usePictoMutation({
     mutationFn: ({
       albumId,
@@ -286,6 +309,14 @@ export const AlbumDetail = () => {
                     Select Images
                   </Button>
                 )}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsShareDialogOpen(true)}
+                >
+                  <Share2 className="mr-2 h-4 w-4" />
+                  {albumShares.length > 0 ? 'Manage Share' : 'Share'}
+                </Button>
                 <Button
                   size="sm"
                   onClick={() => setIsAddImagesDialogOpen(true)}
@@ -359,6 +390,15 @@ export const AlbumDetail = () => {
         albumId={albumId!}
         albumName={album.name}
       />
+
+      {/* Share Dialog */}
+      <ShareAlbumDialog
+        album={album}
+        shares={albumShares}
+        isOpen={isShareDialogOpen}
+        onClose={() => setIsShareDialogOpen(false)}
+        onChanged={refetchShares}
+      />
     </div>
   );
 };

From 00e4b85c5452f33753299a90bc8e088cbd4e4977 Mon Sep 17 00:00:00 2001
From: priyanshuuu777 <priyanshu22112006@gmail.com>
Date: Wed, 19 Aug 2026 23:53:39 +0530
Subject: [PATCH 2/2] fix: disable share action while active shares query is
 unresolved

---
 frontend/src/pages/Album/AlbumDetail.tsx      | 12 ++--
 .../src/pages/__tests__/AlbumDetail.test.tsx  | 58 +++++++++++++++++++
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Album/AlbumDetail.tsx b/frontend/src/pages/Album/AlbumDetail.tsx
index 0d778ec3c..bd6a52c92 100644
--- a/frontend/src/pages/Album/AlbumDetail.tsx
+++ b/frontend/src/pages/Album/AlbumDetail.tsx
@@ -98,11 +98,12 @@ export const AlbumDetail = () => {
 
   // Shares are held in memory on the backend, so this is the source of truth
   // for whether this album is currently being served on the local network.
-  const { successData: allShares, refetch: refetchShares } = usePictoQuery<
-    BackendRes<Share[]>,
-    unknown,
-    Share[]
-  >({
+  const {
+    successData: allShares,
+    isLoading: isLoadingShares,
+    isError: isSharesError,
+    refetch: refetchShares,
+  } = usePictoQuery<BackendRes<Share[]>, unknown, Share[]>({
     queryKey: ['shares'],
     queryFn: () => getShares(),
   });
@@ -313,6 +314,7 @@ export const AlbumDetail = () => {
                   variant="outline"
                   size="sm"
                   onClick={() => setIsShareDialogOpen(true)}
+                  disabled={isLoadingShares || isSharesError}
                 >
                   <Share2 className="mr-2 h-4 w-4" />
                   {albumShares.length > 0 ? 'Manage Share' : 'Share'}
diff --git a/frontend/src/pages/__tests__/AlbumDetail.test.tsx b/frontend/src/pages/__tests__/AlbumDetail.test.tsx
index 979caf09a..94876fc40 100644
--- a/frontend/src/pages/__tests__/AlbumDetail.test.tsx
+++ b/frontend/src/pages/__tests__/AlbumDetail.test.tsx
@@ -9,6 +9,7 @@ import AlbumDetail from '../Album/AlbumDetail';
 import {
   getAlbumById,
   getAlbumImages,
+  getShares,
   fetchAllImages,
 } from '@/api/api-functions';
 
@@ -21,6 +22,7 @@ jest.mock('@tauri-apps/api/core', () => ({
 jest.mock('@/api/api-functions', () => ({
   getAlbumById: jest.fn(),
   getAlbumImages: jest.fn(),
+  getShares: jest.fn(),
   fetchAllImages: jest.fn(),
   removeMultipleImagesFromAlbum: jest.fn(),
   addImagesToAlbum: jest.fn(),
@@ -28,6 +30,7 @@ jest.mock('@/api/api-functions', () => ({
 
 const mockGetAlbumById = getAlbumById as jest.Mock;
 const mockGetAlbumImages = getAlbumImages as jest.Mock;
+const mockGetShares = getShares as jest.Mock;
 const mockFetchAllImages = fetchAllImages as jest.Mock;
 
 const AlbumDetailWithLoader = () => {
@@ -63,12 +66,67 @@ describe('AlbumDetail', () => {
       },
     });
     mockGetAlbumImages.mockResolvedValue({ success: true, image_ids: ['i1'] });
+    mockGetShares.mockResolvedValue({ success: true, data: [] });
     mockFetchAllImages.mockResolvedValue({
       success: true,
       data: [{ id: 'i1', path: '/p/i1.jpg', thumbnailPath: '/p/i1.jpg' }],
     });
   });
 
+  test('disables the share action until active shares resolve', async () => {
+    let releaseShares: (value: unknown) => void = () => {};
+    mockGetShares.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          releaseShares = resolve;
+        }),
+    );
+
+    renderDetail();
+
+    await screen.findByText('Trip');
+    const shareButton = screen.getByRole('button', { name: /share/i });
+    expect(shareButton).toBeDisabled();
+
+    releaseShares({ success: true, data: [] });
+
+    await waitFor(() => expect(shareButton).toBeEnabled());
+  });
+
+  test('displays "Manage Share" when an active share exists for this album', async () => {
+    mockGetShares.mockResolvedValue({
+      success: true,
+      data: [
+        {
+          token: 'tok-123',
+          album_id: 'a1',
+          album_name: 'Trip',
+          image_count: 1,
+          port: 52125,
+          created_at: '2026-08-19T00:00:00Z',
+          expires_at: null,
+          is_protected: false,
+          urls: [
+            {
+              interface: 'Wi-Fi',
+              ip: '192.168.1.5',
+              url: 'http://192.168.1.5:52125/s/tok-123',
+            },
+          ],
+        },
+      ],
+    });
+
+    renderDetail();
+
+    await screen.findByText('Trip');
+    await waitFor(() =>
+      expect(
+        screen.getByRole('button', { name: /manage share/i }),
+      ).toBeInTheDocument(),
+    );
+  });
+
   test('shows skeletons while images load instead of a blocking loader', async () => {
     let releaseImages: (value: unknown) => void = () => {};
     mockGetAlbumImages.mockImplementation(