2025-02-26

2025-02-26 23:25:48 +01:00 · 2025-02-26 23:25:48 +01:00 · a4a99789a9
commit a4a99789a9
parent ff2a3a25e5
23 changed files with 294 additions and 298 deletions
--- a/.woodpecker/publish_instable.yaml
+++ b/.woodpecker/publish_instable.yaml
@ -8,7 +8,7 @@ steps:
    pull: true
    settings:
      auto_tag: true
-      cache: false
+      cache: true
      registry: git.gcch.fr
      repo: gcch/journal-media-vue
      username:
--- a/.zed/settings.json
+++ b/.zed/settings.json
@ -7,6 +7,10 @@
    "..."
  ],
  "languages": {
+    "CSS": {
+      "formatter": null,
+      "format_on_save": "off"
+    },
    "Vue.js": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true,
--- a/bun.lock
+++ b/bun.lock
@ -4,45 +4,45 @@
    "": {
      "name": "journal-media",
      "dependencies": {
-        "@effect/platform": "^0.77.2",
-        "@effect/sql-drizzle": "^0.29.2",
-        "a11y-dialog": "^8.1.1",
-        "drizzle-orm": "^0.39.3",
-        "effect": "^3.13.2",
-        "pinia": "^3.0.1",
-        "sqlocal": "^0.14.0",
-        "vue": "^3.5.13",
-        "vue-router": "^4.5.0",
+        "@effect/platform": "latest",
+        "@effect/sql-drizzle": "latest",
+        "a11y-dialog": "latest",
+        "drizzle-orm": "latest",
+        "effect": "latest",
+        "pinia": "latest",
+        "sqlocal": "latest",
+        "vue": "latest",
+        "vue-router": "latest",
      },
      "devDependencies": {
-        "@cspell/dict-fr-fr": "^2.2.5",
-        "@eslint/css": "^0.4.0",
-        "@types/bun": "^1.2.3",
-        "@vitejs/plugin-vue": "^5.2.1",
-        "@vue/eslint-config-typescript": "^14.4.0",
-        "@vue/typescript-plugin": "^2.2.4",
-        "browserslist": "^4.24.4",
-        "cspell": "^8.17.5",
-        "drizzle-kit": "^0.30.4",
-        "eslint": "^9.21.0",
-        "eslint-plugin-perfectionist": "^4.9.0",
-        "eslint-plugin-vue": "^9.32.0",
-        "globals": "^16.0.0",
-        "jiti": "^2.4.2",
-        "knip": "^5.45.0",
-        "lightningcss": "^1.29.1",
-        "prettier": "^3.5.2",
-        "prettier-plugin-pkg": "^0.18.1",
-        "prettier-plugin-sh": "^0.15.0",
-        "stylelint": "^16.14.1",
-        "stylelint-config-clean-order": "^7.0.0",
-        "stylelint-config-standard": "^37.0.0",
-        "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
-        "stylelint-plugin-logical-css": "^1.2.1",
-        "tsr": "^1.3.4",
-        "typescript": "^5.7.3",
-        "vite": "^6.2.0",
-        "vue-tsc": "^2.2.4",
+        "@cspell/dict-fr-fr": "latest",
+        "@eslint/css": "latest",
+        "@types/bun": "latest",
+        "@vitejs/plugin-vue": "latest",
+        "@vue/eslint-config-typescript": "latest",
+        "@vue/typescript-plugin": "latest",
+        "browserslist": "latest",
+        "cspell": "latest",
+        "drizzle-kit": "latest",
+        "eslint": "latest",
+        "eslint-plugin-perfectionist": "latest",
+        "eslint-plugin-vue": "latest",
+        "globals": "latest",
+        "jiti": "latest",
+        "knip": "latest",
+        "lightningcss": "latest",
+        "prettier": "latest",
+        "prettier-plugin-pkg": "latest",
+        "prettier-plugin-sh": "latest",
+        "stylelint": "latest",
+        "stylelint-config-clean-order": "latest",
+        "stylelint-config-standard": "latest",
+        "stylelint-declaration-block-no-ignored-properties": "latest",
+        "stylelint-plugin-logical-css": "latest",
+        "tsr": "latest",
+        "typescript": "latest",
+        "vite": "latest",
+        "vue-tsc": "latest",
      },
    },
  },
@ -319,6 +319,8 @@

    "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.30.0", "", {}, "sha512-4VlGgo32k2EQ2wcCY3vEU28A0O13aOtHz3Xt2/2U5FAh9EfhD6t6DqL5Z6yAnRCntbTFDU4YfbpyzSlHNWycPw=="],

