marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix tags badge inconsistency

Browse source
This commit is contained in:
Chris Veleris 2025-10-12 08:38:00 +03:00 • committed by antanst
parent 4aa9220879
commit 6589836336
2 changed files with 69 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

132
frontend/components/Project/ProjectDetails.tsx
View file

@ -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>

15
frontend/components/Shared/BannerBadge.tsx Normal file
View file

@ -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;