refactor: reached same app state using vite

2024-01-28 15:56:19 +01:00
parent 8446ee6c65
commit 5542dce881
27 changed files with 805 additions and 207 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>pihkaal</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "axios": "^1.6.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "vite-tsconfig-paths": "^4.3.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
@@ -33,6 +34,7 @@
    "postcss": "^8.4.31",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.11",
+    "sass": "^1.70.0",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.1.6",
    "vite": "^5.0.12"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
  react-dom:
    specifier: 18.2.0
    version: 18.2.0(react@18.2.0)
+  vite-tsconfig-paths:
+    specifier: ^4.3.1
+    version: 4.3.1(typescript@5.3.3)(vite@5.0.12)
  zod:
    specifier: ^3.22.4
    version: 3.22.4
@@ -67,6 +70,9 @@ devDependencies:
  prettier-plugin-tailwindcss:
    specifier: ^0.5.11
    version: 0.5.11(prettier@3.1.1)
+  sass:
+    specifier: ^1.70.0
+    version: 1.70.0
  tailwindcss:
    specifier: ^3.3.5
    version: 3.4.1
@@ -75,7 +81,7 @@ devDependencies:
    version: 5.3.3
  vite:
    specifier: ^5.0.12
-    version: 5.0.12(@types/node@18.19.6)
+    version: 5.0.12(@types/node@18.19.6)(sass@1.70.0)

 packages:

@@ -102,7 +108,6 @@ packages:
    cpu: [ppc64]
    os: [aix]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/android-arm64@0.19.12:
@@ -111,7 +116,6 @@ packages:
    cpu: [arm64]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/android-arm@0.19.12:
@@ -120,7 +124,6 @@ packages:
    cpu: [arm]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/android-x64@0.19.12:
@@ -129,7 +132,6 @@ packages:
    cpu: [x64]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/darwin-arm64@0.19.12:
@@ -138,7 +140,6 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/darwin-x64@0.19.12:
@@ -147,7 +148,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/freebsd-arm64@0.19.12:
@@ -156,7 +156,6 @@ packages:
    cpu: [arm64]
    os: [freebsd]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/freebsd-x64@0.19.12:
@@ -165,7 +164,6 @@ packages:
    cpu: [x64]
    os: [freebsd]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-arm64@0.19.12:
@@ -174,7 +172,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-arm@0.19.12:
@@ -183,7 +180,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-ia32@0.19.12:
@@ -192,7 +188,6 @@ packages:
    cpu: [ia32]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-loong64@0.19.12:
