refactor(memories): generalize photo providers and decouple from 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: string): 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,27 +1,36 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen } from 'lucide-react'
-import apiClient from '../../api/client'
+import apiClient, { addonsApi } from '../../api/client'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
 import { getAuthUrl } 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(() => {
-    getAuthUrl(baseUrl, 'immich').then(setSrc)
-  }, [baseUrl])
+    getAuthUrl(baseUrl, provider).then(setSrc).catch(() => {})
+  }, [baseUrl, provider])
   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 {
@@ -45,6 +54,8 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const currentUser = useAuthStore(s => s.user)
 
   const [connected, setConnected] = useState(false)
+  const [availableProviders, setAvailableProviders] = useState<PhotoProvider[]>([])
+  const [selectedProvider, setSelectedProvider] = useState<string>('')
   const [loading, setLoading] = useState(true)
 
   // Trip photos (saved selections)
@@ -67,49 +78,61 @@ 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)
+  const pickerIntegrationBase = selectedProvider ? `/integrations/${selectedProvider}` : ''
 
   const loadAlbumLinks = async () => {
     try {
-      const res = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
+      const res = await apiClient.get(`/integrations/memories/trips/${tripId}/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(`/integrations/${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) => {
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links`, { album_id: albumId, album_name: albumName })
+      await apiClient.post(`${pickerIntegrationBase}/trips/${tripId}/album-links`, { album_id: albumId, album_name: albumName })
       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(`/integrations/memories/trips/${tripId}/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(`/integrations/memories/trips/${tripId}/album-links/${linkId}`)
       loadAlbumLinks()
     } 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(`/integrations/${targetProvider}/trips/${tripId}/album-links/${linkId}/sync`)
       await loadAlbumLinks()
       await loadPhotos()
     } catch { toast.error(t('memories.error.syncAlbum')) }
@@ -138,7 +161,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(`/integrations/memories/trips/${tripId}/photos`)
       setTripPhotos(photosRes.data.photos || [])
     } catch {
       setTripPhotos([])
@@ -148,9 +171,35 @@ 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)
+
+      // 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()
@@ -170,10 +219,26 @@ 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 res = await apiClient.post(`${pickerIntegrationBase}/search`, {
         from: useDate && startDate ? startDate : undefined,
         to: useDate && endDate ? endDate : undefined,
       })
@@ -203,7 +268,8 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const executeAddPhotos = async () => {
     setShowConfirmShare(false)
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/photos`, {
+      await apiClient.post(`/integrations/memories/trips/${tripId}/photos`, {
+        provider: selectedProvider,
         asset_ids: [...selectedIds],
         shared: true,
       })
@@ -214,28 +280,37 @@ 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(`/integrations/memories/trips/${tripId}/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(`/integrations/memories/trips/${tripId}/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 thumbnailBaseUrl = (photo: TripPhoto) =>
+    `/api/integrations/${photo.provider}/assets/${photo.asset_id}/thumbnail?userId=${photo.user_id}`
 
   const ownPhotos = tripPhotos.filter(p => p.user_id === currentUser?.id)
   const othersPhotos = tripPhotos.filter(p => p.user_id !== currentUser?.id && p.shared)
@@ -286,10 +361,40 @@ 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)' }}>
@@ -297,6 +402,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
               {t('memories.selectAlbum')}
             </h3>
+            <ProviderTabs />
             <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')}
@@ -353,7 +459,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 && p.provider === selectedProvider)
+        .map(p => p.asset_id)
+    )
 
     return (
       <>
@@ -364,6 +474,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
               {t('memories.selectPhotos')}
             </h3>
+            <ProviderTabs />
             <div style={{ display: 'flex', gap: 8 }}>
               <button onClick={() => setShowPicker(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)' }}>
@@ -456,7 +567,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={`/api/integrations/${selectedProvider}/assets/${asset.id}/thumbnail?userId=${currentUser!.id}`} provider={selectedProvider} loading="lazy"
                           style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                         {isSelected && (
                           <div style={{
@@ -564,7 +675,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>
@@ -630,18 +741,18 @@ 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)
                     setLightboxOriginalSrc('')
-                    getAuthUrl(`/api/integrations/immich/assets/${photo.immich_asset_id}/original?userId=${photo.user_id}`, 'immich').then(setLightboxOriginalSrc)
+                    getAuthUrl(`/api/integrations/${photo.provider}/assets/${photo.asset_id}/original?userId=${photo.user_id}`, photo.provider).then(setLightboxOriginalSrc).catch(() => {})
                     setLightboxInfoLoading(true)
-                    apiClient.get(`/integrations/immich/assets/${photo.immich_asset_id}/info?userId=${photo.user_id}`)
+                    apiClient.get(`/integrations/${photo.provider}/assets/${photo.asset_id}/info?userId=${photo.user_id}`)
                       .then(r => setLightboxInfo(r.data)).catch(() => {}).finally(() => setLightboxInfoLoading(false))
                   }}>
 
-                  <ImmichImg baseUrl={thumbnailBaseUrl(photo.immich_asset_id, photo.user_id)} loading="lazy"
+                  <ProviderImg baseUrl={thumbnailBaseUrl(photo)} provider={photo.provider} loading="lazy"
                     style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10 }} />
 
                   {/* Other user's avatar */}
@@ -672,7 +783,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',
@@ -681,7 +792,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)',

client/src/pages/SettingsPage.tsx

@@ -28,6 +28,35 @@ interface McpToken {
   last_used_at: string | null
 }
 
+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 MAP_PRESETS: MapPreset[] = [
   { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
   { name: 'OpenStreetMap DE', url: 'https://tile.openstreetmap.de/{z}/{x}/{y}.png' },
@@ -114,7 +143,7 @@ export default function SettingsPage(): React.ReactElement {
   const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean | 'blocked'>(false)
   const avatarInputRef = React.useRef<HTMLInputElement>(null)
   const { settings, updateSetting, updateSettings } = useSettingsStore()
-  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
+  const { isEnabled: addonEnabled, loadAddons, addons } = useAddonStore()
   const { t, locale } = useTranslation()
   const toast = useToast()
   const navigate = useNavigate()
@@ -124,57 +153,131 @@ export default function SettingsPage(): React.ReactElement {
   // Addon gating (derived from store)
   const memoriesEnabled = addonEnabled('memories')
   const mcpEnabled = addonEnabled('mcp')
-  const [immichUrl, setImmichUrl] = useState('')
-  const [immichApiKey, setImmichApiKey] = useState('')
-  const [immichConnected, setImmichConnected] = useState(false)
-  const [immichTesting, setImmichTesting] = useState(false)
+  const activePhotoProviders = addons.filter(a => a.type === 'photo_provider' && a.enabled)
+  const [providerValues, setProviderValues] = useState<Record<string, Record<string, string>>>({})
+  const [providerConnected, setProviderConnected] = useState<Record<string, boolean>>({})
+  const [providerTesting, setProviderTesting] = useState<Record<string, boolean>>({})
 
   useEffect(() => {
     loadAddons()
   }, [])
-
-  useEffect(() => {
-    if (memoriesEnabled) {
-      apiClient.get('/integrations/immich/settings').then(r2 => {
-        setImmichUrl(r2.data.immich_url || '')
-        setImmichConnected(r2.data.connected)
-      }).catch(() => {})
-    }
-  }, [memoriesEnabled])
-
-  const [immichTestPassed, setImmichTestPassed] = useState(false)
-
-  const handleSaveImmich = async () => {
-    setSaving(s => ({ ...s, immich: 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 {
-      setSaving(s => ({ ...s, immich: false }))
+  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 handleTestImmich = async () => {
-    setImmichTesting(true)
+  const getProviderFields = (provider: PhotoProviderAddon): ProviderField[] => {
+    return [...(provider.fields || [])].sort((a, b) => a.sort_order - b.sort_order)
+  }
+
+  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.post('/integrations/immich/test', { immich_url: immichUrl, immich_api_key: immichApiKey })
-      if (res.data.connected) {
-        toast.success(`${t('memories.connectionSuccess')} — ${res.data.user?.name || ''}`)
-        setImmichTestPassed(true)
+      const res = await apiClient.get(statusPath)
+      setProviderConnected(prev => ({ ...prev, [provider.id]: !!res.data?.connected }))
+    } catch {
+      setProviderConnected(prev => ({ ...prev, [provider.id]: false }))
+    }
+  }
+
+  const activeProviderSignature = activePhotoProviders.map(p => p.id).join('|')
+
+  useEffect(() => {
+    for (const provider of activePhotoProviders as PhotoProviderAddon[]) {
+      const cfg = getProviderConfig(provider)
+      const fields = getProviderFields(provider)
+      if (cfg.settings_get) {
+        apiClient.get(cfg.settings_get).then(res => {
+          const nextValues: Record<string, string> = {}
+          for (const field of fields) {
+            // Don't populate secret fields into state - they should remain empty until user edits
+            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(() => {})
+    }
+  }, [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(`${provider.name} settings saved`)
+    } catch {
+      toast.error(`Could not save ${provider.name} settings`)
+    } 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(`${provider.name} connected`)
       } else {
-        toast.error(`${t('memories.connectionError')}: ${res.data.error}`)
-        setImmichTestPassed(false)
+        toast.error(`${provider.name} connection failed${res.data?.error ? `: ${String(res.data.error)}` : ''}`)
       }
     } catch {
-      toast.error(t('memories.connectionError'))
+      toast.error(`${provider.name} connection failed`)
     } finally {
-      setImmichTesting(false)
+      setProviderTesting(prev => ({ ...prev, [provider.id]: false }))
     }
   }
 
@@ -239,6 +342,62 @@ export default function SettingsPage(): React.ReactElement {
   }
 }`
 
+  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">{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>
+    )
+  }
+
   // Map settings
   const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
   const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
@@ -673,45 +832,7 @@ export default function SettingsPage(): React.ReactElement {
             <NotificationPreferences t={t} memoriesEnabled={memoriesEnabled} />
           </Section>
 
-          {/* Immich — only when Memories addon is enabled */}
-          {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={saving.immich || !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>
-          )}
+          {activePhotoProviders.map(provider => renderPhotoProviderSection(provider as PhotoProviderAddon))}
 
           {/* MCP Configuration — only when MCP addon is enabled */}
           {mcpEnabled && <Section title={t('settings.mcp.title')} icon={Terminal}>

client/src/pages/TripPlannerPage.tsx

@@ -78,7 +78,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' && a.enabled)
+      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab, memories: !!map.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)
   },
 }))

