Fix Issues in favourites PR

backend/app/database/images.py

@@ -63,6 +63,7 @@ def db_create_images_table() -> None:
             thumbnailPath TEXT UNIQUE,
             metadata TEXT,
             isTagged BOOLEAN DEFAULT 0,
+            isFavourite BOOLEAN DEFAULT 0,
             FOREIGN KEY (folder_id) REFERENCES folders(folder_id) ON DELETE CASCADE
         )
     """
@@ -143,6 +144,7 @@ def db_get_all_images(tagged: Union[bool, None] = None) -> List[dict]:
                 i.thumbnailPath, 
                 i.metadata, 
                 i.isTagged,
+                i.isFavourite,
                 m.name as tag_name
             FROM images i
             LEFT JOIN image_classes ic ON i.id = ic.image_id
@@ -169,6 +171,7 @@ def db_get_all_images(tagged: Union[bool, None] = None) -> List[dict]:
             thumbnail_path,
             metadata,
             is_tagged,
+            is_favourite,
             tag_name,
         ) in results:
             if image_id not in images_dict:
@@ -184,6 +187,7 @@ def db_get_all_images(tagged: Union[bool, None] = None) -> List[dict]:
                     "thumbnailPath": thumbnail_path,
                     "metadata": metadata_dict,
                     "isTagged": bool(is_tagged),
+                    "isFavourite": bool(is_favourite),
                     "tags": [],
                 }
 
@@ -390,3 +394,28 @@ def db_delete_images_by_ids(image_ids: List[ImageId]) -> bool:
         return False
     finally:
         conn.close()
+
+
+def db_toggle_image_favourite_status(image_id: str) -> bool:
+    conn = sqlite3.connect(DATABASE_PATH)
+    cursor = conn.cursor()
+    try:
+        cursor.execute("SELECT id FROM images WHERE id = ?", (image_id,))
+        if not cursor.fetchone():
+            return False
+        cursor.execute(
+            """
+            UPDATE images
+            SET isFavourite = CASE WHEN isFavourite = 1 THEN 0 ELSE 1 END
+            WHERE id = ?
+            """,
+            (image_id,),
+        )
+        conn.commit()
+        return cursor.rowcount > 0
+    except Exception as e:
+        logger.error(f"Database error: {e}")
+        conn.rollback()
+        return False
+    finally:
+        conn.close()

backend/app/routes/images.py

@@ -4,7 +4,11 @@
 from app.schemas.images import ErrorResponse
 from app.utils.images import image_util_parse_metadata
 from pydantic import BaseModel
+from app.database.images import db_toggle_image_favourite_status
+from app.logging.setup_logging import get_logger
 
+# Initialize logger
+logger = get_logger(__name__)
 router = APIRouter()
 
 
@@ -29,6 +33,7 @@ class ImageData(BaseModel):
     thumbnailPath: str
     metadata: MetadataModel
     isTagged: bool
+    isFavourite: bool
     tags: Optional[List[str]] = None
 
 
@@ -60,6 +65,7 @@ def get_all_images(
                 thumbnailPath=image["thumbnailPath"],
                 metadata=image_util_parse_metadata(image["metadata"]),
                 isTagged=image["isTagged"],
+                isFavourite=image.get("isFavourite", False),
                 tags=image["tags"],
             )
             for image in images
@@ -80,3 +86,45 @@ def get_all_images(
                 message=f"Unable to retrieve images: {str(e)}",
             ).model_dump(),
         )
+
+
+# adding add to favourite and remove from favourite routes
+
+
+class ToggleFavouriteRequest(BaseModel):
+    image_id: str
+
+
+@router.post("/toggle-favourite")
+def toggle_favourite(req: ToggleFavouriteRequest):
+    image_id = req.image_id
+    try:
+        success = db_toggle_image_favourite_status(image_id)
+        if not success:
+            raise HTTPException(
+                status_code=404, detail="Image not found or failed to toggle"
+            )
+        # Fetch updated status to return
+        image = next(
+            (img for img in db_get_all_images() if img["id"] == image_id), None
+        )
+        return {
+            "success": True,
+            "image_id": image_id,
+            "isFavourite": image.get("isFavourite", False),
+        }
+
+    except Exception as e:
+        logger.error(f"error in /toggle-favourite route: {e}")
+        raise HTTPException(status_code=500, detail=f"Internal server error: {e}")
+
+
+class ImageInfoResponse(BaseModel):
+    id: str
+    path: str
+    folder_id: str
+    thumbnailPath: str
+    metadata: MetadataModel
+    isTagged: bool
+    isFavourite: bool
+    tags: Optional[List[str]] = None

docs/backend/backend_python/openapi.json

@@ -887,6 +887,45 @@
         }
       }
     },
+    "/images/toggle-favourite": {
+      "post": {
+        "tags": [
+          "Images"
+        ],
+        "summary": "Toggle Favourite",
+        "operationId": "toggle_favourite_images_toggle_favourite_post",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/ToggleFavouriteRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/face-clusters/{cluster_id}": {
       "put": {
         "tags": [
@@ -2094,6 +2133,10 @@
             "type": "boolean",
             "title": "Istagged"
           },
+          "isFavourite": {
+            "type": "boolean",
+            "title": "Isfavourite"
+          },
           "tags": {
             "anyOf": [
               {
@@ -2116,7 +2159,8 @@
           "folder_id",
           "thumbnailPath",
           "metadata",
-          "isTagged"
+          "isTagged",
+          "isFavourite"
         ],
         "title": "ImageData"
       },
@@ -2506,6 +2550,19 @@
         ],
         "title": "SyncFolderResponse"
       },
+      "ToggleFavouriteRequest": {
+        "properties": {
+          "image_id": {
+            "type": "string",
+            "title": "Image Id"
+          }
+        },
+        "type": "object",
+        "required": [
+          "image_id"
+        ],
+        "title": "ToggleFavouriteRequest"
+      },
       "UpdateAITaggingData": {
         "properties": {
           "updated_count": {

frontend/scripts/setup_env.sh

@@ -115,4 +115,4 @@ sudo apt-get clean
 sudo rm -rf /var/lib/apt/lists/*
 
 echo -e "${GREEN}All required tools and libraries are installed!${NC}"
-echo -e "${YELLOW}Note: You may need to restart your terminal or run 'source ~/.bashrc' to use the installed tools.${NC}"
+echo -e "${YELLOW}Note: You may need to restart your terminal or run 'source ~/.bashrc' to use the installed tools.${NC}"

frontend/scripts/setup_win.ps1

@@ -70,4 +70,4 @@ if (-not (Test-Command cmake)) {
 $env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
 
 Write-Host "All required tools and libraries are installed!" -ForegroundColor Green
-Write-Host "Please restart your computer to ensure all changes take effect." -ForegroundColor Yellow
+Write-Host "Please restart your computer to ensure all changes take effect." -ForegroundColor Yellow

frontend/src/api/api-functions/togglefav.ts

@@ -0,0 +1,11 @@
+import { imagesEndpoints } from '../apiEndpoints';
+import { apiClient } from '../axiosConfig';
+import { APIResponse } from '@/types/API';
+
+export const togglefav = async (image_id: string): Promise<APIResponse> => {
+  const response = await apiClient.post<APIResponse>(
+    imagesEndpoints.setFavourite,
+    { image_id },
+  );
+  return response.data;
+};

frontend/src/api/apiEndpoints.ts

@@ -1,5 +1,6 @@
 export const imagesEndpoints = {
   getAllImages: '/images/',
+  setFavourite: '/images/toggle-favourite',
 };
 
 export const faceClustersEndpoints = {

frontend/src/components/Media/ImageCard.tsx

@@ -2,10 +2,11 @@ import { AspectRatio } from '@/components/ui/aspect-ratio';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Check, Heart, Share2 } from 'lucide-react';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Image } from '@/types/Media';
 import { ImageTags } from './ImageTags';
 import { convertFileSrc } from '@tauri-apps/api/core';
+import { useToggleFav } from '@/hooks/useToggleFav';
 
 interface ImageCardViewProps {
   image: Image;
@@ -23,12 +24,16 @@ export function ImageCard({
   showTags = true,
   onClick,
 }: ImageCardViewProps) {
-  const [isFavorite, setIsFavorite] = useState(false);
   const [isImageHovered, setIsImageHovered] = useState(false);
-
   // Default to empty array if no tags are provided
   const tags = image.tags || [];
+  const { toggleFavourite } = useToggleFav();
 
+  const handleToggleFavourite = useCallback(() => {
+    if (image?.id) {
+      toggleFavourite(image.id);
+    }
+  }, [image, toggleFavourite]);
   return (
     <div
       className={cn(
@@ -67,22 +72,25 @@ export function ImageCard({
             <Button
               variant="ghost"
               size="icon"
-              className="cursor-pointer rounded-full bg-white/20 text-white hover:!bg-white/40 hover:!text-white"
+              className={`cursor-pointer rounded-full p-2.5 text-white transition-all duration-300 ${
+                image.isFavourite
+                  ? 'bg-rose-500/80 hover:bg-rose-600 hover:shadow-lg'
+                  : 'bg-white/10 hover:bg-white/20 hover:shadow-lg'
+              }`}
               onClick={(e) => {
+                console.log(image);
                 e.stopPropagation();
-                setIsFavorite(!isFavorite);
+                handleToggleFavourite();
               }}
-              title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-              aria-label="Add to Favorites"
             >
-              <Heart
-                className={cn(
-                  'h-5 w-5',
-                  isFavorite ? 'fill-brand-orange text-brand-orange' : '',
-                )}
-              />
-              <span className="sr-only">Favorite</span>
+              {image.isFavourite ? (
+                <Heart className="h-5 w-5" fill="currentColor"></Heart>
+              ) : (
+                <Heart className="h-5 w-5" />
+              )}
+              <span className="sr-only">Favourite</span>
             </Button>
+
             <Button
               variant="ghost"
               size="icon"

frontend/src/components/Media/MediaThumbnails.tsx

@@ -1,5 +1,4 @@
 import React, { useRef, useEffect } from 'react';
-import { Heart } from 'lucide-react';
 import { convertFileSrc } from '@tauri-apps/api/core';
 
 interface MediaThumbnailsProps {
@@ -11,7 +10,6 @@ interface MediaThumbnailsProps {
   currentIndex: number;
   showThumbnails: boolean;
   onThumbnailClick: (index: number) => void;
-  favorites: string[];
   type?: string;
 }
 
@@ -20,14 +18,12 @@ export const MediaThumbnails: React.FC<MediaThumbnailsProps> = ({
   currentIndex,
   showThumbnails,
   onThumbnailClick,
-  favorites,
   type = 'image',
 }) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const thumbnailRefs = useRef<Map<number, HTMLDivElement>>(new Map());
   const touchStartRef = useRef(0);
   const initialScrollLeftRef = useRef(0);
-  const isFavorite = (imagePath: string) => favorites.includes(imagePath);
 
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
@@ -120,11 +116,6 @@ export const MediaThumbnails: React.FC<MediaThumbnailsProps> = ({
                 : 'opacity-70 hover:opacity-100'
             } cursor-pointer transition-all duration-200 hover:scale-105`}
           >
-            {isFavorite(image.path) && (
-              <div className="absolute top-1 right-1 z-10 rounded-full bg-black/30 p-0.5">
-                <Heart className="h-3 w-3 fill-current text-rose-500" />
-              </div>
-            )}
             <img
               src={convertFileSrc(image.thumbnailPath) || '/placeholder.svg'}
               alt={`thumbnail-${index}`}