Skip to content

Commit 93e03ce

Browse files
arianrhodsandlotarianrhodsandlot
committed
feat: style tweaks
1 parent da5b472 commit 93e03ce

File tree

9 files changed

+383
-360
lines changed

9 files changed

+383
-360
lines changed

‎package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@supabase/supabase-js": "2.49.1",
3838
"@tailwindcss/typography": "0.5.16",
3939
"browser-fs-access": "0.35.0",
40+
"canvas-confetti": "1.9.3",
4041
"clsx": "2.1.1",
4142
"date-fns": "4.1.0",
4243
"drizzle-orm": "0.40.0",
@@ -46,7 +47,7 @@
4647
"hono": "4.7.4",
4748
"jotai": "2.12.2",
4849
"ky": "1.7.5",
49-
"motion": "12.4.11",
50+
"motion": "12.5.0",
5051
"nanoid-dictionary": "4.3.0",
5152
"nostalgist": "0.14.0",
5253
"opendal": "0.47.11",
@@ -68,6 +69,7 @@
6869
"@iconify/tailwind4": "1.0.6",
6970
"@tailwindcss/vite": "4.0.12",
7071
"@tsconfig/vite-react": "3.4.0",
72+
"@types/canvas-confetti": "1.9.0",
7173
"@types/js-cookie": "3.0.6",
7274
"@types/nanoid-dictionary": "4.2.3",
7375
"@types/react": "19.0.10",
@@ -78,7 +80,7 @@
7880
"eslint": "9.22.0",
7981
"libretrodb": "1.0.0",
8082
"lint-staged": "15.4.3",
81-
"miniflare": "3.20250224.0",
83+
"miniflare": "3.20250310.0",
8284
"nanoid": "5.1.3",
8385
"react-server-dom-webpack": "19.0.0",
8486
"sax": "1.4.1",
@@ -87,7 +89,7 @@
8789
"typescript": "5.8.2",
8890
"vite-plugin-cjs-interop": "2.1.6",
8991
"vite-tsconfig-paths": "5.1.4",
90-
"wrangler": "3.114.0",
92+
"wrangler": "3.114.1",
9193
"zx": "8.4.0"
9294
},
9395
"packageManager": "[email protected]",

‎pnpm-lock.yaml

