work on icon display

src/features/flyer/FlyerList.tsx

@@ -5,6 +5,7 @@ import type { Flyer, UserProfile } from '../../types';
 import { DocumentTextIcon } from '../../components/icons/DocumentTextIcon';
 import { parseISO, format, isValid } from 'date-fns';
 import { MapPinIcon, Trash2Icon } from 'lucide-react';
+import { logger } from '../../services/logger.client';
 import * as apiClient from '../../services/apiClient';
 
 const formatShortDate = (dateString: string | null | undefined): string | null => {
@@ -71,6 +72,12 @@ export const FlyerList: React.FC<FlyerListProps> = ({ flyers, onFlyerSelect, sel
                         ];
                         const tooltipText = tooltipLines.join('\n');
 
+                        // --- DEBUG LOGGING for icon display logic ---
+                        // Log the flyer object and the specific icon_url value before the conditional check.
+                        logger.debug(`[FlyerList] Checking icon for flyer ID ${flyer.flyer_id}.`, { flyer });
+                        const hasIconUrl = !!flyer.icon_url;
+                        logger.debug(`[FlyerList] Flyer ID ${flyer.flyer_id}: hasIconUrl is ${hasIconUrl}. Rendering ${hasIconUrl ? '<img>' : 'DocumentTextIcon'}.`);
+
                         return (
                             <li
                                 data-testid={`flyer-list-item-${flyer.flyer_id}`}

src/routes/ai.routes.ts

@@ -8,6 +8,7 @@ import { optionalAuth } from './passport.routes';
 import * as db from '../services/db/index.db';
 import * as aiService from '../services/aiService.server'; // Correctly import server-side AI service
 import { generateFlyerIcon } from '../utils/imageProcessor';
+import { sanitizeFilename } from '../utils/stringUtils';
 import { logger } from '../services/logger.server';
 import { UserProfile, ExtractedCoreData } from '../types';
 import { flyerQueue } from '../services/queueService.server';
@@ -48,7 +49,8 @@ const diskStorage  = multer.diskStorage({
             cb(null, `${file.fieldname}-test-flyer-image.jpg`);
         } else {
             const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
-            cb(null, file.fieldname + '-' + uniqueSuffix + '-' + file.originalname);
+            // Sanitize the original filename to remove spaces and special characters
+            cb(null, file.fieldname + '-' + uniqueSuffix + '-' + sanitizeFilename(file.originalname));
         }
     }
 });

src/utils/imageProcessor.ts

@@ -3,6 +3,7 @@ import sharp from 'sharp';
 import path from 'path';
 import fs from 'fs/promises';
 import { logger } from '../services/logger.server';
+import { sanitizeFilename } from './stringUtils';
 
 /**
  * Generates a 64x64 square icon from a source image.
@@ -14,8 +15,11 @@ import { logger } from '../services/logger.server';
 export async function generateFlyerIcon(sourceImagePath: string, iconsDirectory: string): Promise<string> {
   try {
     // 1. Create a new filename, standardizing the extension to .webp for consistency and performance.
-    // We parse the original filename to remove its extension before adding the new one.
-    const originalFileName = path.basename(sourceImagePath, path.extname(sourceImagePath));
+    // We sanitize the original filename to remove spaces and special characters, ensuring URL safety.
+    // The sourceImagePath is already sanitized by multer, but we apply it here again for robustness
+    // in case this function is ever called from a different context.
+    const sanitizedBaseName = sanitizeFilename(path.basename(sourceImagePath));
+    const originalFileName = path.parse(sanitizedBaseName).name;
     const iconFileName = `icon-${originalFileName}.webp`;
     const iconOutputPath = path.join(iconsDirectory, iconFileName);
 

src/utils/stringUtils.ts

@@ -0,0 +1,16 @@
+// src/utils/stringUtils.ts
+
+/**
+ * Sanitizes a string to be used as a safe filename.
+ * Replaces spaces and multiple hyphens with a single hyphen,
+ * removes characters that are problematic in URLs and file systems,
+ * and converts to lowercase.
+ * @param filename The string to sanitize.
+ * @returns A sanitized string suitable for use as a filename.
+ */
+export function sanitizeFilename(filename: string): string {
+  return filename
+    .replace(/\s+/g, '-') // Replace spaces with a single hyphen
+    .replace(/[^a-zA-Z0-9-._]/g, '') // Remove all non-alphanumeric characters except for hyphens, underscores, and periods
+    .replace(/-+/g, '-'); // Replace multiple hyphens with a single one
+}