chore: Implement online validator

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.user
+**/node_modules
+**/build
+**/compile
+**/coverage

.gitignore

@@ -59,6 +59,7 @@ pids
 .clinic/
 .vscode/
 .wrangler/
+.react-router
 build/
 compile/
 dist/

app/Dockerfile

@@ -0,0 +1,14 @@
+# The build context is the root of the project
+FROM node:24-alpine
+WORKDIR /dpkit
+
+COPY pnpm-lock.yaml .
+RUN corepack enable pnpm
+RUN pnpm fetch
+
+COPY . .
+RUN pnpm install:ci
+RUN pnpm build
+
+EXPOSE 8080
+CMD ["node", "app/rpc.ts"]

app/components/Alert/Alert.tsx

@@ -0,0 +1,18 @@
+import { Alert as MantineAlert, Text, Title } from "@mantine/core"
+
+export function Alert(props: { title: string; description: string }) {
+  return (
+    <MantineAlert
+      bd="solid 1px yellow.6"
+      variant="light"
+      color="yellow"
+      title={
+        <Title order={2} fw="bold">
+          {props.title}
+        </Title>
+      }
+    >
+      <Text size="lg">{props.description}</Text>
+    </MantineAlert>
+  )
+}

app/components/Dialog/Dialog.module.css

@@ -0,0 +1,38 @@
+.overlay {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.4);
+  inset: 0;
+}
+
+.content {
+  z-index: 100;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  max-height: calc(100% - 80px);
+  background-color: light-dark(white, var(--mantine-color-dark-6));
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  padding: var(--mantine-spacing-lg);
+}
+
+.handle {
+  width: 60px;
+  height: 6px;
+  background-color: var(--mantine-color-gray-4);
+  border-radius: 100px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.description {
+  margin-bottom: 16px;
+  height: 100%;
+}

app/components/Dialog/Dialog.tsx

@@ -0,0 +1,59 @@
+import { Box, Button, Container, Flex, ScrollArea } from "@mantine/core"
+import { useEffect, useState } from "react"
+import type { ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+import { Drawer as VaulDrawer } from "vaul"
+import classes from "./Dialog.module.css"
+
+export function Dialog(props: {
+  open?: boolean
+  children: ReactNode
+  fullScreen?: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const { t } = useTranslation()
+
+  const snapPoints = [0.5, 1] as const
+  const [snap, setSnap] = useState<number | string | null>(snapPoints[0])
+
+  useEffect(() => {
+    setSnap(props.fullScreen ? snapPoints[1] : snapPoints[0])
+  }, [props.fullScreen])
+
+  return (
+    <VaulDrawer.Root
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      activeSnapPoint={snap}
+      snapPoints={snapPoints as any}
+      setActiveSnapPoint={setSnap}
+      fadeFromIndex={0}
+    >
+      <VaulDrawer.Portal>
+        <VaulDrawer.Overlay className={classes.overlay} />
+        <VaulDrawer.Content className={classes.content}>
+          <Container size="lg" h="100%">
+            <Flex gap={{ base: 20, md: 40 }} direction="column" h="100%">
+              <Box className={classes.handle} />
+              <ScrollArea
+                flex={props.fullScreen ? 1 : undefined}
+                type={props.fullScreen ? "auto" : "never"}
+              >
+                {props.children}
+              </ScrollArea>
+              <Button
+                onClick={() => props.onOpenChange(false)}
+                color="gray"
+                fullWidth
+                variant="outline"
+                size="lg"
+              >
+                {t("Close")}
+              </Button>
+            </Flex>
+          </Container>
+        </VaulDrawer.Content>
+      </VaulDrawer.Portal>
+    </VaulDrawer.Root>
+  )
+}

app/components/Dialog/index.ts

@@ -0,0 +1 @@
+export { Dialog } from "./Dialog.tsx"