games-database/games-frontend-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor(nav): migrate header, dashboard chrome and discovery UI to v3

Browse Source 
- Header/MobileBar: MenuRoot/Positioner/Content + Portal + Tooltip
  shims, ghost icon buttons, 2rem padded user/settings menus, hover
  token gray.700; MobileBar drawer API (open/onOpenChange/finalFocusEl)
- FilterBar/ActiveFilters: DrawerRoot/CloseTrigger, Divider -> Separator,
  Tag shim, FixedSelect with typed handlers and width-preserving
  chakraStyles, blue active-filter pills untouched
- Pagination: NumberInputRoot/Field + NativeSelect shims, first/last
  arrows back to double chevrons (LuChevronsLeft/Right), single chevrons
  kept for prev/next
- Search/SearchModal, Home, NoGames, LoadingModal, DashboardLoadingModal:
  Dialog/Toaster-era props, gap/align/textAlign renames; App.test target
  content updated accordingly
This commit is contained in:
john-okeefe
2026-09-06 10:30:21 -04:00
parent 7bdf42ac07
commit 45dd783964
15 changed files with 325 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ActiveFilters.tsx
+12 -14
View File
@@ -1,7 +1,8 @@
import React from 'react'
import { useHookstate } from '@hookstate/core'
import { gameDashboardState } from '../stateManagement/gameState'
import { Flex, Stack, HStack, Link, Spacer, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'
import { Flex, Stack, HStack, Link, Spacer } from '@chakra-ui/react'
import {Tag} from './ui/tag'
import getWithFilters from '../componentUtils/getWithFilters'
import {
loadingState,
@@ -53,7 +54,7 @@ const ActiveFilters = () => {
}} direction={{
base: 'column',
md: 'row'
}} spacing={4}>
}} gap={4}>
{searchParams.length >= 1 && (
<>
<h2>Search: </h2>
@@ -61,11 +62,8 @@ const ActiveFilters = () => {
size={'md'}
borderRadius="full"
variant="solid"
colorScheme="blue"
>
<TagLabel><Link
onMouseDown={() => setSearchModalOpen.set(true)}>{searchParams}</Link></TagLabel>
<TagCloseButton onMouseDown={async () => {
colorPalette="blue"
onClose={async () => {
const newSearchParams = ""
ChangeActiveFilterHeader(filters, newSearchParams, setShowFiltersModuleState)
searchComplete.set(false)
@@ -80,7 +78,9 @@ const ActiveFilters = () => {
useRatingState,
useSteamRatingState,
)
}} />
}}
><Link
onMouseDown={() => setSearchModalOpen.set(true)}>{searchParams}</Link>
</Tag>
</>
)}
@@ -99,22 +99,20 @@ const ActiveFilters = () => {
<>
<HStack key={num}>
<h3 style={{ textTransform: 'capitalize' }}>{filter}</h3>
<HStack spacing={4}>
<HStack gap={4}>
{filters[filter as keyof typeof filters].split(',').map((item: string, index) => (
<Tag
size={'md'}
key={index}
borderRadius="full"
variant="solid"
colorScheme="blue"
>
<TagLabel>{
colorPalette="blue"
onClose={() => removeFilters(filter, item)}
>{
item.includes('lte')
? item.replace('lte', '<= ')
: item.includes('gte') ? item.replace('gte', '>= ')
: item}
</TagLabel>
<TagCloseButton onMouseDown={() => removeFilters(filter, item)} />
</Tag>
))}
</HStack>
src/components/FilterBar.tsx
+55 -61
View File
@@ -1,17 +1,12 @@
import React, {MutableRefObject, useEffect} from 'react'
import {
Center,
Divider,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay, Flex,
Separator,
Flex,
Heading, Spacer,
Text,
} from '@chakra-ui/react'
import {DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerHeader, DrawerRoot} from './ui/drawer'
import AdminMode from './authComponents/AdminMode'
import {StateMethods, useHookstate} from '@hookstate/core'
import {tagState} from '../stateManagement/tagState'
@@ -25,7 +20,7 @@ import {
} from '../componentUtils/SelectValues'
import {retrieveTags} from '../componentUtils/retrieveTags'
import {gameDashboardState} from '../stateManagement/gameState'
import {Select} from 'chakra-react-select'
import {Select} from './FixedSelect'
import getWithFilters from '../componentUtils/getWithFilters'
import {loadingState, showFiltersModuleState} from '../stateManagement/loadingState'
import {adminMode} from '../stateManagement/userState'
@@ -99,26 +94,25 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
}
return (
<Drawer
isOpen={filterIsOpen}
placement="right"
onClose={filterOnClose}
finalFocusRef={btnRef}
<DrawerRoot
open={filterIsOpen}
placement="end"
onOpenChange={(e) => { if (!e.open) filterOnClose() }}
finalFocusEl={() => btnRef.current as unknown as HTMLElement}
>
<DrawerOverlay/>
<DrawerContent>
<DrawerCloseButton/>
<DrawerCloseTrigger/>
<DrawerHeader>
<Heading as={'h3'}>Filters</Heading>
</DrawerHeader>
<DrawerBody>
<AdminMode/>
<Divider my={'3'}/>
<Separator borderColor="gray.200" my={'3'}/>
<Center>
<ResetFilterButton/>
</Center>
<Divider my={'3'}/>
<Separator borderColor="gray.200" my={'3'}/>
<Text mb={'1'} fontSize={'xl'}>Series</Text>
<Select
size={'sm'}
@@ -126,13 +120,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="series"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("series", value)
}}
options={tags.series}
/>
<Divider my={'3'}/>
<Separator borderColor="gray.200" my={'3'}/>
<Flex mb={'1'}>
<Text mb={'1'} fontSize={'xl'}>Rating</Text>
<Spacer />
@@ -140,13 +134,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
size={'sm'}
defaultValue={ratingToSelectDefaultValue(useRatingState)}
name="rating"
onChange={(event) => {
onChange={(event: any) => {
if (event === null) return
setRatingState.set(event.value)
}}
options={ratingStateValues}
chakraStyles={{
container: (provided) => ({
container: (provided: any) => ({
...provided,
width: "75px"
})
@@ -158,13 +152,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
defaultValue={filterToSelectDefaultValue("rating")}
isClearable
name="rating"
onChange={(event) => {
onChange={(event: any) => {
if(event === null) return changeFilters("rating", "")
changeFilters("rating", event.value)
}}
options={ratingValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Flex mb={'1'}>
<Text mb={'1'} fontSize={'xl'}>Steam Rating</Text>
<Spacer />
@@ -172,13 +166,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
size={'sm'}
defaultValue={ratingToSelectDefaultValue(useSteamRatingState)}
name="steamRating"
onChange={(event) => {
onChange={(event: any) => {
if (event === null) return
setSteamRatingState.set(event.value)
}}
options={ratingStateValues}
chakraStyles={{
container: (provided) => ({
container: (provided: any) => ({
...provided,
width: "75px"
})
@@ -190,13 +184,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
defaultValue={filterToSelectDefaultValue("steamRating")}
isClearable
name="steamRating"
onChange={(event) => {
onChange={(event: any) => {
if(event === null) return changeFilters("steamRating", "")
changeFilters("steamRating", event.value)
}}
options={ratingValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Play Status</Text>
<Select
size={'sm'}
@@ -204,13 +198,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="playStatus"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("playStatus", value)
}}
options={playStatusValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Genres</Text>
<Select
size={'sm'}
@@ -218,13 +212,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="genre"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("genre", value)
}}
options={tags.genres}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Operating System</Text>
<Select
size={'sm'}
@@ -232,13 +226,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="os"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("os", value)
}}
options={osValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Store</Text>
<Select
size={'sm'}
@@ -246,13 +240,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="store"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("store", value)
}}
options={tags.store}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Controller Support</Text>
<Select
size={'sm'}
@@ -260,13 +254,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="controller"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("controller", value)
}}
options={controllerValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Developer</Text>
<Select
size={'sm'}
@@ -274,13 +268,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="developer"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("developer", value)
}}
options={tags.developer}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Publisher</Text>
<Select
size={'sm'}
@@ -288,13 +282,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="publisher"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("publisher", value)
}}
options={tags.publisher}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Do you own the Soundtrack?</Text>
<Select
size={'sm'}
@@ -302,13 +296,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="soundtrack"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("soundtrack", value)
}}
options={yesNo}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Does in work on Intel?</Text>
<Select
size={'sm'}
@@ -316,13 +310,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="intel"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("intel", value)
}}
options={wineIntelValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Does is work with Wine?</Text>
<Select
size={'sm'}
@@ -330,21 +324,21 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="wine"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("wine", value)
}}
options={wineIntelValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
</DrawerBody>
<DrawerFooter>
</DrawerFooter>
</DrawerContent>
</Drawer>
</DrawerRoot>
)
}
export default FilterBar
export default FilterBar
src/components/Footer.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ export default function Footer() {
return (
<Box as='footer' role='contentinfo' mx='auto' maxW='7xl' py='12' px={{ base: '4', md: '8' }}>
<Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between">
<Stack direction="row" gap="4" align="center" justify="space-between">
</Stack>
src/components/GamesDashboard.tsx
+13 -11
View File
@@ -4,7 +4,7 @@ import React, { useEffect } from 'react'
import { gameDashboardState } from '../stateManagement/gameState'
import { loadingState } from '../stateManagement/loadingState'
import { useHookstate } from '@hookstate/core'
import { Box, Center, Container, Divider, Heading, SimpleGrid, VStack } from '@chakra-ui/react'
import { Box, Center, Container, Separator, Heading, SimpleGrid, VStack } from '@chakra-ui/react'
import Pagination from './Pagination'
import { NavLink } from 'react-router-dom'
import { adminMode } from '../stateManagement/userState'
@@ -33,34 +33,36 @@ const GameDashboard = () => {
return (
<>
<Container maxW="container.xl" mt="7">
<Container maxW="1280px" mt="7">
<Pagination />
<ActiveFilters />
<Divider />
<Separator borderColor="gray.200" />
{!loaded ? <DashboardLoadingModal /> : games.count.totalGames === 0 ?
<Center h={'80vh'}>
<VStack spacing={10}>
<VStack gap={10}>
<Heading as={'h1'} size={'3xl'}>No Results Found...</Heading>
<Divider />
<Separator borderColor="gray.200" />
{games.searchParams !== '' ?
<Box mt='10'>
<ResetFilterButton text='Clear Search and Filters' size='lg' variant='outline' colorScheme='blue' />
<ResetFilterButton text='Clear Search and Filters' size='lg' variant='outline' colorPalette='blue' />
</Box>
:
<Box
rounded={'md'}
as={NavLink}
border={'1px'}
asChild
borderWidth={'1px'} borderStyle={'solid'}
p={'3'}
fontSize={'2xl'}
to="/games/create">
>
<NavLink to="/games/create">
Create a Game
</NavLink>
</Box>
}
</VStack>
</Center>
:
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={10} style={{ marginTop: '3rem' }}>
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} gap={10} style={{ marginTop: '3rem' }}>
{games.data.map((game) => (
<GameThumbnailContextMenu
key={game._id}
@@ -68,7 +70,7 @@ const GameDashboard = () => {
game={game} />
))}
</SimpleGrid>}
<Divider my={'1rem'} />
<Separator borderColor="gray.200" my={'1rem'} />
<Pagination />
</Container>
</>
src/components/Header.tsx
+90 -92
View File
@@ -9,27 +9,23 @@ import {
Link,
HStack,
Stack,
useColorModeValue,
Menu,
MenuButton,
Avatar,
MenuList,
MenuItem,
MenuDivider,
Portal,
Icon,
useColorMode,
Text,
Center,
VStack,
Tooltip,
Divider,
Separator,
Heading,
Kbd,
Spacer,
useDisclosure,
useMediaQuery,
} from '@chakra-ui/react'
import { AddIcon, HamburgerIcon, Search2Icon, SettingsIcon } from '@chakra-ui/icons'
import {useColorMode, useColorModeValue} from './ui/color-mode'
import {Tooltip} from './ui/tooltip'
import {Avatar} from './ui/avatar'
import { LuPlus, LuMenu, LuSearch, LuSettings } from 'react-icons/lu'
import SearchModal from './SearchModal'
import { openAndCloseSearchDialogue } from '../stateManagement/loadingState'
import AdminMode from './authComponents/AdminMode'
@@ -49,10 +45,10 @@ export default function NavBar() {
const bgLink = useColorModeValue('gray.200', 'gray.700')
const location = useLocation()
const history = useNavigate()
const { isOpen: mobileIsOpen, onOpen: mobileOnOpen, onClose: mobileOnClose } = useDisclosure()
const { isOpen: filterIsOpen, onOpen: filterOnOpen, onClose: filterOnClose } = useDisclosure()
const { open: mobileIsOpen, onOpen: mobileOnOpen, onClose: mobileOnClose } = useDisclosure()
const { open: filterIsOpen, onOpen: filterOnOpen, onClose: filterOnClose } = useDisclosure()
const btnRef = React.useRef(null)
const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')
const [isSmallerThan768] = useMediaQuery(['(max-width: 768px)'])
const handleKeyPress = useCallback((event: any) => {
if (event.ctrlKey === true && event.key === ',') {
@@ -95,13 +91,13 @@ export default function NavBar() {
position={loadedPreferences.get().stickyNav ? "fixed" : "relative"}
justifyContent={'space-between'}
>
<HStack spacing={8} alignItems={'center'}>
<Box as={RouteLink} to="/">
Game Database
<HStack gap={8} alignItems={'center'}>
<Box asChild>
<RouteLink to="/">Game Database</RouteLink>
</Box>
<HStack
as={'nav'}
spacing={4}
gap={4}
display={{ base: 'none', md: 'flex' }}
>
<Link
@@ -112,9 +108,8 @@ export default function NavBar() {
textDecoration: 'none',
bg: bgLink,
}}
as={RouteLink}
to="/games">
Games
asChild>
<RouteLink to="/games">Games</RouteLink>
</Link>
<Link
px={2}
@@ -124,9 +119,8 @@ export default function NavBar() {
textDecoration: 'none',
bg: bgLink,
}}
as={RouteLink}
to="/games/create">
Create Game
asChild>
<RouteLink to="/games/create">Create Game</RouteLink>
</Link>
</HStack>
</HStack>
@@ -135,7 +129,7 @@ export default function NavBar() {
{isSmallerThan768 ?
<>
<Button ref={btnRef} onMouseDown={mobileIsOpen ? mobileOnClose : mobileOnOpen}>
<HamburgerIcon/>
<LuMenu/>
</Button>
<MobileBar mobileIsOpen={mobileIsOpen} mobileOnClose={mobileOnClose} btnRef={btnRef} bgLink={bgLink}
user={user} colorMode={colorMode} toggleColorMode={toggleColorMode}/>
@@ -144,7 +138,7 @@ export default function NavBar() {
<Stack direction={'row'}>
{ user.role === 'admin' && <AdminMode/>}
<Tooltip hasArrow mr={'2'} label={'Filters'} aria-label={'Filters'}>
<Tooltip showArrow content={'Filters'}>
<Button
rounded={'full'}
bg={'transparent'}
@@ -164,7 +158,7 @@ export default function NavBar() {
</Tooltip>
<FilterBar filterIsOpen={filterIsOpen} filterOnClose={filterOnClose} btnRef={btnRef} filterLoadingState={filterLoadingState} />
<Tooltip hasArrow mr={'2'} label={'Search: ctrl+s'} aria-label={'Search'}>
<Tooltip showArrow content={'Search: ctrl+s'}>
<Button
rounded={'full'}
onMouseDown={() => {
@@ -173,77 +167,81 @@ export default function NavBar() {
bg={'transparent'}
cursor={'pointer'}
minW={0}>
<Search2Icon/>
<LuSearch/>
</Button>
</Tooltip>
<Menu>
<Tooltip hasArrow mr={'2'} label={'Settings'} aria-label={'Settings'}>
<MenuButton
as={Button}
<Menu.Root>
<Menu.Trigger asChild>
<Button
rounded={'full'}
variant={'transparent'}
variant={'ghost'}
cursor={'pointer'}
minW={0}>
<SettingsIcon/>
</MenuButton>
</Tooltip>
<MenuList alignItems={'center'}>
<VStack>
{/*<Button onMouseDown={toggleColorMode} w={'70%'}>*/}
{/* {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}*/}
{/* {colorMode === 'light' ?*/}
{/* <Text mt={'1'} ml={'2'}>Dark</Text> :*/}
{/* <Text mt={'1'} ml={'2'}>Light</Text>}*/}
{/*</Button>*/}
<Button
variant={'solid'}
colorScheme={'blue'}
size={'md'}
leftIcon={<AddIcon/>}
as={RouteLink}
w={'70%'}
to="/games/create">
<Text mt="1">Create Game</Text>
</Button>
<Divider/>
<Heading as={'h3'} size={'md'}>Keyboard Shortcuts</Heading>
<HStack><Text fontSize={'sm'}>Search:</Text><span><Kbd>ctrl</Kbd> + <Kbd>,</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Games Grid:</Text><span><Kbd>ctrl</Kbd> + <Kbd>.</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Create
Game:</Text><span><Kbd>ctrl</Kbd> + <Kbd>/</Kbd></span></HStack>
</VStack>
</MenuList>
</Menu>
<Menu>
<Tooltip hasArrow mr={'2'} label={'User Info and Logout'} aria-label={'User Info'}>
<MenuButton
as={Button}
rounded={'full'}
variant={'transparent'}
cursor={'pointer'}
minW={0}>
<Avatar size={'sm'} src={user.avatar}/>
</MenuButton>
</Tooltip>
<MenuList alignItems={'center'}>
<br/>
<Center>
<Avatar
size={'2xl'}
src={user.avatar}
/>
</Center>
<br/>
<Center>
<p>{user.displayName}</p>
</Center>
<br/>
<MenuDivider/>
<MenuItem onClick={() => history('/profile')}>Preferences</MenuItem>
<MenuItem onClick={() => logout()}><Icon as={MdOutlinePowerSettingsNew} mr={'2'}/> <Text
mt={'1'}>Logout</Text></MenuItem>
</MenuList>
</Menu>
<Tooltip showArrow content={'Settings'}>
<LuSettings/>
</Tooltip>
</Button>
</Menu.Trigger>
<Portal>
<Menu.Positioner>
<Menu.Content p={8}>
<VStack alignItems={'center'}>
<Button
variant={'solid'}
colorPalette={'blue'}
size={'md'}
asChild
w={'70%'}
>
<RouteLink to="/games/create"><LuPlus/> <Text mt="1">Create Game</Text></RouteLink>
</Button>
<Separator/>
<Heading as={'h3'} size={'md'}>Keyboard Shortcuts</Heading>
<HStack><Text fontSize={'sm'}>Search:</Text><span><Kbd>ctrl</Kbd> + <Kbd>,</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Games Grid:</Text><span><Kbd>ctrl</Kbd> + <Kbd>.</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Create
Game:</Text><span><Kbd>ctrl</Kbd> + <Kbd>/</Kbd></span></HStack>
</VStack>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
<Menu.Root>
<Menu.Trigger asChild>
<Button
rounded={'full'}
variant={'ghost'}
cursor={'pointer'}
minW={0}>
<Tooltip showArrow content={'User Info and Logout'}>
<Avatar size={'sm'} src={user.avatar} name={user.displayName} />
</Tooltip>
</Button>
</Menu.Trigger>
<Portal>
<Menu.Positioner>
<Menu.Content p={8}>
<br/>
<Center>
<Avatar
size={'2xl'}
src={user.avatar}
name={user.displayName}
/>
</Center>
<br/>
<Center>
<p>{user.displayName}</p>
</Center>
<br/>
<Menu.Separator/>
<Menu.Item value="preferences" onSelect={() => history('/profile')}>Preferences</Menu.Item>
<Menu.Item value="logout" onSelect={() => logout()}><Icon as={MdOutlinePowerSettingsNew} mr={'2'}/> <Text
mt={'1'}>Logout</Text></Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
</Stack>
}
</Flex>
src/components/Home.tsx
+4 -4
View File
@@ -4,13 +4,13 @@ import { VStack, Image, Button, Heading, Flex, Center } from '@chakra-ui/react'
const Home = () => {
return (
<Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
<Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} height={'100vh'}>
<Center w={'100%'}>
<VStack spacing={4} align={'center'} margin={'auto'}>
<VStack gap={4} align={'center'} margin={'auto'}>
<Image src="/assets/Logo.svg" alt="Games Database Logo"/>
<Heading as="h2" fontSize={'1.7em'} fontWeight={'normal'}>Welcome to your Games Database</Heading>
<Button as={Link} to="/login" size='lg' variant='outline' fontSize='1.25rem'>
Login
<Button asChild size='lg' variant='outline' fontSize='1.25rem'>
<Link to="/login">Login</Link>
</Button>
</VStack>
</Center>
src/components/LoadingModal.tsx
+7 -2
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { Center, CircularProgress } from '@chakra-ui/react'
import { Center, ProgressCircle } from '@chakra-ui/react'
export default function LoadingModal() {
@@ -14,7 +14,12 @@ export default function LoadingModal() {
bottom={'0'}
left={'0'}
>
<CircularProgress isIndeterminate color="blue.500"/>
<ProgressCircle.Root value={null} size="lg">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range stroke="blue.500" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</Center>
</>
)
src/components/MobileBar.tsx
+32 -44
View File
@@ -1,19 +1,18 @@
import React, { MutableRefObject } from 'react'
import {
Avatar, Button, Center, ColorMode,
Divider, Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent, DrawerFooter,
DrawerHeader,
DrawerOverlay, Icon,
Button, Center,
Separator,
Drawer,
Icon,
Image, Link,
Stack, Text,
} from '@chakra-ui/react'
import {DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerHeader, DrawerRoot} from './ui/drawer'
import {Avatar} from './ui/avatar'
import AdminMode from './authComponents/AdminMode'
import { NavLink } from 'react-router-dom'
import Search from './Search'
import { AddIcon } from '@chakra-ui/icons'
import { LuPlus } from 'react-icons/lu'
import { logout } from '../stateManagement/userState'
import User from '../models/user'
import { AiOutlineLogout } from 'react-icons/ai'
@@ -21,12 +20,13 @@ import {useHookstate} from "@hookstate/core";
import {searchCompletedState} from "../stateManagement/loadingState";
import {gameDashboardState} from "../stateManagement/gameState";
import ResetFilterButton from "./helperComponents/ResetFilterButton";
import type { ColorMode } from './ui/color-mode'
interface Props {
mobileIsOpen: boolean
mobileOnClose: () => void
btnRef: MutableRefObject<null>
bgLink: "gray.200" | "gray.700"
bgLink: string
user: User
colorMode: ColorMode
toggleColorMode: () => void
@@ -37,15 +37,14 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
const gamesState = useHookstate(gameDashboardState)
const games = gamesState.get()
return (
<Drawer
isOpen={mobileIsOpen}
placement="right"
onClose={mobileOnClose}
finalFocusRef={btnRef}
<DrawerRoot
open={mobileIsOpen}
placement="end"
onOpenChange={(e) => { if (!e.open) mobileOnClose() }}
finalFocusEl={() => btnRef.current as unknown as HTMLElement}
>
<DrawerOverlay/>
<DrawerContent>
<DrawerCloseButton/>
<DrawerCloseTrigger/>
<DrawerHeader>
<Image maxW="15rem" src="/assets/Logo.svg" alt="Games Database Logo"/>
</DrawerHeader>
@@ -54,7 +53,7 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
<AdminMode />
<Stack
as={'nav'}
spacing={4}
gap={4}
>
<Link
px={2}
@@ -64,9 +63,8 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
textDecoration: 'none',
bg: bgLink,
}}
as={NavLink}
to="/games">
<Text align={'right'}>Games</Text>
asChild>
<NavLink to="/games"><Text textAlign={'right'}>Games</Text></NavLink>
</Link>
<Link
px={2}
@@ -76,15 +74,14 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
textDecoration: 'none',
bg: bgLink,
}}
as={NavLink}
to="/games/create">
<Text align={'right'}>Create Game</Text>
asChild>
<NavLink to="/games/create"><Text textAlign={'right'}>Create Game</Text></NavLink>
</Link>
<Divider/>
<Separator/>
<Search/>
{searchCompleted.get() && <Text>Games Found: {games.count.totalGames}</Text>}
<Divider/>
<Center><Avatar mr={'2'} size={'sm'} src={user.avatar}/><Text mt={1}>{user.displayName}</Text></Center>
<Separator/>
<Center><Avatar mr={'2'} size={'sm'} src={user.avatar} name={user.displayName}/><Text mt={1}>{user.displayName}</Text></Center>
<Link
px={2}
py={1}
@@ -93,18 +90,10 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
textDecoration: 'none',
bg: bgLink,
}}
as={NavLink}
to="/profile">
<Text align={'right'}>Preferences</Text>
asChild>
<NavLink to="/profile"><Text textAlign={'right'}>Preferences</Text></NavLink>
</Link>
<Divider/>
{/*<Button onMouseDown={toggleColorMode} ml={'auto'}>*/}
{/* {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}*/}
{/* {colorMode === 'light' ?*/}
{/* <Text mt={'1'} ml={'2'}>Dark</Text> :*/}
{/* <Text mt={'1'} ml={'2'}>Light</Text>}*/}
{/*</Button>*/}
{/*<Divider/>*/}
<Separator/>
<ResetFilterButton />
</Stack>
@@ -114,21 +103,20 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
<DrawerFooter>
<Button
variant={'solid'}
colorScheme={'blue'}
colorPalette={'blue'}
size={'md'}
leftIcon={<AddIcon/>}
as={NavLink}
asChild
mr={3}
to="/games/create">
<Text mt="1">Create Game</Text>
>
<NavLink to="/games/create"><LuPlus/> <Text mt="1">Create Game</Text></NavLink>
</Button>
<Button onMouseDown={() => logout()}><Icon as={AiOutlineLogout} mr={'2'}/> <Text
mt={'1'}>Logout</Text></Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</DrawerRoot>
)
}
export default MobileBar
export default MobileBar
src/components/NoGames.tsx
+4 -4
View File
@@ -4,12 +4,12 @@ import { Center, Flex, Heading, Button, VStack } from '@chakra-ui/react'
export default function NoGames() {
return (
<Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
<Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} height={'100vh'}>
<Center w={'100%'}>
<VStack spacing={4} align={'center'} margin={'auto'}>
<VStack gap={4} align={'center'} margin={'auto'}>
{<Heading as="h2">You have not added any games yet.</Heading>}
<Button as={Link} to='/games/create' size='lg' variant='outline' fontSize='1.25rem'>
Click here to add some!
<Button asChild size='lg' variant='outline' fontSize='1.25rem'>
<Link to='/games/create'>Click here to add some!</Link>
</Button>
</VStack>
</Center>
src/components/Pagination.tsx
+58 -50
View File
@@ -4,24 +4,21 @@ import {
Grid,
GridItem,
IconButton,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberInputStepper,
Select,
Text,
Tooltip,
useColorModeValue,
useMediaQuery,
Portal,
} from '@chakra-ui/react'
import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
import {NumberInputRoot, NumberInputField} from './ui/number-input'
import { NativeSelect } from '@chakra-ui/react'
import { LuChevronLeft, LuChevronRight, LuChevronsLeft, LuChevronsRight } from 'react-icons/lu'
import {Tooltip} from './ui/tooltip'
import { useHookstate } from '@hookstate/core'
import { gameDashboardState } from '../stateManagement/gameState'
import { loadingState } from '../stateManagement/loadingState'
import { adminMode } from '../stateManagement/userState'
import getWithFilters from '../componentUtils/getWithFilters'
import { ratingState, steamRatingState } from "../stateManagement/ratingState";
import {useColorModeValue} from "./ui/color-mode";
import {useMediaQuery} from "@chakra-ui/react";
export default function Pagination() {
const gamesState = useHookstate(gameDashboardState)
@@ -34,7 +31,7 @@ export default function Pagination() {
const bg = useColorModeValue('gray.50', 'transparent')
const useRatingState = useHookstate(ratingState).get()
const useSteamRatingState = useHookstate(steamRatingState).get()
const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')
const [isSmallerThan768] = useMediaQuery(['(max-width: 768px)'])
const setPageSize = async (limit: number) => await getWithFilters(
gamesState,
@@ -99,22 +96,24 @@ export default function Pagination() {
}}>
<GridItem area={"backArrows"}>
<Flex>
<Tooltip label="First Page">
<Tooltip content="First Page">
<IconButton
aria-label={'First Page'}
onMouseDown={() => gotoPage(0)}
isDisabled={pageIndex <= 1}
icon={<ArrowLeftIcon h={3} w={3} />}
disabled={pageIndex <= 1}
mr={4}
/>
>
<LuChevronsLeft />
</IconButton>
</Tooltip>
<Tooltip label="Previous Page">
<Tooltip content="Previous Page">
<IconButton
aria-label={'Previous Page'}
onMouseDown={previousPage}
isDisabled={pageIndex <= 1}
icon={<ChevronLeftIcon h={6} w={6} />}
/>
disabled={pageIndex <= 1}
>
<LuChevronLeft />
</IconButton>
</Tooltip>
</Flex>
</GridItem>
@@ -133,70 +132,79 @@ export default function Pagination() {
{!isSmallerThan768 &&
<GridItem area={"goToPage"}>
<Text mb={'1'}>Go to Page:</Text>
<NumberInput
<NumberInputRoot
bg={bg}
rounded={'md'}
w={{ base: 20, md: 28 }}
min={1}
max={pageCount}
value={pageIndex}
onChange={(value) => {
const page = value ? Number(value) : 1
value={String(pageIndex)}
onValueChange={(e) => {
const page = e.value ? Number(e.value) : 1
gotoPage(page)
}}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<NumberInputField
borderWidth="1px"
borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
/>
</NumberInputRoot>
</GridItem>
}
<GridItem area={"countPerPage"}>
<Text mb={'1'}>Count Per Page:</Text>
<Select
<NativeSelect.Root
ml={{
base: '4',
md: '0'
}}
bg={bg}
rounded={'md'}
w={{ base: 20, md: 32 }}
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value))
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</Select>
<NativeSelect.Field
rounded={'md'}
borderWidth={'1px'}
borderStyle={'solid'}
borderColor={'gray.500'}
bg={bg}
value={pageSize}
onChange={(e: any) => {
setPageSize(Number(e.target.value))
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</GridItem>
<GridItem area={'gamesFound'}>
<Text>Games Found: {games.count.totalGames}</Text>
</GridItem>
<GridItem area={"forwardArrows"}>
<Flex justifySelf={'end'}>
<Tooltip label="Next Page">
<Tooltip content="Next Page">
<IconButton
aria-label={'Next Page'}
onMouseDown={nextPage}
isDisabled={pageIndex >= pageCount}
icon={<ChevronRightIcon h={6} w={6} />}
/>
disabled={pageIndex >= pageCount}
>
<LuChevronRight />
</IconButton>
</Tooltip>
<Tooltip label="Last Page">
<Tooltip content="Last Page">
<IconButton
aria-label={'Last Page'}
onMouseDown={() => gotoPage(pageCount)}
isDisabled={pageIndex >= pageCount}
icon={<ArrowRightIcon h={3} w={3} />}
disabled={pageIndex >= pageCount}
ml={4}
/>
>
<LuChevronsRight />
</IconButton>
</Tooltip>
</Flex>
</GridItem>
src/components/Search.tsx
+18 -18
View File
@@ -1,6 +1,7 @@
import React, { FormEvent } from 'react'
import { Button, FormControl, Input, InputGroup, InputRightElement, useColorModeValue } from '@chakra-ui/react'
import { SearchIcon } from '@chakra-ui/icons'
import { Button, Input, Group } from '@chakra-ui/react'
import { Field } from './ui/field'
import { LuSearch } from 'react-icons/lu'
import { GameList } from '../models/game'
import { useHookstate } from '@hookstate/core'
import { gameDashboardState } from '../stateManagement/gameState'
@@ -14,6 +15,7 @@ import { adminMode } from '../stateManagement/userState'
import getWithFilters from '../componentUtils/getWithFilters'
import {ChangeActiveFilterHeader} from "../componentUtils/changeActiveFilterHeader";
import {ratingState, steamRatingState} from "../stateManagement/ratingState";
import {useColorModeValue} from "./ui/color-mode";
export default function Search() {
const gamesState = useHookstate(gameDashboardState)
@@ -54,16 +56,16 @@ export default function Search() {
return (
<>
<form onSubmit={handleSubmit}>
<FormControl mb="3">
<InputGroup>
<Field mb="3">
<Group attached w="full">
<Input
autoFocus
id="searchParams"
name="searchParams"
bg={bg}
type="text"
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Search..."
value={games.searchParams}
@@ -71,18 +73,16 @@ export default function Search() {
handleInputChange('searchParams', e.target.value)
}}
/>
<InputRightElement>
<Button
isLoading={submitLoading}
type="submit"
colorScheme="blue"
>
<SearchIcon/>
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<Button
loading={submitLoading}
type="submit"
colorPalette="blue"
>
<LuSearch/>
</Button>
</Group>
</Field>
</form>
</>
)
}
}
src/components/SearchModal.tsx
+10 -12
View File
@@ -1,8 +1,6 @@
import React from 'react'
import {
Modal, ModalBody, ModalCloseButton, ModalContent,
ModalHeader,
} from '@chakra-ui/react'
import { Dialog } from '@chakra-ui/react'
import {DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot} from './ui/dialog'
import { useHookstate } from '@hookstate/core'
import { openAndCloseSearchDialogue } from '../stateManagement/loadingState'
import Search from './Search'
@@ -16,14 +14,14 @@ export default function SearchModal() {
}
return (
<Modal isOpen={isOpen} onClose={handleClose}>
<ModalContent>
<ModalHeader>Search</ModalHeader>
<ModalCloseButton onMouseDown={() => handleClose()}/>
<ModalBody>
<DialogRoot open={isOpen} onOpenChange={(e) => { if (!e.open) handleClose() }}>
<DialogContent>
<DialogHeader>Search</DialogHeader>
<DialogCloseTrigger onClick={() => handleClose()}/>
<DialogBody>
<Search />
</ModalBody>
</ModalContent>
</Modal>
</DialogBody>
</DialogContent>
</DialogRoot>
)
}
src/components/dashboardComponents/DashboardLoadingModal.tsx
+7 -2
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { Center, CircularProgress } from '@chakra-ui/react'
import { Center, ProgressCircle } from '@chakra-ui/react'
export default function DashboardLoadingModal() {
@@ -9,7 +9,12 @@ export default function DashboardLoadingModal() {
w="100%"
mt={'1rem'}
>
<CircularProgress isIndeterminate color="blue.500"/>
<ProgressCircle.Root value={null} size="md">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</Center>
</>
)
src/components/helperComponents/ResetFilterButton.tsx
+5 -5
View File
@@ -9,12 +9,12 @@ import { ratingState, steamRatingState } from "../../stateManagement/ratingState
interface Props {
text?: string
size?: string
variant?: string
colorScheme?: string
size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
variant?: "solid" | "subtle" | "surface" | "outline" | "ghost" | "plain"
colorPalette?: string
}
const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', variant = 'solid', colorScheme = 'gray' }: Props) => {
const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', variant = 'solid', colorPalette = 'gray' }: Props) => {
const gameState = useHookstate(gameDashboardState)
const games = gameState.get()
const admin = useHookstate(adminMode).get()
@@ -58,7 +58,7 @@ const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', var
}
return (
<Button onMouseDown={resetFilters} size={size} variant={variant} colorScheme={colorScheme}>
<Button onMouseDown={resetFilters} size={size} variant={variant} colorPalette={colorPalette}>
{text}
</Button>
)
src/components/helperComponents/SteamAndDeckLogo.tsx
+9 -6
View File
@@ -9,17 +9,19 @@ const SteamAndDeckLogo = (props: ISteamAndDeckLogo) => {
return (
<div>
<Box
as="svg"
role="img"
asChild
width={props.size}
height={props.size}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1080 1080"
fill="#1f2127"
_hover={{
fill: "brand.accent",
fill: "blue.500",
}}
>
<svg
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1080 1080"
fill="#1f2127"
>
<title>SteamAndDeckLogo</title>
<path
fill="url(#_Radial1)"
@@ -97,6 +99,7 @@ const SteamAndDeckLogo = (props: ISteamAndDeckLogo) => {
<stop offset="1" stopColor="#00A6FF" stopOpacity="0.6"></stop>
</linearGradient>
</defs>
</svg>
</Box>
</div>
);