diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 84a4147..05762a2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -379,158 +379,153 @@ const App: React.FC = () => { > - - - Holy Flavors Archive - - - HFA - - - + variant="h6" + component="div" + sx={{ + fontWeight: 'bold', + mr: { xs: 0, sm: 2 }, + display: { xs: 'none', sm: 'block' }, + }} + > + + + Holy Flavors Archive + + + HFA + + + - - {user && ( - - )} + + {user && ( - setCatAnchorEl(null)} - elevation={3} - sx={{ mt: 1 }} - > - {categories.map((cat) => ( - setCatAnchorEl(null)} - > - {t(`categories.${cat.slug}`, { defaultValue: cat.name })} - - ))} - - + )} + + setCatAnchorEl(null)} + elevation={3} + sx={{ mt: 1 }} + > + {categories.map((cat) => ( + setCatAnchorEl(null)} + > + {t(`categories.${cat.slug}`, { defaultValue: cat.name })} + + ))} + + - + - - {!loadingUser && ( - <> - {user && notificationsMenu} + + {!loadingUser && ( + <> + {user && notificationsMenu} - {user ? ( - - setAnchorEl(e.currentTarget)}> - - {user.username.charAt(0).toUpperCase()} - - - setAnchorEl(null)} - elevation={3} - sx={{ mt: 1 }} + {user ? ( + + setAnchorEl(e.currentTarget)}> + + {user.username.charAt(0).toUpperCase()} + + + setAnchorEl(null)} + elevation={3} + sx={{ mt: 1 }} + > + setAnchorEl(null)} + > + {t('nav.profile')} + + setAnchorEl(null)}> + {t('nav.dashboard')} + + setAnchorEl(null)}> + {t('nav.settings')} + + setAnchorEl(null)}> + {t('support.title')} + + {user.is_superuser && ( + + {t('admin.adminMode')}: {adminMode ? 'ON' : 'OFF'} + + )} + {user.is_superuser && ( setAnchorEl(null)} + sx={{ fontWeight: 'bold', color: 'primary.main' }} > - {t('nav.profile')} + Admin Panel - setAnchorEl(null)}> - {t('nav.dashboard')} - - setAnchorEl(null)}> - {t('nav.settings')} - - setAnchorEl(null)}> - {t('support.title')} - - {user.is_superuser && ( - - {t('admin.adminMode')}: {adminMode ? 'ON' : 'OFF'} - - )} - {user.is_superuser && ( - setAnchorEl(null)} - sx={{ fontWeight: 'bold', color: 'primary.main' }} - > - Admin Panel - - )} - - - {t('nav.logout')} - - - - ) : ( - - - - )} - - )} + )} + + + {t('nav.logout')} + + + + ) : ( + + + + )} + + )} - {isMobile && ( - setDrawerOpen(true)} sx={{ ml: 1 }}> - - - )} - + {isMobile && ( + setDrawerOpen(true)} sx={{ ml: 1 }}> + + + )} + setDrawerOpen(false)}> diff --git a/frontend/src/components/BannerPerformanceWrapper.test.tsx b/frontend/src/components/BannerPerformanceWrapper.test.tsx index d52ddcf..59a4388 100644 --- a/frontend/src/components/BannerPerformanceWrapper.test.tsx +++ b/frontend/src/components/BannerPerformanceWrapper.test.tsx @@ -1,10 +1,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'; import { useContext } from 'react'; import { act, render } from '@testing-library/react'; -import { - BannerPerfContext, - BannerPerformanceWrapper, -} from './BannerPerformanceWrapper'; +import { BannerPerfContext, BannerPerformanceWrapper } from './BannerPerformanceWrapper'; type IOEntryLike = { isIntersecting: boolean }; type IOCallback = (entries: IOEntryLike[]) => void; @@ -45,9 +42,7 @@ const mockMatchMedia = (reduced: boolean) => { const Probe = () => { const { isActive, targetFps } = useContext(BannerPerfContext); - return ( -
- ); + return
; }; describe('BannerPerformanceWrapper', () => { diff --git a/frontend/src/components/BannerPerformanceWrapper.tsx b/frontend/src/components/BannerPerformanceWrapper.tsx index 2ab9610..a6f0a81 100644 --- a/frontend/src/components/BannerPerformanceWrapper.tsx +++ b/frontend/src/components/BannerPerformanceWrapper.tsx @@ -37,10 +37,10 @@ export const BannerPerformanceWrapper = ({ useEffect(() => { const el = ref.current; if (!el || typeof IntersectionObserver === 'undefined') return; - const io = new IntersectionObserver( - ([entry]) => setVisible(entry.isIntersecting), - { threshold: 0.01, rootMargin }, - ); + const io = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting), { + threshold: 0.01, + rootMargin, + }); io.observe(el); return () => io.disconnect(); }, [rootMargin]); @@ -55,10 +55,7 @@ export const BannerPerformanceWrapper = ({ return ( - + {children} diff --git a/frontend/src/components/DynamicBanner.tsx b/frontend/src/components/DynamicBanner.tsx index b078320..29c04a8 100644 --- a/frontend/src/components/DynamicBanner.tsx +++ b/frontend/src/components/DynamicBanner.tsx @@ -28,9 +28,7 @@ const MatrixBanner: React.FC { - const [durations] = useState(() => - Array.from({ length: 20 }, () => 2 + Math.random() * 3), - ); + const [durations] = useState(() => Array.from({ length: 20 }, () => 2 + Math.random() * 3)); return (
{ +const pickBanner = (banner: Banner | null, props: DynamicBannerProps): React.ReactElement => { if (!banner || banner.slug === 'generative-web') { return ; } diff --git a/frontend/src/components/GenerativeFlowBanner.tsx b/frontend/src/components/GenerativeFlowBanner.tsx index affa2db..f06727c 100644 --- a/frontend/src/components/GenerativeFlowBanner.tsx +++ b/frontend/src/components/GenerativeFlowBanner.tsx @@ -232,7 +232,17 @@ const GenerativeFlowBanner: React.FC = ({ username, palette } cancelAnimationFrame(animationFrameId); }; - }, [seed, brightColors, blobCount, flowSpeed, vibrancy, blurAmount, distortionFactor, theme, gate]); + }, [ + seed, + brightColors, + blobCount, + flowSpeed, + vibrancy, + blurAmount, + distortionFactor, + theme, + gate, + ]); return ( { }); it('renders icon slot', () => { - render( - wrap( - 📭} - />, - ), - ); + render(wrap(📭} />)); expect(screen.getByTestId('icon')).toBeInTheDocument(); }); }); diff --git a/frontend/src/components/ui/FlavorCard.test.tsx b/frontend/src/components/ui/FlavorCard.test.tsx index b58c47c..c943cf7 100644 --- a/frontend/src/components/ui/FlavorCard.test.tsx +++ b/frontend/src/components/ui/FlavorCard.test.tsx @@ -45,10 +45,7 @@ describe('FlavorCard', () => { render( - + , ); @@ -66,10 +63,7 @@ describe('FlavorCard', () => { render( - + , ); diff --git a/frontend/src/components/ui/FlavorCard.tsx b/frontend/src/components/ui/FlavorCard.tsx index f4b58c8..31340f0 100644 --- a/frontend/src/components/ui/FlavorCard.tsx +++ b/frontend/src/components/ui/FlavorCard.tsx @@ -50,11 +50,7 @@ export const FlavorCard = ({ }} > - + {flavor.image_url && ( @@ -88,7 +84,11 @@ export const FlavorCard = ({ )} - + {flavor.name} @@ -98,7 +98,14 @@ export const FlavorCard = ({ )} - + {caption && ( diff --git a/frontend/src/components/ui/FormCard.test.tsx b/frontend/src/components/ui/FormCard.test.tsx index f40f3c7..0cf5800 100644 --- a/frontend/src/components/ui/FormCard.test.tsx +++ b/frontend/src/components/ui/FormCard.test.tsx @@ -45,7 +45,13 @@ describe('FormCard', () => { }); it('applies danger styling when danger prop set', () => { - render(wrap(content)); + render( + wrap( + + content + , + ), + ); const title = screen.getByText('Delete account'); const color = window.getComputedStyle(title).color; // MUI uses the palette.error.main — we just assert the title DOM exists and has a color distinct from default diff --git a/frontend/src/components/ui/Glass.test.tsx b/frontend/src/components/ui/Glass.test.tsx index c6901f8..f2cece4 100644 --- a/frontend/src/components/ui/Glass.test.tsx +++ b/frontend/src/components/ui/Glass.test.tsx @@ -9,10 +9,7 @@ const collectStyles = () => .map((s) => s.textContent ?? '') .join('\n'); -const renderWithTheme = ( - ui: React.ReactElement, - mode: CatppuccinTheme = 'mocha', -) => { +const renderWithTheme = (ui: React.ReactElement, mode: CatppuccinTheme = 'mocha') => { const theme = getTheme(mode); const result = render({ui}); return { theme, ...result }; @@ -36,7 +33,9 @@ describe('Glass primitives', () => { it('GlassCard intensity="strong" emits blurStrong + tintStrong into emitted CSS', () => { const { theme } = renderWithTheme( - x, + + x + , ); const css = collectStyles(); expect(css).toContain(theme.tokens.glass.blurStrong); @@ -45,7 +44,9 @@ describe('Glass primitives', () => { it('GlassCard intensity="subtle" emits tintSubtle into emitted CSS', () => { const { theme } = renderWithTheme( - x, + + x + , ); const css = collectStyles(); expect(css).toContain(theme.tokens.glass.tintSubtle); @@ -53,7 +54,9 @@ describe('Glass primitives', () => { it('does not forward `intensity` prop to the DOM', () => { const { getByTestId } = renderWithTheme( - x, + + x + , ); expect(getByTestId('g').getAttribute('intensity')).toBeNull(); }); diff --git a/frontend/src/components/ui/Glass.tsx b/frontend/src/components/ui/Glass.tsx index 2d46108..7524898 100644 --- a/frontend/src/components/ui/Glass.tsx +++ b/frontend/src/components/ui/Glass.tsx @@ -5,33 +5,37 @@ import Box from '@mui/material/Box'; type Intensity = 'subtle' | 'default' | 'strong'; -const intensityStyles = (intensity: Intensity) => ({ theme }: { theme: any }) => { - const t = theme.tokens; - const tint = - intensity === 'strong' ? t.glass.tintStrong - : intensity === 'subtle' ? t.glass.tintSubtle - : t.glass.tint; - const blur = intensity === 'strong' ? t.glass.blurStrong : t.glass.blur; - return { - backgroundColor: tint, - backdropFilter: blur, - WebkitBackdropFilter: blur, - border: '1px solid', - borderColor: t.glass.border, - boxShadow: intensity === 'strong' ? t.elevation.md : t.elevation.sm, - borderRadius: t.radius.md, - position: 'relative' as const, - // Inset top highlight — the "glass lip" - '&::before': { - content: '""', - position: 'absolute', - inset: 0, - borderRadius: 'inherit', - pointerEvents: 'none', - boxShadow: `inset 0 1px 0 ${t.glass.highlight}`, - }, +const intensityStyles = + (intensity: Intensity) => + ({ theme }: { theme: any }) => { + const t = theme.tokens; + const tint = + intensity === 'strong' + ? t.glass.tintStrong + : intensity === 'subtle' + ? t.glass.tintSubtle + : t.glass.tint; + const blur = intensity === 'strong' ? t.glass.blurStrong : t.glass.blur; + return { + backgroundColor: tint, + backdropFilter: blur, + WebkitBackdropFilter: blur, + border: '1px solid', + borderColor: t.glass.border, + boxShadow: intensity === 'strong' ? t.elevation.md : t.elevation.sm, + borderRadius: t.radius.md, + position: 'relative' as const, + // Inset top highlight — the "glass lip" + '&::before': { + content: '""', + position: 'absolute', + inset: 0, + borderRadius: 'inherit', + pointerEvents: 'none', + boxShadow: `inset 0 1px 0 ${t.glass.highlight}`, + }, + }; }; -}; interface GlassProps { intensity?: Intensity; diff --git a/frontend/src/components/ui/HeroBackdrop.tsx b/frontend/src/components/ui/HeroBackdrop.tsx index 30f3c25..c9b58ca 100644 --- a/frontend/src/components/ui/HeroBackdrop.tsx +++ b/frontend/src/components/ui/HeroBackdrop.tsx @@ -22,14 +22,14 @@ const Root = styled(Box, { `conic-gradient(from 210deg at 50% -10%, ${alpha(p, 0.35)}, ${alpha(s, 0.25)}, ${alpha(p, 0.1)}, ${alpha(p, 0.35)})`, ]; - const minimalLayers = [ - `linear-gradient(180deg, ${alpha(p, 0.12)} 0%, transparent 60%)`, - ]; + const minimalLayers = [`linear-gradient(180deg, ${alpha(p, 0.12)} 0%, transparent 60%)`]; const backgroundImage = - variant === 'aurora' ? auroraLayers.join(', ') - : variant === 'minimal' ? minimalLayers.join(', ') - : meshLayers.join(', '); + variant === 'aurora' + ? auroraLayers.join(', ') + : variant === 'minimal' + ? minimalLayers.join(', ') + : meshLayers.join(', '); return { position: 'absolute', diff --git a/frontend/src/components/ui/ReviewRow.tsx b/frontend/src/components/ui/ReviewRow.tsx index 2abe922..d0a6f4e 100644 --- a/frontend/src/components/ui/ReviewRow.tsx +++ b/frontend/src/components/ui/ReviewRow.tsx @@ -45,44 +45,41 @@ export const ReviewRow = ({ review, showFlavor = true, compact }: ReviewRowProps }, }} > - - - {!review.user_avatar && review.user.charAt(0).toUpperCase()} - - - - {review.user} - - - {formatDate(review.created_at)} - + + + {!review.user_avatar && review.user.charAt(0).toUpperCase()} + + + + {review.user} + + + {formatDate(review.created_at)} + + + - - - {showFlavor && review.flavor_name && ( - - on {review.flavor_name} - - )} + {showFlavor && review.flavor_name && ( + + on {review.flavor_name} + + )} - {review.comment && ( - - - - )} + {review.comment && ( + + + + )} ); diff --git a/frontend/src/components/ui/SectionHeader.tsx b/frontend/src/components/ui/SectionHeader.tsx index 4828b46..ca430db 100644 --- a/frontend/src/components/ui/SectionHeader.tsx +++ b/frontend/src/components/ui/SectionHeader.tsx @@ -37,11 +37,7 @@ export const SectionHeader = ({ title, subtitle, action, compact }: SectionHeade {title} {subtitle && ( - + {subtitle} )} diff --git a/frontend/src/contexts/ConfirmContext.tsx b/frontend/src/contexts/ConfirmContext.tsx index 0709679..38a55c9 100644 --- a/frontend/src/contexts/ConfirmContext.tsx +++ b/frontend/src/contexts/ConfirmContext.tsx @@ -26,8 +26,7 @@ export const ConfirmProvider = ({ children }: { children: ReactNode }) => { const resolverRef = useRef<((value: boolean) => void) | null>(null); const confirm = useCallback((input: ConfirmOptions | string) => { - const normalized: ConfirmOptions = - typeof input === 'string' ? { message: input } : input; + const normalized: ConfirmOptions = typeof input === 'string' ? { message: input } : input; setOpts(normalized); setOpen(true); return new Promise((resolve) => { diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index 4373c02..33a28d9 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -22,7 +22,10 @@ const About: React.FC = () => { {t('common.backToArchive')} - + { - + {t('about.liabilityContentTitle')} {t('about.liabilityContentDesc')} - + {t('about.copyrightTitle')} {t('about.copyrightDesc')} diff --git a/frontend/src/pages/AdminDashboard.tsx b/frontend/src/pages/AdminDashboard.tsx index 42508f6..720a626 100644 --- a/frontend/src/pages/AdminDashboard.tsx +++ b/frontend/src/pages/AdminDashboard.tsx @@ -285,7 +285,10 @@ const AdminDashboard: React.FC = () => { - alpha(theme.palette.primary.main, 0.1) }}> + alpha(theme.palette.primary.main, 0.1) }} + > {t('admin.totalUsers')} @@ -297,7 +300,10 @@ const AdminDashboard: React.FC = () => { - alpha(theme.palette.error.main, 0.1) }}> + alpha(theme.palette.error.main, 0.1) }} + > {t('admin.openTickets')} diff --git a/frontend/src/pages/CommunityFeed.tsx b/frontend/src/pages/CommunityFeed.tsx index 1de53f4..4c543d3 100644 --- a/frontend/src/pages/CommunityFeed.tsx +++ b/frontend/src/pages/CommunityFeed.tsx @@ -33,13 +33,7 @@ import { formatDate } from '../utils/date'; import { useTranslation } from 'react-i18next'; import MentionTextField from '../components/MentionTextField'; import RatingBadge from '../components/RatingBadge'; -import { - PageShell, - HeroBackdrop, - SectionHeader, - GlassCard, - EmptyState, -} from '../components/ui'; +import { PageShell, HeroBackdrop, SectionHeader, GlassCard, EmptyState } from '../components/ui'; import { useToast } from '../hooks/useToast'; interface Reply { @@ -101,11 +95,11 @@ interface CommunityFeedProps { adminMode?: boolean; } -const SidebarCard: React.FC<{ icon: React.ReactNode; title: React.ReactNode; children: React.ReactNode }> = ({ - icon, - title, - children, -}) => ( +const SidebarCard: React.FC<{ + icon: React.ReactNode; + title: React.ReactNode; + children: React.ReactNode; +}> = ({ icon, title, children }) => ( = ({ adminMode }) => { setTopFollowed(Array.isArray(topFollowedRes.data) ? topFollowedRes.data.slice(0, 5) : []); - const notifData = Array.isArray(notifRes.data) ? notifRes.data : notifRes.data.results || []; + const notifData = Array.isArray(notifRes.data) + ? notifRes.data + : notifRes.data.results || []; setNotifications(notifData.slice(0, 5)); } catch (err) { const status = (err as { response?: { status?: number } }).response?.status; @@ -278,11 +274,18 @@ const CommunityFeed: React.FC = ({ adminMode }) => { to={`/profile/${rating.user}`} style={{ textDecoration: 'none', color: 'inherit' }} > - + {rating.user} - + {formatDate(rating.created_at)} @@ -309,7 +312,11 @@ const CommunityFeed: React.FC = ({ adminMode }) => { {rating.flavor_name} @@ -322,7 +329,11 @@ const CommunityFeed: React.FC = ({ adminMode }) => { ) : ( - + No comment provided. )} @@ -367,14 +378,23 @@ const CommunityFeed: React.FC = ({ adminMode }) => { {rating.replies.map((reply) => ( - + {reply.user} {formatDate(reply.created_at)} - + @@ -394,7 +414,9 @@ const CommunityFeed: React.FC = ({ adminMode }) => { setReplyInputs((prev) => ({ ...prev, [rating.id]: val }))} + onChange={(val) => + setReplyInputs((prev) => ({ ...prev, [rating.id]: val })) + } onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { handleReplySubmit(rating.id); @@ -416,7 +438,12 @@ const CommunityFeed: React.FC = ({ adminMode }) => { ))} {totalPages > 1 && ( - + )} @@ -549,7 +576,11 @@ const CommunityFeed: React.FC = ({ adminMode }) => { diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index f66b99f..2aade23 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -160,7 +160,9 @@ const Dashboard: React.FC = () => { max === min ? 0 : l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min); return { rgb: `rgb(${c[0]}, ${c[1]}, ${c[2]})`, l, s }; }); - const vibrant = processed.filter((c) => c.l > 0.2 && c.l < 0.85).sort((a, b) => b.s - a.s); + const vibrant = processed + .filter((c) => c.l > 0.2 && c.l < 0.85) + .sort((a, b) => b.s - a.s); if (vibrant.length >= 2) setPalette([vibrant[0].rgb, vibrant[1].rgb]); else if (vibrant.length === 1) setPalette([vibrant[0].rgb, vibrant[0].rgb]); else setPalette([]); @@ -219,7 +221,9 @@ const Dashboard: React.FC = () => { const exploreCategories = useMemo(() => { if (!data) return ['All']; const cats = new Set( - data.missing_flavors.filter((f) => f.category_name !== 'Packs and other').map((f) => f.category_name), + data.missing_flavors + .filter((f) => f.category_name !== 'Packs and other') + .map((f) => f.category_name), ); return ['All', ...Array.from(cats).sort()]; }, [data]); @@ -401,7 +405,11 @@ const Dashboard: React.FC = () => { {i < 1 && ( - + )} ))} @@ -510,7 +518,11 @@ const Dashboard: React.FC = () => { setActiveTab(1)} variant="contained" sx={{ borderRadius: 2 }}> + } @@ -539,7 +551,11 @@ const Dashboard: React.FC = () => { onChange={setEditComment} /> - @@ -652,7 +691,9 @@ const Dashboard: React.FC = () => { - + {rating.replies.map((reply) => ( { size="small" sx={{ height: 24, - bgcolor: exploreSort === 'circle' ? 'secondary.main' : 'primary.main', + bgcolor: + exploreSort === 'circle' ? 'secondary.main' : 'primary.main', }} /> diff --git a/frontend/src/pages/FlavorList.tsx b/frontend/src/pages/FlavorList.tsx index c29ebd3..70b3881 100644 --- a/frontend/src/pages/FlavorList.tsx +++ b/frontend/src/pages/FlavorList.tsx @@ -157,7 +157,9 @@ const FlavorList: React.FC = () => { /> )} - + {flavor.name} {flavor.description} @@ -194,9 +196,17 @@ const FlavorList: React.FC = () => { .map((r) => ( - + {r.user} ({r.score}/10): @@ -248,7 +258,11 @@ const FlavorList: React.FC = () => { }) } /> - diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index 13b1a13..fe651d8 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -1,14 +1,5 @@ import React, { useState } from 'react'; -import { - Typography, - TextField, - Button, - Tab, - Tabs, - Alert, - Stack, - Box, -} from '@mui/material'; +import { Typography, TextField, Button, Tab, Tabs, Alert, Stack, Box } from '@mui/material'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import { Link } from 'react-router-dom'; import api, { setTokens } from '../lib/api'; diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx index a587a74..24c807f 100644 --- a/frontend/src/pages/MainPage.tsx +++ b/frontend/src/pages/MainPage.tsx @@ -526,11 +526,7 @@ const MainPage: React.FC = ({ adminMode }) => { }} > - + {currentTop.ratings.length} {t('common.reviews')} diff --git a/frontend/src/pages/Privacy.tsx b/frontend/src/pages/Privacy.tsx index e08adef..9f42eae 100644 --- a/frontend/src/pages/Privacy.tsx +++ b/frontend/src/pages/Privacy.tsx @@ -1,11 +1,5 @@ import React from 'react'; -import { - Typography, - Box, - Button, - ToggleButton, - ToggleButtonGroup, -} from '@mui/material'; +import { Typography, Box, Button, ToggleButton, ToggleButtonGroup } from '@mui/material'; import { Link } from 'react-router-dom'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import { useTitle } from '../hooks/useTitle'; @@ -50,7 +44,10 @@ const Privacy: React.FC = () => { - + {t('privacy.intro')} diff --git a/frontend/src/pages/PublicProfile.tsx b/frontend/src/pages/PublicProfile.tsx index 2585e5d..c870085 100644 --- a/frontend/src/pages/PublicProfile.tsx +++ b/frontend/src/pages/PublicProfile.tsx @@ -138,7 +138,9 @@ const PublicProfile: React.FC = ({ adminMode }) => { max === min ? 0 : l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min); return { rgb: `rgb(${c[0]}, ${c[1]}, ${c[2]})`, l, s }; }); - const vibrant = processed.filter((c) => c.l > 0.2 && c.l < 0.85).sort((a, b) => b.s - a.s); + const vibrant = processed + .filter((c) => c.l > 0.2 && c.l < 0.85) + .sort((a, b) => b.s - a.s); if (vibrant.length >= 2) setPalette([vibrant[0].rgb, vibrant[1].rgb]); else if (vibrant.length === 1) setPalette([vibrant[0].rgb, vibrant[0].rgb]); else setPalette([]); @@ -356,7 +358,9 @@ const PublicProfile: React.FC = ({ adminMode }) => { /> - + = ({ adminMode }) => { }} > - + = ({ adminMode }) => { to={`/profile/${comment.author_username}`} style={{ textDecoration: 'none', color: 'inherit' }} > - + {comment.author_username} @@ -800,7 +810,11 @@ const PublicProfile: React.FC = ({ adminMode }) => { {(currentUser?.username === comment.author_username || currentUser?.username === data.username || currentUser?.is_superuser) && ( - handleDeleteComment(comment.id)}> + handleDeleteComment(comment.id)} + > )} diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx index 035126b..79dec84 100644 --- a/frontend/src/pages/Settings.tsx +++ b/frontend/src/pages/Settings.tsx @@ -323,7 +323,12 @@ const Settings: React.FC = ({ themeName, onThemeChange }) => { {t('settings.avatarButton')} - + {t('settings.avatarHint')} @@ -367,7 +372,12 @@ const Settings: React.FC = ({ themeName, onThemeChange }) => { subtitle={t('settings.confirmEmailHint', { email })} onSubmit={handleConfirmEmail} actions={ - } diff --git a/frontend/src/pages/Support.tsx b/frontend/src/pages/Support.tsx index 4b39159..7bb53f0 100644 --- a/frontend/src/pages/Support.tsx +++ b/frontend/src/pages/Support.tsx @@ -405,7 +405,9 @@ const Support: React.FC = () => { - alpha(theme.palette.background.default, 0.5) }}> + alpha(theme.palette.background.default, 0.5) }} + > {currentUser?.is_superuser && ( {(['open', 'in_progress', 'resolved', 'closed'] as const).map((s) => ( @@ -458,7 +460,10 @@ const Support: React.FC = () => { boxShadow: msg.is_admin ? 2 : 0, }} > - + {msg.username} {msg.is_admin && '(Support)'} diff --git a/frontend/src/pages/categories/CategoryFlavors.tsx b/frontend/src/pages/categories/CategoryFlavors.tsx index 04d5c46..8340e77 100644 --- a/frontend/src/pages/categories/CategoryFlavors.tsx +++ b/frontend/src/pages/categories/CategoryFlavors.tsx @@ -5,7 +5,13 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import api from '../../lib/api'; import { useTitle } from '../../hooks/useTitle'; import { useTranslation } from 'react-i18next'; -import { PageShell, HeroBackdrop, SectionHeader, FlavorCard, EmptyState } from '../../components/ui'; +import { + PageShell, + HeroBackdrop, + SectionHeader, + FlavorCard, + EmptyState, +} from '../../components/ui'; interface Rating { id: number; diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx index b0a11b4..52d7845 100644 --- a/frontend/src/pages/flavors/FlavorDetail.tsx +++ b/frontend/src/pages/flavors/FlavorDetail.tsx @@ -34,13 +34,7 @@ import MentionTextField from '../../components/MentionTextField'; import RichText from '../../components/RichText'; import RatingBadge from '../../components/RatingBadge'; import StatusBadge from '../../components/StatusBadge'; -import { - PageShell, - HeroBackdrop, - GlassCard, - SectionHeader, - EmptyState, -} from '../../components/ui'; +import { PageShell, HeroBackdrop, GlassCard, SectionHeader, EmptyState } from '../../components/ui'; import { useToast } from '../../hooks/useToast'; import { useConfirm } from '../../hooks/useConfirm';