From a28d2f5cfebff544bcb5e40791e221067ce95726 Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Wed, 10 Dec 2025 09:41:46 -0500
Subject: [PATCH] refactor(description-image-dropzone, app-store): update
 styling and enhance project history cycling logic

- Changed button styling in the DescriptionImageDropZone component to use primary color classes for better visual consistency.
- Improved project history cycling logic in the app store by filtering out invalid projects, ensuring smoother navigation through valid project history.

These changes enhance the user interface and improve the reliability of project navigation within the application.
---
 .../ui/description-image-dropzone.tsx         |  2 +-
 app/src/store/app-store.ts                    | 56 +++++++++++++++----
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/app/src/components/ui/description-image-dropzone.tsx b/app/src/components/ui/description-image-dropzone.tsx
index 17e73bb8..78d661bd 100644
--- a/app/src/components/ui/description-image-dropzone.tsx
+++ b/app/src/components/ui/description-image-dropzone.tsx
@@ -292,7 +292,7 @@ export function DescriptionImageDropZone({
         <button
           type="button"
           onClick={handleBrowseClick}
-          className="text-blue-500 hover:text-blue-400 underline"
+          className="text-primary hover:text-primary/80 underline"
           disabled={disabled || isProcessing}
         >
           browse
diff --git a/app/src/store/app-store.ts b/app/src/store/app-store.ts
index cde3748d..cb7fdd50 100644
--- a/app/src/store/app-store.ts
+++ b/app/src/store/app-store.ts
@@ -395,17 +395,33 @@ export const useAppStore = create<AppState & AppActions>()(
 
       cyclePrevProject: () => {
         const { projectHistory, projectHistoryIndex, projects } = get();
-        if (projectHistory.length <= 1) return; // Need at least 2 projects to cycle
 
-        // Move to the next index (going back in history = higher index)
-        const newIndex = (projectHistoryIndex + 1) % projectHistory.length;
-        const targetProjectId = projectHistory[newIndex];
+        // Filter history to only include valid projects
+        const validHistory = projectHistory.filter((id) =>
+          projects.some((p) => p.id === id)
+        );
+
+        if (validHistory.length <= 1) return; // Need at least 2 valid projects to cycle
+
+        // Find current position in valid history
+        const currentProjectId = get().currentProject?.id;
+        let currentIndex = currentProjectId
+          ? validHistory.indexOf(currentProjectId)
+          : projectHistoryIndex;
+
+        // If current project not found in valid history, start from 0
+        if (currentIndex === -1) currentIndex = 0;
+
+        // Move to the next index (going back in history = higher index), wrapping around
+        const newIndex = (currentIndex + 1) % validHistory.length;
+        const targetProjectId = validHistory[newIndex];
         const targetProject = projects.find((p) => p.id === targetProjectId);
 
         if (targetProject) {
-          // Update the index but don't modify history order when cycling
+          // Update history to only include valid projects and set new index
           set({
             currentProject: targetProject,
+            projectHistory: validHistory,
             projectHistoryIndex: newIndex,
             currentView: "board"
           });
@@ -414,19 +430,35 @@ export const useAppStore = create<AppState & AppActions>()(
 
       cycleNextProject: () => {
         const { projectHistory, projectHistoryIndex, projects } = get();
-        if (projectHistory.length <= 1) return; // Need at least 2 projects to cycle
 
-        // Move to the previous index (going forward = lower index, wrapping around)
-        const newIndex = projectHistoryIndex <= 0
-          ? projectHistory.length - 1
-          : projectHistoryIndex - 1;
-        const targetProjectId = projectHistory[newIndex];
+        // Filter history to only include valid projects
+        const validHistory = projectHistory.filter((id) =>
+          projects.some((p) => p.id === id)
+        );
+
+        if (validHistory.length <= 1) return; // Need at least 2 valid projects to cycle
+
+        // Find current position in valid history
+        const currentProjectId = get().currentProject?.id;
+        let currentIndex = currentProjectId
+          ? validHistory.indexOf(currentProjectId)
+          : projectHistoryIndex;
+
+        // If current project not found in valid history, start from 0
+        if (currentIndex === -1) currentIndex = 0;
+
+        // Move to the previous index (going forward = lower index), wrapping around
+        const newIndex = currentIndex <= 0
+          ? validHistory.length - 1
+          : currentIndex - 1;
+        const targetProjectId = validHistory[newIndex];
         const targetProject = projects.find((p) => p.id === targetProjectId);
 
         if (targetProject) {
-          // Update the index but don't modify history order when cycling
+          // Update history to only include valid projects and set new index
           set({
             currentProject: targetProject,
+            projectHistory: validHistory,
             projectHistoryIndex: newIndex,
             currentView: "board"
           });