Merge pull request #112 from varun-raj/feat-albums-enhancement

Feat: Albums enhancement and ux enhancements

Author: varun-raj

bun.lockb

@@ -16,6 +16,7 @@
   "dependencies": {
     "@google/generative-ai": "^0.21.0",
     "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -60,6 +61,7 @@
     "react-day-picker": "9.0.8",
     "react-dom": "^18",
     "react-grid-gallery": "^1.0.1",
+    "react-hot-toast": "^2.5.1",
     "react-leaflet": "^4.2.1",
     "react-mentions": "^4.4.10",
     "react-query": "^3.39.3",

package.json

@@ -55,7 +55,7 @@ export default function AlbumCreateDialog({ onSubmit, assetIds }: IProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button>Create Album</Button>
+        <Button size={"sm"}>Create Album</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

src/components/albums/AlbumCreateDialog.tsx

@@ -78,7 +78,7 @@ export default function AlbumSelectorDialog({ onSelected }: IProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button>Select Album</Button>
+        <Button size={"sm"}>Select Album</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

src/components/albums/AlbumSelectorDialog.tsx

@@ -125,22 +125,21 @@ export default function AlbumImages({ album }: AlbumImagesProps) {
         index={index}
         close={() => setIndex(-1)}
       />
-      <div className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 p-2">
+      <div className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 p-2">
         {images.map((image) => (
           <div
             key={image.id}
-            className="w-full h-[200px] overflow-hidden relative"
+            className="w-full h-[180px] overflow-hidden relative"
             >
             <LazyImage
               loading="lazy"
               key={image.id}
               src={image.original}
               alt={image.originalFileName}
-              className='overflow-hidden'
+              className='overflow-hidden max-h-[180px] max-w-[180px] min-h-[180px] min-w-[180px]'
               style={{
                 objectPosition: 'center',
-                objectFit: 'cover',
-                height: '100%',
+                objectFit: 'cover'
               }}
               onClick={() => handleClick(images.indexOf(image))}
             />

src/components/albums/info/AlbumImages.tsx

@@ -99,7 +99,7 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) {
   }
 
   return (
-    <div className="overflow-y-auto min-w-[200px] sticky top-0 py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)]  dark:bg-zinc-900 bg-gray-200 flex flex-col gap-2 px-2">
+    <div className="overflow-y-auto min-w-[200px] sticky top-0 py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)] border-r border-gray-200 dark:border-zinc-800 flex flex-col gap-2 px-2">
 
       {selectedPerson && (
         <div className='flex flex-col gap-2 bg-white dark:bg-zinc-900 p-2 rounded-md'>
@@ -157,7 +157,7 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) {
           </Button>
         )}
         {selectedPeople.length > 0 && (
-          <div className='absolute mx-auto bottom-0 w-full py-2 dark:bg-white bg-black -mx-2 px-2'>
+          <div className='absolute mx-auto bottom-0 w-full py-2 bg-white darl:bg-black -mx-2 px-2'>
             <Button variant="outline" className="!py-0.5 !px-2 text-xs h-7" onClick={handleHideSelectedPeople}>
               Hide {selectedPeople.length} people
             </Button>

src/components/albums/info/AlbumPeople.tsx

@@ -1,23 +1,23 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import Link from 'next/link';
-import { useConfig } from '@/contexts/ConfigContext';
 import { humanizeBytes, humanizeNumber, pluralize } from '@/helpers/string.helper';
 import LazyImage from '@/components/ui/lazy-image';
 import { ASSET_THUMBNAIL_PATH } from '@/config/routes';
 import { IAlbum } from '@/types/album';
-import { Badge } from '@/components/ui/badge';
 import { formatDate } from '@/helpers/date.helper';
 import { Checkbox } from '@/components/ui/checkbox';
 import { differenceInDays } from 'date-fns';
-import { FaceIcon } from '@radix-ui/react-icons';
-import { Calendar, Camera, Image, User } from 'lucide-react';
+import { Calendar, Camera } from 'lucide-react';
 
 interface IAlbumThumbnailProps {
   album: IAlbum;
   onSelect: (checked: boolean) => void;
+  selected: boolean;
 }
-export default function AlbumThumbnail({ album, onSelect }: IAlbumThumbnailProps) {
+export default function AlbumThumbnail({ album, onSelect, selected }: IAlbumThumbnailProps) {
+  const [isSelected, setIsSelected] = useState(selected);
+
   const numberOfDays = useMemo(() => {
     return differenceInDays(album.lastPhotoDate, album.firstPhotoDate);
   }, [album.firstPhotoDate, album.lastPhotoDate]);
@@ -39,6 +39,7 @@ export default function AlbumThumbnail({ album, onSelect }: IAlbumThumbnailProps
           {formatDate(album.firstPhotoDate.toString(), 'MMM d, yyyy')} - {formatDate(album.lastPhotoDate.toString(), 'MMM d, yyyy')}
         </div>
         <Checkbox
+          defaultChecked={isSelected}
           onCheckedChange={onSelect}
           className="absolute top-2 left-2 w-6 h-6 rounded-full border-gray-300 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         />

src/components/albums/list/AlbumThumbnail.tsx

@@ -1,8 +1,8 @@
 import "yet-another-react-lightbox/styles.css";
 import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
 import { listPotentialAlbumsAssets } from "@/handlers/api/album.handler";
-import { IAsset } from "@/types/asset";
-import React, { useEffect, useMemo, useState } from "react";
+import type { IAsset } from "@/types/asset";
+import React, { type MouseEvent, useEffect, useMemo, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import Lightbox, { SlideImage, SlideTypes } from "yet-another-react-lightbox";
 import Captions from "yet-another-react-lightbox/plugins/captions";
@@ -20,6 +20,7 @@ export default function PotentialAlbumsAssets() {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const [index, setIndex] = useState(-1);
+  const [lastSelectedIndex, setLastSelectedIndex] = useState(-1);
 
   const fetchAssets = async () => {
     setLoading(true);
@@ -44,14 +45,15 @@ export default function PotentialAlbumsAssets() {
         {
           title: "Immich Link",
           value: (
-            <a href={exImmichUrl + "/photos/" + p.id} target="_blank">
+            <a href={`${exImmichUrl}/photos/${p.id}`} target="_blank" rel="noreferrer">
               Open in Immich
             </a>
           ),
         },
       ],
     }));
-  }, [assets, selectedIds]);
+  }, [assets, selectedIds, exImmichUrl]);
+
 
   const slides = useMemo(
     () =>
@@ -73,17 +75,31 @@ export default function PotentialAlbumsAssets() {
     [images]
   );
 
-  const handleClick = (idx: number) => setIndex(idx);
 
-  const handleSelect = (_idx: number, asset: IAsset) => {
+  const handleSelect = (_idx: number, asset: IAsset, event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
     const isPresent = selectedIds.includes(asset.id);
     if (isPresent) {
       updateContext({
         selectedIds: selectedIds.filter((id) => id !== asset.id),
       });
     } else {
-      updateContext({ selectedIds: [...selectedIds, asset.id] });
+      const clickedIndex = images.findIndex((image) => {
+        return image.id === asset.id
+      });
+      if (event.shiftKey) {
+        const startIndex = Math.min(clickedIndex, lastSelectedIndex);
+        const endIndex = Math.max(clickedIndex, lastSelectedIndex);
+        const newSelectedIds = images.slice(startIndex, endIndex + 1).map((image) => image.id);
+        const allSelectedIds = [...selectedIds, ...newSelectedIds];
+        const uniqueSelectedIds = [...new Set(allSelectedIds)];
+        updateContext({ selectedIds: uniqueSelectedIds });
+      } else {
+        updateContext({ selectedIds: [...selectedIds, asset.id] });
+      }
+      setLastSelectedIndex(clickedIndex);
     }
+    
   };
 
   useEffect(() => {
@@ -121,7 +137,7 @@ export default function PotentialAlbumsAssets() {
       <div className="w-full overflow-y-auto max-h-[calc(100vh-60px)]">
         <Gallery
           images={images}
-          onClick={handleClick}
+          onClick={setIndex}
           enableImageSelection={true}
           onSelect={handleSelect}
           thumbnailImageComponent={LazyGridImage}

src/components/albums/potential-albums/PotentialAlbumsAssets.tsx

@@ -46,7 +46,7 @@ export default function PotentialAlbumsDates() {
   }, [filters]);
 
   return (
-    <div className="overflow-y-auto min-w-[200px] py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)]  dark:bg-zinc-900 bg-gray-200 flex flex-col gap-2 px-2">
+    <div className="min-w-[200px] py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)]  border-r border-gray-200 dark:border-zinc-800 flex flex-col gap-2 px-1">
       <div className="flex justify-between items-center gap-2">
         <Select
           defaultValue={filters.sortBy}
@@ -69,14 +69,15 @@ export default function PotentialAlbumsDates() {
           </Button>
         </div>
       </div>
-
-      {dateRecords.map((record) => (
-        <PotentialDateItem
-          key={record.date}
-          record={record}
-          onSelect={handleSelect}
-        />
-      ))}
+      <div className="overflow-y-auto">
+        {dateRecords.map((record) => (
+          <PotentialDateItem
+            key={record.date}
+            record={record}
+            onSelect={handleSelect}
+          />
+        ))}
+    </div>
     </div>
   );
 }

src/components/albums/potential-albums/PotentialAlbumsDates.tsx

@@ -20,11 +20,11 @@ export default function PotentialDateItem({ record, onSelect }: IProps) {
       onClick={() => onSelect(record.date)}
       key={record.date}
       className={
-        cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 border border-transparent hover:bg-zinc-100 px-4",
+        cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 border border-transparent hover:bg-zinc-100",
         startDate === record.date ? "bg-zinc-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700" : "")
       }
     >
-      <p className="font-mono text-sm">{dateLabel}</p>
+      <p className="text-sm">{dateLabel}</p>
       <p className="text-xs text-foreground/50">{record.asset_count} Orphan Assets</p>
     </div>
   );