+    "@petamoriken/float16": ["@petamoriken/float16@3.9.1", "", {}, "sha512-j+ejhYwY6PeB+v1kn7lZFACUIG97u90WxMuGosILFsl9d4Ovi0sjk0GlPfoEcx+FzvXZDAfioD+NGnnPamXgMA=="],
+
    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.34.8", "", { "os": "android", "cpu": "arm" }, "sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw=="],

    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.34.8", "", { "os": "android", "cpu": "arm64" }, "sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q=="],
@ -363,7 +365,7 @@

    "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],

-    "@types/bun": ["@types/bun@1.2.3", "", { "dependencies": { "bun-types": "1.2.3" } }, "sha512-054h79ipETRfjtsCW9qJK8Ipof67Pw9bodFWmkfkaUaRiIQ1dIV2VTlheshlBx3mpKr0KeK8VqnMMCtgN9rQtw=="],
+    "@types/bun": ["@types/bun@1.2.4", "", { "dependencies": { "bun-types": "1.2.4" } }, "sha512-QtuV5OMR8/rdKJs213iwXDpfVvnskPXY/S0ZiFbsTjQZycuqPbMW8Gf/XhLfwE5njW8sxI2WjISURXPlHypMFA=="],

    "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],

@ -475,7 +477,7 @@

    "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],

-    "bun-types": ["bun-types@1.2.3", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-P7AeyTseLKAvgaZqQrvp3RqFM3yN9PlcLuSTe7SoJOfZkER73mLdT2vEQi8U64S1YvM/ldcNiQjn0Sn7H9lGgg=="],
+    "bun-types": ["bun-types@1.2.4", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-nDPymR207ZZEoWD4AavvEaa/KZe/qlrbMSchqpQwovPZCKc7pwMoENjEtHgMKaAjJhy+x6vfqSBA1QU3bJgs0Q=="],

    "cacheable": ["cacheable@1.8.8", "", { "dependencies": { "hookified": "^1.7.0", "keyv": "^5.2.3" } }, "sha512-OE1/jlarWxROUIpd0qGBSKFLkNsotY8pt4GeiVErUYh/NUeTNrT+SBksUgllQv4m6a0W/VZsLuiHb88maavqEw=="],

@ -553,9 +555,9 @@

    "dir-glob": ["dir-glob@3.0.1", "", { "dependencies": { "path-type": "^4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="],

-    "drizzle-kit": ["drizzle-kit@0.30.4", "", { "dependencies": { "@drizzle-team/brocli": "^0.10.2", "@esbuild-kit/esm-loader": "^2.5.5", "esbuild": "^0.19.7", "esbuild-register": "^3.5.0" }, "bin": { "drizzle-kit": "bin.cjs" } }, "sha512-B2oJN5UkvwwNHscPWXDG5KqAixu7AUzZ3qbe++KU9SsQ+cZWR4DXEPYcvWplyFAno0dhRJECNEhNxiDmFaPGyQ=="],
+    "drizzle-kit": ["drizzle-kit@0.30.5", "", { "dependencies": { "@drizzle-team/brocli": "^0.10.2", "@esbuild-kit/esm-loader": "^2.5.5", "esbuild": "^0.19.7", "esbuild-register": "^3.5.0", "gel": "^2.0.0" }, "bin": { "drizzle-kit": "bin.cjs" } }, "sha512-l6dMSE100u7sDaTbLczibrQZjA35jLsHNqIV+jmhNVO3O8jzM6kywMOmV9uOz9ZVSCMPQhAZEFjL/qDPVrqpUA=="],

-    "drizzle-orm": ["drizzle-orm@0.39.3", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "knex", "kysely", "mysql2", "pg", "postgres", "sql.js", "sqlite3"] }, "sha512-EZ8ZpYvDIvKU9C56JYLOmUskazhad+uXZCTCRN4OnRMsL+xAJ05dv1eCpAG5xzhsm1hqiuC5kAZUCS924u2DTw=="],
+    "drizzle-orm": ["drizzle-orm@0.40.0", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "gel": ">=2", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "gel", "knex", "kysely", "mysql2", "pg", "postgres", "sql.js", "sqlite3"] }, "sha512-7ptk/HQiMSrEZHnAsSlBESXWj52VwgMmyTEfoNmpNN2ZXpcz13LwHfXTIghsAEud7Z5UJhDOp8U07ujcqme7wg=="],

    "easy-table": ["easy-table@1.2.0", "", { "dependencies": { "ansi-regex": "^5.0.1" }, "optionalDependencies": { "wcwidth": "^1.0.1" } }, "sha512-OFzVOv03YpvtcWGe5AayU5G2hgybsg3iqA6drU8UaoZyB9jLGMTrz9+asnLp/E+6qPh88yEI1gvyZFZ41dmgww=="],

