Merge pull request #147 from varun-raj/march-updates

March updates

Author: varun-raj

.env.sample

@@ -15,4 +15,5 @@ GEMINI_API_KEY="" # Gemini API Key for parsing search query in "Find"
 
 # Immich Share Link
 IMMICH_SHARE_LINK_KEY="" # Share link key for Immich
-POWER_TOOLS_ENDPOINT_URL="" # URL of the Power Tools endpoint (Used for share links)
+POWER_TOOLS_ENDPOINT_URL="" # URL of the Power Tools endpoint (Used for share links)
+JWT_SECRET="" # JWT Secret for authentication

.eslintrc.json

@@ -6,5 +6,9 @@
       "files": ["remotion/*.{ts,tsx}"],
       "extends": ["plugin:@remotion/recommended"]
     }
-  ]
+  ],
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "@next/next/no-img-element": "off"
+  }
 }

bun.lockb

@@ -57,6 +57,12 @@ services:
       - "8001:3000"
     env_file:
       - .env
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
 
 volumes:
   model-cache:

docker-compose-all-immich.yml

@@ -8,3 +8,9 @@ services:
       - "3000:3000"
     env_file:
       - .env
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s

docker-compose.yml

@@ -34,9 +34,11 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@remotion/cli": "4.0.232",
     "@remotion/eslint-plugin": "^4.0.232",
+    "@tanstack/react-query": "^5.69.0",
     "@tanstack/react-table": "^8.20.1",
     "@types/cookie": "^0.6.0",
     "@types/qs": "^6.9.15",
+    "@types/react-autosuggest": "^10.1.11",
     "@types/react-calendar-heatmap": "^1.6.7",
     "@vis.gl/react-google-maps": "^1.4.2",
     "axios": "^1.7.4",
@@ -57,13 +59,13 @@
     "pg": "^8.12.0",
     "qs": "^6.13.0",
     "react": "^18",
+    "react-autosuggest": "^10.1.0",
     "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",
     "recharts": "^2.12.7",
     "remotion": "4.0.232",
     "sass": "^1.77.8",
@@ -78,6 +80,7 @@
     "@semantic-release/github": "^10.1.7",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.1",
+    "@tanstack/eslint-plugin-query": "^5.68.0",
     "@types/jsonwebtoken": "^9.0.6",
     "@types/leaflet": "^1.9.15",
     "@types/node": "^20",

package.json

@@ -6,11 +6,9 @@ import { IAsset } from '@/types/asset'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { ExternalLink, Hourglass } from 'lucide-react';
 import { useRouter } from 'next/router';
-import { CalendarArrowUp } from 'lucide-react';
 import Lightbox from 'yet-another-react-lightbox';
 import Captions from 'yet-another-react-lightbox/plugins/captions';
 import LazyImage from '@/components/ui/lazy-image';
-import Image from 'next/image';
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 

src/components/albums/info/AlbumImages.tsx

@@ -1,22 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { IAlbum } from '@/types/album'
-import { IPerson } from '@/types/person'
 import { getAlbumPeople } from '@/handlers/api/album.handler'
 import Loader from '@/components/ui/loader'
 import LazyImage from '@/components/ui/lazy-image'
 import { PERSON_THUBNAIL_PATH } from '@/config/routes'
 import Link from 'next/link'
 import { useConfig } from '@/contexts/ConfigContext'
-import { Tooltip } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
-import { Users, X } from 'lucide-react'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
 import { PersonMergeDropdown } from '@/components/people/PersonMergeDropdown'
 import { Button } from '@/components/ui/button'
 import { updatePerson } from '@/handlers/api/people.handler'
 import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
 
 interface AlbumPeopleProps {
   album: IAlbum
@@ -40,11 +37,16 @@ export default function AlbumPeople({ album, onSelect, readOnly }: AlbumPeoplePr
   const [hidingPerson, setHidingPerson] = useState<boolean>(false)
   const [selectionMode, setSelectionMode] = useState<boolean>(false)
   const [selectedPeople, setSelectedPeople] = useState<string[]>([])
+  const [searchQuery, setSearchQuery] = useState<string>("")
 
   const selectedPerson = useMemo(() => {
     return people.find((person) => query.faceId === person.id)
   }, [people, query.faceId])
 
+  const filteredPeople = useMemo(() => {
+    return people.filter((person) => person.name.toLowerCase().includes(searchQuery.toLowerCase()))
+  }, [people, searchQuery])
+
   const fetchPeople = async () => {
     return getAlbumPeople(album.id).then((people) => {
       setPeople(people)
@@ -102,7 +104,12 @@ export default function AlbumPeople({ album, onSelect, readOnly }: AlbumPeoplePr
 
   return (
     <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">
-
+      <Input
+        placeholder="Search"
+        className="w-full"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
       {selectedPerson && (
         <div className='flex flex-col gap-2 bg-white dark:bg-zinc-900 p-2 rounded-md'>
           <div className='flex items-center gap-2'>
@@ -172,7 +179,7 @@ export default function AlbumPeople({ album, onSelect, readOnly }: AlbumPeoplePr
         )}
       </div>
       <div className="flex flex-col overflow-x-hidden gap-2">
-        {people.map((person) => (
+        {filteredPeople.map((person) => (
           <div
             className={cn(
               'flex items-center gap-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md p-1',

src/components/albums/info/AlbumPeople.tsx

@@ -4,9 +4,9 @@ import { listPotentialAlbumsAssets } from "@/handlers/api/album.handler";
 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 Lightbox from "yet-another-react-lightbox";
 import Captions from "yet-another-react-lightbox/plugins/captions";
-import { CalendarArrowDown, CalendarArrowUp, Hourglass } from "lucide-react";
+import { CalendarArrowUp, Hourglass } from "lucide-react";
 import Video from "yet-another-react-lightbox/plugins/video";
 import { useConfig } from "@/contexts/ConfigContext";
 import LazyGridImage from "@/components/ui/lazy-grid-image";

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

@@ -2,13 +2,13 @@ import {
   IPotentialAlbumsDatesResponse,
   listPotentialAlbumsDates,
 } from "@/handlers/api/album.handler";
-import React, { use, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import PotentialDateItem from "./PotentialDateItem";
 import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
 import { useRouter } from "next/router";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
-import { ArrowDown, ArrowUp, ArrowUpDownIcon, SortAsc, SortDesc } from "lucide-react";
+import { SortAsc, SortDesc } from "lucide-react";
 
 export default function PotentialAlbumsDates() {
   const router = useRouter();