Merge pull request #336 from tiquis0290/test

Adding support for SynologyPhoto (immich like) and adding support to use more photo proiders not just immich

client/src/api/authUrl.ts

@@ -1,4 +1,4 @@
-export async function getAuthUrl(url: string, purpose: 'download' | 'immich'): Promise<string> {
+export async function getAuthUrl(url: string, purpose: 'download'): Promise<string> {
   if (!url) return url
   try {
     const resp = await fetch('/api/auth/resource-token', {

client/src/components/Admin/AddonManager.tsx

@@ -15,7 +15,17 @@ interface Addon {
   name: string
   description: string
   icon: string
+  type: string
   enabled: boolean
+  config?: Record<string, unknown>
+}
+
+interface ProviderOption {
+  key: string
+  label: string
+  description: string
+  enabled: boolean
+  toggle: () => Promise<void>
 }
 
 interface AddonIconProps {
@@ -34,7 +44,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
   const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const toast = useToast()
   const refreshGlobalAddons = useAddonStore(s => s.loadAddons)
-  const [addons, setAddons] = useState([])
+  const [addons, setAddons] = useState<Addon[]>([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -53,7 +63,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
     }
   }
 
-  const handleToggle = async (addon) => {
+  const handleToggle = async (addon: Addon) => {
     const newEnabled = !addon.enabled
     // Optimistic update
     setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
@@ -68,9 +78,44 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
     }
   }
 
+  const isPhotoProviderAddon = (addon: Addon) => {
+    return addon.type === 'photo_provider'
+  }
+
+  const isPhotosAddon = (addon: Addon) => {
+    const haystack = `${addon.id} ${addon.name} ${addon.description}`.toLowerCase()
+    return addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
+  }
+
+  const handleTogglePhotoProvider = async (providerAddon: Addon) => {
+    const enableProvider = !providerAddon.enabled
+    const prev = addons
+
+    setAddons(current => current.map(a => a.id === providerAddon.id ? { ...a, enabled: enableProvider } : a))
+
+    try {
+      await adminApi.updateAddon(providerAddon.id, { enabled: enableProvider })
+      refreshGlobalAddons()
+      toast.success(t('admin.addons.toast.updated'))
+    } catch {
+      setAddons(prev)
+      toast.error(t('admin.addons.toast.error'))
+    }
+  }
+
   const tripAddons = addons.filter(a => a.type === 'trip')
   const globalAddons = addons.filter(a => a.type === 'global')
+  const photoProviderAddons = addons.filter(isPhotoProviderAddon)
   const integrationAddons = addons.filter(a => a.type === 'integration')
+  const photosAddon = tripAddons.find(isPhotosAddon)
+  const providerOptions: ProviderOption[] = photoProviderAddons.map((provider) => ({
+      key: provider.id,
+      label: provider.name,
+      description: provider.description,
+      enabled: provider.enabled,
+      toggle: () => handleTogglePhotoProvider(provider),
+    }))
+  const photosDerivedEnabled = providerOptions.some(p => p.enabled)
 
   if (loading) {
     return (
@@ -108,7 +153,42 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
                 </div>
                 {tripAddons.map(addon => (
                   <div key={addon.id}>
-                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
+                    <AddonRow
+                      addon={addon}
+                      onToggle={handleToggle}
+                      t={t}
+                      nameOverride={photosAddon && addon.id === photosAddon.id ? 'Memories providers' : undefined}
+                      descriptionOverride={photosAddon && addon.id === photosAddon.id ? 'Enable or disable each photo provider.' : undefined}
+                      statusOverride={photosAddon && addon.id === photosAddon.id ? photosDerivedEnabled : undefined}
+                      hideToggle={photosAddon && addon.id === photosAddon.id}
+                    />
+                    {photosAddon && addon.id === photosAddon.id && providerOptions.length > 0 && (
+                      <div className="px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
+                        <div className="space-y-2">
+                          {providerOptions.map(provider => (
+                            <div key={provider.key} className="flex items-center gap-4" style={{ minHeight: 32 }}>
+                              <div style={{ flex: 1, minWidth: 0 }}>
+                                <div className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{provider.label}</div>
+                                <div className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{provider.description}</div>
+                              </div>
+                              <div className="flex items-center gap-2 shrink-0">
+                                <span className="hidden sm:inline text-xs font-medium" style={{ color: provider.enabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+                                  {provider.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+                                </span>
+                                <button
+                                  onClick={provider.toggle}
+                                  className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                                  style={{ background: provider.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                                >
+                                  <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                                    style={{ transform: provider.enabled ? 'translateX(20px)' : 'translateX(0)' }} />
+                                </button>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
                     {addon.id === 'packing' && addon.enabled && onToggleBagTracking && (
                       <div className="flex items-center gap-4 px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
                         <div style={{ flex: 1, minWidth: 0 }}>
@@ -171,8 +251,10 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
 
 interface AddonRowProps {
   addon: Addon
-  onToggle: (addonId: string) => void
+  onToggle: (addon: Addon) => void
   t: (key: string) => string
+  statusOverride?: boolean
+  hideToggle?: boolean
 }
 
 function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string; description: string } {
@@ -187,9 +269,12 @@ function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string
   }
 }
 
-function AddonRow({ addon, onToggle, t }: AddonRowProps) {
+function AddonRow({ addon, onToggle, t, nameOverride, descriptionOverride, statusOverride, hideToggle }: AddonRowProps & { nameOverride?: string; descriptionOverride?: string }) {
   const isComingSoon = false
   const label = getAddonLabel(t, addon)
+  const displayName = nameOverride || label.name
+  const displayDescription = descriptionOverride || label.description
+  const enabledState = statusOverride ?? addon.enabled
   return (
     <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)', opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
       {/* Icon */}
@@ -200,7 +285,7 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
       {/* Info */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{label.name}</span>
+          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{displayName}</span>
           {isComingSoon && (
             <span className="text-[9px] font-semibold px-2 py-0.5 rounded-full" style={{ background: 'var(--bg-tertiary)', color: 'var(--text-faint)' }}>
               Coming Soon
@@ -210,28 +295,30 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
             {addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')}
           </span>
         </div>
-        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{label.description}</p>
+        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{displayDescription}</p>
       </div>
 
       {/* Toggle */}
       <div className="flex items-center gap-2 shrink-0">
-        <span className="hidden sm:inline text-xs font-medium" style={{ color: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
-          {isComingSoon ? t('admin.addons.disabled') : addon.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+        <span className="hidden sm:inline text-xs font-medium" style={{ color: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {isComingSoon ? t('admin.addons.disabled') : enabledState ? t('admin.addons.enabled') : t('admin.addons.disabled')}
         </span>
-        <button
-          onClick={() => !isComingSoon && onToggle(addon)}
-          disabled={isComingSoon}
-          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-          style={{ background: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
-        >
-          <span
-            className="inline-block h-4 w-4 transform rounded-full transition-transform"
-            style={{
-              background: 'var(--bg-card)',
-              transform: (addon.enabled && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
-            }}
-          />
-        </button>
+        {!hideToggle && (
+          <button
+            onClick={() => !isComingSoon && onToggle(addon)}
+            disabled={isComingSoon}
+            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+            style={{ background: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
+          >
+            <span
+              className="inline-block h-4 w-4 transform rounded-full transition-transform"
+              style={{
+                background: 'var(--bg-card)',
+                transform: (enabledState && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
+              }}
+            />
+          </button>
+        )}
       </div>
     </div>
   )

client/src/components/Memories/MemoriesPanel.tsx

@@ -1,16 +1,23 @@
 import { useState, useEffect, useCallback } from 'react'
+import apiClient, { addonsApi } from '../../api/client'
 import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen, Info, ChevronLeft, ChevronRight } from 'lucide-react'
-import apiClient from '../../api/client'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
-import { getAuthUrl, fetchImageAsBlob, clearImageQueue } from '../../api/authUrl'
+import { fetchImageAsBlob, clearImageQueue } from '../../api/authUrl'
 import { useToast } from '../shared/Toast'
 
-function ImmichImg({ baseUrl, style, loading }: { baseUrl: string; style?: React.CSSProperties; loading?: 'lazy' | 'eager' }) {
+interface PhotoProvider {
+  id: string
+  name: string
+  icon?: string
+  config?: Record<string, unknown>
+}
+
+function ProviderImg({ baseUrl, provider, style, loading }: { baseUrl: string; provider: string; style?: React.CSSProperties; loading?: 'lazy' | 'eager' }) {
   const [src, setSrc] = useState('')
   useEffect(() => {
     let revoke = ''
-    fetchImageAsBlob(baseUrl).then(blobUrl => {
+    fetchImageAsBlob('/api' + baseUrl).then(blobUrl => {
       revoke = blobUrl
       setSrc(blobUrl)
     })
@@ -19,18 +26,22 @@ function ImmichImg({ baseUrl, style, loading }: { baseUrl: string; style?: React
   return src ? <img src={src} alt="" loading={loading} style={style} /> : null
 }
 
+
 // ── Types ───────────────────────────────────────────────────────────────────
 
 interface TripPhoto {
-  immich_asset_id: string
+  asset_id: string
+  provider: string
   user_id: number
   username: string
   shared: number
   added_at: string
+  city?: string | null
 }
 
-interface ImmichAsset {
+interface Asset {
   id: string
+  provider: string
   takenAt: string
   city: string | null
   country: string | null
@@ -50,6 +61,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const currentUser = useAuthStore(s => s.user)
 
   const [connected, setConnected] = useState(false)
+  const [enabledProviders, setEnabledProviders] = useState<PhotoProvider[]>([])
+  const [availableProviders, setAvailableProviders] = useState<PhotoProvider[]>([])
+  const [selectedProvider, setSelectedProvider] = useState<string>('')
   const [loading, setLoading] = useState(true)
 
   // Trip photos (saved selections)
@@ -57,7 +71,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // Photo picker
   const [showPicker, setShowPicker] = useState(false)
-  const [pickerPhotos, setPickerPhotos] = useState<ImmichAsset[]>([])
+  const [pickerPhotos, setPickerPhotos] = useState<Asset[]>([])
   const [pickerLoading, setPickerLoading] = useState(false)
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
 
@@ -72,50 +86,102 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const [showAlbumPicker, setShowAlbumPicker] = useState(false)
   const [albums, setAlbums] = useState<{ id: string; albumName: string; assetCount: number }[]>([])
   const [albumsLoading, setAlbumsLoading] = useState(false)
-  const [albumLinks, setAlbumLinks] = useState<{ id: number; immich_album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
+  const [albumLinks, setAlbumLinks] = useState<{ id: number; provider: string; album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
   const [syncing, setSyncing] = useState<number | null>(null)
 
+
+  //helpers for building urls
+  const ADDON_PREFIX = "/integrations/memories"
+  
+  function buildUnifiedUrl(endpoint: string, lastParam?:string,): string {
+    return `${ADDON_PREFIX}/unified/trips/${tripId}/${endpoint}${lastParam ? `/${lastParam}` : ''}`;
+  }
+
+  function buildProviderUrl(provider: string, endpoint: string, item?: string): string {
+    if (endpoint === 'album-link-sync') {
+      endpoint = `trips/${tripId}/album-links/${item?.toString() || ''}/sync`
+    }
+    return `${ADDON_PREFIX}/${provider}/${endpoint}`;
+  }
+
+  function buildProviderAssetUrl(photo: TripPhoto, what: string): string {
+    return `${ADDON_PREFIX}/${photo.provider}/assets/${tripId}/${photo.asset_id}/${photo.user_id}/${what}`
+  }
+
+  function buildProviderAssetUrlFromAsset(asset: Asset, what: string, userId: number): string {
+    const photo: TripPhoto = {
+      asset_id: asset.id,
+      provider: asset.provider,
+      user_id: userId,
+      username: '',
+      shared: 0,
+      added_at: null
+    }
+    return buildProviderAssetUrl(photo, what)
+  }
+
+
   const loadAlbumLinks = async () => {
     try {
-      const res = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
+      const res = await apiClient.get(buildUnifiedUrl('album-links'))
       setAlbumLinks(res.data.links || [])
     } catch { setAlbumLinks([]) }
   }
 
-  const openAlbumPicker = async () => {
-    setShowAlbumPicker(true)
+  const loadAlbums = async (provider: string = selectedProvider) => {
+    if (!provider) return
     setAlbumsLoading(true)
     try {
-      const res = await apiClient.get('/integrations/immich/albums')
+      const res = await apiClient.get(buildProviderUrl(provider, 'albums'))
       setAlbums(res.data.albums || [])
-    } catch { setAlbums([]); toast.error(t('memories.error.loadAlbums')) }
-    finally { setAlbumsLoading(false) }
+    } catch {
+      setAlbums([])
+      toast.error(t('memories.error.loadAlbums'))
+    } finally {
+      setAlbumsLoading(false)
+    }
+  }
+
+  const openAlbumPicker = async () => {
+    setShowAlbumPicker(true)
+    await loadAlbums(selectedProvider)
   }
 
   const linkAlbum = async (albumId: string, albumName: string) => {
+    if (!selectedProvider) {
+      toast.error(t('memories.error.linkAlbum'))
+      return
+    }
+
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links`, { album_id: albumId, album_name: albumName })
+      await apiClient.post(buildUnifiedUrl('album-links'), {
+        album_id: albumId,
+        album_name: albumName,
+        provider: selectedProvider,
+      })
       setShowAlbumPicker(false)
       await loadAlbumLinks()
       // Auto-sync after linking
-      const linksRes = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
-      const newLink = (linksRes.data.links || []).find((l: any) => l.immich_album_id === albumId)
+      const linksRes = await apiClient.get(buildUnifiedUrl('album-links'))
+      const newLink = (linksRes.data.links || []).find((l: any) => l.album_id === albumId && l.provider === selectedProvider)
       if (newLink) await syncAlbum(newLink.id)
     } catch { toast.error(t('memories.error.linkAlbum')) }
   }
 
   const unlinkAlbum = async (linkId: number) => {
     try {
-      await apiClient.delete(`/integrations/immich/trips/${tripId}/album-links/${linkId}`)
+      await apiClient.delete(buildUnifiedUrl('album-links', linkId.toString()))
       await loadAlbumLinks()
       await loadPhotos()
     } catch { toast.error(t('memories.error.unlinkAlbum')) }
   }
 
-  const syncAlbum = async (linkId: number) => {
+  const syncAlbum = async (linkId: number, provider?: string) => {
+    const targetProvider = provider || selectedProvider
+    if (!targetProvider) return
     setSyncing(linkId)
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links/${linkId}/sync`)
+      await apiClient.post(buildProviderUrl(targetProvider, 'album-link-sync', linkId.toString()))
       await loadAlbumLinks()
       await loadPhotos()
     } catch { toast.error(t('memories.error.syncAlbum')) }
@@ -152,7 +218,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   const loadPhotos = async () => {
     try {
-      const photosRes = await apiClient.get(`/integrations/immich/trips/${tripId}/photos`)
+      const photosRes = await apiClient.get(buildUnifiedUrl('photos'))
       setTripPhotos(photosRes.data.photos || [])
     } catch {
       setTripPhotos([])
@@ -162,9 +228,37 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const loadInitial = async () => {
     setLoading(true)
     try {
-      const statusRes = await apiClient.get('/integrations/immich/status')
-      setConnected(statusRes.data.connected)
+      const addonsRes = await addonsApi.enabled().catch(() => ({ addons: [] as any[] }))
+      const enabledAddons = addonsRes?.addons || []
+      const photoProviders = enabledAddons.filter((a: any) => a.type === 'photo_provider' && a.enabled)
+
+      setEnabledProviders(photoProviders.map((a: any) => ({ id: a.id, name: a.name, icon: a.icon, config: a.config })))
+
+      // Test connection status for each enabled provider
+      const statusResults = await Promise.all(
+        photoProviders.map(async (provider: any) => {
+          const statusUrl = (provider.config as Record<string, unknown>)?.status_get as string
+          if (!statusUrl) return { provider, connected: false }
+          try {
+            const res = await apiClient.get(statusUrl)
+            return { provider, connected: !!res.data?.connected }
+          } catch {
+            return { provider, connected: false }
+          }
+        })
+      )
+
+      const connectedProviders = statusResults
+        .filter(r => r.connected)
+        .map(r => ({ id: r.provider.id, name: r.provider.name, icon: r.provider.icon, config: r.provider.config }))
+      
+      setAvailableProviders(connectedProviders)
+      setConnected(connectedProviders.length > 0)
+      if (connectedProviders.length > 0 && !selectedProvider) {
+        setSelectedProvider(connectedProviders[0].id)
+      }
     } catch {
+      setAvailableProviders([])
       setConnected(false)
     }
     await loadPhotos()
@@ -184,14 +278,35 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
     await loadPickerPhotos(!!(startDate && endDate))
   }
 
+  useEffect(() => {
+    if (showPicker) {
+      loadPickerPhotos(pickerDateFilter)
+    }
+  }, [selectedProvider])
+
+  useEffect(() => {
+    loadAlbumLinks()
+  }, [tripId])
+
+  useEffect(() => {
+    if (showAlbumPicker) {
+      loadAlbums(selectedProvider)
+    }
+  }, [showAlbumPicker, selectedProvider, tripId])
+
   const loadPickerPhotos = async (useDate: boolean) => {
     setPickerLoading(true)
     try {
-      const res = await apiClient.post('/integrations/immich/search', {
+      const provider = availableProviders.find(p => p.id === selectedProvider)
+      if (!provider) {
+        setPickerPhotos([])
+        return
+      }
+      const res = await apiClient.post(buildProviderUrl(provider.id, 'search'), {
         from: useDate && startDate ? startDate : undefined,
         to: useDate && endDate ? endDate : undefined,
       })
-      setPickerPhotos(res.data.assets || [])
+      setPickerPhotos((res.data.assets || []).map((asset: Asset) => ({ ...asset, provider: provider.id })))
     } catch {
       setPickerPhotos([])
       toast.error(t('memories.error.loadPhotos'))
@@ -217,8 +332,17 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const executeAddPhotos = async () => {
     setShowConfirmShare(false)
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/photos`, {
-        asset_ids: [...selectedIds],
+      const groupedByProvider = new Map<string, string[]>()
+      for (const key of selectedIds) {
+        const [provider, assetId] = key.split('::')
+        if (!provider || !assetId) continue
+        const list = groupedByProvider.get(provider) || []
+        list.push(assetId)
+        groupedByProvider.set(provider, list)
+      }
+
+      await apiClient.post(buildUnifiedUrl('photos'), {
+        selections: [...groupedByProvider.entries()].map(([provider, asset_ids]) => ({ provider, asset_ids })),
         shared: true,
       })
       setShowPicker(false)
@@ -229,28 +353,38 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // ── Remove photo ──────────────────────────────────────────────────────────
 
-  const removePhoto = async (assetId: string) => {
+  const removePhoto = async (photo: TripPhoto) => {
     try {
-      await apiClient.delete(`/integrations/immich/trips/${tripId}/photos/${assetId}`)
-      setTripPhotos(prev => prev.filter(p => p.immich_asset_id !== assetId))
+      await apiClient.delete(buildUnifiedUrl('photos'), {
+        data: {
+          asset_id: photo.asset_id,
+          provider: photo.provider,
+        },
+      })
+      setTripPhotos(prev => prev.filter(p => !(p.provider === photo.provider && p.asset_id === photo.asset_id)))
     } catch { toast.error(t('memories.error.removePhoto')) }
   }
 
   // ── Toggle sharing ────────────────────────────────────────────────────────
 
-  const toggleSharing = async (assetId: string, shared: boolean) => {
+  const toggleSharing = async (photo: TripPhoto, shared: boolean) => {
     try {
-      await apiClient.put(`/integrations/immich/trips/${tripId}/photos/${assetId}/sharing`, { shared })
+      await apiClient.put(buildUnifiedUrl('photos', 'sharing'), {
+        shared,
+        asset_id: photo.asset_id,
+        provider: photo.provider,
+      })
       setTripPhotos(prev => prev.map(p =>
-        p.immich_asset_id === assetId ? { ...p, shared: shared ? 1 : 0 } : p
+        p.provider === photo.provider && p.asset_id === photo.asset_id ? { ...p, shared: shared ? 1 : 0 } : p
       ))
     } catch { toast.error(t('memories.error.toggleSharing')) }
   }
 
   // ── Helpers ───────────────────────────────────────────────────────────────
 
-  const thumbnailBaseUrl = (assetId: string, userId: number) =>
-    `/api/integrations/immich/assets/${assetId}/thumbnail?userId=${userId}`
+  
+
+  const makePickerKey = (provider: string, assetId: string): string => `${provider}::${assetId}`
 
   const ownPhotos = tripPhotos.filter(p => p.user_id === currentUser?.id)
   const othersPhotos = tripPhotos.filter(p => p.user_id !== currentUser?.id && p.shared)
@@ -290,10 +424,10 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 40, textAlign: 'center', ...font }}>
         <Camera size={40} style={{ color: 'var(--text-faint)', marginBottom: 12 }} />
         <h3 style={{ margin: '0 0 6px', fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>
-          {t('memories.notConnected')}
+          {t('memories.notConnected', { provider_name: enabledProviders.length === 1 ? enabledProviders[0]?.name : 'Photo provider' })}
         </h3>
         <p style={{ margin: 0, fontSize: 13, color: 'var(--text-muted)', maxWidth: 300 }}>
-          {t('memories.notConnectedHint')}
+          {enabledProviders.length === 1 ? t('memories.notConnectedHint', { provider_name: enabledProviders[0]?.name }) : t('memories.notConnectedMultipleHint', { provider_names: enabledProviders.map(p => p.name).join(', ') })}
         </p>
       </div>
     )
@@ -301,22 +435,53 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // ── Photo Picker Modal ────────────────────────────────────────────────────
 
+  const ProviderTabs = () => {
+    if (availableProviders.length < 2) return null
+    return (
+      <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
+        {availableProviders.map(provider => (
+          <button
+            key={provider.id}
+            onClick={() => setSelectedProvider(provider.id)}
+            style={{
+              padding: '6px 12px',
+              borderRadius: 99,
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              border: '1px solid',
+              transition: 'all 0.15s',
+              background: selectedProvider === provider.id ? 'var(--text-primary)' : 'var(--bg-card)',
+              borderColor: selectedProvider === provider.id ? 'var(--text-primary)' : 'var(--border-primary)',
+              color: selectedProvider === provider.id ? 'var(--bg-primary)' : 'var(--text-muted)',
+              textTransform: 'capitalize',
+            }}
+          >
+            {provider.name}
+          </button>
+        ))}
+      </div>
+    )
+  }
+
   // ── Album Picker Modal ──────────────────────────────────────────────────
 
   if (showAlbumPicker) {
-    const linkedIds = new Set(albumLinks.map(l => l.immich_album_id))
+    const linkedIds = new Set(albumLinks.map(l => l.album_id))
     return (
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
         <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-              {t('memories.selectAlbum')}
+              {availableProviders.length > 1 ? t('memories.selectAlbumMultiple') : t('memories.selectAlbum', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
             </h3>
             <button onClick={() => setShowAlbumPicker(false)}
               style={{ padding: '7px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
               {t('common.cancel')}
             </button>
           </div>
+          <ProviderTabs />
         </div>
         <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
           {albumsLoading ? (
@@ -368,7 +533,11 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   // ── Photo Picker Modal ────────────────────────────────────────────────────
 
   if (showPicker) {
-    const alreadyAdded = new Set(tripPhotos.filter(p => p.user_id === currentUser?.id).map(p => p.immich_asset_id))
+    const alreadyAdded = new Set(
+      tripPhotos
+        .filter(p => p.user_id === currentUser?.id)
+        .map(p => makePickerKey(p.provider, p.asset_id))
+    )
 
     return (
       <>
@@ -377,7 +546,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
         <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-              {t('memories.selectPhotos')}
+              {availableProviders.length > 1 ? t('memories.selectPhotosMultiple') : t('memories.selectPhotos', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
             </h3>
             <div style={{ display: 'flex', gap: 8 }}>
               <button onClick={() => { clearImageQueue(); setShowPicker(false) }}
@@ -395,6 +564,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
               </button>
             </div>
           </div>
+          <div style={{ marginBottom: 10 }}>
+            <ProviderTabs />
+          </div>
           {/* Filter tabs */}
           <div style={{ display: 'flex', gap: 6 }}>
             {startDate && endDate && (
@@ -438,10 +610,17 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             <div style={{ textAlign: 'center', padding: '60px 20px' }}>
               <Camera size={36} style={{ color: 'var(--text-faint)', margin: '0 auto 10px', display: 'block' }} />
               <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>{t('memories.noPhotos')}</p>
+              {
+                pickerDateFilter && (
+                  <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 16px' }}>
+                    {t('memories.noPhotosHint', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
+                  </p>
+                )
+              } 
             </div>
           ) : (() => {
             // Group photos by month
-            const byMonth: Record<string, ImmichAsset[]> = {}
+            const byMonth: Record<string, Asset[]> = {}
             for (const asset of pickerPhotos) {
               const d = asset.takenAt ? new Date(asset.takenAt) : null
               const key = d ? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}` : 'unknown'
@@ -459,11 +638,12 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                 </div>
                 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: 4 }}>
                   {byMonth[month].map(asset => {
-                    const isSelected = selectedIds.has(asset.id)
-                    const isAlready = alreadyAdded.has(asset.id)
+                    const pickerKey = makePickerKey(asset.provider, asset.id)
+                    const isSelected = selectedIds.has(pickerKey)
+                    const isAlready = alreadyAdded.has(pickerKey)
                     return (
-                      <div key={asset.id}
-                        onClick={() => !isAlready && togglePickerSelect(asset.id)}
+                      <div key={pickerKey}
+                        onClick={() => !isAlready && togglePickerSelect(pickerKey)}
                         style={{
                           position: 'relative', aspectRatio: '1', borderRadius: 8, overflow: 'hidden',
                           cursor: isAlready ? 'default' : 'pointer',
@@ -471,7 +651,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                           outline: isSelected ? '3px solid var(--text-primary)' : 'none',
                           outlineOffset: -3,
                         }}>
-                        <ImmichImg baseUrl={thumbnailBaseUrl(asset.id, currentUser!.id)} loading="lazy"
+                        <ProviderImg baseUrl={buildProviderAssetUrlFromAsset(asset, 'thumbnail', currentUser!.id)} provider={asset.provider} loading="lazy"
                           style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                         {isSelected && (
                           <div style={{
@@ -579,7 +759,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                 <FolderOpen size={11} />
                 <span style={{ fontWeight: 500 }}>{link.album_name}</span>
                 {link.username !== currentUser?.username && <span style={{ color: 'var(--text-faint)' }}>({link.username})</span>}
-                <button onClick={() => syncAlbum(link.id)} disabled={syncing === link.id} title={t('memories.syncAlbum')}
+                <button onClick={() => syncAlbum(link.id, link.provider)} disabled={syncing === link.id} title={t('memories.syncAlbum')}
                   style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex', color: 'var(--text-faint)' }}>
                   <RefreshCw size={11} style={{ animation: syncing === link.id ? 'spin 1s linear infinite' : 'none' }} />
                 </button>
@@ -625,12 +805,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
         {allVisible.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px' }}>
             <Camera size={40} style={{ color: 'var(--text-faint)', margin: '0 auto 12px', display: 'block' }} />
-            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>
+            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 12px' }}>
               {t('memories.noPhotos')}
             </p>
-            <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 16px' }}>
-              {t('memories.noPhotosHint')}
-            </p>
             <button onClick={openPicker}
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 5, padding: '9px 18px', borderRadius: 10,
@@ -645,19 +822,19 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             {allVisible.map(photo => {
               const isOwn = photo.user_id === currentUser?.id
               return (
-                <div key={photo.immich_asset_id} className="group"
+                <div key={`${photo.provider}:${photo.asset_id}`} className="group"
                   style={{ position: 'relative', aspectRatio: '1', borderRadius: 10, overflow: 'visible', cursor: 'pointer' }}
                   onClick={() => {
-                    setLightboxId(photo.immich_asset_id); setLightboxUserId(photo.user_id); setLightboxInfo(null)
+                    setLightboxId(photo.asset_id); setLightboxUserId(photo.user_id); setLightboxInfo(null)
                     if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
                     setLightboxOriginalSrc('')
-                    fetchImageAsBlob(`/api/integrations/immich/assets/${photo.immich_asset_id}/original?userId=${photo.user_id}`).then(setLightboxOriginalSrc)
+                    fetchImageAsBlob('/api' + buildProviderAssetUrl(photo, 'original')).then(setLightboxOriginalSrc)
                     setLightboxInfoLoading(true)
-                    apiClient.get(`/integrations/immich/assets/${photo.immich_asset_id}/info?userId=${photo.user_id}`)
+                    apiClient.get(buildProviderAssetUrl(photo, 'info'))
                       .then(r => setLightboxInfo(r.data)).catch(() => {}).finally(() => setLightboxInfoLoading(false))
                   }}>
 
-                  <ImmichImg baseUrl={thumbnailBaseUrl(photo.immich_asset_id, photo.user_id)} loading="lazy"
+                  <ProviderImg baseUrl={buildProviderAssetUrl(photo, 'thumbnail')} provider={photo.provider} loading="lazy"
                     style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10 }} />
 
                   {/* Other user's avatar */}
@@ -688,7 +865,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                   {isOwn && (
                     <div className="opacity-0 group-hover:opacity-100"
                       style={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 3, transition: 'opacity 0.15s' }}>
-                      <button onClick={e => { e.stopPropagation(); toggleSharing(photo.immich_asset_id, !photo.shared) }}
+                      <button onClick={e => { e.stopPropagation(); toggleSharing(photo, !photo.shared) }}
                         title={photo.shared ? t('memories.stopSharing') : t('memories.sharePhotos')}
                         style={{
                           width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
@@ -697,7 +874,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                         }}>
                         {photo.shared ? <Eye size={12} color="white" /> : <EyeOff size={12} color="white" />}
                       </button>
-                      <button onClick={e => { e.stopPropagation(); removePhoto(photo.immich_asset_id) }}
+                      <button onClick={e => { e.stopPropagation(); removePhoto(photo) }}
                         style={{
                           width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
                           background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
@@ -767,7 +944,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
           setShowMobileInfo(false)
         }
 
-        const currentIdx = allVisible.findIndex(p => p.immich_asset_id === lightboxId)
+        const currentIdx = allVisible.findIndex(p => p.asset_id === lightboxId)
         const hasPrev = currentIdx > 0
         const hasNext = currentIdx < allVisible.length - 1
         const navigateTo = (idx: number) => {
@@ -775,10 +952,10 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
           if (!photo) return
           if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
           setLightboxOriginalSrc('')
-          setLightboxId(photo.immich_asset_id)
+          setLightboxId(photo.asset_id)
           setLightboxUserId(photo.user_id)
           setLightboxInfo(null)
-          fetchImageAsBlob(`/api/integrations/immich/assets/${photo.immich_asset_id}/original?userId=${photo.user_id}`).then(setLightboxOriginalSrc)
+          fetchImageAsBlob('/api' + buildProviderAssetUrl(photo, 'original')).then(setLightboxOriginalSrc)
         }
 
         const exifContent = lightboxInfo ? (

client/src/components/Settings/IntegrationsTab.tsx

@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from 'react'
-import { Camera, Terminal, Save, Check, Copy, Plus, Trash2 } from 'lucide-react'
+import Section from './Section'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
+import { Trash2, Copy, Terminal, Plus, Check } from 'lucide-react'
 import { authApi } from '../../api/client'
-import apiClient from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
-import Section from './Section'
+import PhotoProvidersSection from './PhotoProvidersSection'
+
 
 interface McpToken {
   id: number
@@ -18,65 +19,12 @@ interface McpToken {
 export default function IntegrationsTab(): React.ReactElement {
   const { t, locale } = useTranslation()
   const toast = useToast()
-  const { isEnabled: addonEnabled } = useAddonStore()
-  const memoriesEnabled = addonEnabled('memories')
+  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
   const mcpEnabled = addonEnabled('mcp')
 
-  // Immich state
-  const [immichUrl, setImmichUrl] = useState('')
-  const [immichApiKey, setImmichApiKey] = useState('')
-  const [immichConnected, setImmichConnected] = useState(false)
-  const [immichTesting, setImmichTesting] = useState(false)
-  const [immichSaving, setImmichSaving] = useState(false)
-  const [immichTestPassed, setImmichTestPassed] = useState(false)
-
   useEffect(() => {
-    if (memoriesEnabled) {
-      apiClient.get('/integrations/immich/settings').then(r => {
-        setImmichUrl(r.data.immich_url || '')
-        setImmichConnected(r.data.connected)
-      }).catch(() => {})
-    }
-  }, [memoriesEnabled])
-
-  const handleSaveImmich = async () => {
-    setImmichSaving(true)
-    try {
-      const saveRes = await apiClient.put('/integrations/immich/settings', { immich_url: immichUrl, immich_api_key: immichApiKey || undefined })
-      if (saveRes.data.warning) toast.warning(saveRes.data.warning)
-      toast.success(t('memories.saved'))
-      const res = await apiClient.get('/integrations/immich/status')
-      setImmichConnected(res.data.connected)
-      setImmichTestPassed(false)
-    } catch {
-      toast.error(t('memories.connectionError'))
-    } finally {
-      setImmichSaving(false)
-    }
-  }
-
-  const handleTestImmich = async () => {
-    setImmichTesting(true)
-    try {
-      const res = await apiClient.post('/integrations/immich/test', { immich_url: immichUrl, immich_api_key: immichApiKey })
-      if (res.data.connected) {
-        if (res.data.canonicalUrl) {
-          setImmichUrl(res.data.canonicalUrl)
-          toast.success(`${t('memories.connectionSuccess')} — ${res.data.user?.name || ''} (URL updated to ${res.data.canonicalUrl})`)
-        } else {
-          toast.success(`${t('memories.connectionSuccess')} — ${res.data.user?.name || ''}`)
-        }
-        setImmichTestPassed(true)
-      } else {
-        toast.error(`${t('memories.connectionError')}: ${res.data.error}`)
-        setImmichTestPassed(false)
-      }
-    } catch {
-      toast.error(t('memories.connectionError'))
-    } finally {
-      setImmichTesting(false)
-    }
-  }
+    loadAddons()
+  }, [loadAddons])
 
   // MCP state
   const [mcpTokens, setMcpTokens] = useState<McpToken[]>([])
@@ -143,45 +91,7 @@ export default function IntegrationsTab(): React.ReactElement {
 
   return (
     <>
-      {memoriesEnabled && (
-        <Section title="Immich" icon={Camera}>
-          <div className="space-y-3">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('memories.immichUrl')}</label>
-              <input type="url" value={immichUrl} onChange={e => { setImmichUrl(e.target.value); setImmichTestPassed(false) }}
-                placeholder="https://immich.example.com"
-                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300" />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('memories.immichApiKey')}</label>
-              <input type="password" value={immichApiKey} onChange={e => { setImmichApiKey(e.target.value); setImmichTestPassed(false) }}
-                placeholder={immichConnected ? '••••••••' : 'API Key'}
-                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300" />
-            </div>
-            <div className="flex items-center gap-3">
-              <button onClick={handleSaveImmich} disabled={immichSaving || !immichTestPassed}
-                className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
-                title={!immichTestPassed ? t('memories.testFirst') : ''}>
-                <Save className="w-4 h-4" /> {t('common.save')}
-              </button>
-              <button onClick={handleTestImmich} disabled={immichTesting}
-                className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50">
-                {immichTesting
-                  ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
-                  : <Camera className="w-4 h-4" />}
-                {t('memories.testConnection')}
-              </button>
-              {immichConnected && (
-                <span className="text-xs font-medium text-green-600 flex items-center gap-1">
-                  <span className="w-2 h-2 bg-green-500 rounded-full" />
-                  {t('memories.connected')}
-                </span>
-              )}
-            </div>
-          </div>
-        </Section>
-      )}
-
+      <PhotoProvidersSection />
       {mcpEnabled && (
         <Section title={t('settings.mcp.title')} icon={Terminal}>
           {/* Endpoint URL */}

client/src/components/Settings/PhotoProvidersSection.tsx

@@ -0,0 +1,248 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Camera, Save } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../../components/shared/Toast'
+import apiClient from '../../api/client'
+import { useAddonStore } from '../../store/addonStore'
+import Section from './Section'
+
+interface ProviderField {
+  key: string
+  label: string
+  input_type: string
+  placeholder?: string | null
+  required: boolean
+  secret: boolean
+  settings_key?: string | null
+  payload_key?: string | null
+  sort_order: number
+}
+
+interface PhotoProviderAddon {
+  id: string
+  name: string
+  type: string
+  enabled: boolean
+  config?: Record<string, unknown>
+  fields?: ProviderField[]
+}
+
+interface ProviderConfig {
+  settings_get?: string
+  settings_put?: string
+  status_get?: string
+  test_get?: string
+  test_post?: string
+}
+
+const getProviderConfig = (provider: PhotoProviderAddon): ProviderConfig => {
+  const raw = provider.config || {}
+  return {
+    settings_get: typeof raw.settings_get === 'string' ? raw.settings_get : undefined,
+    settings_put: typeof raw.settings_put === 'string' ? raw.settings_put : undefined,
+    status_get: typeof raw.status_get === 'string' ? raw.status_get : undefined,
+    test_get: typeof raw.test_get === 'string' ? raw.test_get : undefined,
+    test_post: typeof raw.test_post === 'string' ? raw.test_post : undefined,
+  }
+}
+
+const getProviderFields = (provider: PhotoProviderAddon): ProviderField[] => {
+  return [...(provider.fields || [])].sort((a, b) => a.sort_order - b.sort_order)
+}
+
+export default function PhotoProvidersSection(): React.ReactElement {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const { isEnabled: addonEnabled, addons } = useAddonStore()
+  const memoriesEnabled = addonEnabled('memories')
+
+  const [saving, setSaving] = useState<Record<string, boolean>>({})
+  const [providerValues, setProviderValues] = useState<Record<string, Record<string, string>>>({})
+  const [providerConnected, setProviderConnected] = useState<Record<string, boolean>>({})
+  const [providerTesting, setProviderTesting] = useState<Record<string, boolean>>({})
+
+  const activePhotoProviders = useMemo(
+    () => addons.filter(a => a.type === 'photo_provider' && a.enabled) as PhotoProviderAddon[],
+    [addons],
+  )
+
+  const buildProviderPayload = (provider: PhotoProviderAddon): Record<string, unknown> => {
+    const values = providerValues[provider.id] || {}
+    const payload: Record<string, unknown> = {}
+    for (const field of getProviderFields(provider)) {
+      const payloadKey = field.payload_key || field.settings_key || field.key
+      const value = (values[field.key] || '').trim()
+      if (field.secret && !value) continue
+      payload[payloadKey] = value
+    }
+    return payload
+  }
+
+  const refreshProviderConnection = async (provider: PhotoProviderAddon) => {
+    const cfg = getProviderConfig(provider)
+    const statusPath = cfg.status_get
+    if (!statusPath) return
+    try {
+      const res = await apiClient.get(statusPath)
+      setProviderConnected(prev => ({ ...prev, [provider.id]: !!res.data?.connected }))
+    } catch {
+      setProviderConnected(prev => ({ ...prev, [provider.id]: false }))
+    }
+  }
+
+  const activeProviderSignature = useMemo(
+    () => activePhotoProviders.map(provider => provider.id).join('|'),
+    [activePhotoProviders],
+  )
+
+  useEffect(() => {
+    let isCancelled = false
+
+    for (const provider of activePhotoProviders) {
+      const cfg = getProviderConfig(provider)
+      const fields = getProviderFields(provider)
+
+      if (cfg.settings_get) {
+        apiClient.get(cfg.settings_get).then(res => {
+          if (isCancelled) return
+
+          const nextValues: Record<string, string> = {}
+          for (const field of fields) {
+            // Do not prefill secret fields; user can overwrite only when needed.
+            if (field.secret) continue
+            const sourceKey = field.settings_key || field.payload_key || field.key
+            const rawValue = (res.data as Record<string, unknown>)[sourceKey]
+            nextValues[field.key] = typeof rawValue === 'string' ? rawValue : rawValue != null ? String(rawValue) : ''
+          }
+          setProviderValues(prev => ({
+            ...prev,
+            [provider.id]: { ...(prev[provider.id] || {}), ...nextValues },
+          }))
+          if (typeof res.data?.connected === 'boolean') {
+            setProviderConnected(prev => ({ ...prev, [provider.id]: !!res.data.connected }))
+          }
+        }).catch(() => { })
+      }
+
+      refreshProviderConnection(provider).catch(() => { })
+    }
+
+    return () => {
+      isCancelled = true
+    }
+  }, [activePhotoProviders, activeProviderSignature])
+
+  const handleProviderFieldChange = (providerId: string, key: string, value: string) => {
+    setProviderValues(prev => ({
+      ...prev,
+      [providerId]: { ...(prev[providerId] || {}), [key]: value },
+    }))
+  }
+
+  const isProviderSaveDisabled = (provider: PhotoProviderAddon): boolean => {
+    const values = providerValues[provider.id] || {}
+    return getProviderFields(provider).some(field => {
+      if (!field.required) return false
+      return !(values[field.key] || '').trim()
+    })
+  }
+
+  const handleSaveProvider = async (provider: PhotoProviderAddon) => {
+    const cfg = getProviderConfig(provider)
+    if (!cfg.settings_put) return
+    setSaving(s => ({ ...s, [provider.id]: true }))
+    try {
+      await apiClient.put(cfg.settings_put, buildProviderPayload(provider))
+      await refreshProviderConnection(provider)
+      toast.success(t('memories.saved', { provider_name: provider.name }))
+    } catch {
+      toast.error(t('memories.saveError', { provider_name: provider.name }))
+    } finally {
+      setSaving(s => ({ ...s, [provider.id]: false }))
+    }
+  }
+
+  const handleTestProvider = async (provider: PhotoProviderAddon) => {
+    const cfg = getProviderConfig(provider)
+    const testPath = cfg.test_post || cfg.test_get || cfg.status_get
+    if (!testPath) return
+    setProviderTesting(prev => ({ ...prev, [provider.id]: true }))
+    try {
+      const payload = buildProviderPayload(provider)
+      const res = cfg.test_post ? await apiClient.post(testPath, payload) : await apiClient.get(testPath)
+      const ok = !!res.data?.connected
+      setProviderConnected(prev => ({ ...prev, [provider.id]: ok }))
+      if (ok) {
+        toast.success(t('memories.connectionSuccess', { provider_name: provider.name }))
+      } else {
+        toast.error(`${t('memories.connectionError', { provider_name: provider.name })} ${res.data?.error ? `: ${String(res.data.error)}` : ''}`)
+      }
+    } catch {
+      toast.error(t('memories.connectionError', { provider_name: provider.name }))
+    } finally {
+      setProviderTesting(prev => ({ ...prev, [provider.id]: false }))
+    }
+  }
+
+  const renderPhotoProviderSection = (provider: PhotoProviderAddon): React.ReactElement => {
+    const fields = getProviderFields(provider)
+    const cfg = getProviderConfig(provider)
+    const values = providerValues[provider.id] || {}
+    const connected = !!providerConnected[provider.id]
+    const testing = !!providerTesting[provider.id]
+    const canSave = !!cfg.settings_put
+    const canTest = !!(cfg.test_post || cfg.test_get || cfg.status_get)
+
+    return (
+      <Section key={provider.id} title={provider.name || provider.id} icon={Camera}>
+        <div className="space-y-3">
+          {fields.map(field => (
+            <div key={`${provider.id}-${field.key}`}>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t(`memories.${field.label}`)}</label>
+              <input
+                type={field.input_type || 'text'}
+                value={values[field.key] || ''}
+                onChange={e => handleProviderFieldChange(provider.id, field.key, e.target.value)}
+                placeholder={field.secret && connected && !(values[field.key] || '') ? '••••••••' : (field.placeholder || '')}
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300"
+              />
+            </div>
+          ))}
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => handleSaveProvider(provider)}
+              disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
+              className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+              title={!canSave ? 'Save route is not configured for this provider' : isProviderSaveDisabled(provider) ? 'Please fill all required fields' : ''}
+            >
+              <Save className="w-4 h-4" /> {t('common.save')}
+            </button>
+            <button
+              onClick={() => handleTestProvider(provider)}
+              disabled={!canTest || testing}
+              className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50"
+              title={!canTest ? 'Test route is not configured for this provider' : ''}
+            >
+              {testing
+                ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
+                : <Camera className="w-4 h-4" />}
+              {t('memories.testConnection')}
+            </button>
+            {connected && (
+              <span className="text-xs font-medium text-green-600 flex items-center gap-1">
+                <span className="w-2 h-2 bg-green-500 rounded-full" />
+                {t('memories.connected')}
+              </span>
+            )}
+          </div>
+        </div>
+      </Section>
+    )
+  }
+
+  if (!memoriesEnabled) {
+    return <></>
+  }
+
+  return <>{activePhotoProviders.map(provider => renderPhotoProviderSection(provider))}</>
+}

client/src/i18n/translations/en.ts

@@ -1385,11 +1385,12 @@ const en: Record<string, string | { name: string; category: string }[]> = {
 
   // Photos / Immich
   'memories.title': 'Photos',
-  'memories.notConnected': 'Immich not connected',
-  'memories.notConnectedHint': 'Connect your Immich instance in Settings to see your trip photos here.',
+  'memories.notConnected': '{provider_name} not connected',
+  'memories.notConnectedHint': 'Connect your {provider_name} instance in Settings to be able add photos to this trip.',
+  'memories.notConnectedMultipleHint': 'Connect any of these photo providers: {provider_names} in Settings to be able add photos to this trip.',
   'memories.noDates': 'Add dates to your trip to load photos.',
   'memories.noPhotos': 'No photos found',
-  'memories.noPhotosHint': 'No photos found in Immich for this trip\'s date range.',
+  'memories.noPhotosHint': 'No photos found in {provider_name} for this trip\'s date range.',
   'memories.photosFound': 'photos',
   'memories.fromOthers': 'from others',
   'memories.sharePhotos': 'Share photos',
@@ -1397,23 +1398,31 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'memories.reviewTitle': 'Review your photos',
   'memories.reviewHint': 'Click photos to exclude them from sharing.',
   'memories.shareCount': 'Share {count} photos',
-  'memories.immichUrl': 'Immich Server URL',
-  'memories.immichApiKey': 'API Key',
+  //-------------------------
+  //todo section
+  'memories.providerUrl': 'Server URL',
+  'memories.providerApiKey': 'API Key',
+  'memories.providerUsername': 'Username',
+  'memories.providerPassword': 'Password',
   'memories.testConnection': 'Test connection',
   'memories.testFirst': 'Test connection first',
   'memories.connected': 'Connected',
   'memories.disconnected': 'Not connected',
-  'memories.connectionSuccess': 'Connected to Immich',
-  'memories.connectionError': 'Could not connect to Immich',
-  'memories.saved': 'Immich settings saved',
+  'memories.connectionSuccess': 'Connected to {provider_name}',
+  'memories.connectionError': 'Could not connect to {provider_name}',
+  'memories.saved': '{provider_name} settings saved',
+  'memories.saveError': 'Could not save {provider_name} settings',
+  //------------------------  
   'memories.addPhotos': 'Add photos',
   'memories.linkAlbum': 'Link Album',
-  'memories.selectAlbum': 'Select Immich Album',
+  'memories.selectAlbum': 'Select {provider_name} Album',
+  'memories.selectAlbumMultiple': 'Select Album',
   'memories.noAlbums': 'No albums found',
   'memories.syncAlbum': 'Sync album',
   'memories.unlinkAlbum': 'Unlink album',
   'memories.photos': 'photos',
-  'memories.selectPhotos': 'Select photos from Immich',
+  'memories.selectPhotos': 'Select photos from {provider_name}',
+  'memories.selectPhotosMultiple': 'Select Photos',
   'memories.selectHint': 'Tap photos to select them.',
   'memories.selected': 'selected',
   'memories.addSelected': 'Add {count} photos',

client/src/pages/SettingsPage.tsx

@@ -90,4 +90,4 @@ export default function SettingsPage(): React.ReactElement {
       </div>
     </div>
   )
-}
+}

client/src/pages/TripPlannerPage.tsx

@@ -113,7 +113,9 @@ export default function TripPlannerPage(): React.ReactElement | null {
     addonsApi.enabled().then(data => {
       const map = {}
       data.addons.forEach(a => { map[a.id] = true })
-      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab, memories: !!map.memories })
+      // Check if any photo provider is enabled (for memories tab to show)
+      const hasPhotoProviders = data.addons.some(a => a.type === 'photo_provider')
+      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab, memories: hasPhotoProviders })
     }).catch(() => {})
     authApi.getAppConfig().then(config => {
       if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)

client/src/store/addonStore.ts

@@ -4,9 +4,22 @@ import { addonsApi } from '../api/client'
 interface Addon {
   id: string
   name: string
+  description?: string
   type: string
   icon: string
   enabled: boolean
+  config?: Record<string, unknown>
+  fields?: Array<{
+    key: string
+    label: string
+    input_type: string
+    placeholder?: string | null
+    required: boolean
+    secret: boolean
+    settings_key?: string | null
+    payload_key?: string | null
+    sort_order: number
+  }>
 }
 
 interface AddonState {
@@ -30,6 +43,9 @@ export const useAddonStore = create<AddonState>((set, get) => ({
   },
 
   isEnabled: (id: string) => {
+    if (id === 'memories') {
+      return get().addons.some(a => a.type === 'photo_provider' && a.enabled)
+    }
     return get().addons.some(a => a.id === id && a.enabled)
   },
 }))