♻️(frontend) starting a bit more structured frontend app

the idea is to use react aria, panda-css, react query and wouter as a
base, in addition to livekit react components

this is still mostly wip but it's usable:

- homepage shows a login link to create a room
- before joining a room you are asked to configure your audio/video/user
name
- note that if you directly go to a a conference url it creates it even
if you are not logged in… very secured!

src/frontend/panda.config.ts

@@ -0,0 +1,69 @@
+import pandaPreset from '@pandacss/preset-panda'
+import { defineConfig, defineTokens } from '@pandacss/dev'
+
+export default defineConfig({
+  preflight: true,
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  jsxFramework: 'react',
+  outdir: 'src/styled-system',
+  conditions: {
+    extend: {
+      // React Aria builds upon data attributes instead of css pseudo-classes, make sure to only work based on react aria stuff
+      hover: '&:is([data-hovered])',
+      focus: '&:is([data-focused])',
+      focusVisible: '&:is([data-focus-visible])',
+      disabled: '&:is([data-disabled])',
+      pressed: '&:is([data-pressed])',
+    },
+  },
+  theme: {
+    ...pandaPreset.theme,
+    tokens: defineTokens({
+      ...pandaPreset.theme.tokens,
+      spacing: {
+        0: { value: '0rem' },
+        0.125: { value: '0.125rem' },
+        0.25: { value: '0.25rem' },
+        0.375: { value: '0.375rem' },
+        0.5: { value: '0.5rem' },
+        0.75: { value: '0.75rem' },
+        1: { value: '1rem' },
+        1.25: { value: '1.25rem' },
+        1.5: { value: '1.5rem' },
+        1.75: { value: '1.75rem' },
+        2: { value: '2rem' },
+        2.25: { value: '2.25rem' },
+        2.5: { value: '2.5rem' },
+        2.75: { value: '2.75rem' },
+        3: { value: '3rem' },
+        3.5: { value: '3.5rem' },
+        4: { value: '4rem' },
+        5: { value: '5rem' },
+        6: { value: '6rem' },
+        7: { value: '7rem' },
+        8: { value: '8rem' },
+        9: { value: '9rem' },
+        10: { value: '10rem' },
+        12: { value: '12rem' },
+        14: { value: '14rem' },
+        16: { value: '16rem' },
+        20: { value: '20rem' },
+        24: { value: '24rem' },
+        28: { value: '28rem' },
+        32: { value: '32rem' },
+        36: { value: '36rem' },
+        40: { value: '40rem' },
+        44: { value: '44rem' },
+        48: { value: '48rem' },
+        52: { value: '52rem' },
+        56: { value: '56rem' },
+        60: { value: '60rem' },
+        64: { value: '64rem' },
+        72: { value: '72rem' },
+        80: { value: '80rem' },
+        96: { value: '96rem' },
+      },
+    }),
+  },
+})