jfmcarreira/immich-power-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remember the last location used

Browse Source
This commit is contained in:
Varun Raj
2025-07-27 11:44:35 +05:30
parent 3cad04255a
commit b9d7e54c8a
8 changed files with 258 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/assets/missing-location/TagMissingLocationDialog/Map.tsx
+34 -13
View File
@@ -11,6 +11,8 @@ import { MapContainer, TileLayer, useMapEvents } from "react-leaflet";
import { useState } from "react";
import { IPlace } from "@/types/common";
import CustomMarker from "./CustomMarker";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
interface MapComponentProps {
location: IPlace;
@@ -33,6 +35,7 @@ const MapMouseHandler = ({ onMouseDown }: MapMouseHandlerProps) => {
export default function Map({ location, onLocationChange }: MapComponentProps) {
const [position, setPosition] = useState<LatLngExpression>([location.latitude, location.longitude]);
const [locationName, setLocationName] = useState(location.name || "");
const handleClick = (coords: LatLngExpression) => {
const normalized = L.latLng(coords);
@@ -41,23 +44,41 @@ export default function Map({ location, onLocationChange }: MapComponentProps) {
onLocationChange({
latitude: normalized.lat,
longitude: normalized.lng,
name: ""
name: locationName
});
};
const handleNameChange = (name: string) => {
setLocationName(name);
onLocationChange({
latitude: location.latitude,
longitude: location.longitude,
name: name
});
};
return (
<MapContainer
center={position}
zoom={14}
scrollWheelZoom={true}
style={{ width: '500px', height: '400px' }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MapMouseHandler onMouseDown={handleClick} />
<CustomMarker position={position} />
</MapContainer>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<Label>Location Name</Label>
<Input
placeholder="Enter location name"
value={locationName}
onChange={(e) => handleNameChange(e.target.value)}
/>
</div>
<MapContainer
center={position}
zoom={14}
scrollWheelZoom={true}
style={{ width: '500px', height: '400px' }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MapMouseHandler onMouseDown={handleClick} />
<CustomMarker position={position} />
</MapContainer>
</div>
);
}
src/components/assets/missing-location/TagMissingLocationDialog/RecentSearches.tsx
+79
View File
@@ -0,0 +1,79 @@
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { getRecentSearchesByType, RecentSearch } from "@/lib/utils";
import { IPlace } from "@/types/common";
import { Clock, MapPin } from "lucide-react";
import React from "react";
interface RecentSearchesProps {
searchType: RecentSearch['searchType'];
onSelect: (place: IPlace) => void;
selectedPlace?: IPlace | null;
}
export default function RecentSearches({ searchType, onSelect, selectedPlace }: RecentSearchesProps) {
const recentSearches = getRecentSearchesByType(searchType);
if (recentSearches.length === 0) {
return null;
}
const formatTimeAgo = (timestamp: number) => {
const now = Date.now();
const diff = now - timestamp;
const minutes = Math.floor(diff / (1000 * 60));
const hours = Math.floor(diff / (1000 * 60 * 60));
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
if (days > 0) return `${days}d ago`;
if (hours > 0) return `${hours}h ago`;
if (minutes > 0) return `${minutes}m ago`;
return 'Just now';
};
return (
<div className="mb-4">
<div className="flex items-center gap-2 mb-3">
<Clock className="h-4 w-4 text-muted-foreground" />
<h3 className="text-sm font-medium text-muted-foreground">Recent Searches</h3>
</div>
<div className="flex flex-col gap-2 max-h-[200px] overflow-y-auto">
{recentSearches.map((search, index) => (
<div
key={`${search.name}-${search.latitude}-${search.longitude}-${index}`}
onClick={() => onSelect({
name: search.name,
latitude: search.latitude,
longitude: search.longitude
})}
className={cn(
"hover:bg-zinc-200 dark:hover:bg-zinc-800 flex justify-between items-center px-3 py-2 rounded-lg cursor-pointer border",
{
"bg-zinc-200 dark:bg-zinc-800 border-primary":
selectedPlace &&
selectedPlace.name === search.name &&
selectedPlace.latitude === search.latitude &&
selectedPlace.longitude === search.longitude,
}
)}
>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<MapPin className="h-3 w-3 text-muted-foreground flex-shrink-0" />
<p className="text-sm truncate">{search.name}</p>
</div>
<div className="flex items-center justify-between mt-1">
<span className="text-xs text-muted-foreground">
{search.latitude.toFixed(4)}, {search.longitude.toFixed(4)}
</span>
<span className="text-xs text-muted-foreground">
{formatTimeAgo(search.timestamp)}
</span>
</div>
</div>
</div>
))}
</div>
</div>
);
}
src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationDialog.tsx
+37 -1
View File
@@ -15,6 +15,8 @@ import TagMissingLocationSearchLatLong from "./TagMissingLocationSearchLatLong";
import TagMissingLocationOSMSearchAndAdd from "./TagMissingLocationOSMSearchAndAdd";
import dynamic from "next/dynamic";
import { usePhotoSelectionContext } from "@/contexts/PhotoSelectionContext";
import { addRecentSearch } from "@/lib/utils";
import RecentSearches from "./RecentSearches";
const LazyMap = dynamic(() => import("./Map"), {
ssr: false
@@ -31,9 +33,15 @@ export default function TagMissingLocationDialog({
const [mapPosition, setMapPosition] = useState<IPlace>({
latitude: 48.210033,
longitude: 16.363449,
name: "Vienna, Austria"
name: ""
});
const handleMapSubmit = async (place: IPlace) => {
// Save to recent searches
addRecentSearch(place, 'map');
return onSubmit(place);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild >
@@ -64,11 +72,39 @@ export default function TagMissingLocationDialog({
</TabsContent>
<TabsContent value="maps">
<div className="flex flex-col gap-6 items-center ">
{/* Recent Searches */}
<RecentSearches
searchType="map"
onSelect={(place) => {
setMapPosition(place);
}}
selectedPlace={mapPosition.name ? mapPosition : null}
/>
<LazyMap location={{
latitude: isNaN(mapPosition.latitude) ? 0 : mapPosition.latitude,
longitude: isNaN(mapPosition.longitude) ? 0 : mapPosition.longitude,
name: mapPosition.name,
}} onLocationChange={setMapPosition} />
<div className="flex gap-2">
<Button
variant="outline"
onClick={() => setMapPosition({
latitude: 48.210033,
longitude: 16.363449,
name: ""
})}
>
Reset
</Button>
<Button
variant="default"
onClick={() => handleMapSubmit(mapPosition)}
disabled={!mapPosition.name}
>
Tag Location
</Button>
</div>
</div>
</TabsContent>
</Tabs>
src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationOSMSearchAndAdd.tsx
+17 -1
View File
@@ -4,11 +4,12 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Loader from "@/components/ui/loader";
import { useToast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils";
import { cn, addRecentSearch } from "@/lib/utils";
import { IPlace } from "@/types/common";
import axios from "axios";
import { Check } from "lucide-react";
import React, { useRef, useState } from "react";
import RecentSearches from "./RecentSearches";
interface ITagMissingLocationSearchAndAddProps {
onSubmit: (place: IPlace) => Promise<any>;
@@ -107,6 +108,8 @@ export default function TagMissingLocationOSMSearchAndAdd(
setSubmitting(true);
onSubmit(selectedPlace)
.then(() => {
// Save to recent searches
addRecentSearch(selectedPlace, 'osm');
toast({
title: "Location updated",
description: "Location updated successfully",
@@ -136,6 +139,19 @@ export default function TagMissingLocationOSMSearchAndAdd(
handleSearch(e.target.value);
}}
/>
{/* Recent Searches */}
{!loading && !searchedPlaces && (
<RecentSearches
searchType="osm"
onSelect={(place) => {
setSelectedPlace(place);
onLocationChange(place);
}}
selectedPlace={selectedPlace}
/>
)}
<div>
{loading && <Loader />}
{!loading && searchedPlaces && searchedPlaces.length === 0 && (
src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationSearchAndAdd.tsx
+18 -3
View File
@@ -5,10 +5,11 @@ import { Input } from "@/components/ui/input";
import Loader from "@/components/ui/loader";
import { useToast } from "@/components/ui/use-toast";
import { searchPlaces } from "@/handlers/api/common.handler";
import { cn } from "@/lib/utils";
import { cn, addRecentSearch } from "@/lib/utils";
import { IPlace } from "@/types/common";
import { Check } from "lucide-react";
import React, { useRef, useState } from "react";
import RecentSearches from "./RecentSearches";
interface ITagMissingLocationSearchAndAddProps {
onSubmit: (place: IPlace) => Promise<any>;
@@ -70,6 +71,8 @@ export default function TagMissingLocationSearchAndAdd(
setSubmitting(true);
onSubmit(selectedPlace)
.then(() => {
// Save to recent searches
addRecentSearch(selectedPlace, 'immich');
toast({
title: "Location updated",
description: "Location updated successfully",
@@ -101,6 +104,18 @@ export default function TagMissingLocationSearchAndAdd(
}}
/>
</div>
{/* Recent Searches */}
{!loading && !searchedPlaces && (
<RecentSearches
searchType="immich"
onSelect={(place) => {
setSelectedPlace(place);
}}
selectedPlace={selectedPlace}
/>
)}
<div>
{loading && <Loader />}
{!loading && searchedPlaces && searchedPlaces.length === 0 && (
@@ -113,9 +128,9 @@ export default function TagMissingLocationSearchAndAdd(
key={place.name}
onClick={() => handleSelect(place)}
className={cn(
"hover:bg-zinc-200 dark:hover:bg-zinc-800 flex justify-between items-center px-2 py-1 rounded-lg cursor-pointer",
"hover:bg-gray-300 dark:hover:bg-gray-700 flex justify-between items-center px-2 py-1 rounded-lg cursor-pointer",
{
"bg-zinc-900 dark:bg-zinc-200":
"bg-gray-300 dark:bg-gray-700":
selectedPlace && selectedPlace.name === place.name,
}
)}
src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationSearchLatLong.tsx
+15
View File
@@ -4,8 +4,10 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useToast } from "@/components/ui/use-toast";
import { addRecentSearch } from "@/lib/utils";
import { IPlace } from "@/types/common";
import React, { useEffect, useMemo, useState } from "react";
import RecentSearches from "./RecentSearches";
interface TagMissingLocationSearchLatLongProps {
onSubmit: (place: IPlace) => Promise<any>;
@@ -52,6 +54,8 @@ export default function TagMissingLocationSearchLatLong(
setSubmitting(true);
onSubmit(formData)
.then(() => {
// Save to recent searches
addRecentSearch(formData, 'latlong');
toast({
title: "Location updated",
description: "Location updated successfully",
@@ -119,6 +123,17 @@ export default function TagMissingLocationSearchLatLong(
</div>
</div>
{/* Recent Searches */}
<RecentSearches
searchType="latlong"
onSelect={(place) => {
setFormData(place);
onLocationChange(place);
setLatLong(`${place.latitude}, ${place.longitude}`);
}}
selectedPlace={formData.name ? formData : null}
/>
<div className="self-end">
<Button
variant="outline"
src/helpers/location.helper.ts
View File
src/lib/utils.ts
+58
View File
@@ -4,3 +4,61 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
// Recent searches localStorage utilities
export const RECENT_SEARCHES_KEY = 'immich-recent-location-searches';
export const MAX_RECENT_SEARCHES = 10;
export interface RecentSearch {
name: string;
latitude: number;
longitude: number;
timestamp: number;
searchType: 'osm' | 'immich' | 'latlong' | 'map';
}
export const getRecentSearches = (): RecentSearch[] => {
if (typeof window === 'undefined') return [];
try {
const stored = localStorage.getItem(RECENT_SEARCHES_KEY);
return stored ? JSON.parse(stored) : [];
} catch (error) {
console.error('Error reading recent searches from localStorage:', error);
return [];
}
};
export const addRecentSearch = (place: { name: string; latitude: number; longitude: number }, searchType: RecentSearch['searchType']): void => {
if (typeof window === 'undefined') return;
try {
const recentSearches = getRecentSearches();
const newSearch: RecentSearch = {
name: place.name,
latitude: place.latitude,
longitude: place.longitude,
timestamp: Date.now(),
searchType
};
// Remove duplicate if exists
const filteredSearches = recentSearches.filter(
search => !(search.name === place.name &&
search.latitude === place.latitude &&
search.longitude === place.longitude)
);
// Add new search at the beginning
const updatedSearches = [newSearch, ...filteredSearches].slice(0, MAX_RECENT_SEARCHES);
localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updatedSearches));
} catch (error) {
console.error('Error saving recent search to localStorage:', error);
}
};
export const getRecentSearchesByType = (searchType: RecentSearch['searchType']): RecentSearch[] => {
const allSearches = getRecentSearches();
return allSearches.filter(search => search.searchType === searchType);
};