feat: support captions for search results and sidebar for media

src/main/engine/MediaEngine.ts

@@ -61,6 +61,7 @@ export interface MediaFilter {
 export interface MediaSearchResult {
   id: string;
   originalName: string;
+  caption?: string;
   mimeType: string;
   createdAt: Date;
 }
@@ -767,6 +768,7 @@ export class MediaEngine extends EventEmitter {
           searchResults.push({
             id: item.id,
             originalName: item.originalName,
+            caption: item.caption || undefined,
             mimeType: item.mimeType,
             createdAt: item.createdAt,
           });

src/main/engine/stemmer.ts

@@ -35,6 +35,50 @@ export type SupportedLanguage =
   | 'tamil'
   | 'turkish';
 
+/**
+ * Map of ISO 639-1 language codes to Snowball stemmer language names.
+ * Falls back to 'english' for unsupported codes.
+ */
+const isoToSnowball: Record<string, SupportedLanguage> = {
+  ar: 'arabic',
+  hy: 'armenian',
+  eu: 'basque',
+  ca: 'catalan',
+  cs: 'czech',
+  da: 'danish',
+  nl: 'dutch',
+  en: 'english',
+  fi: 'finnish',
+  fr: 'french',
+  de: 'german',
+  hu: 'hungarian',
+  it: 'italian',
+  ga: 'irish',
+  no: 'norwegian',
+  nb: 'norwegian',
+  nn: 'norwegian',
+  pt: 'portuguese',
+  ro: 'romanian',
+  ru: 'russian',
+  es: 'spanish',
+  sl: 'slovene',
+  sv: 'swedish',
+  ta: 'tamil',
+  tr: 'turkish',
+};
+
+/**
+ * Convert an ISO 639-1 language code to a Snowball stemmer language name.
+ * Returns 'english' as fallback for unknown codes.
+ * 
+ * @param isoCode - ISO 639-1 language code (e.g., 'en', 'de', 'fr')
+ * @returns Snowball language name (e.g., 'english', 'german', 'french')
+ */
+export function isoToStemmerLanguage(isoCode: string): SupportedLanguage {
+  const normalized = isoCode.toLowerCase().split('-')[0]; // Handle 'en-US' -> 'en'
+  return isoToSnowball[normalized] || 'english';
+}
+
 interface Stemmer {
   stem(word: string): string;
 }

src/main/ipc/handlers.ts

@@ -85,6 +85,15 @@ export function registerIpcHandlers(): void {
 
       // Sync meta on startup
       await metaEngine.syncOnStartup();
+
+      // Set search language from project metadata
+      const { isoToStemmerLanguage } = await import('../engine/stemmer');
+      const metadata = await metaEngine.getProjectMetadata();
+      if (metadata?.mainLanguage) {
+        const stemmerLang = isoToStemmerLanguage(metadata.mainLanguage);
+        postEngine.setSearchLanguage(stemmerLang);
+        mediaEngine.setSearchLanguage(stemmerLang);
+      }
     }
 
     return project;
@@ -112,6 +121,15 @@ export function registerIpcHandlers(): void {
 
       // Sync meta on project switch
       await metaEngine.syncOnStartup();
+
+      // Set search language from project metadata
+      const { isoToStemmerLanguage } = await import('../engine/stemmer');
+      const metadata = await metaEngine.getProjectMetadata();
+      if (metadata?.mainLanguage) {
+        const stemmerLang = isoToStemmerLanguage(metadata.mainLanguage);
+        postEngine.setSearchLanguage(stemmerLang);
+        mediaEngine.setSearchLanguage(stemmerLang);
+      }
     }
 
     return project;

src/renderer/components/InsertModal/InsertModal.tsx

@@ -11,10 +11,21 @@ interface PostSearchResult {
 interface MediaSearchResult {
   id: string;
   originalName: string;
+  caption?: string;
   mimeType: string;
   createdAt: string;
 }
 
+/** Get display name for media: caption (truncated to 60 chars) or fallback to filename */
+function getMediaDisplayName(media: MediaSearchResult): string {
+  if (media.caption) {
+    return media.caption.length > 60 
+      ? media.caption.substring(0, 60) + '...' 
+      : media.caption;
+  }
+  return media.originalName;
+}
+
 type SearchResult = PostSearchResult | MediaSearchResult;
 
 type InsertMode = 'link' | 'image';
@@ -251,7 +262,7 @@ export const InsertModal: React.FC<InsertModalProps> = ({
                     </>
                   ) : (
                     <>
-                      <div className="insert-modal-result-title">{result.originalName}</div>
+                      <div className="insert-modal-result-title">{getMediaDisplayName(result)}</div>
                       <div className="insert-modal-result-meta">
                         {result.mimeType} • {new Date(result.createdAt).toLocaleDateString()}
                       </div>

src/renderer/components/LinkedMediaPanel/LinkedMediaPanel.tsx

@@ -14,6 +14,16 @@ import { useAppStore, MediaData } from '../../store';
 import { showToast } from '../Toast';
 import './LinkedMediaPanel.css';
 
+/** Get display name for media: caption (truncated to 60 chars) or fallback to filename */
+function getMediaDisplayName(media: MediaData): string {
+  if (media.caption) {
+    return media.caption.length > 60 
+      ? media.caption.substring(0, 60) + '...' 
+      : media.caption;
+  }
+  return media.originalName;
+}
+
 interface LinkedMediaPanelProps {
   postId: string;
   collapsed?: boolean;
@@ -181,7 +191,12 @@ export const LinkedMediaPanel: React.FC<LinkedMediaPanelProps> = ({
   const unlinkedMedia = allMedia.filter(
     m => !linkedMedia.find(l => l.id === m.id)
   ).filter(
-    m => !mediaSearchQuery || m.originalName.toLowerCase().includes(mediaSearchQuery.toLowerCase())
+    m => {
+      if (!mediaSearchQuery) return true;
+      const query = mediaSearchQuery.toLowerCase();
+      return m.originalName.toLowerCase().includes(query) || 
+             (m.caption && m.caption.toLowerCase().includes(query));
+    }
   );
 
   if (collapsed) {
@@ -244,14 +259,14 @@ export const LinkedMediaPanel: React.FC<LinkedMediaPanelProps> = ({
                   key={media.id}
                   className="media-picker-item"
                   onClick={() => handleLinkExisting(media.id)}
-                  title={media.originalName}
+                  title={media.caption || media.originalName}
                 >
                   {media.mimeType?.startsWith('image/') ? (
-                    <img src={`bds-media://${media.id}`} alt={media.originalName} />
+                    <img src={`bds-media://${media.id}`} alt={media.alt || media.originalName} />
                   ) : (
                     <div className="media-icon">📄</div>
                   )}
-                  <span className="media-name">{media.originalName}</span>
+                  <span className="media-name">{getMediaDisplayName(media)}</span>
                 </div>
               ))
             )}
@@ -290,8 +305,8 @@ export const LinkedMediaPanel: React.FC<LinkedMediaPanelProps> = ({
                     <div className="media-icon">📄</div>
                   )}
                 </div>
-                <span className="media-name" title={media.originalName}>
+                <span className="media-name" title={media.caption || media.originalName}>
-                  {media.originalName}
+                  {getMediaDisplayName(media)}
                 </span>
                 <button
                   className="unlink-btn"

src/renderer/components/Sidebar/Sidebar.tsx

@@ -4,6 +4,16 @@ import { showToast } from '../Toast';
 import type { ChatConversation, ImportDefinitionData } from '../../types/electron';
 import './Sidebar.css';
 
+/** Get display name for media: caption (truncated to 60 chars) or fallback to filename */
+function getMediaDisplayName(media: MediaData): string {
+  if (media.caption) {
+    return media.caption.length > 60 
+      ? media.caption.substring(0, 60) + '...' 
+      : media.caption;
+  }
+  return media.originalName;
+}
+
 // Tag data with color information
 interface TagData {
   id: string;
@@ -946,7 +956,7 @@ const MediaList: React.FC = () => {
             className={`media-item ${activeTabId === item.id ? 'selected' : ''}`}
             onClick={() => handleMediaClick(item.id)}
             onDoubleClick={() => handleMediaDoubleClick(item.id)}
-            title={item.originalName}
+            title={item.caption || item.originalName}
           >
             {item.mimeType.startsWith('image/') ? (
               <div className="media-thumbnail">
@@ -967,7 +977,7 @@ const MediaList: React.FC = () => {
               </div>
             )}
             <div className="media-item-info">
-              <div className="media-item-name truncate">{item.originalName}</div>
+              <div className="media-item-name truncate">{getMediaDisplayName(item)}</div>
               <div className="media-item-size">{formatFileSize(item.size)}</div>
             </div>
           </div>