diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx new file mode 100644 index 0000000..e0ebc8e --- /dev/null +++ b/frontend/src/components/StatusBadge.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { Box, Typography, alpha, useTheme } from '@mui/material'; +import HistoryIcon from '@mui/icons-material/History'; +import BlockIcon from '@mui/icons-material/Block'; + +interface StatusBadgeProps { + isLegacy?: boolean; + isAvailable?: boolean; + size?: 'small' | 'medium'; + sx?: any; +} + +const StatusBadge: React.FC = ({ isLegacy, isAvailable, size = 'medium', sx }) => { + const theme = useTheme(); + const isSmall = size === 'small'; + + if (isAvailable && !isLegacy) return null; + + const label = isLegacy ? 'Limited' : 'Out of Stock'; + const color = isLegacy ? theme.palette.warning.main : theme.palette.error.main; + const Icon = isLegacy ? HistoryIcon : BlockIcon; + + return ( + + + + {label} + + + ); +}; + +export default StatusBadge; diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts index 3e9f089..45b46c4 100644 --- a/frontend/src/i18n.ts +++ b/frontend/src/i18n.ts @@ -9,7 +9,7 @@ const resources = { "home": "Home", "community": "Community", "about": "About", - "dashboard": "Dashboard", + "dashboard": "My Collection", "profile": "My Profile", "settings": "Settings", "logout": "Logout", @@ -25,6 +25,7 @@ const resources = { "packs-and-other": "Packs & Other" }, "dashboard": { + "title": "My Collection", "welcome": "Welcome back, {{username}}!", "shareProfile": "Share Profile", "copySuccess": "Link copied to clipboard!", @@ -32,14 +33,14 @@ const resources = { "missing": "Missing", "noRatings": "You haven't rated any flavors yet.", "noComment": "No comment provided.", - "exploreFlavors": "Go explore flavors", + "exploreFlavors": "Explore New Flavors", "allRated": "Amazing! You've rated everything! 🏆", - "myReviews": "My Reviews", + "myReviews": "My Rated Flavors", "exploreNew": "Explore New", "editingReview": "Editing review for {{flavor}}", "newScore": "New Score:", "searchMissing": "Search flavors you haven't rated...", - "searchRated": "Search your reviews...", + "searchRated": "Search your collection...", "circleAvg": "Average rating from your friends", "sortBy": "Sort by", "date": "Date", @@ -250,7 +251,7 @@ const resources = { "home": "Startseite", "community": "Community", "about": "Über uns", - "dashboard": "Dashboard", + "dashboard": "Mein Archiv", "profile": "Mein Profil", "settings": "Einstellungen", "logout": "Abmelden", @@ -266,6 +267,7 @@ const resources = { "packs-and-other": "Bundles & Mehr" }, "dashboard": { + "title": "Mein Archiv", "welcome": "Willkommen zurück, {{username}}!", "shareProfile": "Profil teilen", "copySuccess": "Link in die Zwischenablage kopiert!", @@ -273,14 +275,14 @@ const resources = { "missing": "Fehlend", "noRatings": "Du hast noch keine Sorten bewertet.", "noComment": "Kein Kommentar abgegeben.", - "exploreFlavors": "Sorten entdecken", + "exploreFlavors": "Neue Sorten entdecken", "allRated": "Wahnsinn! Du hast alles bewertet! 🏆", - "myReviews": "Meine Rezensionen", + "myReviews": "Meine Sammlungen", "exploreNew": "Neu entdecken", "editingReview": "Rezension bearbeiten für {{flavor}}", "newScore": "Neue Bewertung:", "searchMissing": "Suche nach Sorten, die du noch nicht bewertet hast...", - "searchRated": "Suche in deinen Rezensionen...", + "searchRated": "Suche in deinem Archiv...", "circleAvg": "Durchschnittsbewertung deiner Freunde", "sortBy": "Sortieren nach", "date": "Datum", diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 4a29c14..793610c 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -19,6 +19,7 @@ import { Chip, Collapse, TextField, + Rating as MuiRating, InputAdornment, Tooltip, useMediaQuery, @@ -36,9 +37,9 @@ import { useTranslation } from 'react-i18next'; import api from '../api'; import { useTitle } from '../hooks/useTitle'; import RatingBadge from '../components/RatingBadge'; +import StatusBadge from '../components/StatusBadge'; import MentionTextField from '../components/MentionTextField'; import RichText from '../components/RichText'; -import DynamicBanner from '../components/DynamicBanner'; import { formatDate } from '../utils/date'; interface DashboardData { @@ -54,7 +55,7 @@ const Dashboard: React.FC = () => { const navigate = useNavigate(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('lg')); - useTitle(t('nav.dashboard')); + useTitle(t('dashboard.title')); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [activeTab, setActiveTab] = useState(0); @@ -232,14 +233,17 @@ const Dashboard: React.FC = () => { {/* Action Bar */} - + + + {t('dashboard.title')} + + ) : ( filteredAndSortedRated.map(rating => ( @@ -440,11 +436,9 @@ const Dashboard: React.FC = () => { {t('dashboard.editingReview', { flavor: rating.flavor_name })} {t('dashboard.newScore')} - setEditScore(Number(e.target.value))} - sx={{ width: 80 }} + setEditScore(val || 0)} /> { {rating.flavor_name} - - {t(`categories.${rating.category_slug}`, { defaultValue: rating.category_name })} • {formatDate(rating.created_at)} - + + + {t(`categories.${rating.category_slug}`, { defaultValue: rating.category_name })} • {formatDate(rating.created_at)} + + + @@ -630,8 +627,9 @@ const Dashboard: React.FC = () => { '&:hover': { transform: 'scale(1.1)' } }} /> - + + {flavor.followed_average_rating && ( diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx index a3e9291..d4417a6 100644 --- a/frontend/src/pages/MainPage.tsx +++ b/frontend/src/pages/MainPage.tsx @@ -22,6 +22,7 @@ import api from '../api'; import { useTitle } from '../hooks/useTitle'; import { formatDate } from '../utils/date'; import RatingBadge from '../components/RatingBadge'; +import StatusBadge from '../components/StatusBadge'; import { useNavigate } from 'react-router-dom'; interface Flavor { @@ -165,15 +166,9 @@ const MainPage: React.FC = ({ adminMode }) => { - {!flavor.is_available && ( - - {flavor.is_legacy ? 'Unavailable' : 'Out of Stock'} - - )} + + + {flavor.image_url && ( = ({ adminMode }) => { textDecoration: 'none' }} > + + + = ({ adminMode }) => { gap: 2 }}> {newestFlavors.map(flavor => ( - + + + + { - {!flavor.is_available && ( - - {flavor.is_legacy ? 'Unavailable' : 'Out of Stock'} - - )} + + + {flavor.image_url && ( = ({ adminMode }) => { backdropFilter: 'blur(12px)', overflow: 'hidden' }}> - - {!flavor.is_available && ( - - )} - {flavor.image_url ? ( - + + + + {flavor.image_url ? (