@ -645,6 +647,8 @@

    "gc-hook": ["gc-hook@0.3.1", "", {}, "sha512-E5M+O/h2o7eZzGhzRZGex6hbB3k4NWqO0eA+OzLRLXxhdbYPajZnynPwAtphnh+cRHPwsj5Z80dqZlfI4eK55A=="],

+    "gel": ["gel@2.0.0", "", { "dependencies": { "@petamoriken/float16": "^3.8.7", "debug": "^4.3.4", "env-paths": "^3.0.0", "semver": "^7.6.2", "shell-quote": "^1.8.1", "which": "^4.0.0" }, "bin": { "gel": "dist/cli.mjs" } }, "sha512-Oq3Fjay71s00xzDc0BF/mpcLmnA+uRqMEJK8p5K4PaZjUEsxaeo+kR9OHBVAf289/qPd+0OcLOLUN0UhqiUCog=="],
+
    "gensequence": ["gensequence@7.0.0", "", {}, "sha512-47Frx13aZh01afHJTB3zTtKIlFI6vWY+MYCN9Qpew6i52rfKjnhCF/l1YlC8UmEMvvntZZ6z4PiCcmyuedR2aQ=="],

    "get-stdin": ["get-stdin@9.0.0", "", {}, "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA=="],
@ -709,7 +713,7 @@

    "is-what": ["is-what@4.1.16", "", {}, "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A=="],

-    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+    "isexe": ["isexe@3.1.1", "", {}, "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ=="],

    "jiti": ["jiti@2.4.2", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A=="],

@ -897,6 +901,8 @@

    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],

+    "shell-quote": ["shell-quote@1.8.2", "", {}, "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA=="],
+
    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],

    "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
@ -993,7 +999,7 @@

    "wcwidth": ["wcwidth@1.0.1", "", { "dependencies": { "defaults": "^1.0.3" } }, "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg=="],

-    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+    "which": ["which@4.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="],

    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],

@ -1043,6 +1049,8 @@

    "cosmiconfig/env-paths": ["env-paths@2.2.1", "", {}, "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="],

+    "cross-spawn/which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
    "eslint/@eslint/core": ["@eslint/core@0.12.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg=="],

    "eslint/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
@ -1133,10 +1141,14 @@

    "@vue/language-core/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],

+    "cross-spawn/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
    "eslint/file-entry-cache/flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],

    "fast-glob/@nodelib/fs.walk/@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],

+    "global-prefix/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
    "stylelint/file-entry-cache/flat-cache": ["flat-cache@6.1.6", "", { "dependencies": { "cacheable": "^1.8.8", "flatted": "^3.3.2", "hookified": "^1.7.0" } }, "sha512-F+CKgSwp0pzLx67u+Zy1aCueVWFAHWbXepvXlZ+bWVTaASbm5SyCnSJ80Fp1ePEmS57wU+Bf6cx6525qtMZ4lQ=="],

    "table/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
    "@effect/platform": "^0.77.2",
    "@effect/sql-drizzle": "^0.29.2",
    "a11y-dialog": "^8.1.1",
-    "drizzle-orm": "^0.39.3",
+    "drizzle-orm": "^0.40.0",
    "effect": "^3.13.2",
    "pinia": "^3.0.1",
    "sqlocal": "^0.14.0",
