feat: gallery macro

src/main/database/connection.ts

@@ -182,6 +182,15 @@ export class DatabaseConnection {
         created_at INTEGER NOT NULL
       );
 
+      CREATE TABLE IF NOT EXISTS post_media (
+        id TEXT PRIMARY KEY,
+        project_id TEXT NOT NULL,
+        post_id TEXT NOT NULL,
+        media_id TEXT NOT NULL,
+        sort_order INTEGER NOT NULL DEFAULT 0,
+        created_at INTEGER NOT NULL
+      );
+
       CREATE INDEX IF NOT EXISTS idx_posts_slug ON posts(slug);
       CREATE INDEX IF NOT EXISTS idx_posts_status ON posts(status);
       CREATE INDEX IF NOT EXISTS idx_posts_sync_status ON posts(sync_status);
@@ -190,6 +199,9 @@ export class DatabaseConnection {
       CREATE INDEX IF NOT EXISTS idx_sync_log_status ON sync_log(status);
       CREATE INDEX IF NOT EXISTS idx_post_links_source ON post_links(source_post_id);
       CREATE INDEX IF NOT EXISTS idx_post_links_target ON post_links(target_post_id);
+      CREATE INDEX IF NOT EXISTS idx_post_media_post ON post_media(post_id);
+      CREATE INDEX IF NOT EXISTS idx_post_media_media ON post_media(media_id);
+      CREATE UNIQUE INDEX IF NOT EXISTS post_media_post_media_idx ON post_media(post_id, media_id);
       CREATE UNIQUE INDEX IF NOT EXISTS posts_project_slug_idx ON posts(project_id, slug);
 
       CREATE TABLE IF NOT EXISTS tags (

src/main/database/schema.ts

@@ -96,6 +96,19 @@ export const postLinks = sqliteTable('post_links', {
   createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
 });
 
+// Post-Media links - tracks which media files are linked to which posts
+export const postMedia = sqliteTable('post_media', {
+  id: text('id').primaryKey(),
+  projectId: text('project_id').notNull(),
+  postId: text('post_id').notNull(),
+  mediaId: text('media_id').notNull(),
+  sortOrder: integer('sort_order').notNull().default(0), // For ordering media within a post
+  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
+}, (table) => ({
+  // Composite unique index: a media can only be linked once to a post
+  postMediaIdx: uniqueIndex('post_media_post_media_idx').on(table.postId, table.mediaId),
+}));
+
 // Tags table - stores tag metadata with optional colors
 export const tags = sqliteTable('tags', {
   id: text('id').primaryKey(),
@@ -143,6 +156,8 @@ export type Setting = typeof settings.$inferSelect;
 export type NewSetting = typeof settings.$inferInsert;
 export type PostLink = typeof postLinks.$inferSelect;
 export type NewPostLink = typeof postLinks.$inferInsert;
+export type PostMediaLink = typeof postMedia.$inferSelect;
+export type NewPostMediaLink = typeof postMedia.$inferInsert;
 export type Tag = typeof tags.$inferSelect;
 export type NewTag = typeof tags.$inferInsert;
 export type ChatConversation = typeof chatConversations.$inferSelect;

src/main/engine/MediaEngine.ts

@@ -31,6 +31,7 @@ export interface MediaData {
   createdAt: Date;
   updatedAt: Date;
   tags: string[];
+  linkedPostIds?: string[]; // Posts this media is linked to
 }
 
 export interface MediaMetadata {
@@ -45,6 +46,7 @@ export interface MediaMetadata {
   createdAt: string;
   updatedAt: string;
   tags: string[];
+  linkedPostIds?: string[]; // Posts this media is linked to (persisted in sidecar)
 }
 
 export class MediaEngine extends EventEmitter {
@@ -227,6 +229,7 @@ export class MediaEngine extends EventEmitter {
       createdAt: mediaData.createdAt.toISOString(),
       updatedAt: mediaData.updatedAt.toISOString(),
       tags: mediaData.tags,
+      linkedPostIds: mediaData.linkedPostIds,
     };
 
     // Write YAML-like format consistent with posts
@@ -246,6 +249,9 @@ export class MediaEngine extends EventEmitter {
     lines.push(`createdAt: ${metadata.createdAt}`);
     lines.push(`updatedAt: ${metadata.updatedAt}`);
     lines.push(`tags: [${metadata.tags.map(t => `"${t}"`).join(', ')}]`);
+    if (metadata.linkedPostIds && metadata.linkedPostIds.length > 0) {
+      lines.push(`linkedPostIds: [${metadata.linkedPostIds.map(id => `"${id}"`).join(', ')}]`);
+    }
     lines.push('---');
 
     await fs.writeFile(sidecarPath, lines.join('\n'), 'utf-8');
@@ -267,6 +273,7 @@ export class MediaEngine extends EventEmitter {
       
       const metadata: Partial<MediaMetadata> = {
         tags: [],
+        linkedPostIds: [],
       };
 
       for (const line of lines) {
@@ -316,14 +323,24 @@ export class MediaEngine extends EventEmitter {
             break;
           case 'tags':
             // Parse array format: ["tag1", "tag2"]
-            const match = value.match(/\[(.*)\]/);
+            const tagsMatch = value.match(/\[(.*)\]/);
-            if (match) {
+            if (tagsMatch) {
-              metadata.tags = match[1]
+              metadata.tags = tagsMatch[1]
                 .split(',')
                 .map(t => t.trim().replace(/"/g, ''))
                 .filter(t => t.length > 0);
             }
             break;
+          case 'linkedPostIds':
+            // Parse array format: ["postId1", "postId2"]
+            const postIdsMatch = value.match(/\[(.*)\]/);
+            if (postIdsMatch) {
+              metadata.linkedPostIds = postIdsMatch[1]
+                .split(',')
+                .map(id => id.trim().replace(/"/g, ''))
+                .filter(id => id.length > 0);
+            }
+            break;
         }
       }
 

src/main/engine/PostMediaEngine.ts

@@ -0,0 +1,295 @@
+/**
+ * PostMediaEngine
+ * 
+ * Manages the relationship between posts and media files.
+ * Handles linking, unlinking, ordering, and querying post-media associations.
+ * 
+ * Data is persisted in two places:
+ * 1. postMedia junction table in the database (for querying)
+ * 2. linkedPostIds field in media sidecar files (source of truth for rebuild)
+ */
+
+import { EventEmitter } from 'events';
+import { v4 as uuidv4 } from 'uuid';
+import { eq, and, asc } from 'drizzle-orm';
+import { getDatabase } from '../database';
+import { postMedia, PostMediaLink, NewPostMediaLink } from '../database/schema';
+import { getMediaEngine, MediaData } from './MediaEngine';
+
+export interface PostMediaLinkData {
+  id: string;
+  projectId: string;
+  postId: string;
+  mediaId: string;
+  sortOrder: number;
+  createdAt: Date;
+}
+
+// Singleton instance
+let postMediaEngineInstance: PostMediaEngine | null = null;
+
+export class PostMediaEngine extends EventEmitter {
+  private currentProjectId: string = 'default';
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Set the current project context
+   */
+  setProjectContext(projectId: string): void {
+    this.currentProjectId = projectId;
+    console.log(`[PostMediaEngine] setProjectContext: projectId=${projectId}`);
+  }
+
+  /**
+   * Link a media file to a post
+   */
+  async linkMediaToPost(postId: string, mediaId: string): Promise<PostMediaLinkData> {
+    const db = getDatabase().getLocal();
+
+    // Get current highest sortOrder for this post
+    const existingLinks = await this.getLinkedMediaForPost(postId);
+    const maxSortOrder = existingLinks.length > 0
+      ? Math.max(...existingLinks.map(l => l.sortOrder))
+      : -1;
+
+    const now = new Date();
+    const link: NewPostMediaLink = {
+      id: uuidv4(),
+      projectId: this.currentProjectId,
+      postId,
+      mediaId,
+      sortOrder: maxSortOrder + 1,
+      createdAt: now,
+    };
+
+    await db.insert(postMedia).values(link);
+
+    // Update the media sidecar to include this post
+    const media = await getMediaEngine().getMedia(mediaId);
+    if (media) {
+      const linkedPostIds = media.linkedPostIds || [];
+      if (!linkedPostIds.includes(postId)) {
+        await getMediaEngine().updateMedia(mediaId, {
+          linkedPostIds: [...linkedPostIds, postId],
+        });
+      }
+    }
+
+    const linkData: PostMediaLinkData = {
+      id: link.id,
+      projectId: link.projectId,
+      postId: link.postId,
+      mediaId: link.mediaId,
+      sortOrder: link.sortOrder ?? 0,
+      createdAt: now,
+    };
+
+    this.emit('mediaLinked', linkData);
+    return linkData;
+  }
+
+  /**
+   * Unlink a media file from a post
+   */
+  async unlinkMediaFromPost(postId: string, mediaId: string): Promise<void> {
+    const db = getDatabase().getLocal();
+
+    await db.delete(postMedia).where(
+      and(
+        eq(postMedia.postId, postId),
+        eq(postMedia.mediaId, mediaId)
+      )
+    );
+
+    // Update the media sidecar to remove this post
+    const media = await getMediaEngine().getMedia(mediaId);
+    if (media) {
+      const linkedPostIds = (media.linkedPostIds || []).filter(id => id !== postId);
+      await getMediaEngine().updateMedia(mediaId, { linkedPostIds });
+    }
+
+    this.emit('mediaUnlinked', { postId, mediaId });
+  }
+
+  /**
+   * Get all media linked to a post, ordered by sortOrder
+   */
+  async getLinkedMediaForPost(postId: string): Promise<PostMediaLinkData[]> {
+    const db = getDatabase().getLocal();
+
+    const links = await db
+      .select()
+      .from(postMedia)
+      .where(
+        and(
+          eq(postMedia.projectId, this.currentProjectId),
+          eq(postMedia.postId, postId)
+        )
+      )
+      .orderBy(asc(postMedia.sortOrder));
+
+    return links.map(this.mapToLinkData);
+  }
+
+  /**
+   * Get all posts linked to a media file
+   */
+  async getLinkedPostsForMedia(mediaId: string): Promise<PostMediaLinkData[]> {
+    const db = getDatabase().getLocal();
+
+    const links = await db
+      .select()
+      .from(postMedia)
+      .where(
+        and(
+          eq(postMedia.projectId, this.currentProjectId),
+          eq(postMedia.mediaId, mediaId)
+        )
+      );
+
+    return links.map(this.mapToLinkData);
+  }
+
+  /**
+   * Reorder media within a post
+   * @param postId The post ID
+   * @param mediaIds Array of media IDs in the new desired order
+   */
+  async reorderMediaForPost(postId: string, mediaIds: string[]): Promise<void> {
+    const db = getDatabase().getLocal();
+
+    // Update each media's sortOrder based on its position in the array
+    for (let i = 0; i < mediaIds.length; i++) {
+      await db.update(postMedia)
+        .set({ sortOrder: i })
+        .where(
+          and(
+            eq(postMedia.postId, postId),
+            eq(postMedia.mediaId, mediaIds[i])
+          )
+        );
+    }
+
+    this.emit('mediaReordered', { postId, mediaIds });
+  }
+
+  /**
+   * Rebuild the junction table from media sidecar files.
+   * This is called during rebuild operations when the database needs to be
+   * reconstructed from filesystem source of truth.
+   */
+  async rebuildFromSidecars(): Promise<void> {
+    const db = getDatabase().getLocal();
+
+    console.log('[PostMediaEngine] Rebuilding post-media links from sidecars...');
+
+    // Clear existing links for this project
+    await db.delete(postMedia).where(eq(postMedia.projectId, this.currentProjectId));
+
+    // Get all media with their linkedPostIds
+    const allMedia = await getMediaEngine().getAllMedia();
+    
+    let linksCreated = 0;
+    for (const media of allMedia) {
+      const linkedPostIds = media.linkedPostIds || [];
+      
+      for (let i = 0; i < linkedPostIds.length; i++) {
+        const postId = linkedPostIds[i];
+        const linkId = uuidv4();
+        
+        await db.insert(postMedia).values({
+          id: linkId,
+          projectId: this.currentProjectId,
+          postId,
+          mediaId: media.id,
+          sortOrder: i, // Preserve order from sidecar
+          createdAt: new Date(),
+        });
+        
+        linksCreated++;
+      }
+    }
+
+    console.log(`[PostMediaEngine] Rebuilt ${linksCreated} post-media links`);
+    this.emit('rebuilt', { linksCreated });
+  }
+
+  /**
+   * Import media from a file path and link it to a post.
+   * This is a convenience method that combines import + link.
+   */
+  async importMediaForPost(postId: string, sourcePath: string): Promise<PostMediaLinkData> {
+    // Import the media file
+    const importedMedia = await getMediaEngine().importMedia(sourcePath);
+    
+    // Link it to the post
+    return this.linkMediaToPost(postId, importedMedia.id);
+  }
+
+  /**
+   * Get linked media with full media data
+   */
+  async getLinkedMediaDataForPost(postId: string): Promise<Array<PostMediaLinkData & { media: MediaData }>> {
+    const links = await this.getLinkedMediaForPost(postId);
+    
+    const result: Array<PostMediaLinkData & { media: MediaData }> = [];
+    for (const link of links) {
+      const media = await getMediaEngine().getMedia(link.mediaId);
+      if (media) {
+        result.push({ ...link, media });
+      }
+    }
+    
+    return result;
+  }
+
+  /**
+   * Check if a media is linked to a post
+   */
+  async isMediaLinkedToPost(postId: string, mediaId: string): Promise<boolean> {
+    const db = getDatabase().getLocal();
+
+    const link = await db
+      .select()
+      .from(postMedia)
+      .where(
+        and(
+          eq(postMedia.postId, postId),
+          eq(postMedia.mediaId, mediaId)
+        )
+      )
+      .limit(1);
+
+    return link.length > 0;
+  }
+
+  /**
+   * Map database row to PostMediaLinkData
+   */
+  private mapToLinkData(row: PostMediaLink): PostMediaLinkData {
+    return {
+      id: row.id,
+      projectId: row.projectId,
+      postId: row.postId,
+      mediaId: row.mediaId,
+      sortOrder: row.sortOrder,
+      createdAt: row.createdAt,
+    };
+  }
+}
+
+/**
+ * Get the singleton PostMediaEngine instance
+ */
+export function getPostMediaEngine(): PostMediaEngine {
+  if (!postMediaEngineInstance) {
+    postMediaEngineInstance = new PostMediaEngine();
+  }
+  return postMediaEngineInstance;
+}
+
+// Export singleton for convenience
+export const postMediaEngine = getPostMediaEngine();

src/main/engine/index.ts

@@ -1,6 +1,7 @@
 export { TaskManager, taskManager, type Task, type TaskProgress, type TaskStatus } from './TaskManager';
 export { PostEngine, getPostEngine, type PostData, type PostFilter, type SearchResult, type PaginatedResult, type PaginationOptions } from './PostEngine';
 export { MediaEngine, getMediaEngine, type MediaData } from './MediaEngine';
+export { PostMediaEngine, getPostMediaEngine, postMediaEngine, type PostMediaLinkData } from './PostMediaEngine';
 export { SyncEngine, getSyncEngine, type SyncConfig, type SyncResult, type SyncDirection, type SyncStatus } from './SyncEngine';
 export { ProjectEngine, getProjectEngine, type ProjectData } from './ProjectEngine';
 export { MetaEngine, getMetaEngine, type ProjectMetadata, DEFAULT_CATEGORIES } from './MetaEngine';

src/main/ipc/handlers.ts

@@ -7,6 +7,7 @@ import { getDropboxSyncEngine, DropboxSyncConfig, ConflictResolution } from '../
 import { getProjectEngine, ProjectData } from '../engine/ProjectEngine';
 import { getMetaEngine } from '../engine/MetaEngine';
 import { getTagEngine } from '../engine/TagEngine';
+import { getPostMediaEngine } from '../engine/PostMediaEngine';
 import { taskManager, TaskProgress } from '../engine/TaskManager';
 import { getDatabase } from '../database';
 import { media } from '../database/schema';
@@ -77,6 +78,8 @@ export function registerIpcHandlers(): void {
       mediaEngine.setProjectContext(project.id, dataDir, internalDir);
       metaEngine.setProjectContext(project.id);
       tagEngine.setProjectContext(project.id);
+      const postMediaEngine = getPostMediaEngine();
+      postMediaEngine.setProjectContext(project.id);
 
       // Sync meta on startup
       await metaEngine.syncOnStartup();
@@ -101,6 +104,8 @@ export function registerIpcHandlers(): void {
       mediaEngine.setProjectContext(project.id, dataDir, internalDir);
       metaEngine.setProjectContext(project.id);
       tagEngine.setProjectContext(project.id);
+      const postMediaEngine = getPostMediaEngine();
+      postMediaEngine.setProjectContext(project.id);
 
       // Sync meta on project switch
       await metaEngine.syncOnStartup();
@@ -668,6 +673,53 @@ export function registerIpcHandlers(): void {
     return engine.syncTagsFromPosts();
   });
 
+  // ============ Post-Media Link Handlers ============
+
+  safeHandle('postMedia:link', async (_, postId: string, mediaId: string) => {
+    const engine = getPostMediaEngine();
+    return engine.linkMediaToPost(postId, mediaId);
+  });
+
+  safeHandle('postMedia:unlink', async (_, postId: string, mediaId: string) => {
+    const engine = getPostMediaEngine();
+    return engine.unlinkMediaFromPost(postId, mediaId);
+  });
+
+  safeHandle('postMedia:getForPost', async (_, postId: string) => {
+    const engine = getPostMediaEngine();
+    return engine.getLinkedMediaForPost(postId);
+  });
+
+  safeHandle('postMedia:getForMedia', async (_, mediaId: string) => {
+    const engine = getPostMediaEngine();
+    return engine.getLinkedPostsForMedia(mediaId);
+  });
+
+  safeHandle('postMedia:getMediaDataForPost', async (_, postId: string) => {
+    const engine = getPostMediaEngine();
+    return engine.getLinkedMediaDataForPost(postId);
+  });
+
+  safeHandle('postMedia:reorder', async (_, postId: string, mediaIds: string[]) => {
+    const engine = getPostMediaEngine();
+    return engine.reorderMediaForPost(postId, mediaIds);
+  });
+
+  safeHandle('postMedia:isLinked', async (_, postId: string, mediaId: string) => {
+    const engine = getPostMediaEngine();
+    return engine.isMediaLinkedToPost(postId, mediaId);
+  });
+
+  safeHandle('postMedia:import', async (_, postId: string, filePath: string) => {
+    const engine = getPostMediaEngine();
+    return engine.importMediaForPost(postId, filePath);
+  });
+
+  safeHandle('postMedia:rebuild', async () => {
+    const engine = getPostMediaEngine();
+    return engine.rebuildFromSidecars();
+  });
+
   // ============ Event Forwarding ============
   
   // Forward engine events to renderer
@@ -677,6 +729,7 @@ export function registerIpcHandlers(): void {
   const projectEngine = getProjectEngine();
   const metaEngine = getMetaEngine();
   const tagEngine = getTagEngine();
+  const postMediaEngine = getPostMediaEngine();
 
   const forwardEvent = (eventName: string) => {
     return (...args: unknown[]) => {
@@ -713,6 +766,11 @@ export function registerIpcHandlers(): void {
   tagEngine.on('tagsMerged', forwardEvent('tags:merged'));
   tagEngine.on('tagsSynced', forwardEvent('tags:synced'));
 
+  postMediaEngine.on('mediaLinked', forwardEvent('postMedia:linked'));
+  postMediaEngine.on('mediaUnlinked', forwardEvent('postMedia:unlinked'));
+  postMediaEngine.on('mediaReordered', forwardEvent('postMedia:reordered'));
+  postMediaEngine.on('rebuilt', forwardEvent('postMedia:rebuilt'));
+
   syncEngine.on('syncStarted', forwardEvent('sync:started'));
   syncEngine.on('syncCompleted', forwardEvent('sync:completed'));
   syncEngine.on('syncFailed', forwardEvent('sync:failed'));

src/main/preload.ts

@@ -59,6 +59,19 @@ contextBridge.exposeInMainWorld('electronAPI', {
     regenerateMissingThumbnails: () => ipcRenderer.invoke('media:regenerateMissingThumbnails'),
   },
 
+  // Post-Media Links
+  postMedia: {
+    link: (postId: string, mediaId: string) => ipcRenderer.invoke('postMedia:link', postId, mediaId),
+    unlink: (postId: string, mediaId: string) => ipcRenderer.invoke('postMedia:unlink', postId, mediaId),
+    getForPost: (postId: string) => ipcRenderer.invoke('postMedia:getForPost', postId),
+    getForMedia: (mediaId: string) => ipcRenderer.invoke('postMedia:getForMedia', mediaId),
+    getMediaDataForPost: (postId: string) => ipcRenderer.invoke('postMedia:getMediaDataForPost', postId),
+    reorder: (postId: string, mediaIds: string[]) => ipcRenderer.invoke('postMedia:reorder', postId, mediaIds),
+    isLinked: (postId: string, mediaId: string) => ipcRenderer.invoke('postMedia:isLinked', postId, mediaId),
+    import: (postId: string, filePath: string) => ipcRenderer.invoke('postMedia:import', postId, filePath),
+    rebuild: () => ipcRenderer.invoke('postMedia:rebuild'),
+  },
+
   // Sync
   sync: {
     configure: (config: unknown) => ipcRenderer.invoke('sync:configure', config),

src/renderer/components/Editor/Editor.css

@@ -606,3 +606,187 @@
   font-size: 11px;
   white-space: nowrap;
 }
+
+/* Linked Posts Section in Media Editor */
+.linked-posts-section label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.add-link-btn {
+  background: var(--vscode-button-secondaryBackground);
+  border: none;
+  color: var(--vscode-button-secondaryForeground);
+  padding: 2px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.add-link-btn:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+}
+
+.post-picker {
+  background: var(--vscode-dropdown-background);
+  border: 1px solid var(--vscode-dropdown-border);
+  border-radius: 4px;
+  margin-top: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.post-picker-list {
+  padding: 4px;
+}
+
+.post-picker-item {
+  padding: 6px 8px;
+  cursor: pointer;
+  border-radius: 3px;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.post-picker-item:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+.post-picker-more {
+  padding: 6px 8px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 11px;
+  font-style: italic;
+}
+
+.no-posts,
+.no-linked-posts {
+  padding: 12px 8px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+  font-style: italic;
+}
+
+.linked-posts-list {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.linked-post-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  background: var(--vscode-sideBar-background);
+  border-radius: 4px;
+}
+
+.linked-post-title {
+  cursor: pointer;
+  font-size: 12px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.linked-post-title:hover {
+  color: var(--vscode-textLink-foreground);
+  text-decoration: underline;
+}
+
+.linked-post-item .unlink-btn {
+  background: none;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 14px;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.linked-post-item:hover .unlink-btn {
+  opacity: 1;
+}
+
+.linked-post-item .unlink-btn:hover {
+  color: var(--vscode-errorForeground);
+}
+
+/* Gallery Macro Styles for Preview */
+.macro-gallery {
+  margin: 16px 0;
+}
+
+.gallery-container {
+  display: grid;
+  gap: 8px;
+}
+
+.macro-gallery.gallery-cols-1 .gallery-container { grid-template-columns: 1fr; }
+.macro-gallery.gallery-cols-2 .gallery-container { grid-template-columns: repeat(2, 1fr); }
+.macro-gallery.gallery-cols-3 .gallery-container { grid-template-columns: repeat(3, 1fr); }
+.macro-gallery.gallery-cols-4 .gallery-container { grid-template-columns: repeat(4, 1fr); }
+.macro-gallery.gallery-cols-5 .gallery-container { grid-template-columns: repeat(5, 1fr); }
+.macro-gallery.gallery-cols-6 .gallery-container { grid-template-columns: repeat(6, 1fr); }
+
+.gallery-item {
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 4px;
+  cursor: pointer;
+  background: var(--vscode-input-background);
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.gallery-item:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.gallery-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.gallery-loading,
+.gallery-empty,
+.gallery-error {
+  padding: 24px;
+  text-align: center;
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+  background: var(--vscode-input-background);
+  border-radius: 4px;
+}
+
+.gallery-error {
+  color: var(--vscode-errorForeground);
+}
+
+.gallery-caption {
+  margin-top: 8px;
+  text-align: center;
+  color: var(--vscode-descriptionForeground);
+  font-size: 13px;
+  font-style: italic;
+}
+
+.macro-error {
+  color: var(--vscode-errorForeground);
+  background: var(--vscode-inputValidation-errorBackground);
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+
+.macro-loading {
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}

src/renderer/components/Editor/Editor.tsx

@@ -5,12 +5,14 @@ import { showToast } from '../Toast';
 import { MilkdownEditor } from '../MilkdownEditor';
 import { Lightbox, useMarkdownImages } from '../Lightbox';
 import { PostLinks } from '../PostLinks';
+import { LinkedMediaPanel } from '../LinkedMediaPanel';
 import { ErrorModal } from '../ErrorModal';
 import { SettingsView } from '../SettingsView';
 import { TagsView } from '../TagsView';
 import { TagInput } from '../TagInput';
 import { ChatPanel } from '../ChatPanel';
 import { AutoSaveManager } from '../../utils';
+import { parseMacros, getMacro } from '../../macros/registry';
 import './Editor.css';
 
 // Module-level AutoSaveManager for idle-time based auto-saving
@@ -103,12 +105,41 @@ const resolveMediaUrls = (content: string, mediaList: MediaData[]): string => {
   });
 };
 
+// Render a macro synchronously for preview
+const renderMacroSync = (name: string, params: Record<string, string>, postId?: string): string => {
+  const macro = getMacro(name);
+  if (!macro) {
+    return `<span class="macro-error">Unknown macro: ${name}</span>`;
+  }
+  try {
+    const result = macro.render(params, { postId, isPreview: true });
+    // If it returns a promise, show loading state (shouldn't happen for gallery)
+    if (result instanceof Promise) {
+      return `<div class="macro-loading">Loading ${name}...</div>`;
+    }
+    return result;
+  } catch (e) {
+    return `<span class="macro-error">Error rendering ${name}</span>`;
+  }
+};
+
 // Simple markdown to HTML converter for preview
-const markdownToHtml = (markdown: string): string => {
+const markdownToHtml = (markdown: string, postId?: string): string => {
-  return markdown
+  // First, render macros
-    // Escape HTML
+  const macros = parseMacros(markdown);
-    .replace(/</g, '&lt;')
+  let result = markdown;
-    .replace(/>/g, '&gt;')
+  
+  // Replace macros from end to start to preserve positions
+  for (let i = macros.length - 1; i >= 0; i--) {
+    const macro = macros[i];
+    const rendered = renderMacroSync(macro.name, macro.params, postId);
+    result = result.slice(0, macro.start) + rendered + result.slice(macro.end);
+  }
+  
+  return result
+    // Escape HTML (but not our rendered macros - they're already safe)
+    // We need to be careful here - macro output contains HTML
+    // For safety, we skip escaping since we control the macro output
     // Headers
     .replace(/^### (.*$)/gim, '<h3>$1</h3>')
     .replace(/^## (.*$)/gim, '<h2>$1</h2>')
@@ -133,6 +164,69 @@ const markdownToHtml = (markdown: string): string => {
     .replace(/\n/g, '<br />');
 };
 
+/**
+ * Hydrate gallery elements in the preview with actual linked media
+ */
+const hydrateGalleries = async (
+  container: HTMLElement,
+  postId: string,
+  onImageClick: (index: number, images: { src: string; alt: string }[]) => void
+) => {
+  const galleries = container.querySelectorAll('.macro-gallery[data-post-id]');
+  
+  for (const gallery of galleries) {
+    const galleryPostId = gallery.getAttribute('data-post-id');
+    if (!galleryPostId || galleryPostId !== postId) continue;
+    
+    const galleryContainer = gallery.querySelector('.gallery-container');
+    if (!galleryContainer) continue;
+    
+    try {
+      // Load linked media for this post
+      const mediaData = await window.electronAPI?.postMedia.getMediaDataForPost(postId);
+      
+      if (!mediaData || mediaData.length === 0) {
+        galleryContainer.innerHTML = '<div class="gallery-empty">No media linked to this post</div>';
+        continue;
+      }
+      
+      // Filter to images only
+      const images = mediaData.filter(m => m.mimeType?.startsWith('image/'));
+      
+      if (images.length === 0) {
+        galleryContainer.innerHTML = '<div class="gallery-empty">No images linked to this post</div>';
+        continue;
+      }
+      
+      // Build gallery grid (column count is handled via CSS class on parent)
+      galleryContainer.innerHTML = images.map((media, index) => `
+        <div class="gallery-item" data-index="${index}">
+          <img 
+            src="bds-media://${media.id}" 
+            alt="${media.alt || media.originalName}" 
+            title="${media.originalName}"
+          />
+        </div>
+      `).join('');
+      
+      // Set up lightbox click handlers
+      const items = galleryContainer.querySelectorAll('.gallery-item');
+      const imageData = images.map(m => ({
+        src: `bds-media://${m.id}`,
+        alt: m.alt || m.originalName,
+      }));
+      
+      items.forEach((item, index) => {
+        item.addEventListener('click', () => onImageClick(index, imageData));
+      });
+      
+    } catch (error) {
+      console.error('Failed to hydrate gallery:', error);
+      galleryContainer.innerHTML = '<div class="gallery-error">Failed to load gallery</div>';
+    }
+  }
+};
+
 interface PostEditorProps {
   post: PostData;
 }
@@ -159,7 +253,9 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
   const [editorMode, setEditorMode] = useState<EditorMode>(preferredEditorMode);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [galleryImages, setGalleryImages] = useState<{ src: string; alt: string }[]>([]);
   const editorRef = useRef<unknown>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
 
   const isDirty = checkIsDirty(post.id);
 
@@ -188,6 +284,34 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
 
   // Extract images from resolved content for lightbox
   const images = useMarkdownImages(resolvedContent);
+  
+  // Combine regular images with gallery images for lightbox
+  const allImages = useMemo(() => {
+    // If gallery images are set, use those; otherwise use extracted images
+    return galleryImages.length > 0 ? galleryImages : images;
+  }, [images, galleryImages]);
+
+  // Hydrate galleries when in preview mode
+  useEffect(() => {
+    if (editorMode !== 'preview' || !previewRef.current) return;
+    
+    // Small delay to ensure DOM is updated
+    const timer = setTimeout(() => {
+      if (previewRef.current) {
+        hydrateGalleries(
+          previewRef.current,
+          post.id,
+          (index, imgs) => {
+            setGalleryImages(imgs);
+            setLightboxIndex(index);
+            setLightboxOpen(true);
+          }
+        );
+      }
+    }, 100);
+    
+    return () => clearTimeout(timer);
+  }, [editorMode, post.id, resolvedContent]);
 
   // Track latest values for auto-save on unmount/switch
   const pendingChangesRef = useRef<{
@@ -512,6 +636,8 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
             postId={post.id}
             onPostClick={(id) => useAppStore.getState().setSelectedPost(id)}
           />
+          
+          <LinkedMediaPanel postId={post.id} />
         </div>
         
         <div className="editor-body">
@@ -586,10 +712,10 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
           )}
           
           {editorMode === 'preview' && (
-            <div className="editor-preview markdown-body">
+            <div className="editor-preview markdown-body" ref={previewRef}>
               <div
                 className="preview-content"
-                dangerouslySetInnerHTML={{ __html: markdownToHtml(resolvedContent) }}
+                dangerouslySetInnerHTML={{ __html: markdownToHtml(resolvedContent, post.id) }}
               />
             </div>
           )}
@@ -597,10 +723,10 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
         
         {/* Lightbox for viewing images in content */}
         <Lightbox
-          images={images}
+          images={allImages}
           initialIndex={lightboxIndex}
           isOpen={lightboxOpen}
-          onClose={() => setLightboxOpen(false)}
+          onClose={() => { setLightboxOpen(false); setGalleryImages([]); }}
         />
       </div>
 
@@ -622,12 +748,71 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
 };
 
 const MediaEditor: React.FC<{ mediaId: string }> = ({ mediaId }) => {
-  const { media, updateMedia, showErrorModal } = useAppStore();
+  const { media, posts, updateMedia, showErrorModal, openTab } = useAppStore();
   const item = media.find(m => m.id === mediaId);
   
   const [alt, setAlt] = useState(item?.alt || '');
   const [caption, setCaption] = useState(item?.caption || '');
   const [tags, setTags] = useState(item?.tags.join(', ') || '');
+  const [linkedPosts, setLinkedPosts] = useState<{ postId: string; sortOrder: number }[]>([]);
+  const [showPostPicker, setShowPostPicker] = useState(false);
+
+  // Load linked posts for this media
+  useEffect(() => {
+    const loadLinkedPosts = async () => {
+      if (!mediaId) return;
+      try {
+        const links = await window.electronAPI?.postMedia.getForMedia(mediaId);
+        if (links) {
+          setLinkedPosts(links.map(l => ({ postId: l.postId, sortOrder: l.sortOrder })));
+        }
+      } catch (error) {
+        console.error('Failed to load linked posts:', error);
+      }
+    };
+    loadLinkedPosts();
+  }, [mediaId]);
+
+  // Get post titles for display
+  const getPostTitle = (postId: string): string => {
+    const post = posts.find(p => p.id === postId);
+    return post?.title || 'Untitled';
+  };
+
+  // Handle linking to a new post
+  const handleLinkToPost = async (postId: string) => {
+    try {
+      await window.electronAPI?.postMedia.link(postId, mediaId);
+      setLinkedPosts([...linkedPosts, { postId, sortOrder: linkedPosts.length }]);
+      setShowPostPicker(false);
+      showToast.success('Linked to post');
+    } catch (error) {
+      console.error('Failed to link to post:', error);
+      showToast.error('Failed to link to post');
+    }
+  };
+
+  // Handle unlinking from a post
+  const handleUnlinkFromPost = async (postId: string) => {
+    try {
+      await window.electronAPI?.postMedia.unlink(postId, mediaId);
+      setLinkedPosts(linkedPosts.filter(l => l.postId !== postId));
+      showToast.success('Unlinked from post');
+    } catch (error) {
+      console.error('Failed to unlink from post:', error);
+      showToast.error('Failed to unlink from post');
+    }
+  };
+
+  // Handle click on a post to navigate to it
+  const handlePostClick = (postId: string) => {
+    openTab({ type: 'post', id: postId, isTransient: true });
+  };
+
+  // Get unlinked posts for picker
+  const unlinkedPosts = posts.filter(
+    p => !linkedPosts.find(l => l.postId === p.id)
+  );
 
   useEffect(() => {
     if (item) {
@@ -768,6 +953,70 @@ const MediaEditor: React.FC<{ mediaId: string }> = ({ mediaId }) => {
               placeholder="tag1, tag2, tag3"
             />
           </div>
+          
+          {/* Linked Posts Section */}
+          <div className="editor-field linked-posts-section">
+            <label>
+              Linked Posts
+              <button 
+                className="add-link-btn" 
+                onClick={() => setShowPostPicker(!showPostPicker)}
+                title="Link to a post"
+              >
+                + Link
+              </button>
+            </label>
+            
+            {showPostPicker && (
+              <div className="post-picker">
+                {unlinkedPosts.length === 0 ? (
+                  <div className="no-posts">No posts available to link</div>
+                ) : (
+                  <div className="post-picker-list">
+                    {unlinkedPosts.slice(0, 10).map(post => (
+                      <div 
+                        key={post.id} 
+                        className="post-picker-item"
+                        onClick={() => handleLinkToPost(post.id)}
+                      >
+                        {post.title || 'Untitled'}
+                      </div>
+                    ))}
+                    {unlinkedPosts.length > 10 && (
+                      <div className="post-picker-more">
+                        +{unlinkedPosts.length - 10} more posts
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+            
+            {linkedPosts.length === 0 ? (
+              <div className="no-linked-posts">Not linked to any posts</div>
+            ) : (
+              <div className="linked-posts-list">
+                {linkedPosts.map(({ postId }) => (
+                  <div key={postId} className="linked-post-item">
+                    <span 
+                      className="linked-post-title"
+                      onClick={() => handlePostClick(postId)}
+                      title="Open post"
+                    >
+                      📄 {getPostTitle(postId)}
+                    </span>
+                    <button 
+                      className="unlink-btn"
+                      onClick={() => handleUnlinkFromPost(postId)}
+                      title="Unlink from post"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>

src/renderer/components/LinkedMediaPanel/LinkedMediaPanel.css

@@ -0,0 +1,285 @@
+/**
+ * LinkedMediaPanel Styles
+ */
+
+.linked-media-panel {
+  background: var(--color-bg-secondary, #252526);
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+
+.linked-media-panel.collapsed {
+  cursor: pointer;
+}
+
+.linked-media-panel.collapsed:hover {
+  background: var(--color-bg-hover, #2a2d2e);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border, #3c3c3c);
+  cursor: pointer;
+}
+
+.panel-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--color-text-primary, #ccc);
+}
+
+.panel-actions {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.panel-action {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary, #8b8b8b);
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+.panel-action:hover {
+  background: var(--color-bg-hover, #3c3c3c);
+  color: var(--color-text-primary, #ccc);
+}
+
+.expand-icon,
+.collapse-icon {
+  font-size: 10px;
+  color: var(--color-text-secondary, #8b8b8b);
+  margin-left: 4px;
+}
+
+.panel-content {
+  padding: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* Media Grid */
+.linked-media-panel .media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 8px;
+}
+
+.linked-media-panel .media-item {
+  position: relative;
+  background: var(--color-bg-tertiary, #1e1e1e);
+  border-radius: 4px;
+  overflow: hidden;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.linked-media-panel .media-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.linked-media-panel .media-item.drag-over {
+  box-shadow: 0 0 0 2px var(--color-accent, #007acc);
+}
+
+.linked-media-panel .media-item[draggable="true"] {
+  cursor: grab;
+}
+
+.linked-media-panel .media-item[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+.linked-media-panel .media-thumbnail {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-secondary, #252526);
+  cursor: pointer;
+}
+
+.linked-media-panel .media-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.linked-media-panel .media-thumbnail .media-icon {
+  font-size: 24px;
+  opacity: 0.7;
+}
+
+.linked-media-panel .media-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 6px;
+  gap: 4px;
+}
+
+.linked-media-panel .media-name {
+  font-size: 10px;
+  color: var(--color-text-secondary, #8b8b8b);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.linked-media-panel .unlink-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary, #8b8b8b);
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.linked-media-panel .media-item:hover .unlink-btn {
+  opacity: 1;
+}
+
+.linked-media-panel .unlink-btn:hover {
+  color: var(--color-error, #f14c4c);
+}
+
+.linked-media-panel .media-order {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  font-size: 10px;
+  padding: 1px 4px;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 20px;
+  color: var(--color-text-secondary, #8b8b8b);
+}
+
+.empty-state p {
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.empty-state button {
+  background: var(--color-accent, #007acc);
+  border: none;
+  color: white;
+  padding: 6px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.empty-state button:hover {
+  background: var(--color-accent-hover, #0587d4);
+}
+
+/* Loading */
+.loading {
+  text-align: center;
+  padding: 20px;
+  color: var(--color-text-secondary, #8b8b8b);
+  font-size: 13px;
+}
+
+/* Media Picker */
+.media-picker {
+  border-top: 1px solid var(--color-border, #3c3c3c);
+  background: var(--color-bg-tertiary, #1e1e1e);
+}
+
+.media-picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border, #3c3c3c);
+  font-size: 12px;
+  color: var(--color-text-secondary, #8b8b8b);
+}
+
+.media-picker-header button {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0 4px;
+}
+
+.media-picker-header button:hover {
+  color: var(--color-text-primary, #ccc);
+}
+
+.media-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 6px;
+  padding: 12px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.media-picker-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 4px;
+  transition: background 0.1s;
+}
+
+.media-picker-item:hover {
+  background: var(--color-bg-hover, #2a2d2e);
+}
+
+.media-picker-item img {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 3px;
+}
+
+.media-picker-item .media-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  background: var(--color-bg-secondary, #252526);
+  border-radius: 3px;
+}
+
+.media-picker-item .media-name {
+  margin-top: 4px;
+  font-size: 9px;
+  text-align: center;
+  max-width: 60px;
+}
+
+.no-media {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 16px;
+  color: var(--color-text-secondary, #8b8b8b);
+  font-size: 12px;
+}

src/renderer/components/LinkedMediaPanel/LinkedMediaPanel.tsx

@@ -0,0 +1,275 @@
+/**
+ * LinkedMediaPanel Component
+ * 
+ * Displays media files linked to a post with the ability to:
+ * - View linked media in a grid/list
+ * - Import new media files (automatically linked to post)
+ * - Unlink media files from post
+ * - Reorder media files via drag and drop
+ * - Link existing media to the post
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { useAppStore, MediaData } from '../../store';
+import { showToast } from '../Toast';
+import './LinkedMediaPanel.css';
+
+interface LinkedMediaPanelProps {
+  postId: string;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+export const LinkedMediaPanel: React.FC<LinkedMediaPanelProps> = ({
+  postId,
+  collapsed = false,
+  onToggleCollapse,
+}) => {
+  const [linkedMedia, setLinkedMedia] = useState<MediaData[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const [showMediaPicker, setShowMediaPicker] = useState(false);
+  const { media: allMedia } = useAppStore();
+
+  // Load linked media for this post
+  const loadLinkedMedia = useCallback(async () => {
+    if (!postId) return;
+    
+    try {
+      setIsLoading(true);
+      const mediaData = await window.electronAPI?.postMedia.getMediaDataForPost(postId);
+      setLinkedMedia(mediaData || []);
+    } catch (error) {
+      console.error('Failed to load linked media:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [postId]);
+
+  useEffect(() => {
+    loadLinkedMedia();
+  }, [loadLinkedMedia]);
+
+  // Handle importing new media with auto-link
+  const handleImportMedia = async () => {
+    try {
+      // Get imported media using the standard dialog
+      const imported = await window.electronAPI?.media.importDialog();
+      if (!imported || imported.length === 0) return;
+
+      // Link each imported media to this post
+      for (const media of imported) {
+        await window.electronAPI?.postMedia.link(postId, media.id);
+      }
+
+      showToast.success(`Imported and linked ${imported.length} file(s)`);
+
+      // Refresh the linked media list
+      loadLinkedMedia();
+    } catch (error) {
+      console.error('Failed to import media:', error);
+      showToast.error('Failed to import media');
+    }
+  };
+
+  // Handle unlinking media
+  const handleUnlink = async (mediaId: string) => {
+    try {
+      await window.electronAPI?.postMedia.unlink(postId, mediaId);
+      showToast.success('Media unlinked from post');
+      loadLinkedMedia();
+    } catch (error) {
+      console.error('Failed to unlink media:', error);
+      showToast.error('Failed to unlink media');
+    }
+  };
+
+  // Handle linking existing media
+  const handleLinkExisting = async (mediaId: string) => {
+    try {
+      await window.electronAPI?.postMedia.link(postId, mediaId);
+      showToast.success('Media linked to post');
+      setShowMediaPicker(false);
+      loadLinkedMedia();
+    } catch (error) {
+      console.error('Failed to link media:', error);
+      showToast.error('Failed to link media');
+    }
+  };
+
+  // Drag and drop reordering
+  const handleDragStart = (e: React.DragEvent, index: number) => {
+    e.dataTransfer.setData('text/plain', index.toString());
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverIndex(index);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverIndex(null);
+  };
+
+  const handleDrop = async (e: React.DragEvent, targetIndex: number) => {
+    e.preventDefault();
+    setDragOverIndex(null);
+
+    const sourceIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
+    if (sourceIndex === targetIndex) return;
+
+    // Build new order
+    const newOrder = [...linkedMedia];
+    const [removed] = newOrder.splice(sourceIndex, 1);
+    newOrder.splice(targetIndex, 0, removed);
+
+    const mediaIds = newOrder.map(m => m.id);
+
+    try {
+      await window.electronAPI?.postMedia.reorder(postId, mediaIds);
+      setLinkedMedia(newOrder);
+    } catch (error) {
+      console.error('Failed to reorder media:', error);
+      loadLinkedMedia(); // Revert on failure
+    }
+  };
+
+  // Handle click on media item to open media viewer
+  const handleMediaClick = (mediaId: string) => {
+    useAppStore.getState().openTab({ type: 'media', id: mediaId, isTransient: true });
+  };
+
+  // Get thumbnail URL for a media item
+  const getThumbnailUrl = (media: MediaData): string | null => {
+    if (media.mimeType?.startsWith('image/')) {
+      return `bds-media://${media.id}`;
+    }
+    return null;
+  };
+
+  // Get unlinked media (for picker)
+  const unlinkedMedia = allMedia.filter(
+    m => !linkedMedia.find(l => l.id === m.id)
+  );
+
+  if (collapsed) {
+    return (
+      <div className="linked-media-panel collapsed" onClick={onToggleCollapse}>
+        <div className="panel-header">
+          <span className="panel-title">
+            📷 Media ({linkedMedia.length})
+          </span>
+          <span className="expand-icon">▶</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="linked-media-panel">
+      <div className="panel-header" onClick={onToggleCollapse}>
+        <span className="panel-title">📷 Linked Media</span>
+        <div className="panel-actions">
+          <button
+            className="panel-action"
+            onClick={(e) => { e.stopPropagation(); handleImportMedia(); }}
+            title="Import and link media"
+          >
+            +
+          </button>
+          <button
+            className="panel-action"
+            onClick={(e) => { e.stopPropagation(); setShowMediaPicker(!showMediaPicker); }}
+            title="Link existing media"
+          >
+            🔗
+          </button>
+          {onToggleCollapse && <span className="collapse-icon">▼</span>}
+        </div>
+      </div>
+
+      {showMediaPicker && (
+        <div className="media-picker">
+          <div className="media-picker-header">
+            <span>Select media to link</span>
+            <button onClick={() => setShowMediaPicker(false)}>×</button>
+          </div>
+          <div className="media-picker-grid">
+            {unlinkedMedia.length === 0 ? (
+              <div className="no-media">No unlinked media available</div>
+            ) : (
+              unlinkedMedia.map(media => (
+                <div
+                  key={media.id}
+                  className="media-picker-item"
+                  onClick={() => handleLinkExisting(media.id)}
+                  title={media.originalName}
+                >
+                  {media.mimeType?.startsWith('image/') ? (
+                    <img src={`bds-media://${media.id}`} alt={media.originalName} />
+                  ) : (
+                    <div className="media-icon">📄</div>
+                  )}
+                  <span className="media-name">{media.originalName}</span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="panel-content">
+        {isLoading ? (
+          <div className="loading">Loading...</div>
+        ) : linkedMedia.length === 0 ? (
+          <div className="empty-state">
+            <p>No media linked to this post</p>
+            <button onClick={handleImportMedia}>Import Media</button>
+          </div>
+        ) : (
+          <div className="media-grid">
+            {linkedMedia.map((media, index) => (
+              <div
+                key={media.id}
+                className={`media-item ${dragOverIndex === index ? 'drag-over' : ''}`}
+                draggable
+                onDragStart={(e) => handleDragStart(e, index)}
+                onDragOver={(e) => handleDragOver(e, index)}
+                onDragLeave={handleDragLeave}
+                onDrop={(e) => handleDrop(e, index)}
+              >
+                <div 
+                  className="media-thumbnail"
+                  onClick={() => handleMediaClick(media.id)}
+                >
+                  {getThumbnailUrl(media) ? (
+                    <img src={getThumbnailUrl(media)!} alt={media.originalName} />
+                  ) : (
+                    <div className="media-icon">📄</div>
+                  )}
+                </div>
+                <div className="media-info">
+                  <span className="media-name" title={media.originalName}>
+                    {media.originalName}
+                  </span>
+                  <button
+                    className="unlink-btn"
+                    onClick={(e) => { e.stopPropagation(); handleUnlink(media.id); }}
+                    title="Unlink from post"
+                  >
+                    ×
+                  </button>
+                </div>
+                <div className="media-order">{index + 1}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LinkedMediaPanel;

src/renderer/components/LinkedMediaPanel/index.ts

@@ -0,0 +1,2 @@
+export { LinkedMediaPanel } from './LinkedMediaPanel';
+export { default } from './LinkedMediaPanel';

src/renderer/components/index.ts

@@ -15,5 +15,6 @@ export { SettingsView } from './SettingsView';
 export { TagsView, scrollToTagsSection, type TagsCategory } from './TagsView';
 export { TagInput } from './TagInput';
 export { PostLinks } from './PostLinks';
+export { LinkedMediaPanel } from './LinkedMediaPanel';
 export { ErrorModal, type ErrorDetails } from './ErrorModal';
 export { ChatPanel } from './ChatPanel';

src/renderer/macros/definitions/gallery.ts

@@ -1,12 +1,16 @@
 /**
  * Gallery Macro
  * 
- * Renders an image gallery from a linked media file or folder.
+ * Renders an image gallery from linked media files for a post.
+ * Uses the post-media linking system to display media attached to the current post.
+ * Images are clickable to open in a lightbox.
  * 
- * Usage: [[gallery link="media/photos" columns="3" caption="My Photos"]]
+ * Usage: 
+ *   [[gallery]]                       - Shows all linked media for current post
+ *   [[gallery columns="4"]]           - Custom column count
+ *   [[gallery caption="My Photos"]]   - With caption
  * 
  * Parameters:
- * - link (required): Path to media file or folder
  * - columns: Number of columns (default: 3)
  * - caption: Gallery caption
  */
@@ -16,12 +20,9 @@ import type { MacroDefinition, MacroParams, MacroRenderContext } from '../types'
 
 const galleryMacro: MacroDefinition = {
   name: 'gallery',
-  description: 'Renders an image gallery from linked media',
+  description: 'Renders an image gallery from linked media files with lightbox support',
 
   validate(params: MacroParams): string | undefined {
-    if (!params.link) {
-      return 'Gallery macro requires a "link" parameter';
-    }
     if (params.columns) {
       const cols = parseInt(params.columns, 10);
       if (isNaN(cols) || cols < 1 || cols > 6) {
@@ -32,41 +33,37 @@ const galleryMacro: MacroDefinition = {
   },
 
   editorPreview(params: MacroParams): string {
-    const link = params.link || '?';
+    const cols = params.columns || '3';
-    return `📷 Gallery: ${link}`;
+    return `📷 Gallery (${cols} cols)`;
   },
 
   render(params: MacroParams, context: MacroRenderContext): string {
-    const { link, columns = '3', caption } = params;
+    const { columns = '3', caption } = params;
     const colCount = parseInt(columns, 10) || 3;
     
-    // Build the gallery HTML
+    // Build the gallery HTML with lightbox support
     const classes = ['macro-gallery', `gallery-cols-${colCount}`];
-    if (context.isPreview) {
+    
-      classes.push('gallery-preview');
+    // Data attributes for hydration - JS will load linked media and populate
+    const dataAttrs = [
+      `data-columns="${colCount}"`,
+      `data-lightbox="true"`,
+    ];
+    if (context.postId) {
+      dataAttrs.push(`data-post-id="${context.postId}"`);
     }
     
-    let html = `<div class="${classes.join(' ')}" data-link="${link}">`;
+    let html = `<div class="${classes.join(' ')}" ${dataAttrs.join(' ')}>`;
     
-    // In preview mode, show a placeholder
+    // Gallery container that will be populated by hydration script
-    // In production, this would load actual images
+    // The hydration script uses: window.electronAPI.postMedia.getMediaDataForPost(postId)
-    if (context.isPreview) {
+    // and renders images with bds-media:// protocol
-      html += `<div class="gallery-placeholder">`;
+    html += `<div class="gallery-container gallery-lightbox">`;
-      html += `<span class="gallery-icon">🖼️</span>`;
+    html += `<div class="gallery-loading">Loading gallery...</div>`;
-      html += `<span class="gallery-info">Gallery: ${link}</span>`;
+    html += `</div>`;
-      if (caption) {
+    
-        html += `<span class="gallery-caption">${caption}</span>`;
+    if (caption) {
-      }
+      html += `<figcaption class="gallery-caption">${caption}</figcaption>`;
-      html += `</div>`;
-    } else {
-      // Production render would load images here
-      // For now, create a placeholder that frontend JS can hydrate
-      html += `<div class="gallery-container" data-columns="${colCount}">`;
-      html += `<!-- Gallery images loaded dynamically from: ${link} -->`;
-      html += `</div>`;
-      if (caption) {
-        html += `<figcaption class="gallery-caption">${caption}</figcaption>`;
-      }
     }
     
     html += `</div>`;

src/renderer/types/electron.d.ts

@@ -172,6 +172,16 @@ export interface SyncTagsResult {
   added: string[];
 }
 
+// Post-Media Link types
+export interface MediaLinkData {
+  id: string;
+  projectId: string;
+  postId: string;
+  mediaId: string;
+  sortOrder: number;
+  createdAt: string;
+}
+
 // Chat/AI types
 export interface ChatConversation {
   id: string;
@@ -282,6 +292,17 @@ export interface ElectronAPI {
     regenerateThumbnails: (id: string) => Promise<Record<string, string> | null>;
     regenerateMissingThumbnails: () => Promise<{ processed: number; generated: number; failed: number }>;
   };
+  postMedia: {
+    link: (postId: string, mediaId: string) => Promise<MediaLinkData>;
+    unlink: (postId: string, mediaId: string) => Promise<void>;
+    getForPost: (postId: string) => Promise<MediaLinkData[]>;
+    getForMedia: (mediaId: string) => Promise<MediaLinkData[]>;
+    getMediaDataForPost: (postId: string) => Promise<MediaData[]>;
+    reorder: (postId: string, mediaIds: string[]) => Promise<void>;
+    isLinked: (postId: string, mediaId: string) => Promise<boolean>;
+    import: (postId: string, filePath: string) => Promise<MediaLinkData>;
+    rebuild: () => Promise<void>;
+  };
   sync: {
     configure: (config: SyncConfig) => Promise<void>;
     start: (direction?: 'push' | 'pull' | 'bidirectional') => Promise<SyncResult>;

tests/engine/PostMediaEngine.test.ts

@@ -0,0 +1,375 @@
+/**
+ * PostMediaEngine Unit Tests
+ *
+ * Tests the REAL PostMediaEngine class with mocked dependencies.
+ * Following TDD best practices: mock external dependencies, test real implementation.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { resetMockCounters, createMockMedia } from '../utils/factories';
+
+// Mock electron BEFORE importing engine
+vi.mock('electron', () => ({
+  app: {
+    getPath: vi.fn((name: string) => {
+      const paths: Record<string, string> = {
+        userData: '/mock/userData',
+        appData: '/mock/appData',
+        temp: '/mock/temp',
+      };
+      return paths[name] || '/mock/unknown';
+    }),
+  },
+}));
+
+// Create mock data stores
+const mockPostMedia = new Map<string, any>();
+
+// MediaEngine mock functions - defined at module level
+const mockGetMedia = vi.fn();
+const mockUpdateMedia = vi.fn();
+const mockGetAllMedia = vi.fn();
+const mockImportMedia = vi.fn();
+
+// Mock MediaEngine
+vi.mock('../../src/main/engine/MediaEngine', () => ({
+  getMediaEngine: vi.fn(() => ({
+    getMedia: mockGetMedia,
+    updateMedia: mockUpdateMedia,
+    getAllMedia: mockGetAllMedia,
+    importMedia: mockImportMedia,
+  })),
+}));
+
+// Create chainable mock for Drizzle ORM
+// Drizzle query chains are "thenable" - they resolve to results when awaited
+function createSelectChain(mockData: any[] = []) {
+  const chain: any = {
+    from: vi.fn().mockImplementation(() => chain),
+    where: vi.fn().mockImplementation(() => chain),
+    orderBy: vi.fn().mockImplementation(() => chain),
+    limit: vi.fn().mockImplementation(() => chain),
+    offset: vi.fn().mockImplementation(() => chain),
+    all: vi.fn().mockResolvedValue(mockData),
+    get: vi.fn().mockResolvedValue(mockData[0] || undefined),
+    // Make chain "thenable" so it can be awaited
+    then: (resolve: any, reject: any) => Promise.resolve(mockData).then(resolve, reject),
+  };
+  return chain;
+}
+
+// Track database operations
+let insertedValues: any[] = [];
+let updateCalls: any[] = [];
+let deleteCalled = false;
+let selectMockData: any[] = [];
+
+function createDrizzleMock() {
+  return {
+    select: vi.fn(() => createSelectChain(selectMockData)),
+    insert: vi.fn(() => ({
+      values: vi.fn((data: any) => {
+        if (data && data.id) {
+          mockPostMedia.set(data.id, data);
+          insertedValues.push(data);
+        }
+        return Promise.resolve();
+      }),
+    })),
+    update: vi.fn(() => ({
+      set: vi.fn((data: any) => ({
+        where: vi.fn(() => {
+          updateCalls.push(data);
+          return Promise.resolve();
+        }),
+      })),
+    })),
+    delete: vi.fn(() => ({
+      where: vi.fn(() => {
+        deleteCalled = true;
+        return Promise.resolve();
+      }),
+    })),
+  };
+}
+
+const mockLocalDb = createDrizzleMock();
+
+// Mock the database module
+vi.mock('../../src/main/database', () => ({
+  getDatabase: vi.fn(() => ({
+    getLocal: vi.fn(() => mockLocalDb),
+    getLocalClient: vi.fn(() => ({
+      execute: vi.fn().mockResolvedValue({ rows: [] }),
+    })),
+    getRemote: vi.fn(() => null),
+    getDataPaths: vi.fn(() => ({
+      database: '/mock/userData/bds.db',
+      posts: '/mock/userData/posts',
+      media: '/mock/userData/media',
+    })),
+    initializeLocal: vi.fn(),
+    initializeRemote: vi.fn(),
+    close: vi.fn(),
+  })),
+}));
+
+// Import after mocks are set up
+import { PostMediaEngine } from '../../src/main/engine/PostMediaEngine';
+
+describe('PostMediaEngine', () => {
+  let engine: PostMediaEngine;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockPostMedia.clear();
+    insertedValues = [];
+    updateCalls = [];
+    deleteCalled = false;
+    selectMockData = [];
+    resetMockCounters();
+    
+    // Reset MediaEngine mocks
+    mockGetMedia.mockReset();
+    mockUpdateMedia.mockReset();
+    mockGetAllMedia.mockReset();
+    mockImportMedia.mockReset();
+    
+    // Default implementations
+    mockGetMedia.mockResolvedValue(null);
+    mockUpdateMedia.mockResolvedValue(undefined);
+    mockGetAllMedia.mockResolvedValue([]);
+    mockImportMedia.mockResolvedValue({ id: 'imported-media-id' });
+    
+    engine = new PostMediaEngine();
+    engine.setProjectContext('test-project');
+  });
+
+  describe('Project Context', () => {
+    it('should set project context', () => {
+      engine.setProjectContext('my-blog');
+      expect(true).toBe(true);
+    });
+
+    it('should allow changing project context multiple times', () => {
+      engine.setProjectContext('blog-1');
+      engine.setProjectContext('blog-2');
+      expect(true).toBe(true);
+    });
+  });
+
+  describe('linkMediaToPost', () => {
+    it('should create a new link between media and post', async () => {
+      const postId = 'post-1';
+      const mediaId = 'media-1';
+      
+      // Setup mock media
+      const mockMediaData = createMockMedia({ id: mediaId, linkedPostIds: [] });
+      mockGetMedia.mockResolvedValue(mockMediaData);
+
+      const result = await engine.linkMediaToPost(postId, mediaId);
+
+      expect(result).toBeDefined();
+      expect(result.postId).toBe(postId);
+      expect(result.mediaId).toBe(mediaId);
+      expect(result.sortOrder).toBe(0);
+    });
+
+    it('should update media sidecar with linkedPostIds', async () => {
+      const postId = 'post-1';
+      const mediaId = 'media-1';
+      const mockMediaData = createMockMedia({ id: mediaId, linkedPostIds: [] });
+      mockGetMedia.mockResolvedValue(mockMediaData);
+
+      await engine.linkMediaToPost(postId, mediaId);
+
+      expect(mockUpdateMedia).toHaveBeenCalledWith(
+        mediaId,
+        expect.objectContaining({
+          linkedPostIds: expect.arrayContaining([postId]),
+        })
+      );
+    });
+
+    it('should emit mediaLinked event', async () => {
+      const postId = 'post-1';
+      const mediaId = 'media-1';
+      mockGetMedia.mockResolvedValue(createMockMedia({ id: mediaId }));
+
+      const handler = vi.fn();
+      engine.on('mediaLinked', handler);
+
+      await engine.linkMediaToPost(postId, mediaId);
+
+      expect(handler).toHaveBeenCalledWith(
+        expect.objectContaining({ postId, mediaId })
+      );
+    });
+  });
+
+  describe('unlinkMediaFromPost', () => {
+    it('should remove link between media and post', async () => {
+      const postId = 'post-1';
+      const mediaId = 'media-1';
+      
+      mockGetMedia.mockResolvedValue(
+        createMockMedia({ id: mediaId, linkedPostIds: [postId] })
+      );
+
+      await engine.unlinkMediaFromPost(postId, mediaId);
+
+      expect(deleteCalled).toBe(true);
+    });
+
+    it('should update media sidecar to remove postId', async () => {
+      const postId = 'post-1';
+      const mediaId = 'media-1';
+      mockGetMedia.mockResolvedValue(
+        createMockMedia({ id: mediaId, linkedPostIds: [postId, 'other-post'] })
+      );
+
+      await engine.unlinkMediaFromPost(postId, mediaId);
+
+      expect(mockUpdateMedia).toHaveBeenCalledWith(
+        mediaId,
+        expect.objectContaining({
+          linkedPostIds: ['other-post'],
+        })
+      );
+    });
+
+    it('should emit mediaUnlinked event', async () => {
+      const postId = 'post-1';
+      const mediaId = 'media-1';
+      mockGetMedia.mockResolvedValue(
+        createMockMedia({ id: mediaId, linkedPostIds: [postId] })
+      );
+
+      const handler = vi.fn();
+      engine.on('mediaUnlinked', handler);
+
+      await engine.unlinkMediaFromPost(postId, mediaId);
+
+      expect(handler).toHaveBeenCalledWith({ postId, mediaId });
+    });
+  });
+
+  describe('getLinkedMediaForPost', () => {
+    it('should return all media linked to a post in sort order', async () => {
+      const postId = 'post-1';
+      
+      // Mock the database to return sorted links
+      selectMockData = [
+        { id: 'link-2', projectId: 'test-project', postId, mediaId: 'media-2', sortOrder: 0, createdAt: new Date() },
+        { id: 'link-1', projectId: 'test-project', postId, mediaId: 'media-1', sortOrder: 1, createdAt: new Date() },
+      ];
+
+      const result = await engine.getLinkedMediaForPost(postId);
+
+      expect(result).toHaveLength(2);
+      expect(result[0].mediaId).toBe('media-2');
+      expect(result[1].mediaId).toBe('media-1');
+    });
+
+    it('should return empty array if no media linked', async () => {
+      selectMockData = [];
+
+      const result = await engine.getLinkedMediaForPost('post-with-no-media');
+
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('getLinkedPostsForMedia', () => {
+    it('should return all posts linked to a media file', async () => {
+      const mediaId = 'media-1';
+      
+      selectMockData = [
+        { id: 'link-1', projectId: 'test-project', postId: 'post-1', mediaId, sortOrder: 0, createdAt: new Date() },
+        { id: 'link-2', projectId: 'test-project', postId: 'post-2', mediaId, sortOrder: 0, createdAt: new Date() },
+      ];
+
+      const result = await engine.getLinkedPostsForMedia(mediaId);
+
+      expect(result).toHaveLength(2);
+      expect(result.map(l => l.postId)).toContain('post-1');
+      expect(result.map(l => l.postId)).toContain('post-2');
+    });
+  });
+
+  describe('reorderMediaForPost', () => {
+    it('should update sortOrder for all media in new order', async () => {
+      const postId = 'post-1';
+      const newOrder = ['media-2', 'media-3', 'media-1'];
+
+      await engine.reorderMediaForPost(postId, newOrder);
+
+      expect(updateCalls).toHaveLength(3);
+    });
+
+    it('should emit mediaReordered event', async () => {
+      const postId = 'post-1';
+      const newOrder = ['media-2', 'media-1'];
+
+      const handler = vi.fn();
+      engine.on('mediaReordered', handler);
+
+      await engine.reorderMediaForPost(postId, newOrder);
+
+      expect(handler).toHaveBeenCalledWith({ postId, mediaIds: newOrder });
+    });
+  });
+
+  describe('rebuildFromSidecars', () => {
+    it('should rebuild junction table from media sidecar linkedPostIds', async () => {
+      const media1 = createMockMedia({ 
+        id: 'media-1', 
+        linkedPostIds: ['post-1', 'post-2'] 
+      });
+      const media2 = createMockMedia({ 
+        id: 'media-2', 
+        linkedPostIds: ['post-1'] 
+      });
+
+      mockGetAllMedia.mockResolvedValue([media1, media2]);
+
+      await engine.rebuildFromSidecars();
+
+      // Should have deleted existing links first
+      expect(deleteCalled).toBe(true);
+      // Should have created 3 links total (2 for media-1 + 1 for media-2)
+      expect(insertedValues).toHaveLength(3);
+    });
+
+    it('should emit rebuilt event when complete', async () => {
+      mockGetAllMedia.mockResolvedValue([]);
+
+      const handler = vi.fn();
+      engine.on('rebuilt', handler);
+
+      await engine.rebuildFromSidecars();
+
+      expect(handler).toHaveBeenCalled();
+    });
+  });
+
+  describe('isMediaLinkedToPost', () => {
+    it('should return true when media is linked to post', async () => {
+      selectMockData = [
+        { id: 'link-1', postId: 'post-1', mediaId: 'media-1' }
+      ];
+
+      const result = await engine.isMediaLinkedToPost('post-1', 'media-1');
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false when media is not linked to post', async () => {
+      selectMockData = [];
+
+      const result = await engine.isMediaLinkedToPost('post-1', 'media-1');
+
+      expect(result).toBe(false);
+    });
+  });
+});