feat(admin): auto-cleanup unused content images (iflabx#289)

Author: pixelsama

components/admin/content/about-editor.tsx

@@ -12,7 +12,9 @@ import {
 import { Separator } from '@components/ui/separator';
 import type { SupportedLocale } from '@lib/config/language-config';
 import { getLanguageInfo } from '@lib/config/language-config';
+import { cleanupUnusedImages } from '@lib/services/content-image-upload-service';
 import { useAboutEditorStore } from '@lib/stores/about-editor-store';
+import { createClient } from '@lib/supabase/client';
 import {
   AboutTranslationData,
   ComponentInstance,
@@ -27,7 +29,7 @@ import {
 } from '@lib/utils/performance';
 import { GripVertical, Plus, Redo2, Trash2, Undo2 } from 'lucide-react';
 
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
@@ -58,6 +60,9 @@ export function AboutEditor({
 }: AboutEditorProps) {
   const t = useTranslations('pages.admin.content.editor');
 
+  // User ID state for image cleanup
+  const [userId, setUserId] = useState<string | null>(null);
+
   // Context menu state
   const [contextMenu, setContextMenu] = React.useState<{
     x: number;
@@ -131,6 +136,21 @@ export function AboutEditor({
     return null;
   }, [pageContent, contextMenu?.componentId]);
 
+  // Fetch current user ID on mount
+  useEffect(() => {
+    const fetchUserId = async () => {
+      const supabase = createClient();
+      const {
+        data: { user },
+      } = await supabase.auth.getUser();
+      if (user) {
+        setUserId(user.id);
+      }
+    };
+
+    fetchUserId();
+  }, []);
+
   // Initial load and locale change handling
   useEffect(() => {
     if (currentTranslation.sections) {
@@ -150,9 +170,19 @@ export function AboutEditor({
 
   // Debounced auto-save function
   const debouncedSave = useDebouncedCallback(
-    useCallback(() => {
+    useCallback(async () => {
       if (!pageContent) return;
 
+      // Clean up unused images before saving (only if userId is available)
+      if (userId && pageContent.sections) {
+        try {
+          await cleanupUnusedImages(pageContent.sections, userId);
+        } catch (error) {
+          console.error('Failed to cleanup unused images:', error);
+          // Continue with save even if cleanup fails
+        }
+      }
+
       const updatedTranslation: AboutTranslationData = {
         sections: pageContent.sections,
         metadata: {
@@ -167,9 +197,15 @@ export function AboutEditor({
       };
 
       onTranslationsChange(newTranslations);
-    }, [pageContent, translations, currentLocale, onTranslationsChange]),
+    }, [
+      pageContent,
+      translations,
+      currentLocale,
+      onTranslationsChange,
+      userId,
+    ]),
     100, // 100ms delay for near real-time sync
-    [pageContent, translations, currentLocale]
+    [pageContent, translations, currentLocale, userId]
   );
 
   // Auto-save when pageContent changes

components/admin/content/context-menu.tsx

@@ -662,9 +662,11 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
         <ImageUploadDialog
           isOpen={isUploadDialogOpen}
           onClose={() => setIsUploadDialogOpen(false)}
-          onUploadSuccess={url => {
+          onUploadSuccess={(url, path) => {
             // Auto-fill the uploaded image URL to src field
             handleInputChange('src', url);
+            // Save image path for cleanup tracking
+            handleInputChange('_imagePath', path);
           }}
           userId={userId}
         />

lib/services/content-image-upload-service.ts

@@ -1,4 +1,5 @@
 import { createClient } from '@lib/supabase/client';
+import { PageSection } from '@lib/types/about-page-components';
 import { v4 as uuidv4 } from 'uuid';
 
 /**
@@ -210,3 +211,64 @@ export async function listUserContentImages(userId: string): Promise<string[]> {
 
   return data.map(file => `user-${userId}/${file.name}`);
 }
+
+/**
+ * Extract all image paths from page sections
+ *
+ * @param sections - Page sections array
+ * @returns Array of image paths used in the page
+ */
+export function extractImagePathsFromSections(
+  sections: PageSection[]
+): string[] {
+  return sections.flatMap(section =>
+    section.columns.flatMap(column =>
+      column
+        .filter(
+          component => component.type === 'image' && component.props._imagePath
+        )
+        .map(component => component.props._imagePath as string)
+    )
+  );
+}
+
+/**
+ * Clean up unused content images for a specific user
+ *
+ * Compares images currently used in page sections with all images in storage,
+ * and deletes any images that are no longer referenced.
+ *
+ * @param sections - Current page sections
+ * @param userId - User ID
+ * @returns Number of images deleted
+ * @throws Error if cleanup operation fails
+ */
+export async function cleanupUnusedImages(
+  sections: PageSection[],
+  userId: string
+): Promise<number> {
+  // Extract image paths currently used in the page into a Set for efficient lookup
+  const usedImagePaths = new Set(extractImagePathsFromSections(sections));
+
+  // Get all images from storage
+  const allImagePaths = await listUserContentImages(userId);
+
+  // Find unused images by filtering against the Set
+  const unusedImagePaths = allImagePaths.filter(
+    path => !usedImagePaths.has(path)
+  );
+
+  // Delete unused images
+  if (unusedImagePaths.length > 0) {
+    const supabase = createClient();
+    const { error } = await supabase.storage
+      .from(BUCKET_NAME)
+      .remove(unusedImagePaths);
+
+    if (error) {
+      throw new Error(`Failed to cleanup images: ${error.message}`);
+    }
+  }
+
+  return unusedImagePaths.length;
+}