@ -17,13 +17,13 @@
  "devDependencies": {
    "@cspell/dict-fr-fr": "^2.2.5",
    "@eslint/css": "^0.4.0",
-    "@types/bun": "^1.2.3",
+    "@types/bun": "^1.2.4",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/eslint-config-typescript": "^14.4.0",
    "@vue/typescript-plugin": "^2.2.4",
    "browserslist": "^4.24.4",
    "cspell": "^8.17.5",
-    "drizzle-kit": "^0.30.4",
+    "drizzle-kit": "^0.30.5",
    "eslint": "^9.21.0",
    "eslint-plugin-perfectionist": "^4.9.0",
    "eslint-plugin-vue": "^9.32.0",
--- a/src/components/NavigationMenu.vue
+++ b/src/components/NavigationMenu.vue
@ -12,6 +12,3 @@
    </nav>
  </aside>
 </template>
-
-<style scoped src="@/styles/components/navigation-menu.css">
-</style>
--- a/src/styles/base/base.css
+++ b/src/styles/base/base.css
@ -1,23 +1,12 @@
-/*
- * 1. Utilise un meilleur modèle de boîte.
- * 2. Fait que seul font-size puisse influencer la taille du texte.
- * 3. Applique les schémas de couleurs.
- * 4. Utilise une indentation plus étroite.
- * 5. Permet l'usage de propriétés intrinsèques comme auto ou fit-content dans les animations.
- */
 html {
-  box-sizing: border-box; /* 1 */
-  tab-size: 2; /* 4 */
-  color-scheme: dark light; /* 3 */
-  interpolate-size: allow-keywords; /* 6 */
-  /* stylelint-disable */
-  -moz-text-size-adjust: none; /* 2 */
-  -webkit-text-size-adjust: none; /* 2 */
-  text-size-adjust: none; /* 2 */
+  box-sizing: border-box;
+  tab-size: 2;
+  color-scheme: dark light;
+  interpolate-size: allow-keywords;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
  block-size: 100%;
-  /* stylelint-enable */
-
-  /* scrollbar-gutter: stable; */
 }

 body {
@ -32,46 +21,24 @@ body {
  line-height: var(--line-height-comfortable);
  text-decoration-skip-ink: auto;
  text-rendering: geometricprecision;
+  block-size: 100%;
 }

-/*
- * 1. Hérite le modèle de boîte de l'élément racine.
- * 2. Désactive toute marge pour partir de bases saines.
- * 3. Hérite toute propriété typographique et de couleur pour éviter des redéfinitions.
- */
 *, *::before, *::after {
-  box-sizing: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 2 */
-  font: inherit; /* 3 */
-  font-feature-settings: inherit; /* 3 */
-  font-variation-settings: inherit; /* 3 */
-  color: inherit; /* 3 */
-  letter-spacing: inherit; /* 3 */
-  word-spacing: inherit; /* 3 */
-}
-
-/* Utilise une couleur particulière pour l'arrière-plan des éléments sélectionnés avec le curseur. */
-*::selection {
-  color: var(--color-secondary);
-  background: var(--color-primary);
-}
-
-/* TODO: Prendre en compte a11y-dialog */
-
-/* Empêche le défilement de la page quand une modale est ouverte. */
-:where(html:has(dialog:modal[open])) {
-  overflow: clip;
-}
-
-/* Retire les bordures et applique un modèle d'arrière-plan plus sain. */
-*:where(:not(progress, meter)) {
+  box-sizing: inherit;
  border: 0 solid transparent;
  background-repeat: no-repeat;
  background-origin: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
 }

-/* Classe pour cacher visuellement tout en restant accessible par les lecteurs d'écran. */
 :where(.visually-hidden:not(:focus, :active, :focus-within)) {
  position: absolute;
  overflow: hidden;
@ -81,17 +48,14 @@ body {
  clip-path: inset(50%);
 }

-/* Cache les éléments cachés. */
 :where([hidden]) {
  display: none;
 }

-/* Affiche un curseur « Désactivé » pour les éléments désactivés. */
 :where([disabled]) {
  cursor: not-allowed;
 }

-/* Applique des contours de focus visibles. */
 :where(:focus-visible) {
  outline: currentcolor solid 0.2rem;
  outline-offset: 0.2rem;
@ -101,12 +65,10 @@ body {
  scroll-margin-block: 8vh;
 }

-/* Active une transition de page simple. */
@view-transition {
  navigation: auto;
 }

-/* Désactive animations et transitions pour les Utilisateurs le demandant explicitement. */
@media (prefers-reduced-motion) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
--- a/src/styles/base/elements.css
+++ b/src/styles/base/elements.css
@ -1,30 +1,11 @@
-/* Réinitialise l'apparence d'éléments interactifs. */
 :where(button, fieldset, input, select, legend, textarea) {
  appearance: none;
 }

-/* Désactive le comportement étrange des <legend> au sein de <fieldset>. */
-:where(fieldset > legend) {
-  float: left;
-  inline-size: 100%;
-}
-
-/* Hauteur de ligne plus étroite pour les éléments interactifs. */
 :where(button, fieldset, input, label, select, textarea) {
  line-height: var(--line-height-compact);
 }

-:where(textarea) {
-  resize: vertical;
-}
-
-@supports (resize: block) {
-  :where(textarea) {
-    resize: block;
-  }
-}
-
-/* Curseur de main pour les éléments interactifs cliquables. */
 :where(button, input, label, select) {
  cursor: pointer;
 }
@ -42,18 +23,24 @@
  }
 }

-/* Évite le dépassement des textes. */
 :where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
 }

 :where(h1, h2, h3, h4, h5, h6) {
-  inline-size: fit-content;
+  display: inline-block;
+  inline-size: auto;
+
+  @supports (inline-size: fit-content) {
+    & {
+      inline-size: fit-content;
+    }
+  }
 }

-/* Les médias doivent occuper toute la longueur disponible au sein de leur propre bloc. */
-:where(img, picture, video, canvas, svg) {
+:where(img, picture, video, svg) {
  display: block;
+  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
 }
@ -62,50 +49,7 @@
  list-style: none;
 }

-:where(.fields) {
-  padding: var(--s-4);
-}
-
-:where(input[type="text"], input[type="number"]) {
-  padding: var(--s-4);
-}
-
-:where(input[type="radio"]) {
-  position: relative;
-  aspect-ratio: 1/1;
-  inline-size: var(--s-1);
-  block-size: var(--s-1);
-  border: 1px solid var(--color-primary);
-  border-radius: 50%;
-  background: var(--color-secondary);
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    inline-size: var(--s-2);
-    block-size: var(--s-2);
-    border-radius: inherit;
-    opacity: 0;
-    background: var(--color-primary);
-  }
-
-  + label {
-    padding-left: var(--s-2);
-  }
-}
-
-:where(input[type="radio"]:checked) {
-  &::after {
-    opacity: 1;
-  }
-}
-
-:where(fieldset > legend) {
-  margin-block-end: var(--s0);
-}
+/* Formulaires */

 /*
 * Empêche les marqueurs de listes de modifier la hauteur de ligne sur Firefox.
@ -114,3 +58,22 @@
 ::marker {
  line-height: 0;
 }
+
+:where(input[type="text"], input[type="number"]) {
+  min-inline-size: initial;
+}
+
+:where(textarea) {
+  resize: vertical;
+
+  @supports (resize: block) {
+    & {
+      resize: block;
+    }
+  }
+}
+
+:where(fieldset > legend) {
+  float: left;
+  inline-size: 100%;
+}
--- a/src/styles/base/variables.css
+++ b/src/styles/base/variables.css
@ -11,12 +11,14 @@
  --color-tertiary: dimgrey;
  --color-quartary: #be2727;

-  /* Typographie */
-
  /* Hauteurs de ligne */
  --line-height-comfortable: 1.4;
  --line-height-compact: 1.1;