server/src/db/migrations.ts

@@ -518,6 +518,120 @@ function runMigrations(db: Database.Database): void {
         CREATE INDEX IF NOT EXISTS idx_notifications_recipient_created ON notifications(recipient_id, created_at DESC);
       `);
     },
+    () => {
+      // Normalize trip_photos to provider-based schema used by current routes
+      const tripPhotosExists = db.prepare("SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = 'trip_photos'").get();
+      if (!tripPhotosExists) {
+        db.exec(`
+          CREATE TABLE trip_photos (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+            user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            asset_id TEXT NOT NULL,
+            provider TEXT NOT NULL DEFAULT 'immich',
+            shared INTEGER NOT NULL DEFAULT 1,
+            added_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            UNIQUE(trip_id, user_id, asset_id, provider)
+          );
+          CREATE INDEX IF NOT EXISTS idx_trip_photos_trip ON trip_photos(trip_id);
+        `);
+      } else {
+        const columns = db.prepare("PRAGMA table_info('trip_photos')").all() as Array<{ name: string }>;
+        const names = new Set(columns.map(c => c.name));
+        const assetSource = names.has('asset_id') ? 'asset_id' : (names.has('immich_asset_id') ? 'immich_asset_id' : null);
+        if (assetSource) {
+          const providerExpr = names.has('provider')
+            ? "CASE WHEN provider IS NULL OR provider = '' THEN 'immich' ELSE provider END"
+            : "'immich'";
+          const sharedExpr = names.has('shared') ? 'COALESCE(shared, 1)' : '1';
+          const addedAtExpr = names.has('added_at') ? 'COALESCE(added_at, CURRENT_TIMESTAMP)' : 'CURRENT_TIMESTAMP';
+
+          db.exec(`
+            CREATE TABLE trip_photos_new (
+              id INTEGER PRIMARY KEY AUTOINCREMENT,
+              trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+              user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+              asset_id TEXT NOT NULL,
+              provider TEXT NOT NULL DEFAULT 'immich',
+              shared INTEGER NOT NULL DEFAULT 1,
+              added_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+              UNIQUE(trip_id, user_id, asset_id, provider)
+            );
+          `);
+
+          db.exec(`
+            INSERT OR IGNORE INTO trip_photos_new (trip_id, user_id, asset_id, provider, shared, added_at)
+            SELECT trip_id, user_id, ${assetSource}, ${providerExpr}, ${sharedExpr}, ${addedAtExpr}
+            FROM trip_photos
+            WHERE ${assetSource} IS NOT NULL AND TRIM(${assetSource}) != ''
+          `);
+
+          db.exec('DROP TABLE trip_photos');
+          db.exec('ALTER TABLE trip_photos_new RENAME TO trip_photos');
+          db.exec('CREATE INDEX IF NOT EXISTS idx_trip_photos_trip ON trip_photos(trip_id)');
+        }
+      }
+    },
+    () => {
+      // Normalize trip_album_links to provider + album_id schema used by current routes
+      const linksExists = db.prepare("SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = 'trip_album_links'").get();
+      if (!linksExists) {
+        db.exec(`
+          CREATE TABLE trip_album_links (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+            user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            provider TEXT NOT NULL,
+            album_id TEXT NOT NULL,
+            album_name TEXT NOT NULL DEFAULT '',
+            sync_enabled INTEGER NOT NULL DEFAULT 1,
+            last_synced_at DATETIME,
+            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            UNIQUE(trip_id, user_id, provider, album_id)
+          );
+          CREATE INDEX IF NOT EXISTS idx_trip_album_links_trip ON trip_album_links(trip_id);
+        `);
+      } else {
+        const columns = db.prepare("PRAGMA table_info('trip_album_links')").all() as Array<{ name: string }>;
+        const names = new Set(columns.map(c => c.name));
+        const albumIdSource = names.has('album_id') ? 'album_id' : (names.has('immich_album_id') ? 'immich_album_id' : null);
+        if (albumIdSource) {
+          const providerExpr = names.has('provider')
+            ? "CASE WHEN provider IS NULL OR provider = '' THEN 'immich' ELSE provider END"
+            : "'immich'";
+          const albumNameExpr = names.has('album_name') ? "COALESCE(album_name, '')" : "''";
+          const syncEnabledExpr = names.has('sync_enabled') ? 'COALESCE(sync_enabled, 1)' : '1';
+          const lastSyncedExpr = names.has('last_synced_at') ? 'last_synced_at' : 'NULL';
+          const createdAtExpr = names.has('created_at') ? 'COALESCE(created_at, CURRENT_TIMESTAMP)' : 'CURRENT_TIMESTAMP';
+
+          db.exec(`
+            CREATE TABLE trip_album_links_new (
+              id INTEGER PRIMARY KEY AUTOINCREMENT,
+              trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+              user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+              provider TEXT NOT NULL,
+              album_id TEXT NOT NULL,
+              album_name TEXT NOT NULL DEFAULT '',
+              sync_enabled INTEGER NOT NULL DEFAULT 1,
+              last_synced_at DATETIME,
+              created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+              UNIQUE(trip_id, user_id, provider, album_id)
+            );
+          `);
+
+          db.exec(`
+            INSERT OR IGNORE INTO trip_album_links_new (trip_id, user_id, provider, album_id, album_name, sync_enabled, last_synced_at, created_at)
+            SELECT trip_id, user_id, ${providerExpr}, ${albumIdSource}, ${albumNameExpr}, ${syncEnabledExpr}, ${lastSyncedExpr}, ${createdAtExpr}
+            FROM trip_album_links
+            WHERE ${albumIdSource} IS NOT NULL AND TRIM(${albumIdSource}) != ''
+          `);
+
+          db.exec('DROP TABLE trip_album_links');
+          db.exec('ALTER TABLE trip_album_links_new RENAME TO trip_album_links');
+          db.exec('CREATE INDEX IF NOT EXISTS idx_trip_album_links_trip ON trip_album_links(trip_id)');
+        }
+      }
+    },
   ];
 
   if (currentVersion < migrations.length) {

server/src/db/schema.ts

@@ -222,6 +222,31 @@ function createTables(db: Database.Database): void {
       sort_order INTEGER DEFAULT 0
     );
 
+    CREATE TABLE IF NOT EXISTS photo_providers (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      description TEXT,
+      icon TEXT DEFAULT 'Image',
+      enabled INTEGER DEFAULT 0,
+      config TEXT DEFAULT '{}',
+      sort_order INTEGER DEFAULT 0
+    );
+
+    CREATE TABLE IF NOT EXISTS photo_provider_fields (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      provider_id TEXT NOT NULL REFERENCES photo_providers(id) ON DELETE CASCADE,
+      field_key TEXT NOT NULL,
+      label TEXT NOT NULL,
+      input_type TEXT NOT NULL DEFAULT 'text',
+      placeholder TEXT,
+      required INTEGER DEFAULT 0,
+      secret INTEGER DEFAULT 0,
+      settings_key TEXT,
+      payload_key TEXT,
+      sort_order INTEGER DEFAULT 0,
+      UNIQUE(provider_id, field_key)
+    );
+
     -- Vacay addon tables
     CREATE TABLE IF NOT EXISTS vacay_plans (
       id INTEGER PRIMARY KEY AUTOINCREMENT,

server/src/db/seeds.ts

@@ -92,6 +92,34 @@ function seedAddons(db: Database.Database): void {
     ];
     const insertAddon = db.prepare('INSERT OR IGNORE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?)');
     for (const a of defaultAddons) insertAddon.run(a.id, a.name, a.description, a.type, a.icon, a.enabled, a.sort_order);
+
+    const providerRows = [
+      {
+        id: 'immich',
+        name: 'Immich',
+        description: 'Immich photo provider',
+        icon: 'Image',
+        enabled: 0,
+        sort_order: 0,
+        config: JSON.stringify({
+          settings_get: '/integrations/immich/settings',
+          settings_put: '/integrations/immich/settings',
+          status_get: '/integrations/immich/status',
+          test_post: '/integrations/immich/test',
+        }),
+      },
+    ];
+    const insertProvider = db.prepare('INSERT OR IGNORE INTO photo_providers (id, name, description, icon, enabled, config, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?)');
+    for (const p of providerRows) insertProvider.run(p.id, p.name, p.description, p.icon, p.enabled, p.config, p.sort_order);
+
+    const providerFields = [
+      { provider_id: 'immich', field_key: 'immich_url', label: 'Immich URL', input_type: 'url', placeholder: 'https://immich.example.com', required: 1, secret: 0, settings_key: 'immich_url', payload_key: 'immich_url', sort_order: 0 },
+      { provider_id: 'immich', field_key: 'immich_api_key', label: 'API Key', input_type: 'password', placeholder: 'API Key', required: 1, secret: 1, settings_key: null, payload_key: 'immich_api_key', sort_order: 1 },
+    ];
+    const insertProviderField = db.prepare('INSERT OR IGNORE INTO photo_provider_fields (provider_id, field_key, label, input_type, placeholder, required, secret, settings_key, payload_key, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)');
+    for (const f of providerFields) {
+      insertProviderField.run(f.provider_id, f.field_key, f.label, f.input_type, f.placeholder, f.required, f.secret, f.settings_key, f.payload_key, f.sort_order);
+    }
     console.log('Default addons seeded');
   } catch (err: unknown) {
     console.error('Error seeding addons:', err instanceof Error ? err.message : err);

server/src/index.ts

@@ -207,8 +207,71 @@ import { authenticate as addonAuth } from './middleware/auth';
 import {db as addonDb} from './db/database';
 import { Addon } from './types';
 app.get('/api/addons', addonAuth, (req: Request, res: Response) => {
-  const addons = addonDb.prepare('SELECT id, name, type, icon, enabled FROM addons WHERE enabled = 1 ORDER BY sort_order').all() as Pick<Addon, 'id' | 'name' | 'type' | 'icon' | 'enabled'>[];
-  res.json({ addons: addons.map(a => ({ ...a, enabled: !!a.enabled })) });
+  const addons = addonDb.prepare('SELECT id, name, type, icon, enabled, config, sort_order FROM addons WHERE enabled = 1 ORDER BY sort_order').all() as Array<Pick<Addon, 'id' | 'name' | 'type' | 'icon' | 'enabled' | 'config'> & { sort_order: number }>;
+  const photoProviders = addonDb.prepare(`
+    SELECT id, name, description, icon, enabled, config, sort_order
+    FROM photo_providers
+    WHERE enabled = 1
+    ORDER BY sort_order
+  `).all() as Array<{ id: string; name: string; description?: string | null; icon: string; enabled: number; config: string; sort_order: number }>;
+  const providerIds = photoProviders.map(p => p.id);
+  const providerFields = providerIds.length > 0
+    ? addonDb.prepare(`
+      SELECT provider_id, field_key, label, input_type, placeholder, required, secret, settings_key, payload_key, sort_order
+      FROM photo_provider_fields
+      WHERE provider_id IN (${providerIds.map(() => '?').join(',')})
+      ORDER BY sort_order, id
+    `).all(...providerIds) as Array<{
+      provider_id: string;
+      field_key: string;
+      label: string;
+      input_type: string;
+      placeholder?: string | null;
+      required: number;
+      secret: number;
+      settings_key?: string | null;
+      payload_key?: string | null;
+      sort_order: number;
+    }>
+    : [];
+  const fieldsByProvider = new Map<string, typeof providerFields>();
+  for (const field of providerFields) {
+    const arr = fieldsByProvider.get(field.provider_id) || [];
+    arr.push(field);
+    fieldsByProvider.set(field.provider_id, arr);
+  }
+
+  const combined = [
+    ...addons,
+    ...photoProviders.map(p => ({
+      id: p.id,
+      name: p.name,
+      type: 'photo_provider',
+      icon: p.icon,
+      enabled: p.enabled,
+      config: p.config,
+      fields: (fieldsByProvider.get(p.id) || []).map(f => ({
+        key: f.field_key,
+        label: f.label,
+        input_type: f.input_type,
+        placeholder: f.placeholder || '',
+        required: !!f.required,
+        secret: !!f.secret,
+        settings_key: f.settings_key || null,
+        payload_key: f.payload_key || null,
+        sort_order: f.sort_order,
+      })),
+      sort_order: p.sort_order,
+    })),
+  ].sort((a, b) => a.sort_order - b.sort_order || a.id.localeCompare(b.id));
+
+  res.json({
+    addons: combined.map(a => ({
+      ...a,
+      enabled: !!a.enabled,
+      config: JSON.parse(a.config || '{}'),
+    })),
+  });
 });
 
 // Addon routes
@@ -218,6 +281,8 @@ import atlasRoutes from './routes/atlas';
 app.use('/api/addons/atlas', atlasRoutes);
 import immichRoutes from './routes/immich';
 app.use('/api/integrations/immich', immichRoutes);
+import memoriesRoutes from './routes/memories';
+app.use('/api/integrations/memories', memoriesRoutes);
 
 app.use('/api/maps', mapsRoutes);
 app.use('/api/weather', weatherRoutes);

server/src/routes/admin.ts

@@ -300,12 +300,9 @@ router.post('/rotate-jwt-secret', (req: Request, res: Response) => {
   if (result.error) return res.status(result.status!).json({ error: result.error });
   const authReq = req as AuthRequest;
   writeAudit({
-    user_id: authReq.user?.id ?? null,
-    username: authReq.user?.username ?? 'unknown',
+    userId: authReq.user?.id ?? null,
     action: 'admin.rotate_jwt_secret',
-    target_type: 'system',
-    target_id: null,
-    details: null,
+    resource: 'system',
     ip: getClientIp(req),
   });
   res.json({ success: true });

server/src/routes/immich.ts

@@ -30,7 +30,6 @@ import {
 const router = express.Router();
 
 // ── Dual auth middleware (JWT or ephemeral token for <img> src) ─────────────
-
 function authFromQuery(req: Request, res: Response, next: NextFunction) {
   const queryToken = req.query.token as string | undefined;
   if (queryToken) {
@@ -186,7 +185,6 @@ router.get('/trips/:tripId/album-links', authenticate, (req: Request, res: Respo
   if (!canAccessTrip(req.params.tripId, authReq.user.id)) return res.status(404).json({ error: 'Trip not found' });
   res.json({ links: listAlbumLinks(req.params.tripId) });
 });
-
 router.post('/trips/:tripId/album-links', authenticate, async (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const { tripId } = req.params;

server/src/routes/memories.ts

@@ -0,0 +1,182 @@
+import express, { Request, Response } from 'express';
+import { db, canAccessTrip } from '../db/database';
+import { authenticate } from '../middleware/auth';
+import { broadcast } from '../websocket';
+import { AuthRequest } from '../types';
+
+const router = express.Router();
+
+
+router.get('/trips/:tripId/photos', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+
+    if (!canAccessTrip(tripId, authReq.user.id)) {
+        return res.status(404).json({ error: 'Trip not found' });
+    }
+
+    const photos = db.prepare(`
+    SELECT tp.asset_id, tp.provider, tp.user_id, tp.shared, tp.added_at,
+           u.username, u.avatar
+    FROM trip_photos tp
+    JOIN users u ON tp.user_id = u.id
+    WHERE tp.trip_id = ?
+      AND (tp.user_id = ? OR tp.shared = 1)
+    ORDER BY tp.added_at ASC
+  `).all(tripId, authReq.user.id) as any[];
+
+    res.json({ photos });
+});
+
+router.get('/trips/:tripId/album-links', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+
+    if (!canAccessTrip(tripId, authReq.user.id)) {
+        return res.status(404).json({ error: 'Trip not found' });
+    }
+
+    const links = db.prepare(`
+        SELECT tal.id,
+            tal.trip_id,
+            tal.user_id,
+            tal.provider,
+            tal.album_id,
+            tal.album_name,
+            tal.sync_enabled,
+            tal.last_synced_at,
+            tal.created_at,
+            u.username
+      FROM trip_album_links tal
+      JOIN users u ON tal.user_id = u.id
+      WHERE tal.trip_id = ?
+      ORDER BY tal.created_at ASC
+    `).all(tripId);
+
+    res.json({ links });
+});
+
+router.delete('/trips/:tripId/album-links/:linkId', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId, linkId } = req.params;
+
+    if (!canAccessTrip(tripId, authReq.user.id)) {
+        return res.status(404).json({ error: 'Trip not found' });
+    }
+
+    db.prepare('DELETE FROM trip_album_links WHERE id = ? AND trip_id = ? AND user_id = ?')
+        .run(linkId, tripId, authReq.user.id);
+
+    res.json({ success: true });
+    broadcast(tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
+});
+
+router.post('/trips/:tripId/photos', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const provider = String(req.body?.provider || '').toLowerCase();
+    const { shared = true } = req.body;
+    const assetIdsRaw = req.body?.asset_ids;
+
+    if (!canAccessTrip(tripId, authReq.user.id)) {
+        return res.status(404).json({ error: 'Trip not found' });
+    }
+
+    if (!provider) {
+        return res.status(400).json({ error: 'provider is required' });
+    }
+
+    if (!Array.isArray(assetIdsRaw) || assetIdsRaw.length === 0) {
+        return res.status(400).json({ error: 'asset_ids required' });
+    }
+
+    const insert = db.prepare(
+        'INSERT OR IGNORE INTO trip_photos (trip_id, user_id, asset_id, provider, shared) VALUES (?, ?, ?, ?, ?)'
+    );
+
+    let added = 0;
+    for (const raw of assetIdsRaw) {
+        const assetId = String(raw || '').trim();
+        if (!assetId) continue;
+        const result = insert.run(tripId, authReq.user.id, assetId, provider, shared ? 1 : 0);
+        if (result.changes > 0) added++;
+    }
+
+    res.json({ success: true, added });
+    broadcast(tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
+
+    if (shared && added > 0) {
+        import('../services/notifications').then(({ notifyTripMembers }) => {
+            const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
+            notifyTripMembers(Number(tripId), authReq.user.id, 'photos_shared', {
+                trip: tripInfo?.title || 'Untitled',
+                actor: authReq.user.username || authReq.user.email,
+                count: String(added),
+            }).catch(() => {});
+        });
+    }
+});
+
+router.delete('/trips/:tripId/photos', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const provider = String(req.body?.provider || '').toLowerCase();
+    const assetId = String(req.body?.asset_id || '');
+
+    if (!assetId) {
+        return res.status(400).json({ error: 'asset_id is required' });
+    }
+
+    if (!provider) {
+        return res.status(400).json({ error: 'provider is required' });
+    }
+
+    if (!canAccessTrip(tripId, authReq.user.id)) {
+        return res.status(404).json({ error: 'Trip not found' });
+    }
+
+    db.prepare(`
+        DELETE FROM trip_photos
+        WHERE trip_id = ?
+            AND user_id = ?
+            AND asset_id = ?
+            AND provider = ?
+    `).run(tripId, authReq.user.id, assetId, provider);
+
+    res.json({ success: true });
+    broadcast(tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
+});
+
+router.put('/trips/:tripId/photos/sharing', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const provider = String(req.body?.provider || '').toLowerCase();
+    const assetId = String(req.body?.asset_id || '');
+    const { shared } = req.body;
+
+    if (!assetId) {
+        return res.status(400).json({ error: 'asset_id is required' });
+    }
+
+    if (!provider) {
+        return res.status(400).json({ error: 'provider is required' });
+    }
+
+    if (!canAccessTrip(tripId, authReq.user.id)) {
+        return res.status(404).json({ error: 'Trip not found' });
+    }
+
+    db.prepare(`
+        UPDATE trip_photos
+        SET shared = ?
+        WHERE trip_id = ?
+            AND user_id = ?
+            AND asset_id = ?
+            AND provider = ?
+    `).run(shared ? 1 : 0, tripId, authReq.user.id, assetId, provider);
+
+    res.json({ success: true });
+    broadcast(tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
+});
+
+export default router;