diff --git a/src/renderer/components/Editor/Editor.tsx b/src/renderer/components/Editor/Editor.tsx index a1ab595..4b786a1 100644 --- a/src/renderer/components/Editor/Editor.tsx +++ b/src/renderer/components/Editor/Editor.tsx @@ -279,7 +279,8 @@ const hydratePhotoArchive = async ( postId: string, onImageClick: (index: number, images: { src: string; alt: string }[]) => void ) => { - const archives = container.querySelectorAll('.macro-photo-archive[data-year]'); + // Match both year-based and recent-based archives + const archives = container.querySelectorAll('.macro-photo-archive[data-year], .macro-photo-archive[data-recent]'); if (archives.length === 0) { // No photo_archive macros - unlink any previously linked and clear state @@ -323,62 +324,119 @@ const doHydratePhotoArchive = async ( // Phase 1: Collect all media IDs that should be linked based on current macros const shouldBeLinkedIds = new Set(); + type ImageData = { id: string; originalName: string; alt?: string; mimeType: string; createdAt?: Date }; const archiveData: Array<{ element: Element; - year: number; + mode: 'single-month' | 'full-year' | 'recent'; + year?: number; month?: number; - images?: Array<{ id: string; originalName: string; alt?: string; mimeType: string }>; - monthlyImages?: Map>; + images?: ImageData[]; + // Map key is "YYYY-MM" for recent mode, or month number (1-12) for year mode + monthlyImages?: Map; + showYearInLabel?: boolean; }> = []; console.log(`[photo_archive] Processing ${archives.length} archive macro(s), previously linked: ${previouslyLinkedIds.size} IDs`); for (const archive of archives) { - const year = parseInt(archive.getAttribute('data-year') || '0', 10); + const recentStr = archive.getAttribute('data-recent'); + const yearStr = archive.getAttribute('data-year'); const monthStr = archive.getAttribute('data-month'); - const month = monthStr ? parseInt(monthStr, 10) : undefined; - if (!year) continue; - - if (month !== undefined) { - // Single month view - const mediaItems = await window.electronAPI?.media.filter({ - year, - month: month - 1, // API uses 0-based month - }); - const images = (mediaItems || []).filter(m => m.mimeType?.startsWith('image/')); + if (recentStr) { + // Recent mode: get last N months with images + const recentCount = parseInt(recentStr, 10) || 10; + console.log(`[photo_archive] Recent mode: fetching last ${recentCount} months with images`); - // Add to the set of IDs that should be linked - for (const img of images) { + // Fetch all images (no filter) + const allMedia = await window.electronAPI?.media.filter({}); + const allImages = (allMedia || []).filter(m => m.mimeType?.startsWith('image/')); + + // Group by year-month and sort by most recent + const monthlyMap = new Map(); + for (const img of allImages) { + if (!img.createdAt) continue; + const date = new Date(img.createdAt); + const year = date.getFullYear(); + const month = date.getMonth() + 1; // 1-based + const key = `${year}-${String(month).padStart(2, '0')}`; // e.g. "2024-06" + + if (!monthlyMap.has(key)) { + monthlyMap.set(key, []); + } + monthlyMap.get(key)!.push(img); shouldBeLinkedIds.add(img.id); } - archiveData.push({ element: archive, year, month, images }); - console.log(`[photo_archive] Year ${year} month ${month}: ${images.length} images`); - } else { - // Full year view - collect all months, tracking which month each image belongs to - const monthlyImages = new Map>(); + // Sort by key descending (newest first) and take top N + const sortedKeys = Array.from(monthlyMap.keys()).sort().reverse().slice(0, recentCount); + const recentMonthlyImages = new Map(); - for (let m = 0; m < 12; m++) { - const mediaItems = await window.electronAPI?.media.filter({ - year, - month: m, - }); - const images = (mediaItems || []).filter(item => item.mimeType?.startsWith('image/')); - - if (images.length > 0) { - monthlyImages.set(m + 1, images); // Store with 1-based month key - - // Add to the set of IDs that should be linked - for (const img of images) { - shouldBeLinkedIds.add(img.id); - } + // Clear shouldBeLinkedIds and only add ones that are in top N months + shouldBeLinkedIds.clear(); + for (const key of sortedKeys) { + const images = monthlyMap.get(key)!; + recentMonthlyImages.set(key, images); + for (const img of images) { + shouldBeLinkedIds.add(img.id); } } - const totalImages = Array.from(monthlyImages.values()).reduce((sum, imgs) => sum + imgs.length, 0); - archiveData.push({ element: archive, year, month: undefined, monthlyImages }); - console.log(`[photo_archive] Year ${year}: ${totalImages} images across ${monthlyImages.size} months`); + const totalImages = Array.from(recentMonthlyImages.values()).reduce((sum, imgs) => sum + imgs.length, 0); + archiveData.push({ + element: archive, + mode: 'recent', + monthlyImages: recentMonthlyImages, + showYearInLabel: true + }); + console.log(`[photo_archive] Recent: ${totalImages} images across ${recentMonthlyImages.size} months`); + + } else if (yearStr) { + const year = parseInt(yearStr, 10); + const month = monthStr ? parseInt(monthStr, 10) : undefined; + + if (!year) continue; + + if (month !== undefined) { + // Single month view + const mediaItems = await window.electronAPI?.media.filter({ + year, + month: month - 1, // API uses 0-based month + }); + const images = (mediaItems || []).filter(m => m.mimeType?.startsWith('image/')); + + // Add to the set of IDs that should be linked + for (const img of images) { + shouldBeLinkedIds.add(img.id); + } + + archiveData.push({ element: archive, mode: 'single-month', year, month, images }); + console.log(`[photo_archive] Year ${year} month ${month}: ${images.length} images`); + } else { + // Full year view - collect all months, tracking which month each image belongs to + const monthlyImages = new Map(); + + for (let m = 0; m < 12; m++) { + const mediaItems = await window.electronAPI?.media.filter({ + year, + month: m, + }); + const images = (mediaItems || []).filter(item => item.mimeType?.startsWith('image/')); + + if (images.length > 0) { + monthlyImages.set(m + 1, images); // Store with 1-based month key + + // Add to the set of IDs that should be linked + for (const img of images) { + shouldBeLinkedIds.add(img.id); + } + } + } + + const totalImages = Array.from(monthlyImages.values()).reduce((sum, imgs) => sum + imgs.length, 0); + archiveData.push({ element: archive, mode: 'full-year', year, month: undefined, monthlyImages }); + console.log(`[photo_archive] Year ${year}: ${totalImages} images across ${monthlyImages.size} months`); + } } } @@ -397,7 +455,7 @@ const doHydratePhotoArchive = async ( saveLinkedIds(postId, shouldBeLinkedIds); // Phase 3: Link new media and render - for (const { element, year, month, images, monthlyImages } of archiveData) { + for (const { element, mode, year, month, images, monthlyImages, showYearInLabel } of archiveData) { const archiveContainer = element.querySelector('.photo-archive-container'); if (!archiveContainer) continue; @@ -405,7 +463,7 @@ const doHydratePhotoArchive = async ( // Render the gallery let html = ''; - if (month !== undefined && images) { + if (mode === 'single-month' && month !== undefined && images && year) { // Single month view // Link images to the post for (const img of images) { @@ -419,9 +477,37 @@ const doHydratePhotoArchive = async ( archiveContainer.innerHTML = `
No photos found for ${FULL_MONTH_NAMES[month - 1]} ${year}
`; continue; } - html = buildMonthGallery(month, year, images, onImageClick); - } else if (monthlyImages) { - // Full year view - already grouped by month + html = buildMonthGallery(month, year, images, onImageClick, false); + } else if (mode === 'recent' && monthlyImages) { + // Recent mode - keys are "YYYY-MM" strings + // Link all images to the post + for (const imgs of monthlyImages.values()) { + for (const img of imgs) { + const isLinked = await window.electronAPI?.postMedia.isLinked(postId, img.id); + if (!isLinked) { + await window.electronAPI?.postMedia.link(postId, img.id); + } + } + } + + if (monthlyImages.size === 0) { + archiveContainer.innerHTML = `
No recent photos found
`; + continue; + } + + // Sort by key descending (newest first) - keys are "YYYY-MM" strings + const sortedEntries = Array.from(monthlyImages.entries()) + .sort((a, b) => (b[0] as string).localeCompare(a[0] as string)); + + html = sortedEntries.map(([key, imgs]) => { + // Parse "YYYY-MM" to get year and month + const [yearStr, monthStr] = (key as string).split('-'); + const entryYear = parseInt(yearStr, 10); + const entryMonth = parseInt(monthStr, 10); + return `
${buildMonthGallery(entryMonth, entryYear, imgs, onImageClick, true)}
`; + }).join(''); + } else if (mode === 'full-year' && monthlyImages && year) { + // Full year view - keys are month numbers // Link all images to the post for (const imgs of monthlyImages.values()) { for (const img of imgs) { @@ -437,10 +523,11 @@ const doHydratePhotoArchive = async ( continue; } - // Sort months and build gallery - const sortedMonths = Array.from(monthlyImages.entries()).sort((a, b) => a[0] - b[0]); + // Sort months ascending (January first) + const sortedMonths = Array.from(monthlyImages.entries()) + .sort((a, b) => (a[0] as number) - (b[0] as number)); html = sortedMonths.map(([m, imgs]) => - `
${buildMonthGallery(m, year, imgs, onImageClick)}
` + `
${buildMonthGallery(m as number, year, imgs, onImageClick, showYearInLabel || false)}
` ).join(''); } @@ -460,19 +547,26 @@ const doHydratePhotoArchive = async ( /** * Build HTML for a single month's gallery with rotated month label + * @param month - 1-based month number (1 = January) + * @param year - The year + * @param images - Array of image data + * @param _onImageClick - Click handler (unused in template, set up separately) + * @param showYear - Whether to include the year in the label (e.g., "January 2024") */ function buildMonthGallery( month: number, year: number, images: { id: string; originalName: string; alt?: string }[], - _onImageClick: (index: number, images: { src: string; alt: string }[]) => void + _onImageClick: (index: number, images: { src: string; alt: string }[]) => void, + showYear: boolean = false ): string { const monthName = FULL_MONTH_NAMES[month - 1]; + const labelText = showYear ? `${monthName} ${year}` : monthName; return `
- ${monthName} + ${labelText}
${images.map((img, index) => ` diff --git a/src/renderer/macros/definitions/photo_archive.ts b/src/renderer/macros/definitions/photo_archive.ts index f7c5304..58ecafb 100644 --- a/src/renderer/macros/definitions/photo_archive.ts +++ b/src/renderer/macros/definitions/photo_archive.ts @@ -6,15 +6,17 @@ * When rendered, images are automatically linked to the post. * * Usage: + * [[photo_archive]] - Newest 10 months with images (month + year label) * [[photo_archive year="2024"]] - All months of 2024, each in its own lightbox * [[photo_archive year="2024" month="6"]] - Only June 2024 photos * * Parameters: - * - year (required): The year to display photos from (e.g., 2024) - * - month (optional): Specific month (1-12). If omitted, shows all months with photos. + * - year (optional): The year to display photos from (e.g., 2024) + * - month (optional): Specific month (1-12). Requires year. If omitted with year, shows all months. * * Gallery Layout: * - Each month is in its own lightbox with the month name rotated 90° on the side + * - When no year specified, shows "Month Year" label (e.g., "January 2024") * - Images are displayed in a grid and are clickable for lightbox viewing */ @@ -38,18 +40,19 @@ const photoArchiveMacro: MacroDefinition = { description: 'Creates a photo archive gallery organized by year and month, automatically linking discovered images to the post', validate(params: MacroParams): string | undefined { - // Year is required - if (!params.year) { - return 'photo_archive macro requires a "year" parameter'; + // Year is optional - if not provided, shows recent 10 months + if (params.year) { + const year = parseInt(params.year, 10); + if (isNaN(year) || year < 1000 || year > 9999) { + return 'Year must be a valid 4-digit year (e.g., 2024)'; + } } - const year = parseInt(params.year, 10); - if (isNaN(year) || year < 1000 || year > 9999) { - return 'Year must be a valid 4-digit year (e.g., 2024)'; - } - - // Month is optional but must be valid if provided + // Month is optional but must be valid if provided, and requires year if (params.month) { + if (!params.year) { + return 'Month parameter requires a year parameter'; + } const month = parseInt(params.month, 10); if (isNaN(month) || month < 1 || month > 12) { return 'Month must be a number between 1 and 12'; @@ -60,7 +63,11 @@ const photoArchiveMacro: MacroDefinition = { }, editorPreview(params: MacroParams): string { - const year = params.year || '????'; + // No year = recent mode + if (!params.year) { + return '📅 Photo Archive: Recent'; + } + const year = params.year; if (params.month) { const monthNum = parseInt(params.month, 10); const monthName = getMonthName(monthNum); @@ -73,12 +80,16 @@ const photoArchiveMacro: MacroDefinition = { const { year, month } = params; // Build data attributes for hydration - const dataAttrs = [ - `data-year="${year}"`, - ]; + const dataAttrs: string[] = []; - if (month) { - dataAttrs.push(`data-month="${month}"`); + // If no year, use recent mode (newest 10 months with images) + if (!year) { + dataAttrs.push('data-recent="10"'); + } else { + dataAttrs.push(`data-year="${year}"`); + if (month) { + dataAttrs.push(`data-month="${month}"`); + } } if (context.postId) { @@ -87,7 +98,9 @@ const photoArchiveMacro: MacroDefinition = { // CSS classes const classes = ['macro-photo-archive']; - if (month) { + if (!year) { + classes.push('photo-archive-recent-months'); + } else if (month) { classes.push('photo-archive-single-month'); } else { classes.push('photo-archive-full-year'); @@ -96,7 +109,17 @@ const photoArchiveMacro: MacroDefinition = { // Generate placeholder HTML - actual content is hydrated by Editor.tsx let html = `
`; html += `
`; - html += `
Loading photo archive for ${year}${month ? ` / ${getMonthName(parseInt(month, 10))}` : ''}...
`; + + // Loading message based on mode + let loadingMsg: string; + if (!year) { + loadingMsg = 'Loading recent photos...'; + } else if (month) { + loadingMsg = `Loading photo archive for ${year} / ${getMonthName(parseInt(month, 10))}...`; + } else { + loadingMsg = `Loading photo archive for ${year}...`; + } + html += `
${loadingMsg}
`; html += `
`; html += `
`; diff --git a/tests/renderer/macros/photo_archive.test.ts b/tests/renderer/macros/photo_archive.test.ts index 470aa64..1bded2c 100644 --- a/tests/renderer/macros/photo_archive.test.ts +++ b/tests/renderer/macros/photo_archive.test.ts @@ -18,12 +18,12 @@ describe('photo_archive macro', () => { }); describe('validation', () => { - it('should require year parameter', () => { + it('should accept no parameters (recent mode)', () => { const macro = getMacro('photo_archive'); expect(macro).toBeDefined(); const error = macro!.validate?.({}); - expect(error).toBe('photo_archive macro requires a "year" parameter'); + expect(error).toBeUndefined(); }); it('should reject non-numeric year', () => { @@ -170,6 +170,59 @@ describe('photo_archive macro', () => { }); }); + describe('render - no parameters (recent mode)', () => { + it('should accept no parameters', () => { + const macro = getMacro('photo_archive'); + + const error = macro!.validate?.({}); + expect(error).toBeUndefined(); + }); + + it('should render with data-recent attribute when no params', () => { + const macro = getMacro('photo_archive'); + const context: MacroRenderContext = { isPreview: true, postId: 'test-post-id' }; + + const html = macro!.render({}, context); + + expect(html).toContain('data-recent="10"'); + expect(html).not.toContain('data-year='); + }); + + it('should have recent-months class when no params', () => { + const macro = getMacro('photo_archive'); + const context: MacroRenderContext = { isPreview: true, postId: 'test-post-id' }; + + const html = macro!.render({}, context); + + expect(html).toContain('photo-archive-recent-months'); + }); + + it('should show appropriate loading message for recent mode', () => { + const macro = getMacro('photo_archive'); + const context: MacroRenderContext = { isPreview: true, postId: 'test-post-id' }; + + const html = macro!.render({}, context); + + expect(html).toContain('Loading recent photos'); + }); + + it('should show recent photos preview', () => { + const macro = getMacro('photo_archive'); + + const preview = macro!.editorPreview?.({}); + expect(preview).toBe('📅 Photo Archive: Recent'); + }); + + it('should include post-id data attribute in recent mode', () => { + const macro = getMacro('photo_archive'); + const context: MacroRenderContext = { isPreview: true, postId: 'post-123' }; + + const html = macro!.render({}, context); + + expect(html).toContain('data-post-id="post-123"'); + }); + }); + describe('self-registration', () => { it('should self-register on import', () => { const macro = getMacro('photo_archive');