+  /* Espacements de lettres */
+  --letter-spacing-small: 1px;
+  --letter-spacing-medium: 1.5px;
+
  /* Échelles */
  --ratio: 1.4;
  --s-5: calc(var(--s-4) / var(--ratio));
--- a/src/styles/components/imposter-box.css
+++ b/src/styles/components/imposter-box.css
@ -1,43 +1,47 @@
 .dialog {
-  position: fixed; /* 1 */
-  z-index: 2; /* 1 */
-  inset: 0; /* 1 */
-  display: flex; /* 2 */
+  position: fixed;
+  z-index: 2;
+  inset: 0;
+  display: flex;
  margin: 0;
  background: var(--bg25-secondary);

  &[aria-hidden="true"] {
-    display: none; /* 1 */
+    display: none;
  }
-}

-.dialog-content {
-  position: relative; /* 2 */
-  min-inline-size: 40ch;
-  max-inline-size: 80ch;
-  margin: auto; /* 1 */
-  padding: initial;
-  border: 1px solid var(--color-primary);
-  background-color: var(--color-secondary);
-  box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary);
+  .dialog-content {
+    position: relative;
+    margin: auto;
+    border: 1px solid var(--color-primary);
+    background-color: var(--color-secondary);
+    box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary);

-  header {
-    overflow: hidden;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: space-between;
-    border-block-end: 1px solid var(--color-primary);
+    header {
+      overflow: hidden;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+      border-block-end: 1px solid var(--color-primary);

-    h2 {
-      padding-inline: var(--s-1);
-      font-size: var(--s1);
+      h2 {
+        padding-inline: var(--s-1);
+        font-size: var(--s1);
+      }
+
+      button {
+        padding: var(--s-1);
+        font-family: Banquise, monospace;
+        font-weight: 500;
+      }
    }

-    button {
-      padding: var(--s-1);
-      font-family: Banquise, monospace;
-      font-weight: 500;
+    main {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: start;
+      padding: var(--s0);
    }
  }
 }
--- a/src/styles/components/navigation-menu.css
+++ b/src/styles/components/navigation-menu.css
@ -1,3 +0,0 @@
-[aria-current] {
-  font-weight: 125;
-}
--- a/src/styles/layouts/box.css
+++ b/src/styles/layouts/box.css
@ -1,17 +1,5 @@
-/*
- * 1. Affiche une bordure pour les thèmes à haut contraste sans augmenter la taille de la boîte.
- */
 .box {
  padding: var(--s0, 1rem);
-  background-color: var(--color-secondary, #fff);
  outline: 0.125rem solid transparent; /* 1 */
  outline-offset: -0.125rem; /* 1 */
-
-  /* border: 1px solid var(--color-primary); */
-}
-
-/* Inverse les couleurs de la boîte. */
-.box.invert {
-  color: var(--color-secondary, #fff);
-  background-color: var(--color-primary, #000);
 }
--- a/src/styles/layouts/center.css
+++ b/src/styles/layouts/center.css
@ -1,14 +1,9 @@
-/*
- * 1. Utilise un modèle de boîte excluant les marges internes du calcul de la longueur.
- * 2. Centre l'Élément avec des marges externes automatiques en ligne et une longueur maximale.
- * 3. Assure que des espaces latéraux sont présents.
- */
 .center {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
-  box-sizing: content-box; /* 1 */
-  max-inline-size: var(--max-width, 80rem); /* 2 */
-  margin-inline: auto; /* 2 */
-  padding-inline: var(--s0, 1rem) var(--s0, 1rem); /* 3 */
+  box-sizing: content-box;
+  max-inline-size: var(--layout-center-max-width);
+  margin-inline: auto;
+  padding-inline: var(--layout-center-inline-padding) var(--layout-center-inline-padding);
 }
--- a/src/styles/layouts/cluster.css
+++ b/src/styles/layouts/cluster.css
@ -1,8 +1,6 @@
 .cluster {
  display: flex;
  flex-flow: row wrap;
-  gap: var(--s0, 1rem);
+  gap: var(--layout-cluster-gap);
  align-items: center;
-
-  /* justify-content: center; */
 }
--- a/src/styles/layouts/sidebar.css
+++ b/src/styles/layouts/sidebar.css
@ -1,19 +1,17 @@
 .with-sidebar {
-  --gutter: var(--s0);
-
  display: flex;
  flex-flow: row wrap;
-  gap: var(--gutter, var(--s0));
+  gap: var(--layout-sidebar-gap);
  align-content: start;
 }

 .with-sidebar > :first-child {
  flex-basis: 0;
  flex-grow: 999;
-  min-inline-size: 65%;
+  min-inline-size: var(--layout-sidebar-first-child-min-inline-size);
 }

 .with-sidebar > :last-child {
-  flex-basis: 15ch;
+  flex-basis: var(--layout-sidebar-last-child-basis);
  flex-grow: 1;
 }
--- a/src/styles/layouts/stack.css
+++ b/src/styles/layouts/stack.css
@ -1,6 +1,4 @@
 .stack {
-  --space: var(--s0, 1rem);
-
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
@ -11,7 +9,7 @@
 }

 .stack > * + * {
-  margin-block-start: var(--space);
+  margin-block-start: var(--layout-stack-margin-between-children);
 }

 .stack:only-child {
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@ -1,10 +1,37 @@
+@import url("./default/animations.css");
@import url("./default/buttons.css");
+@import url("./default/forms.css");
@import url("./default/headings.css");

+:root {
+  --brkly-font-weight-regular: 100;
+  --brkly-font-weight-semibold: 120;
+  --banquise-font-weight: 400;
+
+  --root-background-color: var(--color-secondary);
+  --root-text-color: var(--color-primary);
+  --root-font-weight: var(--brkly-font-weight-regular);
+
+  --layout-center-max-width: 80rem;
+  --layout-center-inline-padding: var(--s0);
+  --layout-cluster-gap: var(--s0);
+  --layout-sidebar-gap: var(--s0);
+  --layout-sidebar-first-child-min-inline-size: 65%;
+  --layout-sidebar-last-child-basis: 15rem;
+  --layout-stack-margin-between-children: var(--s0);
+}
+
 body {
  font-family: BRKLY, sans-serif;
-  font-weight: 100;
-  background: var(--color-secondary);
+  color: var(--root-text-color);
+  font-weight: var(--root-font-weight);
+  background-color: var(--root-background-color);
+}
+
+/* Pseudo-éléments et pseudos-sélecteurs */
+*::selection {
+  color: var(--root-background-color);
+  background-color: var(--root-text-color);
 }

 *:focus-visible {
@ -12,20 +39,16 @@ body {
 }

 .invert {
-  font-weight: 120;
-  color: var(--color-secondary);
-  background-color: var(--color-primary);
+  font-weight: var(--brkly-font-weight-semibold);
+  color: var(--root-background-color);
+  background-color: var(--root-text-color);

  &::selection {
-    color: var(--color-primary);
-    background-color: var(--color-secondary);
+    color: var(--root-text-color);
+    background-color: var(--root-background-color);
  }
 }

-h1 {
-  font-family: Banquise, monospace;
-}
-
 .container {
  --max-width: 100%;
  --space: var(--s1);
@ -52,23 +75,3 @@ main {
 #last-watched-media {
  --space: var(--s2);
 }
-
-:is(input[type="text"], input[type="number"]) {
-  border: 1px solid var(--color-primary);
-}
-
-@keyframes fade-in {
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes flicker {
-  0%, 49% {
-    opacity: 0;
-  }
-
-  50%, 100% {
-    opacity: 1;
-  }
-}
--- a/src/styles/themes/default/animations.css
+++ b/src/styles/themes/default/animations.css
@ -0,0 +1,15 @@
+@keyframes fade-in {
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes flicker {
+  0%, 49% {
+    opacity: 0;
+  }
+
+  50%, 100% {
+    opacity: 1;
+  }
+}
--- a/src/styles/themes/default/buttons.css
+++ b/src/styles/themes/default/buttons.css
@ -1,27 +1,27 @@
 button {
-  --button-background-color: var(--color-secondary);
-  --button-border-color: var(--color-primary);
+  --button-background-color: var(--root-background-color);
+  --button-border-color: var(--root-text-color);
  --button-font-weight: 100;
  --button-padding: var(--s-2);
-  --button-text-color: var(--color-primary);
+  --button-text-color: var(--root-text-color);

  padding: var(--button-padding);
  border: 1px solid var(--button-border-color);
  font-weight: var(--button-font-weight);
  color: var(--button-text-color);
  background-color: var(--button-background-color);
-  box-shadow: 4px 4px 0 0 var(--color-primary);
+  box-shadow: 4px 4px 0 0 var(--root-text-color);

  &:hover {
-    --button-background-color: var(--color-primary);
-    --button-border-color: var(--color-secondary);
-    --button-font-weight: 120;
-    --button-text-color: var(--color-secondary);
+    --button-background-color: var(--root-text-color);
+    --button-border-color: var(--root-background-color);
+    --button-font-weight: var(--brkly-font-weight-semibold);
+    --button-text-color: var(--root-background-color);
  }

  &:active {
    transform: translateX(2px) translateY(2px);
-    box-shadow: 1px 1px 0 0 var(--color-primary);
+    box-shadow: 1px 1px 0 0 var(--root-text-color);
  }

  &:focus-visible {
@ -30,11 +30,11 @@ button {

  /* Inversion des couleurs. */
  &.invert {
-    --button-background-color: var(--color-primary);
-    --button-border-color: var(--color-secondary);
-    --button-text-color: var(--color-secondary);
+    --button-background-color: var(--root-text-color);
+    --button-border-color: var(--root-background-color);
+    --button-text-color: var(--root-background-color);

-    outline-color: var(--color-secondary);
+    outline-color: var(--root-background-color);
  }

  /* TODO: Déplacer dans un Composant. */
@ -44,7 +44,7 @@ button {
    border: initial;

    &:hover {
-      color: var(--color-primary);
+      color: var(--root-text-color);
      background: var(--bg75-secondary);
    }

@ -63,7 +63,7 @@ button {
    outline-offset: initial;

    &:hover {
-      --button-border-color: var(--color-primary);
+      --button-border-color: var(--root-text-color);
    }

    &:focus-visible {
@ -72,8 +72,8 @@ button {

    &:active {
      transform: initial;
-      border: 1px solid var(--color-primary);
-      outline: 1px solid var(--color-secondary);
+      border: 1px solid var(--root-text-color);
+      outline: 1px solid var(--root-background-color);
      outline-offset: -0.1rem;
    }
  }
--- a/src/styles/themes/default/forms.css
+++ b/src/styles/themes/default/forms.css
@ -0,0 +1,57 @@
+:root {
+  --fields-padding: var(--s-4);
+  --fieldset-legend-spacing: var(--s0);
+  --input-border: 1px solid var(--root-text-color);
+  --radio-marker-size: var(--s-2);
+  --radio-marker-background-color: var(--root-text-color);
+  --radio-background-color: var(--root-background-color);
+  --radio-label-spacing: var(--s-2);
+}
+
+/* Groupe de champs. */
+.fields {
+  padding: var(--fields-padding);
+}
+
+input[type="text"], input[type="number"] {
+  padding: var(--fields-padding);
+  border: var(--input-border);
+
+  &::selection {
+    color: var(--root-text-color);
+    background-color: var(--root-background-color);
+  }
+}
+
+input[type="radio"] {
+  position: relative;
+  aspect-ratio: 1/1;
+  inline-size: var(--s-1);
+  block-size: var(--s-1);
+  border: var(--input-border);
+  border-radius: 50%;
+  background: var(--radio-background-color);
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    inline-size: var(--radio-marker-size);
+    block-size: var(--radio-marker-size);
+    border-radius: inherit;
+    opacity: 0;
+    background: var(--radio-marker-background-color);
+  }
+
+  + label {
+    padding-left: var(--radio-label-spacing);
+  }
+
+  &:checked {
+    &::after {
+      opacity: 1;
+    }
+  }
+}
--- a/src/styles/themes/default/headings.css
+++ b/src/styles/themes/default/headings.css
@ -1,18 +1,21 @@
+:root {
+  --headings-font-family: Banquise, monospace;
+}
+
 h1 {
-  font-family: Banquise, monospace;
+  font-family: var(--headings-font-family);
  font-size: var(--s3);
-  font-weight: 600;
-  letter-spacing: 1.5px;
+  letter-spacing: var(--letter-spacing-medium);
 }

 h2 {
-  font-family: Banquise, monospace;
+  font-family: var(--headings-font-family);
  font-size: var(--s2);
-  letter-spacing: 1px;
+  letter-spacing: var(--letter-spacing-small);
 }

 h3 {
-  font-family: Banquise, monospace;
+  font-family: var(--headings-font-family);
  font-size: var(--s1);
-  letter-spacing: 1px;
+  letter-spacing: var(--letter-spacing-small);
 }
--- a/src/styles/themes/default/links.css
+++ b/src/styles/themes/default/links.css
@ -0,0 +1,5 @@
+a {
+  &[aria-current] {
+    font-weight: var(--brkly-font-weight-semibold);
+  }
+}
--- a/src/views/BaseView.vue
+++ b/src/views/BaseView.vue
@ -1,4 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template></template>
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@ -1 +0,0 @@
-{"root":["./src/router/typed-routes.d.ts","./eslint.config.mts","./vite.config.mts","./cfg/drizzle.config.ts","./cfg/eslint-css.config.mts","./cfg/eslint.config.mts","./cfg/knip.config.ts","./cfg/prettier.config.mjs","./cfg/stylelint.config.mjs","./src/main.ts","./src/vite-env.d.ts","./src/db/schemas.ts","./src/db/schemas/constants.ts","./src/db/schemas/entries.ts","./src/db/schemas/works.ts","./src/libs/apis/clients.ts","./src/libs/apis/requests.ts","./src/libs/apis/routes.ts","./src/libs/apis/tmdb/constants.ts","./src/libs/apis/tmdb/schemas.ts","./src/libs/search/schemas.ts","./src/libs/search/search.ts","./src/libs/types/events.ts","./src/libs/utils/dates.ts","./src/libs/utils/effects.ts","./src/libs/utils/types.d.ts","./src/router/index.ts","./src/services/db.ts","./src/services/logger.ts","./src/services/migrations.ts","./src/services/read-api.ts","./src/services/runtime-client.ts","./src/services/tmdb-api.ts"],"errors":true,"version":"5.7.3"}
				`@ -1 +0,0 @@`
				{"root":["./src/router/typed-routes.d.ts","./eslint.config.mts","./vite.config.mts","./cfg/drizzle.config.ts","./cfg/eslint-css.config.mts","./cfg/eslint.config.mts","./cfg/knip.config.ts","./cfg/prettier.config.mjs","./cfg/stylelint.config.mjs","./src/main.ts","./src/vite-env.d.ts","./src/db/schemas.ts","./src/db/schemas/constants.ts","./src/db/schemas/entries.ts","./src/db/schemas/works.ts","./src/libs/apis/clients.ts","./src/libs/apis/requests.ts","./src/libs/apis/routes.ts","./src/libs/apis/tmdb/constants.ts","./src/libs/apis/tmdb/schemas.ts","./src/libs/search/schemas.ts","./src/libs/search/search.ts","./src/libs/types/events.ts","./src/libs/utils/dates.ts","./src/libs/utils/effects.ts","./src/libs/utils/types.d.ts","./src/router/index.ts","./src/services/db.ts","./src/services/logger.ts","./src/services/migrations.ts","./src/services/read-api.ts","./src/services/runtime-client.ts","./src/services/tmdb-api.ts"],"errors":true,"version":"5.7.3"}