+307-185
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/pages/library/components/game-entry-context-menu.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,16 @@ export function GameEntryContextMenu({ children, rom }: { children: ReactNode; r
4646
</AlertDialog.Description>
4747

4848
<div className='mt-4 flex justify-end gap-3'>
49-
<Button disabled={isMutating} onClick={handleClickConfirmDelete} variant='soft'>
50-
<span className='icon-[mdi--delete]' />
51-
Delete
52-
</Button>
5349
<AlertDialog.Cancel>
5450
<Button disabled={isMutating}>
5551
<span className='icon-[mdi--close]' />
5652
Cancel
5753
</Button>
5854
</AlertDialog.Cancel>
55+
<Button disabled={isMutating} onClick={handleClickConfirmDelete} variant='soft'>
56+
<span className='icon-[mdi--delete]' />
57+
Delete
58+
</Button>
5959
</div>
6060
</AlertDialog.Content>
6161
</AlertDialog.Root>

‎src/pages/library/platform/components/upload-button.tsx

+13-16
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
11
'use client'
2-
import { Dialog } from '@radix-ui/themes'
3-
import { clsx } from 'clsx'
2+
import { Dialog, IconButton } from '@radix-ui/themes'
3+
import { useToggle } from '@react-hookz/web'
44
import { useState } from 'react'
55
import { UploadDialog } from './upload-dialog.tsx'
66

77
export function UploadButton({ platform }: { platform: string }) {
88
const [key, setKey] = useState(Date.now)
9+
const [open, toggleOpen] = useToggle()
910

1011
function handleClick() {
1112
setKey(Date.now)
1213
}
1314

1415
return (
15-
<Dialog.Root>
16-
<Dialog.Trigger>
17-
<button
18-
className={clsx(
19-
'fixed bottom-12 right-12 flex size-12 items-center justify-center rounded-full bg-rose-700 text-2xl text-white shadow',
20-
)}
21-
onClick={handleClick}
22-
type='button'
23-
>
24-
<span className='icon-[mdi--upload]' />
25-
</button>
26-
</Dialog.Trigger>
27-
<UploadDialog key={key} platform={platform} />
28-
</Dialog.Root>
16+
<div className='fixed bottom-12 right-12'>
17+
<Dialog.Root onOpenChange={toggleOpen} open={open}>
18+
<Dialog.Trigger>
19+
<IconButton onClick={handleClick} radius='full' size='4' variant='solid'>
20+
<span className='icon-[mdi--upload] size-5' />
21+
</IconButton>
22+
</Dialog.Trigger>
23+
<UploadDialog key={key} platform={platform} toggleOpen={toggleOpen} />
24+
</Dialog.Root>
25+
</div>
2926
)
3027
}

‎src/pages/library/platform/components/upload-dialog.tsx

+37-60
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22
import { Button, Callout, Code, Dialog, Progress } from '@radix-ui/themes'
3-
import { useToggle } from '@react-hookz/web'
43
import { fileOpen } from 'browser-fs-access'
4+
import confetti from 'canvas-confetti'
55
import clsx from 'clsx'
66
import { chunk } from 'es-toolkit'
77
import ky from 'ky'
@@ -10,10 +10,9 @@ import useSWRMutation from 'swr/mutation'
1010
import { useRouter_UNSTABLE } from 'waku/router/client'
1111
import { platformMap } from '@/constants/platform.ts'
1212

13-
export function UploadDialog({ platform }: { platform: string }) {
13+
export function UploadDialog({ platform, toggleOpen }: { platform: string; toggleOpen: any }) {
1414
const router = useRouter_UNSTABLE()
1515

16-
const [done, toggleDone] = useToggle()
1716
const [files, setFiles] = useState<File[]>([])
1817
const [uploadedFiles, setUploadedFiles] = useState<Record<string, File[]>>({ failure: [], success: [] })
1918

@@ -26,7 +25,7 @@ export function UploadDialog({ platform }: { platform: string }) {
2625
await ky.put(url, { body: formData })
2726
}
2827

29-
const { isMutating, trigger } = useSWRMutation('/api/v1/rom/new', async (url, { arg: files }: { arg: File[] }) => {
28+
const { trigger } = useSWRMutation('/api/v1/rom/new', async (url, { arg: files }: { arg: File[] }) => {
3029
for (const filesChunk of chunk(files, 10)) {
3130
const newUploadedFiles = { ...uploadedFiles }
3231
try {
@@ -36,87 +35,64 @@ export function UploadDialog({ platform }: { platform: string }) {
3635
newUploadedFiles.failure.push(...filesChunk)
3736
}
3837
setUploadedFiles(newUploadedFiles)
39-
if (newUploadedFiles.success.length + newUploadedFiles.failure.length === files.length) {
40-
toggleDone()
41-
}
4238
}
4339
})
4440

45-
function handleClickOk() {
46-
router.reload()
47-
}
48-
4941
async function handleClickSelect() {
5042
const files = await fileOpen({ extensions: platformMap[platform].fileExtensions, multiple: true })
5143
setFiles(files)
5244
await trigger(files)
53-
// router.reload()
45+
toggleOpen()
46+
confetti()
47+
router.reload()
5448
}
5549

56-
let status = ''
50+
function prevendDefaultWhenUploading(event: Event) {
51+
if (files.length > 0) {
52+
event.preventDefault()
53+
}
54+
}
55+
56+
let status = 'loading'
5757
if (files.length === 0) {
5858
status = 'initial'
59-
} else if (isMutating) {
60-
status = 'loading'
61-
} else if (done) {
62-
status = 'done'
6359
}
6460

6561
return (
66-
<Dialog.Content>
62+
<Dialog.Content
63+
aria-describedby={undefined}
64+
onEscapeKeyDown={prevendDefaultWhenUploading}
65+
onPointerDownOutside={prevendDefaultWhenUploading}
66+
>
6767
<Dialog.Title>
6868
{
6969
{
70-
done: 'Done',
7170
initial: 'Select ROMs',
7271
loading: 'Uploading ROMs',
7372
}[status]
7473
}
7574
</Dialog.Title>
7675

77-
<Dialog.Description>
78-
{status === 'initial' ? (
79-
<Callout.Root className={clsx({ hidden: status !== 'initial' })} size='1'>
80-
<Callout.Icon>
81-
<span className='icon-[mdi--information]' />
82-
</Callout.Icon>
83-
<Callout.Text>
84-
<div className='text-xs'>
85-
<div>
86-
You are going to upload ROMs for <b>{platformMap[platform].displayName}</b>.
87-
</div>
88-
<div>We support these file extensions for this platform:</div>
89-
<div className='mt-0.5 flex gap-1'>
90-
{platformMap[platform].fileExtensions.map((extention) => (
91-
<Code key={extention}>{extention}</Code>
92-
))}
93-
</div>
94-
</div>
95-
</Callout.Text>
96-
</Callout.Root>
97-
) : null}
98-
</Dialog.Description>
76+
{status === 'initial' ? (
77+
<Callout.Root className={clsx({ hidden: status !== 'initial' })} size='1'>
78+
<Callout.Icon>
79+
<span className='icon-[mdi--information]' />
80+
</Callout.Icon>
81+
<Callout.Text className='text-xs'>
82+
You are uploading ROMs for <b>{platformMap[platform].displayName}</b>. We support these file extensions for
83+
this platform:
84+
<br />
85+
<span className='inline-flex gap-1 py-2'>
86+
{platformMap[platform].fileExtensions.map((extention) => (
87+
<Code key={extention}>{extention}</Code>
88+
))}
89+
</span>
90+
</Callout.Text>
91+
</Callout.Root>
92+
) : null}
9993

10094
{
10195
{
102-
done: (
103-
<div>
104-
<div className='my-8 flex items-center justify-center gap-2 text-lg text-[var(--theme)]'>
105-
<span>🎉</span>
106-
ROMs uploaded. Enjoy!
107-
</div>
108-
109-
<div className='mt-4 flex justify-end'>
110-
<Dialog.Close onClick={handleClickOk}>
111-
<Button>
112-
<span className='icon-[mdi--check]' />
113-
OK
114-
</Button>
115-
</Dialog.Close>
116-
</div>
117-
</div>
118-
),
119-
12096
initial: (
12197
<div>
12298
<div className='mt-4 flex justify-center'>
@@ -128,7 +104,7 @@ export function UploadDialog({ platform }: { platform: string }) {
128104

129105
<div className='mt-4 flex justify-end'>
130106
<Dialog.Close>
131-
<Button type='button' variant='soft'>
107+
<Button variant='soft'>
132108
<span className='icon-[mdi--close]' />
133109
Cancel
134110
</Button>
@@ -140,6 +116,7 @@ export function UploadDialog({ platform }: { platform: string }) {
140116
loading: (
141117
<div className='my-4'>
142118
<Progress
119+
duration='1s'
143120
size='3'
144121
value={((uploadedFiles.success.length + uploadedFiles.failure.length) / files.length) * 100}
145122
/>

‎src/pages/library/platform/rom/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export async function RomPage({ fileName, id, platform }) {
5555
{launchboxGame?.wikipedia_url ? (
5656
<div>
5757
<a
58-
className='inline-flex items-center gap-2 underline'
58+
className='inline-flex items-center gap-2 text-[var(--theme)] underline'
5959
href={launchboxGame.wikipedia_url}
6060
rel='noreferrer'
6161
target='_blank'

‎src/styles/globals.css

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
1+
@import '@fontsource-variable/inter/index.css';
2+
@import '@fontsource-variable/oswald/index.css';
3+
@import '@fontsource-variable/roboto-slab/index.css';
4+
@import '@fontsource/dseg7-modern/700.css';
5+
@import '@radix-ui/themes/components.css';
6+
@import '@radix-ui/themes/tokens/base.css';
7+
@import '@radix-ui/themes/tokens/colors/mauve.css';
8+
@import '@radix-ui/themes/utilities.css';
19
@import 'tailwindcss';
2-
@plugin "@iconify/tailwind4";
3-
@plugin "@tailwindcss/typography";
4-
@plugin "tailwindcss-motion";
10+
@plugin '@iconify/tailwind4';
11+
@plugin '@tailwindcss/typography';
12+
@plugin 'tailwindcss-motion';
13+
@import './radix-theme.css';
514

615
body {
716
-moz-osx-font-smoothing: grayscale;
817
-webkit-font-smoothing: antialiased;
918
font-family: 'Inter Variable', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
1019
}
1120

12-
body[data-theme="rose"] {
21+
body[data-theme='rose'] {
1322
--theme: var(--color-rose-700);
1423
}
1524

‎src/styles/index.ts

-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1 @@
1-
import '@fontsource-variable/inter/index.css'
2-
import '@fontsource-variable/oswald/index.css'
3-
import '@fontsource-variable/roboto-slab/index.css'
4-
import '@fontsource/dseg7-modern/700.css'
5-
import '@radix-ui/themes/styles.css'
61
import './globals.css'
7-
import './radix-theme.css'

0 commit comments

Comments
 (0)