@@ -201,7 +196,6 @@ packages:
    cpu: [loong64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-mips64el@0.19.12:
@@ -210,7 +204,6 @@ packages:
    cpu: [mips64el]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-ppc64@0.19.12:
@@ -219,7 +212,6 @@ packages:
    cpu: [ppc64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-riscv64@0.19.12:
@@ -228,7 +220,6 @@ packages:
    cpu: [riscv64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-s390x@0.19.12:
@@ -237,7 +228,6 @@ packages:
    cpu: [s390x]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/linux-x64@0.19.12:
@@ -246,7 +236,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/netbsd-x64@0.19.12:
@@ -255,7 +244,6 @@ packages:
    cpu: [x64]
    os: [netbsd]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/openbsd-x64@0.19.12:
@@ -264,7 +252,6 @@ packages:
    cpu: [x64]
    os: [openbsd]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/sunos-x64@0.19.12:
@@ -273,7 +260,6 @@ packages:
    cpu: [x64]
    os: [sunos]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/win32-arm64@0.19.12:
@@ -282,7 +268,6 @@ packages:
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/win32-ia32@0.19.12:
@@ -291,7 +276,6 @@ packages:
    cpu: [ia32]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@esbuild/win32-x64@0.19.12:
@@ -300,7 +284,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
@@ -441,7 +424,6 @@ packages:
    cpu: [arm]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-android-arm64@4.9.6:
@@ -449,7 +431,6 @@ packages:
    cpu: [arm64]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-darwin-arm64@4.9.6:
@@ -457,7 +438,6 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-darwin-x64@4.9.6:
@@ -465,7 +445,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-linux-arm-gnueabihf@4.9.6:
@@ -473,7 +452,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-linux-arm64-gnu@4.9.6:
@@ -481,7 +459,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-linux-arm64-musl@4.9.6:
@@ -489,7 +466,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-linux-riscv64-gnu@4.9.6:
@@ -497,7 +473,6 @@ packages:
    cpu: [riscv64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-linux-x64-gnu@4.9.6:
@@ -505,7 +480,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-linux-x64-musl@4.9.6:
@@ -513,7 +487,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-win32-arm64-msvc@4.9.6:
@@ -521,7 +494,6 @@ packages:
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-win32-ia32-msvc@4.9.6:
@@ -529,7 +501,6 @@ packages:
    cpu: [ia32]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@rollup/rollup-win32-x64-msvc@4.9.6:
@@ -537,7 +508,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /@rushstack/eslint-patch@1.6.1:
@@ -676,7 +646,6 @@ packages:

  /@types/estree@1.0.5:
    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-    dev: true

  /@types/json-schema@7.0.15:
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -690,7 +659,6 @@ packages:
    resolution: {integrity: sha512-X36s5CXMrrJOs2lQCdDF68apW4Rfx9ixYMawlepwmE4Anezv/AV2LSpKD1Ub8DAc+urp5bk0BGZ6NtmBitfnsg==}
    dependencies:
      undici-types: 5.26.5
-    dev: true

  /@types/prop-types@15.7.11:
    resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
@@ -860,7 +828,7 @@ packages:
      vite: ^4 || ^5
    dependencies:
      '@swc/core': 1.3.106
-      vite: 5.0.12(@types/node@18.19.6)
+      vite: 5.0.12(@types/node@18.19.6)(sass@1.70.0)
    transitivePeerDependencies:
      - '@swc/helpers'
    dev: true
@@ -920,7 +888,6 @@ packages:
    dependencies:
      normalize-path: 3.0.0
      picomatch: 2.3.1
-    dev: true

  /arg@5.0.2:
    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
@@ -1076,7 +1043,6 @@ packages:
  /binary-extensions@2.2.0:
    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
    engines: {node: '>=8'}
-    dev: true

  /brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -1096,7 +1062,6 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      fill-range: 7.0.1
-    dev: true

  /browserslist@4.22.2:
    resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
@@ -1152,7 +1117,6 @@ packages:
      readdirp: 3.6.0
    optionalDependencies:
      fsevents: 2.3.3
-    dev: true

  /clsx@2.1.0:
    resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
@@ -1230,7 +1194,6 @@ packages:
        optional: true
    dependencies:
      ms: 2.1.2
-    dev: true

  /deep-is@0.1.4:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@@ -1434,7 +1397,6 @@ packages:
      '@esbuild/win32-arm64': 0.19.12
      '@esbuild/win32-ia32': 0.19.12
      '@esbuild/win32-x64': 0.19.12
-    dev: true

  /escalade@3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -1770,7 +1732,6 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      to-regex-range: 5.0.1
-    dev: true

  /find-up@5.0.0:
    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
@@ -1839,7 +1800,6 @@ packages:
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /function-bind@1.1.2:
@@ -1888,7 +1848,6 @@ packages:
    engines: {node: '>= 6'}
    dependencies:
      is-glob: 4.0.3
-    dev: true

  /glob-parent@6.0.2:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -1957,6 +1916,10 @@ packages:
      slash: 3.0.0
    dev: true

+  /globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    dev: false
+
  /gopd@1.0.1:
    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
    dependencies:
@@ -2015,6 +1978,9 @@ packages:
    engines: {node: '>= 4'}
    dev: true

+  /immutable@4.3.5:
+    resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
+
  /import-fresh@3.3.0:
    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
    engines: {node: '>=6'}
@@ -2074,7 +2040,6 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      binary-extensions: 2.2.0
-    dev: true

  /is-boolean-object@1.1.2:
    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -2105,7 +2070,6 @@ packages:
  /is-extglob@2.1.1:
    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /is-finalizationregistry@1.0.2:
    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
@@ -2130,7 +2094,6 @@ packages:
    engines: {node: '>=0.10.0'}
    dependencies:
      is-extglob: 2.1.1
-    dev: true

  /is-map@2.0.2:
    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
@@ -2151,7 +2114,6 @@ packages:
  /is-number@7.0.0:
    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
    engines: {node: '>=0.12.0'}
-    dev: true

  /is-path-inside@3.0.3:
    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -2402,7 +2364,6 @@ packages:

  /ms@2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true

  /ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -2420,7 +2381,6 @@ packages:
    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
-    dev: true

  /natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@@ -2433,7 +2393,6 @@ packages:
  /normalize-path@3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /normalize-range@0.1.2:
    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -2585,12 +2544,10 @@ packages:

  /picocolors@1.0.0:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true

  /picomatch@2.3.1:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
    engines: {node: '>=8.6'}
-    dev: true

  /pify@2.3.0:
    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
@@ -2670,7 +2627,6 @@ packages:
      nanoid: 3.3.7
      picocolors: 1.0.0
      source-map-js: 1.0.2
-    dev: true

  /prelude-ls@1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -2788,7 +2744,6 @@ packages:
    engines: {node: '>=8.10.0'}
    dependencies:
      picomatch: 2.3.1
-    dev: true

  /reflect.getprototypeof@1.0.4:
    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
@@ -2875,7 +2830,6 @@ packages:
      '@rollup/rollup-win32-ia32-msvc': 4.9.6
      '@rollup/rollup-win32-x64-msvc': 4.9.6
      fsevents: 2.3.3
-    dev: true

  /run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -2902,6 +2856,15 @@ packages:
      is-regex: 1.1.4
    dev: true

+  /sass@1.70.0:
+    resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.5
+      source-map-js: 1.0.2
+
  /scheduler@0.23.0:
    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
    dependencies:
@@ -2973,7 +2936,6 @@ packages:
  /source-map-js@1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /string-width@4.2.3:
    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -3140,7 +3102,6 @@ packages:
    engines: {node: '>=8.0'}
    dependencies:
      is-number: 7.0.0
-    dev: true

  /ts-api-utils@1.0.3(typescript@5.3.3):
    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
@@ -3155,6 +3116,19 @@ packages:
    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
    dev: true

+  /tsconfck@3.0.1(typescript@5.3.3):
+    resolution: {integrity: sha512-7ppiBlF3UEddCLeI1JRx5m2Ryq+xk4JrZuq4EuYXykipebaq1dV0Fhgr1hb7CkmHt32QSgOZlcqVLEtHBG4/mg==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 5.3.3
+    dev: false
+
  /tsconfig-paths@3.15.0:
    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
    dependencies:
@@ -3218,7 +3192,6 @@ packages:
    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
    engines: {node: '>=14.17'}
    hasBin: true
-    dev: true

  /unbox-primitive@1.0.2:
    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
@@ -3231,7 +3204,6 @@ packages:

  /undici-types@5.26.5:
    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
-    dev: true

  /update-browserslist-db@1.0.13(browserslist@4.22.2):
    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
@@ -3254,7 +3226,24 @@ packages:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
    dev: true

-  /vite@5.0.12(@types/node@18.19.6):
+  /vite-tsconfig-paths@4.3.1(typescript@5.3.3)(vite@5.0.12):
+    resolution: {integrity: sha512-cfgJwcGOsIxXOLU/nELPny2/LUD/lcf1IbfyeKTv2bsupVbTH/xpFtdQlBmIP1GEK2CjjLxYhFfB+QODFAx5aw==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      debug: 4.3.4
+      globrex: 0.1.2
+      tsconfck: 3.0.1(typescript@5.3.3)
+      vite: 5.0.12(@types/node@18.19.6)(sass@1.70.0)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: false
+
+  /vite@5.0.12(@types/node@18.19.6)(sass@1.70.0):
    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
@@ -3286,9 +3275,9 @@ packages:
      esbuild: 0.19.12
      postcss: 8.4.33
      rollup: 4.9.6
+      sass: 1.70.0
    optionalDependencies:
      fsevents: 2.3.3
-    dev: true

  /which-boxed-primitive@1.0.2:
    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,39 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import "./App.css";
+import { MusicPlayer } from "./components/MusicPlayer";
+import { MusicVisualizer } from "./components/MusicVisualizer";
+import { Nvim } from "./components/Nvim/Nvim";
+import { Terminal } from "./components/Terminal";
+import { AppContextProvider } from "./context/AppContext";

 function App() {
-  const [count, setCount] = useState(0);
-
  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank"></a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount(count => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <AppContextProvider>
+      <main
+        className={
+          "insets-0 fixed flex h-screen w-screen flex-col gap-3 bg-[url(/wallpaper.jpg)] bg-cover p-3 font-body leading-[26px]"
+        }
+      >
+        <nav className="border border-red-500">toolbar</nav>
+
+        <Terminal className="flex-1">
+          <Nvim />
+        </Terminal>
+
+        <div className="flex gap-3">
+          <Terminal className="flex-1 select-none">
+            <MusicPlayer
+              title="Last Tango in Kyoto"
+              artist="Floating Bits"
+              album="Last Tango in Kyoto"
+              duration={93}
+            />
+          </Terminal>
+
+          <Terminal className="flex-1">
+            <MusicVisualizer />
+          </Terminal>
+        </div>
+      </main>
+    </AppContextProvider>
  );
 }

--- a/src/components/MusicPlayer.tsx
+++ b/src/components/MusicPlayer.tsx
@@ -0,0 +1,85 @@
+import { useTerminal } from "~/context/TerminalContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+import { TerminalBoxElement } from "~/utils/terminal/elements/box";
+import { useEffect, useState } from "react";
+
+const theme = {
+  black: "#45475a",
+  red: "#f38ba8",
+  green: "#a6e3a1",
+  yellow: "#f9e2af",
+  blue: "#89bafa",
+  magenta: "#f5c2e7",
+  cyan: "#94e2d5",
+  white: "#bac2de",
+  grey: "#585B70",
+  lightGrey: "#a6adc8",
+};
+
+const formatDurationMSS = (duration: number) => {
+  const minutes = Math.floor(duration / 60);
+  const seconds = duration % 60;
+
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+export const MusicPlayer = (props: {
+  title: string;
+  artist: string;
+  album: string;
+  duration: number;
+}) => {
+  const { cols } = useTerminal();
+  const canvas = new TerminalRenderer(cols, 5);
+
+  const [played, setPlayed] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPlayed(x => Math.min(props.duration, x + 1));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [setPlayed, props.duration]);
+
+  canvas.writeElement(
+    new TerminalBoxElement(canvas.width, canvas.height),
+    0,
+    0,
+  );
+
+  canvas.write(1, 0, "Playback".substring(0, Math.min(8, canvas.width - 2)), {
+    foreground: theme.magenta,
+  });
+
+  const inner = new TerminalRenderer(canvas.width - 2, canvas.height - 2);
+  // Title and Artist
+  inner.write(2, 0, `${props.title} · ${props.artist}`, {
+    foreground: theme.cyan,
+    fontWeight: 700,
+  });
+  inner.apply(0, 0, {
+    char: "\udb81\udc0a",
+    foreground: theme.cyan,
+    fontWeight: 800,
+  });
+
+  // Album
+  inner.write(0, 1, props.album, { foreground: theme.yellow });
+
+  // Bar
+  inner.write(0, 2, " ".repeat(inner.width), {
+    foreground: theme.green,
+    background: "#55576d",
+  });
+  inner.write(0, 2, " ".repeat((inner.width * played) / props.duration), {
+    foreground: "#55576d",
+    background: theme.green,
+  });
+  const time = `${formatDurationMSS(played)}/${formatDurationMSS(
+    props.duration,
+  )}`;
+  inner.write(inner.width / 2 - time.length / 2, 2, time, { fontWeight: 800 });
+
+  canvas.writeElement(inner, 1, 1);
+  return <p>{canvas.render()}</p>;
+};
--- a/src/components/MusicVisualizer.tsx
+++ b/src/components/MusicVisualizer.tsx
@@ -0,0 +1,5 @@
+import { type FunctionComponent } from "react";
+
+export const MusicVisualizer: FunctionComponent = () => (
+  <div className="h-full w-full bg-red-500"></div>
+);
--- a/src/components/Nvim/Nvim.tsx
+++ b/src/components/Nvim/Nvim.tsx
@@ -0,0 +1,19 @@
+import { NvimStatusBar } from "./NvimStatusBar";
+import { NvimTree } from "./NvimTree";
+
+export const Nvim = () => {
+  return (
+    <div>
+      <div className="flex">
+        <div className="w-fit">
+          <NvimTree />
+        </div>
+        <div className="flex-1"></div>
+      </div>
+
+      <div className="h-fit bg-[#29293c]">
+        <NvimStatusBar label="NORMAL" fileName="README.md" />
+      </div>
+    </div>
+  );
+};
--- a/src/components/Nvim/NvimStatusBar.tsx
+++ b/src/components/Nvim/NvimStatusBar.tsx
@@ -0,0 +1,31 @@
+import { useTerminal } from "~/context/TerminalContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+import { theme } from "~/utils/terminal/theme";
+
+export const NvimStatusBar = (props: { label: string; fileName: string }) => {
+  const { cols: width } = useTerminal();
+  const canvas = new TerminalRenderer(width, 1);
+
+  canvas.write(0, 0, ` ${props.label} `, {
+    background: theme.blue,
+    foreground: "#000",
+  });
+  canvas.write(props.label.length + 2, 0, "\ue0ba", {
+    background: theme.blue,
+    foreground: "#474353",
+  });
+  canvas.write(props.label.length + 3, 0, "\ue0ba", {
+    background: "#474353",
+    foreground: "#373040",
+  });
+  canvas.write(props.label.length + 4, 0, ` ${props.fileName} `, {
+    background: "#373040",
+    foreground: theme.white,
+  });
+  canvas.write(props.label.length + 6 + props.fileName.length, 0, "\ue0ba", {
+    background: "#373040",
+    foreground: "#29293c",
+  });
+
+  return <p>{canvas.render()}</p>;
+};
--- a/src/components/Nvim/NvimTree.tsx
+++ b/src/components/Nvim/NvimTree.tsx
@@ -0,0 +1,158 @@
+import { useState, useEffect } from "react";
+import { useApp } from "~/context/AppContext";
+import { useTerminal } from "~/context/TerminalContext";
+import { FILE_STYLES, type File } from "~/utils/filesystem";
+import { type Cell } from "~/utils/terminal/cell";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+import { theme } from "~/utils/terminal/theme";
+import { type Manifest } from "~/utils/types";
+
+const PATH_FOLDED: Cell = {
+  char: "",
+  foreground: theme.grey,
+};
+
+const PATH_UNFOLDED: Cell = {
+  char: "",
+  foreground: theme.blue,
+};
+
+const buildFileTree = (manifest: Manifest): Array<File> => {
+  if (manifest === undefined) return [];
+
+  const files: Array<File> = [];
+  manifest.projects.forEach(project => {
+    if (project.name === "pihkaal") {
+      project.files.forEach(file => {
+        files.push({
+          name: file,
+          type: "md",
+        });
+      });
+    } else {
+      files.push({
+        name: project.name,
+        type: "directory",
+        folded: true,
+        children: project.files.map(file => ({
+          name: file,
+          type: "md",
+        })),
+      });
+    }
+  });
+
+  return files;
+};
+
+export const NvimTree = () => {
+  const manifest = useApp();
+
+  const [selected, setSelected] = useState(0);
+  const [files, setFiles] = useState(buildFileTree(manifest));
+
+  const { cols: width, rows: height } = useTerminal();
+  const canvas = new TerminalRenderer(width * 0.2, height - 2, {
+    background: "#0000001a",
+  });
+
+  const tree = new TerminalRenderer(canvas.width - 3, height - 1);
+  tree.write(0, selected, " ".repeat(tree.width), { background: "#504651" });
+
+  let y = 0;
+  let indent = 0;
+  const renderTree = (files: Array<File>) => {
+    files.forEach(file => {
+      tree.apply(2 + indent * 2, y, FILE_STYLES[file.type]);
+
+      if (file.type === "directory") {
+        tree.apply(indent * 2, y, file.folded ? PATH_FOLDED : PATH_UNFOLDED);
+        tree.write(4 + indent * 2, y, file.name, {
+          foreground: FILE_STYLES.directory.foreground,
+        });
+
+        y++;
+        if (!file.folded) {
+          indent++;
+          renderTree(file.children);
+          indent--;
+        }
+      } else {
+        if (file.name === "README.md") {
+          tree.write(4 + indent * 2, y, file.name, {
+            foreground: theme.yellow,
+            fontWeight: 800,
+          });
+        } else {
+          tree.write(4 + indent * 2, y, file.name);
+        }
+        y++;
+      }
+    });
+  };
+
+  useEffect(() => {
+    const onScroll = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case "ArrowUp":
+          setSelected(x => Math.max(0, x - 1));
+          break;
+
+        case "ArrowDown":
+          setSelected(x => Math.min(y - 1, x + 1));
+          break;
+
+        case "Enter":
+          let y = 0;
+          const findFile = (files: Array<File>): File | null => {
+            for (const f of files) {
+              if (y === selected) {
+                return f;
+              }
+              y++;
+              if (f.type === "directory" && !f.folded) {
+                const found = findFile(f.children);
+                if (found) return found;
+              }
+            }
+
+            return null;
+          };
+
+          const current = findFile(files);
+          if (!current) {
+            setSelected(0);
+            return;
+          }
+
+          if (current.type === "directory") {
+            current.folded = !current.folded;
+            setFiles([...files]);
+          }
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", onScroll);
+
+    return () => {
+      window.removeEventListener("keydown", onScroll);
+    };
+  });
+
+  renderTree(files);
+
+  canvas.writeElement(tree, 2, 1);
+
+  return <p>{canvas.render()}</p>;
+};
+
+/*
+  .sort((a, b) => a.name.localeCompare(b.name)).sort((a, b) =>
+      a.type === "directory" && b.type !== "directory"
+        ? -1
+        : a.type !== "directory" && b.type === "directory"
+          ? 1
+          : 0,
+    ),
+*/
--- a/src/components/Terminal.tsx
+++ b/src/components/Terminal.tsx
@@ -0,0 +1,64 @@
+import { useRef, useState, useEffect, type ReactNode } from "react";
+import clsx from "clsx";
+import { TerminalContextProvider } from "~/context/TerminalContext";
+
+export const Terminal = (props: {
+  children?: ReactNode;
+  className?: string;
+}) => {
+  const terminalRef = useRef<HTMLDivElement>(null);
+
+  const [size, setSize] = useState<{ cols: number; rows: number }>();
+
+  useEffect(() => {
+    const precision = 300;
+
+    const calculateSize = () => {
+      if (!terminalRef.current) return;
+
+      const node = document.createElement("span");
+      node.style.color = "transparent";
+      node.style.position = "absolute";
+      node.textContent = "A".repeat(precision);
+
+      terminalRef.current.appendChild(node);
+
+      setSize({
+        cols: Math.floor(
+          (terminalRef.current.offsetWidth - 4) /
+            (node.offsetWidth / precision),
+        ),
+        rows: Math.floor(
+          (terminalRef.current.offsetHeight - 4) / node.offsetHeight,
+        ),
+      });
+
+      node.remove();
+    };
+
+    calculateSize();
+
+    setTimeout(() => calculateSize(), 1);
+
+    window.addEventListener("resize", calculateSize);
+
+    return () => {
+      window.removeEventListener("resize", calculateSize);
+    };
+  }, []);
+
+  return (
+    <TerminalContextProvider value={size}>
+      <div
+        ref={terminalRef}
+        className={clsx(
+          "overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
+          props.className,
+        )}
+        style={{ backdropFilter: "blur(2px)" }}
+      >
+        {size && props.children}
+      </div>
+    </TerminalContextProvider>
+  );
+};
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable react-refresh/only-export-components */
+import {
+  createContext,
+  useEffect,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react";
+import axios from "axios";
+import { type Manifest } from "~/utils/types";
+
+const AppContext = createContext<Manifest | null>(null);
+
+export const AppContextProvider = (props: {
+  children: Array<ReactNode> | ReactNode;
+}) => {
+  const [manifest, setManifest] = useState<Manifest | null>(null);
+
+  useEffect(() => {
+    void axios
+      .get<Manifest>(
+        "https://raw.githubusercontent.com/pihkaal/pihkaal/main/manifest.json",
+      )
+      .then(x => {
+        setManifest(x.data);
+        console.log(x.data);
+      });
+  }, []);
+
+  return (
+    <AppContext.Provider value={manifest}>
+      {manifest && props.children}
+    </AppContext.Provider>
+  );
+};
+
+export const useApp = () => {
+  const context = useContext(AppContext);
+  if (!context) throw new Error("useApp must be used inside the app lol");
+
+  return context;
+};
--- a/src/context/TerminalContext.tsx
+++ b/src/context/TerminalContext.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext } from "react";
+
+const TerminalContext = createContext<
+  { cols: number; rows: number } | undefined
+>(undefined);
+
+export const TerminalContextProvider = TerminalContext.Provider;
+
+export const useTerminal = () => {
+  const context = useContext(TerminalContext);
+  if (!context)
+    throw new Error("useTerminal must be used inside a Terminal component");
+
+  return context;
+};
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
--- a/src/index.scss
+++ b/src/index.scss
@@ -0,0 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: mono;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+}
+
+@font-face {
+  font-family: "JetBrainsMono";
+  src:
+    url("/fonts/JetBrainsMonoNFM-Bold.woff2") format("woff2"),
+    url("/fonts/JetBrainsMonoNFM-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "JetBrainsMono";
+  src:
+    url("/fonts/JetBrainsMonoNFM-Regular.woff2") format("woff2"),
+    url("/fonts/JetBrainsMonoNFM-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "JetBrainsMono";
+  src:
+    url("/fonts/JetBrainsMonoNFM-Medium.woff2") format("woff2"),
+    url("/fonts/JetBrainsMonoNFM-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import "./index.css";
+import "./index.scss";

 ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
--- a/src/utils/filesystem.ts
+++ b/src/utils/filesystem.ts
@@ -0,0 +1,32 @@
+import { type Cell } from "./terminal/cell";
+import { theme } from "./terminal/theme";
+
+export const FILE_STYLES = {
+  directory: {
+    char: "\ue6ad", //  \ue6ad ||| \ueaf6
+    foreground: theme.blue,
+  },
+  md: {
+    char: "\ue73e",
+    foreground: theme.blue,
+  },
+  asc: {
+    char: "\uf43d",
+    foreground: theme.yellow,
+  },
+} as const satisfies Record<string, Cell>;
+
+export type FileType = keyof typeof FILE_STYLES;
+
+export type File = {
+  name: string;
+} & (
+  | {
+      type: Exclude<FileType, "directory">;
+    }
+  | {
+      type: "directory";
+      children: Array<File>;
+      folded: boolean;
+    }
+);
--- a/src/utils/math.ts
+++ b/src/utils/math.ts
@@ -0,0 +1,7 @@
+export const clamp = (v: number, min: number, max: number): number =>
+  Math.min(Math.max(min, v), max);
+
+export const clamp01 = (v: number): number => clamp(v, 0, 1);
+
+export const floorAll = (...xs: Array<number>): Array<number> =>
+  xs.map(Math.floor);
--- a/src/utils/terminal/cell.ts
+++ b/src/utils/terminal/cell.ts
@@ -0,0 +1,9 @@
+export type Cell = {
+  char: string;
+} & CellStyle;
+
+export type CellStyle = Partial<{
+  foreground: string;
+  background: string;
+  fontWeight: number;
+}>;
--- a/src/utils/terminal/element.ts
+++ b/src/utils/terminal/element.ts
@@ -0,0 +1,7 @@
+import { type Cell } from "./cell";
+
+export interface TerminalElement {
+  readonly data: Array<Array<Cell>>;
+  readonly width: number;
+  readonly height: number;
+}
--- a/src/utils/terminal/elements/box.ts
+++ b/src/utils/terminal/elements/box.ts
@@ -0,0 +1,38 @@
+import { type Cell, type CellStyle } from "../cell";
+import { TerminalRenderer } from "../renderer";
+import { type TerminalElement } from "../element";
+
+export class TerminalBoxElement implements TerminalElement {
+  public readonly data: Array<Array<Cell>>;
+
+  constructor(
+    public readonly width: number,
+    public readonly height: number,
+    style: CellStyle = {},
+  ) {
+    const canvas = new TerminalRenderer(width, height, style);
+
+    if (width == 1 && height > 1) {
+      for (let y = 0; y < height - 1; y++) {
+        canvas.write(0, y, "│");
+      }
+    } else if (height == 1 && width > 1) {
+      canvas.write(0, 0, "─".repeat(width - 2));
+    } else {
+      canvas.write(0, 0, "┌");
+      canvas.write(width - 1, 0, "┐");
+      canvas.write(0, height - 1, "└");
+      canvas.write(width - 1, height - 1, "┘");
+
+      canvas.write(1, 0, "─".repeat(width - 2));
+      canvas.write(1, height - 1, "─".repeat(width - 2));
+
+      for (let y = 1; y < height - 1; y++) {
+        canvas.write(0, y, "│");
+        canvas.write(width - 1, y, "│");
+      }
+    }
+
+    this.data = canvas.data;
+  }
+}
--- a/src/utils/terminal/renderer.tsx
+++ b/src/utils/terminal/renderer.tsx
@@ -0,0 +1,124 @@
+import { type ReactNode } from "react";
+import { floorAll } from "../math";
+import { type CellStyle, type Cell } from "./cell";
+import { type TerminalElement } from "./element";
+
+export class TerminalRenderer implements TerminalElement {
+  public readonly data: Array<Array<Cell>>;
+
+  constructor(
+    public readonly width: number,
+    public readonly height: number,
+    public readonly defaultStyle: CellStyle = {},
+  ) {
+    [this.width, this.height] = floorAll(this.width, this.height);
+
+    this.data = new Array(this.height).fill(0).map(() =>
+      new Array<Cell>(this.width).fill({
+        char: " ",
+        ...defaultStyle,
+      }),
+    );
+  }
+
+  apply(x: number, y: number, cell: Partial<Cell>): void {
+    [x, y] = floorAll(x, y);
+
+    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
+
+    this.data[y][x] = {
+      ...this.data[y][x],
+      ...cell,
+    };
+  }
+
+  write(x: number, y: number, text: string, style: CellStyle = {}): void {
+    [x, y] = floorAll(x, y);
+
+    for (let i = 0; i < text.length; i++) {
+      this.apply(x + i, y, {
+        char: text[i],
+        ...style,
+      });
+    }
+  }
+
+  writeFilter(
+    x: number,
+    y: number,
+    text: string,
+    filter: (cell: Cell) => Cell,
+  ): void {
+    [x, y] = floorAll(x, y);
+
+    for (let i = 0; i < text.length; i++) {
+      this.apply(x + i, y, {
+        ...filter(this.data[y][x + i]),
+        char: text[i],
+      });
+    }
+  }
+
+  writeElement(canvas: TerminalElement, dx: number, dy: number): void {
+    [dx, dy] = floorAll(dx, dy);
+
+    for (let y = 0; y < canvas.height; y++) {
+      for (let x = 0; x < canvas.width; x++) {
+        this.apply(dx + x, dy + y, canvas.data[y][x]);
+      }
+    }
+  }
+
+  subCanvas(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+  ): TerminalRenderer {
+    [x, y, width, height] = floorAll(x, y, width, height);
+
+    const canvas = new TerminalRenderer(width, height);
+    for (let cy = 0; cy < height; cy++) {
+      for (let cx = 0; cx < width; cx++) {
+        canvas.apply(cx, cy, this.data[y + cy][x + cx]);
+      }
+    }
+
+    return canvas;
+  }
+
+  render(): Array<ReactNode> {
+    const nodes: Array<ReactNode> = [];
+
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const cell = this.data[y][x];
+        /*
+        const span = document.createElement("span");
+        span.innerHTML = cell.char;
+        span.style.color = cell.foreground ?? "unset";
+        span.style.background = cell.background ?? "unset";
+        span.style.fontWeight = String(cell.fontWeight ?? "unset");
+
+        target.appendChild(span);
+        */
+        nodes.push(
+          <span
+            key={`${x}-${y}`}
+            style={{
+              color: cell.foreground,
+              background: cell.background,
+              fontWeight: cell.fontWeight,
+            }}
+          >
+            {cell.char}
+          </span>,
+        );
+      }
+
+      nodes.push(<br key={y} />);
+    }
+
+    return nodes;
+  }
+}
--- a/src/utils/terminal/theme.ts
+++ b/src/utils/terminal/theme.ts
@@ -0,0 +1,12 @@
+export const theme = {
+  black: "#45475a",
+  red: "#f38ba8",
+  green: "#a6e3a1",
+  yellow: "#f9e2af",
+  blue: "#89bafa",
+  magenta: "#f5c2e7",
+  cyan: "#94e2d5",
+  white: "#bac2de",
+  grey: "#585B70",
+  lightGrey: "#a6adc8",
+};
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -0,0 +1,6 @@
+export type Manifest = {
+  projects: Array<{
+    name: string;
+    files: Array<string>;
+  }>;
+};
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import { type Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";

 const config = {
-  content: ["./src/**/*.tsx"],
+  content: ["index.html", "./src/**/*.tsx"],
  theme: {
    extend: {
      fontSize: {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,12 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import tsconfigPaths from "vite-tsconfig-paths";

 const config = defineConfig({
-  plugins: [react()],
+  plugins: [tsconfigPaths(), react()],
 });

 export default config;