update dependencies and add downloads page, various fixes

src/components/DevErrorPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { Box, Button, Paper, Typography, List, ListItem, ListItemText, IconButton, Chip } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
@@ -18,7 +18,9 @@ function formatLogItem(log: DevLogItem) {
 export default function DevErrorPanel() {
   const [logs, setLogs] = useState<DevLogItem[]>(() => getDevLogs())
   const [open, setOpen] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
   const errorCount = useMemo(() => logs.filter((item) => item.kind !== 'debug').length, [logs])
+  const previousErrorCountRef = useRef(errorCount)
 
   const copyLog = async (log: DevLogItem) => {
     const payload = formatLogItem(log)
@@ -51,7 +53,14 @@ export default function DevErrorPanel() {
   useEffect(() => {
     return subscribeDevLogs((items) => {
       setLogs(items)
-      if (items.length > 0) setOpen(true)
+      const nextErrorCount = items.filter((item) => item.kind !== 'debug').length
+      const hasNewError = nextErrorCount > previousErrorCountRef.current
+      previousErrorCountRef.current = nextErrorCount
+
+      if (hasNewError) {
+        setDismissed(false)
+        setOpen(true)
+      }
     })
   }, [])
 
@@ -87,8 +96,24 @@ export default function DevErrorPanel() {
 
   if (!import.meta.env.DEV) return null
 
+  if (dismissed) {
+    return (
+      <Box sx={{ position: 'fixed', top: 12, right: 12, zIndex: 9999 }}>
+        <Chip
+          label={`Dev Logs${errorCount ? ` (${errorCount})` : ''}`}
+          color={errorCount ? 'error' : 'default'}
+          clickable
+          onClick={() => {
+            setDismissed(false)
+            setOpen(true)
+          }}
+        />
+      </Box>
+    )
+  }
+
   return (
-    <Box sx={{ position: 'fixed', left: { xs: 12, sm: 'auto' }, right: 12, bottom: 12, zIndex: 9999 }}>
+    <Box sx={{ position: 'fixed', top: 12, right: 12, zIndex: 9999 }}>
       <Paper elevation={6} sx={{ minWidth: { xs: 0, sm: 320 }, width: { xs: 'calc(100vw - 24px)', sm: 'auto' }, maxWidth: { xs: 'calc(100vw - 24px)', sm: 640 }, p: 1 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -98,7 +123,7 @@ export default function DevErrorPanel() {
           </Box>
           <Box>
             <Button size="small" onClick={() => { clearDevLogs() }} sx={{ mr: 1 }}>Clear</Button>
-            <IconButton size="small" onClick={() => setOpen((v) => !v)} aria-label="toggle" sx={{ width: 32, height: 32 }}>
+            <IconButton size="small" onClick={() => { setDismissed(true); setOpen(false) }} aria-label="dismiss dev log panel" sx={{ width: 32, height: 32 }}>
               <CloseIcon sx={{ fontSize: 18 }} />
             </IconButton>
           </Box>