import { create } from 'zustand'; import { persist } from 'zustand/middleware'; import type { EmailTemplate } from '@/lib/template-types'; import { exportTemplates as exportUtil, importTemplates as importUtil, filterTemplates, mergeSyncedTemplates, parseSyncedTemplates, parseTemplateTombstones, } from '@/lib/template-utils'; import { generateUUID } from '@/lib/utils'; import { registerTemplateSyncBridge } from './settings-store'; import { templateHooks } from '@/lib/plugin-hooks'; import { templateToView } from '@/lib/plugin-projection'; const MAX_RECENT = 5; interface TemplateStore { templates: EmailTemplate[]; recentTemplateIds: string[]; /** * Template id -> ISO time it was deleted. Synced alongside `templates` in * the settings blob so deletions propagate across devices instead of being * resurrected by the next merge (see applySyncedState). */ deletedTemplateIds: Record; addTemplate: (template: Omit) => EmailTemplate; updateTemplate: (id: string, updates: Partial>) => void; deleteTemplate: (id: string) => void; duplicateTemplate: (id: string, nameSuffix?: string) => EmailTemplate | null; toggleFavorite: (id: string) => void; recordUsage: (id: string) => void; getTemplatesByCategory: () => Record; getFavorites: () => EmailTemplate[]; getRecent: () => EmailTemplate[]; searchTemplates: (query: string) => EmailTemplate[]; exportAllTemplates: () => string; importTemplates: (json: string) => { count: number; errors: string[] }; /** * Applies a `templates` / `deletedTemplateIds` pair from a synced settings * blob or settings-file import. `merge: true` (per-account server loads) * merges by id with the newer `updatedAt` winning; `merge: false` (file * imports) replaces wholesale. A blob from a build that predates template * sync (no `templates` array) leaves the local store untouched. */ applySyncedState: ( templates: unknown, deletedTemplateIds: unknown, opts: { merge: boolean } ) => void; } export const useTemplateStore = create()( persist( (set, get) => ({ templates: [], recentTemplateIds: [], deletedTemplateIds: {}, addTemplate: (data) => { const now = new Date().toISOString(); const template: EmailTemplate = { ...data, id: generateUUID(), createdAt: now, updatedAt: now, }; set((state) => ({ templates: [...state.templates, template], })); void templateHooks.onTemplateCreate.emit(templateToView(template)); return template; }, updateTemplate: (id, updates) => { set((state) => ({ templates: state.templates.map((t) => t.id === id ? { ...t, ...updates, updatedAt: new Date().toISOString() } : t ), })); emitTemplateUpdate(id); }, deleteTemplate: (id) => { if (!get().templates.some((t) => t.id === id)) return; set((state) => ({ templates: state.templates.filter((t) => t.id !== id), recentTemplateIds: state.recentTemplateIds.filter((rid) => rid !== id), deletedTemplateIds: { ...state.deletedTemplateIds, [id]: new Date().toISOString(), }, })); void templateHooks.onTemplateDelete.emit({ templateId: id }); }, duplicateTemplate: (id, nameSuffix) => { const original = get().templates.find((t) => t.id === id); if (!original) return null; const now = new Date().toISOString(); const duplicate: EmailTemplate = { ...original, id: generateUUID(), name: `${original.name} ${nameSuffix || '(copy)'}`, isFavorite: false, createdAt: now, updatedAt: now, }; set((state) => ({ templates: [...state.templates, duplicate], })); void templateHooks.onTemplateCreate.emit(templateToView(duplicate)); return duplicate; }, toggleFavorite: (id) => { set((state) => ({ templates: state.templates.map((t) => t.id === id ? { ...t, isFavorite: !t.isFavorite, updatedAt: new Date().toISOString() } : t ), })); emitTemplateUpdate(id); }, recordUsage: (id) => { set((state) => { const filtered = state.recentTemplateIds.filter((rid) => rid !== id); return { recentTemplateIds: [id, ...filtered].slice(0, MAX_RECENT), }; }); }, getTemplatesByCategory: () => { const { templates } = get(); const grouped: Record = {}; for (const t of templates) { const cat = t.category || ''; if (!grouped[cat]) grouped[cat] = []; grouped[cat].push(t); } return grouped; }, getFavorites: () => { return get().templates.filter((t) => t.isFavorite); }, getRecent: () => { const { templates, recentTemplateIds } = get(); return recentTemplateIds .map((id) => templates.find((t) => t.id === id)) .filter(Boolean) as EmailTemplate[]; }, searchTemplates: (query) => { return filterTemplates(get().templates, query); }, exportAllTemplates: () => { return exportUtil(get().templates); }, importTemplates: (json) => { const result = importUtil(json); if (result.templates.length > 0) { set((state) => ({ templates: [...state.templates, ...result.templates], })); void templateHooks.onTemplatesImport.emit({ count: result.templates.length }); } return { count: result.templates.length, errors: result.errors }; }, applySyncedState: (templatesValue, tombstonesValue, opts) => { const incoming = parseSyncedTemplates(templatesValue); if (!incoming) return; const incomingTombstones = parseTemplateTombstones(tombstonesValue); set((state) => { const next = opts.merge ? mergeSyncedTemplates( { templates: state.templates, deletedTemplateIds: state.deletedTemplateIds }, { templates: incoming, deletedTemplateIds: incomingTombstones } ) : { templates: incoming, deletedTemplateIds: incomingTombstones }; const ids = new Set(next.templates.map((t) => t.id)); return { ...next, recentTemplateIds: state.recentTemplateIds.filter((id) => ids.has(id)), }; }); }, }), { name: 'template-storage', version: 1, } ) ); function emitTemplateUpdate(id: string): void { const template = useTemplateStore.getState().templates.find((t) => t.id === id); if (template) void templateHooks.onTemplateUpdate.emit(templateToView(template)); } export interface RenderedTemplate { subject: string; html: string; text: string; } /** * Hands a template about to be inserted into the composer to the * onTemplateRender plugins. Returns null when no plugin listens, so the * composer keeps its own rendering; otherwise the plugins' version, with any * field a plugin returned as a non-string kept from the input. */ export async function renderTemplateWithPlugins( templateId: string, rendered: RenderedTemplate, ): Promise { if (templateHooks.onTemplateRender.size === 0) return null; const result = await templateHooks.onTemplateRender.transform(rendered, { templateId }) as Partial | null; return { subject: typeof result?.subject === 'string' ? result.subject : rendered.subject, html: typeof result?.html === 'string' ? result.html : rendered.html, text: typeof result?.text === 'string' ? result.text : rendered.text, }; } /** Tells plugins a template was inserted into the composer. */ export function notifyTemplateApplied(template: EmailTemplate): void { void templateHooks.onTemplateApply.emit(templateToView(template)); } // Every tab keeps its own in-memory copy and writes the whole list back to // localStorage on any change, so a second tab that never saw a template // created in the first one would overwrite it (and push the shorter list). // Pick up the other tab's write instead. if (typeof window !== 'undefined') { window.addEventListener('storage', (event) => { if (event.key !== 'template-storage' || event.storageArea !== window.localStorage) return; void useTemplateStore.persist.rehydrate(); }); } // Registers templates with the cross-device settings sync (#825): they are // included in the synced blob / settings export, applied back on server loads // and file imports, and template changes schedule a sync push. Registration // (rather than settings-store importing this module) avoids an import cycle - // see registerTemplateSyncBridge. registerTemplateSyncBridge( { getSyncedState: () => { const { templates, deletedTemplateIds } = useTemplateStore.getState(); return { templates, deletedTemplateIds }; }, applySyncedState: (templates, deletedTemplateIds, opts) => useTemplateStore.getState().applySyncedState(templates, deletedTemplateIds, opts), }, (listener) => useTemplateStore.subscribe(listener) );