frontend method to refresh image

Decoupling this from the DB, it's a good step.

Not yet perfect however.

backend/events.go

@@ -8,6 +8,7 @@ import (
 	"net/http"
 	"os"
 	"screenmark/screenmark/agents"
+	"screenmark/screenmark/imageprocessor"
 	"screenmark/screenmark/limits"
 	"screenmark/screenmark/middleware"
 	"screenmark/screenmark/models"
@@ -20,62 +21,6 @@ import (
 	"github.com/lib/pq"
 )
 
-const (
-	IMAGE_TYPE = "image"
-	LIST_TYPE  = "list"
-)
-
-type imageNotification struct {
-	Type string
-
-	ImageID   uuid.UUID
-	ImageName string
-
-	Status string
-}
-
-type listNotification struct {
-	Type string
-
-	ListID uuid.UUID
-	Name   string
-
-	Status string
-}
-
-type Notification struct {
-	image *imageNotification
-	list  *listNotification
-}
-
-func getImageNotification(image imageNotification) Notification {
-	return Notification{
-		image: &image,
-	}
-}
-
-func getListNotification(list listNotification) Notification {
-	return Notification{
-		list: &list,
-	}
-}
-
-func (n Notification) MarshalJSON() ([]byte, error) {
-	if n.image != nil {
-		return json.Marshal(n.image)
-	}
-
-	if n.list != nil {
-		return json.Marshal(n.list)
-	}
-
-	return nil, fmt.Errorf("no image or list present")
-}
-
-func (n *Notification) UnmarshalJSON(data []byte) error {
-	return fmt.Errorf("unimplemented")
-}
-
 func ListenNewImageEvents(db *sql.DB) {
 	listener := pq.NewListener(os.Getenv("DB_CONNECTION"), time.Second, time.Second, func(event pq.ListenerEventType, err error) {
 		if err != nil {
@@ -149,7 +94,7 @@ func ListenNewImageEvents(db *sql.DB) {
 	}
 }
 
-func ListenProcessingImageStatus(db *sql.DB, images models.ImageModel, notifier *Notifier[Notification]) {
+func getProcessingImageStatusChannel(db *sql.DB) chan string {
 	listener := pq.NewListener(os.Getenv("DB_CONNECTION"), time.Second, time.Second, func(event pq.ListenerEventType, err error) {
 		if err != nil {
 			panic(err)
@@ -157,41 +102,19 @@ func ListenProcessingImageStatus(db *sql.DB, images models.ImageModel, notifier
 	})
 	defer listener.Close()
 
-	logger := createLogger("Image Status 📊", os.Stdout)
-
 	if err := listener.Listen("new_processing_image_status"); err != nil {
 		panic(err)
 	}
 
+	msgChan := make(chan string)
+
+	go func() {
 		for data := range listener.Notify {
-		imageStringUuid := data.Extra[0:36]
-		status := data.Extra[36:]
-
-		imageUuid, err := uuid.Parse(imageStringUuid)
-		if err != nil {
-			logger.Error(err)
-			continue
+			msgChan <- data.Extra
 		}
+	}()
 
-		processingImage, err := images.GetToProcess(context.Background(), imageUuid)
-		if err != nil {
-			logger.Error("GetToProcess failed", "err", err)
-			continue
-		}
-
-		logger.Info("Update", "id", imageStringUuid, "status", status)
-
-		notification := getImageNotification(imageNotification{
-			Type:      IMAGE_TYPE,
-			ImageID:   processingImage.ImageID,
-			ImageName: processingImage.Image.ImageName,
-			Status:    status,
-		})
-
-		if err := notifier.SendAndCreate(processingImage.UserID.String(), notification); err != nil {
-			logger.Error(err)
-		}
-	}
+	return msgChan
 }
 
 func ListenNewStackEvents(db *sql.DB) {
@@ -250,7 +173,7 @@ func ListenNewStackEvents(db *sql.DB) {
 	}
 }
 
-func ListenProcessingStackStatus(db *sql.DB, stacks models.ListModel, notifier *Notifier[Notification]) {
+func ListenProcessingStackStatus(db *sql.DB, stacks models.ListModel, notifier *Notifier[imageprocessor.Notification]) {
 	listener := pq.NewListener(os.Getenv("DB_CONNECTION"), time.Second, time.Second, func(event pq.ListenerEventType, err error) {
 		if err != nil {
 			panic(err)
@@ -282,8 +205,8 @@ func ListenProcessingStackStatus(db *sql.DB, stacks models.ListModel, notifier *
 
 		logger.Info("Update", "id", stackStringUUID, "status", status)
 
-		notification := getListNotification(listNotification{
-			Type:   LIST_TYPE,
+		notification := imageprocessor.GetListNotification(imageprocessor.ListNotification{
+			Type:   imageprocessor.LIST_TYPE,
 			Name:   processingStack.Title,
 			ListID: stackUUID,
 			Status: status,
@@ -301,10 +224,10 @@ func ListenProcessingStackStatus(db *sql.DB, stacks models.ListModel, notifier *
  *
  * What is a reasonable default? Close the channel after 1 minute of inactivity?
  */
-func CreateEventsHandler(notifier *Notifier[Notification]) http.HandlerFunc {
+func CreateEventsHandler(notifier *Notifier[imageprocessor.Notification]) http.HandlerFunc {
 	counter := 0
 
-	userSplitters := make(map[string]*ChannelSplitter[Notification])
+	userSplitters := make(map[string]*ChannelSplitter[imageprocessor.Notification])
 
 	return func(w http.ResponseWriter, r *http.Request) {
 		_userId := r.Context().Value(middleware.USER_ID).(uuid.UUID)

backend/imageprocessor/notification.go

@@ -0,0 +1,65 @@
+package imageprocessor
+
+import (
+	"encoding/json"
+	"fmt"
+
+	"github.com/google/uuid"
+)
+
+const (
+	IMAGE_TYPE = "image"
+	LIST_TYPE  = "list"
+)
+
+type ImageNotification struct {
+	Type string
+
+	ImageID   uuid.UUID
+	ImageName string
+
+	Status string
+}
+
+func getImageNotification(image ImageNotification) Notification {
+	return Notification{
+		image: &image,
+	}
+}
+
+type ListNotification struct {
+	Type string
+
+	ListID uuid.UUID
+	Name   string
+
+	Status string
+}
+
+type Notification struct {
+	image *ImageNotification
+	list  *ListNotification
+}
+
+func GetListNotification(list ListNotification) Notification {
+	return Notification{
+		list: &list,
+	}
+}
+
+func (n Notification) MarshalJSON() ([]byte, error) {
+	if n.image != nil {
+		return json.Marshal(n.image)
+	}
+
+	if n.list != nil {
+		return json.Marshal(n.list)
+	}
+
+	return nil, fmt.Errorf("no image or list present")
+}
+
+func (n *Notification) UnmarshalJSON(data []byte) error {
+	return fmt.Errorf("unimplemented")
+}
+

backend/imageprocessor/processor.go

@@ -0,0 +1,67 @@
+package imageprocessor
+
+import (
+	"context"
+	"fmt"
+	"screenmark/screenmark/models"
+
+	"github.com/charmbracelet/log"
+	"github.com/google/uuid"
+)
+
+type DbImageProcessor struct {
+	logger *log.Logger
+	images models.ImageModel
+
+	incomingImages chan string
+
+	outgoing func(userID string, n Notification)
+}
+
+func (p *DbImageProcessor) processImage(incomingMsg string) error {
+	imageStringUUID := incomingMsg[0:36]
+	status := incomingMsg[36:]
+
+	imageUUID, err := uuid.Parse(imageStringUUID)
+	if err != nil {
+		return fmt.Errorf("parsing: %w", err)
+	}
+
+	processingImage, err := p.images.GetToProcess(context.Background(), imageUUID)
+	if err != nil {
+		return fmt.Errorf("get to processes: %w", err)
+	}
+
+	p.logger.Info("Update", "id", imageStringUUID, "status", status)
+
+	notification := getImageNotification(ImageNotification{
+		Type:      IMAGE_TYPE,
+		ImageID:   processingImage.ImageID,
+		ImageName: processingImage.Image.ImageName,
+		Status:    status,
+	})
+
+	p.outgoing(processingImage.UserID.String(), notification)
+
+	return nil
+}
+
+func (p *DbImageProcessor) Work() {
+	for incomingMsg := range p.incomingImages {
+		go func() {
+			err := p.processImage(incomingMsg)
+			if err != nil {
+				p.logger.Error("processing image", "err", err)
+			}
+		}()
+	}
+}
+
+func NewImageProcessor(logger *log.Logger, imageModel models.ImageModel, incoming chan string, outgoing func(userID string, n Notification)) *DbImageProcessor {
+	return &DbImageProcessor{
+		logger:         logger,
+		images:         imageModel,
+		incomingImages: incoming,
+		outgoing:       outgoing,
+	}
+}

backend/images/handler.go

@@ -10,6 +10,7 @@ import (
 	"os"
 	"path/filepath"
 	"screenmark/screenmark/.gen/haystack/haystack/model"
+	"screenmark/screenmark/imageprocessor"
 	"screenmark/screenmark/limits"
 	"screenmark/screenmark/middleware"
 	"screenmark/screenmark/models"
@@ -22,8 +23,10 @@ import (
 type ImageHandler struct {
 	logger         *log.Logger
 	imageModel     models.ImageModel
+	listModel      models.ListModel
 	userModel      models.UserModel
 	limitsManager  limits.LimitsManagerMethods
+	imageProcessor *imageprocessor.DbImageProcessor
 }
 
 type ImagesReturn struct {
@@ -176,6 +179,43 @@ func (h *ImageHandler) deleteImage(w http.ResponseWriter, r *http.Request) {
 	w.WriteHeader(http.StatusOK)
 }
 
+func (h *ImageHandler) reprocessImage(w http.ResponseWriter, r *http.Request) {
+	stringImageID := chi.URLParam(r, "image-id")
+	imageID, err := uuid.Parse(stringImageID)
+	if err != nil {
+		w.WriteHeader(http.StatusBadRequest)
+		return
+	}
+
+	ctx := r.Context()
+
+	userID, err := middleware.GetUserID(ctx, h.logger, w)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
+	isAuthorized := h.imageModel.IsUserAuthorized(ctx, imageID, userID)
+	if !isAuthorized {
+		w.WriteHeader(http.StatusUnauthorized)
+		return
+	}
+
+	imageToProcessID, err := h.imageModel.GetImageToProcessID(ctx, imageID)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
+	err = h.imageModel.SetNotStarted(ctx, imageToProcessID)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+}
+
 func (h *ImageHandler) CreateRoutes(r chi.Router) {
 	h.logger.Info("Mounting image router")
 
@@ -189,19 +229,23 @@ func (h *ImageHandler) CreateRoutes(r chi.Router) {
 
 		r.Get("/", h.listImages)
 		r.Post("/{name}", middleware.WithLimit(h.logger, h.limitsManager.HasReachedImageLimit, h.uploadImage))
+		r.Patch("/{image-id}", h.reprocessImage)
 		r.Delete("/{image-id}", h.deleteImage)
 	})
 }
 
-func CreateImageHandler(db *sql.DB, limitsManager limits.LimitsManagerMethods) ImageHandler {
+func CreateImageHandler(db *sql.DB, limitsManager limits.LimitsManagerMethods, imageProcessor *imageprocessor.DbImageProcessor) ImageHandler {
 	imageModel := models.NewImageModel(db)
 	userModel := models.NewUserModel(db)
+	listModel := models.NewListModel(db)
 	logger := log.New(os.Stdout).WithPrefix("Images")
 
 	return ImageHandler{
 		logger:         logger,
+		listModel:      listModel,
 		imageModel:     imageModel,
 		userModel:      userModel,
 		limitsManager:  limitsManager,
+		imageProcessor: imageProcessor,
 	}
 }

backend/models/image.go

@@ -160,6 +160,28 @@ func (m ImageModel) FinishProcessing(ctx context.Context, imageId uuid.UUID) (mo
 	return userImage, err
 }
 
+func (m ImageModel) GetImageToProcessID(ctx context.Context, imageID uuid.UUID) (uuid.UUID, error) {
+	getImageToProcessIDStmt := UserImagesToProcess.
+		SELECT(UserImagesToProcess.ID).
+		WHERE(UserImagesToProcess.ImageID.EQ(UUID(imageID)))
+
+	imageToProcess := model.UserImagesToProcess{}
+	err := getImageToProcessIDStmt.QueryContext(ctx, m.dbPool, &imageToProcess)
+
+	return imageToProcess.ID, err
+}
+
+func (m ImageModel) SetNotStarted(ctx context.Context, processingImageId uuid.UUID) error {
+	startProcessingStmt := UserImagesToProcess.
+		UPDATE(UserImagesToProcess.Status).
+		SET(model.Progress_NotStarted).
+		WHERE(UserImagesToProcess.ID.EQ(UUID(processingImageId)))
+
+	_, err := startProcessingStmt.ExecContext(ctx, m.dbPool)
+
+	return err
+}
+
 func (m ImageModel) StartProcessing(ctx context.Context, processingImageId uuid.UUID) error {
 	startProcessingStmt := UserImagesToProcess.
 		UPDATE(UserImagesToProcess.Status).

backend/router.go

@@ -5,6 +5,7 @@ import (
 	"os"
 	"screenmark/screenmark/agents/client"
 	"screenmark/screenmark/auth"
+	"screenmark/screenmark/imageprocessor"
 	"screenmark/screenmark/images"
 	"screenmark/screenmark/limits"
 	"screenmark/screenmark/models"
@@ -30,24 +31,31 @@ func setupRouter(db *sql.DB) chi.Router {
 
 	limitsManager := limits.CreateLimitsManager(db)
 
-	stackHandler := stacks.CreateStackHandler(db, limitsManager)
-	authHandler := auth.CreateAuthHandler(db)
-	imageHandler := images.CreateImageHandler(db, limitsManager)
-
-	notifier := NewNotifier[Notification](10)
-
-	// Only start event listeners if not in test environment
-	if os.Getenv("GO_TEST_ENVIRONMENT") != "true" {
+	notifier := NewNotifier[imageprocessor.Notification](10)
 
 	// TODO: should extract these into a notification manager
 	// And actually make them the same code.
 	// The events are basically the same.
 
 	go ListenNewImageEvents(db)
-		go ListenProcessingImageStatus(db, imageModel, &notifier)
+
+	logger := createLogger("Image Processor", os.Stdout)
+	processingChan := getProcessingImageStatusChannel(db)
+
+	imageProcessor := imageprocessor.NewImageProcessor(logger, imageModel, processingChan, func(userID string, n imageprocessor.Notification) {
+		if err := notifier.SendAndCreate(userID, n); err != nil {
+			logger.Error("sending notification", "err", err)
+		}
+	})
+
+	go imageProcessor.Work()
+
 	go ListenNewStackEvents(db)
 	go ListenProcessingStackStatus(db, stackModel, &notifier)
-	}
+
+	stackHandler := stacks.CreateStackHandler(db, limitsManager)
+	authHandler := auth.CreateAuthHandler(db)
+	imageHandler := images.CreateImageHandler(db, limitsManager, imageProcessor)
 
 	r := chi.NewRouter()
 

frontend/src/components/image/index.tsx

@@ -6,10 +6,12 @@ import { Dialog } from "@kobalte/core";
 type ImageComponentProps = {
     ID: string;
     onDelete: (id: string) => void;
-}
+    onRefresh: (id: string) => void;
+};
 
 export const ImageComponent: Component<ImageComponentProps> = (props) => {
     const [isOpen, setIsOpen] = createSignal(false);
+    const [isRefreshOpen, setIsRefreshOpen] = createSignal(false);
 
     return (
         <>
@@ -27,6 +29,13 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
                 >
                     ×
                 </button>
+                <button
+                    aria-label="Refresh image"
+                    class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
+                    onClick={() => setIsRefreshOpen(true)}
+                >
+                    ↻
+                </button>
             </div>
 
             <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
@@ -45,7 +54,40 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
                                     Cancel
                                 </button>
                             </Dialog.CloseButton>
-                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
+                            <button
+                                class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+                                onClick={() => props.onDelete(props.ID)}
+                            >
+                                Confirm
+                            </button>
+                        </div>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+
+            <Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
+                        <Dialog.Title class="text-lg font-bold mb-2">
+                            Confirm Refresh
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to refresh this image?
+                        </Dialog.Description>
+                        <div class="flex justify-end gap-2">
+                            <Dialog.CloseButton>
+                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
+                                    Cancel
+                                </button>
+                            </Dialog.CloseButton>
+                            <button
+                                class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                                onClick={() => {
+                                    props.onRefresh?.(props.ID);
+                                    setIsRefreshOpen(false);
+                                }}
+                            >
                                 Confirm
                             </button>
                         </div>
@@ -56,8 +98,11 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
     );
 };
 
-export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
+export const ImageComponentFullHeight: Component<ImageComponentProps> = (
+    props,
+) => {
     const [isOpen, setIsOpen] = createSignal(false);
+    const [isRefreshOpen, setIsRefreshOpen] = createSignal(false);
 
     return (
         <>
@@ -75,6 +120,13 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (props)
                 >
                     ×
                 </button>
+                <button
+                    aria-label="Refresh image"
+                    class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
+                    onClick={() => setIsRefreshOpen(true)}
+                >
+                    ↻
+                </button>
             </div>
 
             <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
@@ -93,7 +145,40 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (props)
                                     Cancel
                                 </button>
                             </Dialog.CloseButton>
-                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
+                            <button
+                                class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+                                onClick={() => props.onDelete(props.ID)}
+                            >
+                                Confirm
+                            </button>
+                        </div>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+
+            <Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
+                        <Dialog.Title class="text-lg font-bold mb-2">
+                            Confirm Refresh
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to refresh this image?
+                        </Dialog.Description>
+                        <div class="flex justify-end gap-2">
+                            <Dialog.CloseButton>
+                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
+                                    Cancel
+                                </button>
+                            </Dialog.CloseButton>
+                            <button
+                                class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                                onClick={() => {
+                                    props.onRefresh?.(props.ID);
+                                    setIsRefreshOpen(false);
+                                }}
+                            >
                                 Confirm
                             </button>
                         </div>

frontend/src/contexts/SearchImageContext.tsx

@@ -7,7 +7,7 @@ import {
     createResource,
     useContext,
 } from "solid-js";
-import { deleteImage, deleteImageFromStack, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
+import { deleteImage, deleteImageFromStack, getUserImages, JustTheImageWhatAreTheseNames, reprocessImage } from "../network";
 
 export type SearchImageStore = {
     imagesByDate: Accessor<
@@ -25,6 +25,7 @@ export type SearchImageStore = {
     onRefetchImages: () => void;
     onDeleteImage: (imageID: string) => void;
     onDeleteImageFromStack: (stackID: string, imageID: string) => void;
+    onRefreshImage: (imageID: string) => void;
 };
 
 const SearchImageContext = createContext<SearchImageStore>();
@@ -75,6 +76,9 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
                 },
                 onDeleteImageFromStack: (stackID: string, imageID: string) => {
                     deleteImageFromStack(stackID, imageID).then(refetch);
+                },
+                onRefreshImage: (imageID: string) => {
+                    reprocessImage(imageID).then(refetch)
                 }
             }}
         >

frontend/src/network/index.ts

@@ -18,7 +18,7 @@ import {
 type BaseRequestParams = Partial<{
     path: string;
     body: RequestInit["body"];
-    method: "GET" | "POST" | "DELETE";
+    method: "GET" | "POST" | "DELETE" | "PATCH";
 }>;
 
 // export const base = "https://haystack.johncosta.tech";
@@ -296,3 +296,19 @@ export const createList = async (
         throw new ReachedListLimit();
     }
 };
+
+export const reprocessImage = async (
+    id: string
+): Promise<void> => {
+    const request = getBaseAuthorizedRequest({
+        path: `images/${id}`,
+        method: "PATCH"
+    });
+
+    request.headers.set("Content-Type", "application/json");
+
+    const res = await fetch(request);
+    if (!res.ok && res.status == 429) {
+        throw new ReachedListLimit();
+    }
+}

frontend/src/pages/all-images/index.tsx

@@ -3,7 +3,6 @@ import { Component, For } from "solid-js";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 import { ImageComponent } from "@components/image";
 import { chunkRows } from "./chunk";
-import { deleteImage } from "@network/index";
 
 type ImageOrDate =
     | { type: "image"; ID: string[] }
@@ -12,7 +11,8 @@ type ImageOrDate =
 export const AllImages: Component = () => {
     let scrollRef: HTMLDivElement | undefined;
 
-    const { imagesByDate, onDeleteImage } = useSearchImageContext();
+    const { imagesByDate, onDeleteImage, onRefreshImage } =
+        useSearchImageContext();
 
     const items = () => {
         const items: Array<ImageOrDate> = [];
@@ -48,7 +48,15 @@ export const AllImages: Component = () => {
                         const item = items()[i.index];
                         if (item.type === "image") {
                             return (
-                                <For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
+                                <For each={item.ID}>
+                                    {(id) => (
+                                        <ImageComponent
+                                            ID={id}
+                                            onDelete={onDeleteImage}
+                                            onRefresh={onRefreshImage}
+                                        />
+                                    )}
+                                </For>
                             );
                         } else {
                             return (

frontend/src/pages/front/recent.tsx

@@ -1,18 +1,19 @@
 import { Component, For } from "solid-js";
 import { ImageComponent } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
-import { deleteImage } from "@network/index";
 
 const NUMBER_OF_MAX_RECENT_IMAGES = 10;
 
 export const Recent: Component = () => {
-    const { userImages, onDeleteImage } = useSearchImageContext();
+    const { userImages, onDeleteImage, onRefreshImage } =
+        useSearchImageContext();
 
     const latestImages = () =>
         userImages()
             .sort(
                 (a, b) =>
-                    new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
+                    new Date(b.CreatedAt!).getTime() -
+                    new Date(a.CreatedAt!).getTime(),
             )
             .slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
 
@@ -21,7 +22,13 @@ export const Recent: Component = () => {
             <h2 class="text-xl font-bold">Recent Screenshots</h2>
             <div class="grid grid-cols-3 gap-4 place-items-center">
                 <For each={latestImages()}>
-                    {(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
+                    {(image) => (
+                        <ImageComponent
+                            ID={image.ImageID}
+                            onDelete={onDeleteImage}
+                            onRefresh={onRefreshImage}
+                        />
+                    )}
                 </For>
             </div>
         </div>

frontend/src/pages/image/index.tsx

@@ -9,17 +9,22 @@ export const ImagePage: Component = () => {
     const { imageId } = useParams<{ imageId: string }>();
     const nav = useNavigate();
 
-    const { userImages, lists, onDeleteImage } = useSearchImageContext();
+    const { userImages, lists, onDeleteImage, onRefreshImage } =
+        useSearchImageContext();
 
     const image = () => userImages().find((i) => i.ImageID === imageId);
 
     return (
         <main class="flex flex-col items-center gap-4">
             <div class="w-full bg-white rounded-xl p-4">
-                <ImageComponentFullHeight ID={imageId} onDelete={(id) => {
+                <ImageComponentFullHeight
+                    ID={imageId}
+                    onDelete={(id) => {
                         onDeleteImage(id);
                         nav("/");
-                }} />
+                    }}
+                    onRefresh={onRefreshImage}
+                />
             </div>
             <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
                 <h2 class="font-bold text-2xl">Description</h2>
@@ -27,7 +32,11 @@ export const ImagePage: Component = () => {
                     <For each={image()?.Image.ImageLists}>
                         {(imageList) => (
                             <ListCard
-                                list={lists().find((l) => l.ID === imageList.ListID)!}
+                                list={
+                                    lists().find(
+                                        (l) => l.ID === imageList.ListID,
+                                    )!
+                                }
                             />
                         )}
                     </For>

frontend/src/pages/search/index.tsx

@@ -9,7 +9,7 @@ import { useSearchImageContext } from "@contexts/SearchImageContext";
 export const SearchPage: Component = () => {
     const fuse = useSearch();
 
-    const { onDeleteImage } = useSearchImageContext();
+    const { onDeleteImage, onRefreshImage } = useSearchImageContext();
 
     const [searchItems, setSearchItems] =
         createSignal<JustTheImageWhatAreTheseNames>([]);
@@ -41,7 +41,13 @@ export const SearchPage: Component = () => {
                 <Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
                     <Search.Arrow />
                     <For each={searchItems()}>
-                        {(item) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
+                        {(item) => (
+                            <ImageComponent
+                                ID={item.ImageID}
+                                onDelete={onDeleteImage}
+                                onRefresh={onRefreshImage}
+                            />
+                        )}
                     </For>
                     <Search.NoResult>No result found</Search.NoResult>
                 </Search.Content>