From 6589836336e5843d721e30b26a698ced77ceacfb Mon Sep 17 00:00:00 2001
From: Chris Veleris <chrisveleris@gmail.com>
Date: Sun, 12 Oct 2025 08:38:00 +0300
Subject: [PATCH] Fix tags badge inconsistency

---
 .../components/Project/ProjectDetails.tsx     | 132 +++++++-----------
 frontend/components/Shared/BannerBadge.tsx    |  15 ++
 2 files changed, 69 insertions(+), 78 deletions(-)
 create mode 100644 frontend/components/Shared/BannerBadge.tsx

diff --git a/frontend/components/Project/ProjectDetails.tsx b/frontend/components/Project/ProjectDetails.tsx
index 87f50bb..0a3909b 100644
--- a/frontend/components/Project/ProjectDetails.tsx
+++ b/frontend/components/Project/ProjectDetails.tsx
@@ -47,7 +47,7 @@ import AutoSuggestNextActionBox from './AutoSuggestNextActionBox';
 import SortFilterButton, { SortOption } from '../Shared/SortFilterButton';
 import LoadingSpinner from '../Shared/LoadingSpinner';
 import { usePersistedModal } from '../../hooks/usePersistedModal';
-import { getCurrentUser } from '../../utils/userUtils';
+import BannerBadge from '../Shared/BannerBadge';
 
 const ProjectDetails: React.FC = () => {
     const { uidSlug } = useParams<{ uidSlug: string }>();
@@ -83,15 +83,6 @@ const ProjectDetails: React.FC = () => {
 
     const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
 
-    // Check if current user is the owner
-    const currentUser = getCurrentUser();
-    const isOwner = useMemo(() => {
-        return (
-            currentUser &&
-            project &&
-            (project as any).user_uid === currentUser.uid
-        );
-    }, [currentUser, project]);
     const [showCompleted, setShowCompleted] = useState(false);
     const [showAutoSuggestForm, setShowAutoSuggestForm] = useState(false);
     const [autoSuggestEnabled, setAutoSuggestEnabled] = useState(false);
@@ -808,27 +799,23 @@ const ProjectDetails: React.FC = () => {
                     <div className="absolute bottom-2 left-2 flex items-center space-x-2">
                         {/* Project State Display */}
                         {project.state && (
-                            <div className="flex items-center space-x-2 bg-black bg-opacity-40 backdrop-blur-sm rounded px-2 py-2">
+                            <BannerBadge>
                                 {getStateIcon(project.state)}
-                                <div className="flex items-center space-x-1">
-                                    <span>
-                                        <span className="text-xs text-white/90 font-medium">
-                                            {t(
-                                                `projects.states.${project.state}`
-                                            )}
-                                        </span>
-                                    </span>
-                                </div>
-                            </div>
+                                <span className="text-xs text-white/90 font-medium">
+                                    {t(`projects.states.${project.state}`)}
+                                </span>
+                            </BannerBadge>
                         )}
 
                         {/* Tags Display */}
                         {project.tags && project.tags.length > 0 && (
-                            <div className="flex items-center space-x-2 bg-black bg-opacity-40 backdrop-blur-sm rounded px-2 py-2">
+                            <BannerBadge>
                                 <TagIcon className="h-3 w-3 text-white/70 flex-shrink-0 mt-0.5" />
-                                <div className="flex items-center space-x-1">
+                                <span className="text-xs text-white/90 font-medium">
                                     {project.tags.map((tag, index) => (
-                                        <span key={tag.uid || tag.id || index}>
+                                        <React.Fragment
+                                            key={tag.uid || tag.id || index}
+                                        >
                                             <button
                                                 onClick={() => {
                                                     // Navigate to tag details page
@@ -852,86 +839,75 @@ const ProjectDetails: React.FC = () => {
                                                         );
                                                     }
                                                 }}
-                                                className="text-xs text-white/90 hover:text-blue-200 transition-colors cursor-pointer font-medium"
+                                                className="hover:text-blue-200 transition-colors cursor-pointer"
                                             >
                                                 {tag.name}
                                             </button>
                                             {index <
                                                 (project.tags?.length || 0) -
                                                     1 && (
-                                                <span className="text-white/60 text-xs">
+                                                <span className="text-white/60">
                                                     ,{' '}
                                                 </span>
                                             )}
-                                        </span>
+                                        </React.Fragment>
                                     ))}
-                                </div>
-                            </div>
+                                </span>
+                            </BannerBadge>
                         )}
 
                         {/* Area Display */}
                         {(project.area || (project as any).Area) && (
-                            <div className="flex items-center space-x-2 bg-black bg-opacity-40 backdrop-blur-sm rounded px-2 py-2">
+                            <BannerBadge>
                                 <Squares2X2Icon className="h-3 w-3 text-white/70 flex-shrink-0 mt-0.5" />
-                                <div className="flex items-center space-x-1">
-                                    <span>
-                                        <button
-                                            onClick={() => {
-                                                // Use the correct area property (Area or area)
-                                                const projectArea =
-                                                    project.area ||
-                                                    (project as any).Area;
+                                <button
+                                    onClick={() => {
+                                        // Use the correct area property (Area or area)
+                                        const projectArea =
+                                            project.area ||
+                                            (project as any).Area;
 
-                                                // Find the area in the areas store to get the uid
-                                                const area = areas.find(
-                                                    (a) =>
-                                                        a.id === projectArea.id
-                                                );
-                                                const areaUid = area?.uid;
+                                        // Find the area in the areas store to get the uid
+                                        const area = areas.find(
+                                            (a) => a.id === projectArea.id
+                                        );
+                                        const areaUid = area?.uid;
 
-                                                if (!areaUid) {
-                                                    console.warn(
-                                                        'Area uid not found for area id:',
-                                                        projectArea.id
-                                                    );
-                                                    return;
-                                                }
+                                        if (!areaUid) {
+                                            console.warn(
+                                                'Area uid not found for area id:',
+                                                projectArea.id
+                                            );
+                                            return;
+                                        }
 
-                                                // Navigate to projects filtered by this area (same as Areas page)
-                                                const areaSlug =
-                                                    projectArea.name
-                                                        .toLowerCase()
-                                                        .replace(
-                                                            /[^a-z0-9]+/g,
-                                                            '-'
-                                                        )
-                                                        .replace(/^-|-$/g, '');
-                                                navigate(
-                                                    `/projects?area=${areaUid}-${areaSlug}`
-                                                );
-                                            }}
-                                            className="text-xs text-white/90 hover:text-blue-200 transition-colors cursor-pointer font-medium"
-                                        >
-                                            {
-                                                (
-                                                    project.area ||
-                                                    (project as any).Area
-                                                )?.name
-                                            }
-                                        </button>
-                                    </span>
-                                </div>
-                            </div>
+                                        // Navigate to projects filtered by this area (same as Areas page)
+                                        const areaSlug = projectArea.name
+                                            .toLowerCase()
+                                            .replace(/[^a-z0-9]+/g, '-')
+                                            .replace(/^-|-$/g, '');
+                                        navigate(
+                                            `/projects?area=${areaUid}-${areaSlug}`
+                                        );
+                                    }}
+                                    className="text-xs text-white/90 hover:text-blue-200 transition-colors cursor-pointer font-medium"
+                                >
+                                    {
+                                        (project.area || (project as any).Area)
+                                            ?.name
+                                    }
+                                </button>
+                            </BannerBadge>
                         )}
 
                         {/* Shared Badge */}
                         {project.is_shared && (
-                            <div className="flex items-center space-x-2 bg-black bg-opacity-40 backdrop-blur-sm rounded px-2 py-2">
+                            <BannerBadge>
                                 <ShareIcon className="h-3 w-3 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5" />
                                 <span className="text-xs text-white/90 font-medium">
                                     {t('projects.shared', 'Shared')}
                                 </span>
-                            </div>
+                            </BannerBadge>
                         )}
                     </div>
 
diff --git a/frontend/components/Shared/BannerBadge.tsx b/frontend/components/Shared/BannerBadge.tsx
new file mode 100644
index 0000000..c84447c
--- /dev/null
+++ b/frontend/components/Shared/BannerBadge.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface BannerBadgeProps {
+    children: React.ReactNode;
+}
+
+const BannerBadge: React.FC<BannerBadgeProps> = ({ children }) => {
+    return (
+        <div className="flex items-center space-x-2 bg-black bg-opacity-40 backdrop-blur-sm rounded px-2 py-2">
+            {children}
+        </div>
+    );
+};
+
+export default BannerBadge;