2025-02-24

.dockerignore

@@ -5,6 +5,7 @@
 .git
 .gitignore
 .jj
+.woodpecker
 .zed
 Dockerfile*
 README.md
@@ -12,4 +13,5 @@ cspell.json
 dist
 docker-compose*
 justfile
+mise.toml
 node_modules

.woodpecker/publish_instable.yaml

@@ -0,0 +1,17 @@
+when:
+  - event: push
+    branch: instable
+
+steps:
+  - name: build_publish
+    image: woodpeckerci/plugin-kaniko:latest
+    pull: true
+    settings:
+      auto_tag: true
+      cache: true
+      registry: git.gcch.fr
+      repo: gcch/journal-media-vue
+      username:
+        from_secret: DOCKER_USER
+      password:
+        from_secret: DOCKER_PASSWORD

.zed/settings.json

@@ -20,15 +20,12 @@
   "lsp": {
     "eslint": {
       "settings": {
-        "configFile": "./cfg/eslint.config.mts",
         "experimental": {
           "useFlatConfig": true
         },
-        "options": {
-          "configFile": "./cfg/eslint.config.mts",
-          "overrideConfigFile": "./cfg/eslint.config.mts"
-        },
-        "overrideConfigFile": "./cfg/eslint.config.mts"
+        "problems": {
+          "shortenToSingleLine": true
+        }
       }
     }
   }

Dockerfile

@@ -1,13 +1,12 @@
 FROM oven/bun:slim AS base
 WORKDIR /usr/src/app
 
-# Installe les dépendences.
+# Installe les dépendances de développement.
 FROM base AS install
 RUN mkdir -p /temp/dev
 COPY package.json bun.lock /temp/dev/
 RUN cd /temp/dev && bun install --frozen-lockfile
-
-# Installe les dépendences de production.
+# Installe les dépendances de production.
 RUN mkdir -p /temp/prod
 COPY package.json bun.lock /temp/prod/
 RUN cd /temp/prod && bun install --frozen-lockfile --production
@@ -16,16 +15,15 @@ RUN cd /temp/prod && bun install --frozen-lockfile --production
 FROM base AS prerelease
 COPY --from=install /temp/dev/node_modules/ node_modules
 COPY . .
-
 # Compile le projet.
-ENV NODE_ENV production
+ENV NODE_ENV=production
 RUN bun --bun vite build
 
-# Créé le nécessaire pour Angie.
+# Créé le nécessaire pour Angie, le proxy inversé servant l'application.
 FROM docker.angie.software/angie:minimal AS release
 COPY --from=prerelease /usr/src/app/dist/ /usr/share/angie/html/
 COPY ./docker/default.conf /etc/angie/http.d/default.conf
 
-EXPOSE 80
 # Démarre Angie.
+EXPOSE 80
 CMD ["angie", "-g", "daemon off;"]

cfg/dprint.json

@@ -30,7 +30,7 @@
     "hexCase": "lower",
     "hexColorLength": "short",
     "indentWidth": 2,
-    "keyframeSelectorNotation": "keyword",
+    "keyframeSelectorNotation": "percentage",
     "lineBreak": "lf",
     "linebreakInPseudoParens": true,
     "omitNumberLeadingZero": false,

cfg/eslint.config.mts

@@ -65,5 +65,11 @@ export default defineConfigWithVueTs(
       "vue/v-for-delimiter-style": "off",
     },
   },
+  {
+    name: "ts/no-annoying-rules",
+    rules: {
+      "@typescript-eslint/no-misused-spread": "off",
+    },
+  },
   perfectionist.configs["recommended-natural"],
 );

eslint.config.mts

@@ -0,0 +1,75 @@
+import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
+import perfectionist from "eslint-plugin-perfectionist";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
+
+export default defineConfigWithVueTs(
+  {
+    files: ["**/*.{js,mjs,ts,mts,vue}"],
+    languageOptions: { ecmaVersion: "latest", globals: { ...globals.browser, ...globals.es2025 } },
+    name: "app/files-to-lint",
+  },
+  { ignores: [".cache/", "dist/", "node_modules/"], name: "app/files-to-ignore" },
+  vueTsConfigs.strictTypeChecked,
+  vueTsConfigs.stylisticTypeChecked,
+  vue.configs["flat/recommended"],
+  {
+    name: "app/no-vue-formatting",
+    rules: {
+      "vue/array-bracket-newline": "off",
+      "vue/array-bracket-spacing": "off",
+      "vue/array-element-newline": "off",
+      "vue/arrow-spacing": "off",
+      "vue/attributes-order": ["error", { alphabetical: true }],
+      "vue/block-spacing": "off",
+      "vue/block-tag-newline": "off",
+      "vue/brace-style": "off",
+      "vue/comma-dangle": "off",
+      "vue/comma-spacing": "off",
+      "vue/comma-style": "off",
+      "vue/dot-location": "off",
+      "vue/first-attribute-linebreak": "off",
+      "vue/func-call-spacing": "off",
+      "vue/html-closing-bracket-newline": "off",
+      "vue/html-closing-bracket-spacing": "off",
+      "vue/html-comment-content-newline": "off",
+      "vue/html-comment-content-spacing": "off",
+      "vue/html-comment-indent": "off",
+      "vue/html-indent": "off",
+      "vue/html-quotes": "off",
+      "vue/html-self-closing": "off",
+      "vue/key-spacing": "off",
+      "vue/keyword-spacing": "off",
+      "vue/max-attributes-per-line": "off",
+      "vue/max-len": "off",
+      "vue/multiline-html-element-content-newline": "off",
+      "vue/multiline-ternary": "off",
+      "vue/new-line-between-multi-line-property": "off",
+      "vue/no-extra-parens": "off",
+      "vue/no-multi-spaces": "off",
+      "vue/no-spaces-around-equal-signs-in-attribute": "off",
+      "vue/object-curly-newline": "off",
+      "vue/object-curly-spacing": "off",
+      "vue/object-property-newline": "off",
+      "vue/operator-linebreak": "off",
+      "vue/padding-line-between-blocks": "off",
+      "vue/padding-line-between-tags": "off",
+      "vue/padding-lines-in-component-definition": "off",
+      "vue/quote-props": "off",
+      "vue/script-indent": "off",
+      "vue/singleline-html-element-content-newline": "off",
+      "vue/space-in-parens": "off",
+      "vue/space-infix-ops": "off",
+      "vue/space-unary-ops": "off",
+      "vue/template-curly-spacing": "off",
+      "vue/v-for-delimiter-style": "off",
+    },
+  },
+  {
+    name: "ts/no-annoying-rules",
+    rules: {
+      "@typescript-eslint/no-misused-spread": "off",
+    },
+  },
+  perfectionist.configs["recommended-natural"],
+);

justfile

@@ -13,6 +13,7 @@ stylelintConfigFile := "cfg/stylelint.config.mjs"
 # Variables de cache.
 
 cacheFolder := ".cache"
+esLintCacheFile := "eslintcache"
 prettierCacheFile := "prettiercache"
 stylelintCacheFile := "stylelintcache"
 
@@ -80,7 +81,10 @@ lint-css:
 
 # Analyse le code TypeScript et Vue.
 lint-js fix="":
-    bun --bun eslint --config "{{ esLintConfigFile }}" {{ fix }}
+    bun --bun eslint \
+      --cache --cache-location "{{ cacheFolder }}/{{ esLintCacheFile }}" \
+      --config "{{ esLintConfigFile }}" \
+      {{ fix }}
 
 # Analyse le code CSS avec ESLint.
 lint-css-eslint fix="":

mise.toml

@@ -0,0 +1,3 @@
+[tools]
+bun = "latest"
+just = "latest"

public/app-loading.css

@@ -22,7 +22,7 @@
 }
 
 @keyframes loading {
-  from {
+  0% {
     content: "";
   }
   25% {
@@ -34,7 +34,7 @@
   75% {
     content: "...";
   }
-  to {
+  100% {
     content: "";
   }
 }

src/components/TmdbSearchResults.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import type { TmdbMovieSearchResponse } from "@/libs/apis/tmdb/schemas";
+
+  const { searchResults } = defineProps<{
+    searchResults: typeof TmdbMovieSearchResponse.Type.results | undefined;
+  }>();
+</script>
+
+<template>
+  <p v-show="!searchResults || searchResults?.length === 0">Aucun résultat.</p>
+  <table v-show="searchResults?.length">
+    <thead>
+      <tr>
+        <th scope="col">Nom</th>
+        <th scope="col">Année</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="result in searchResults" :key="result.id">
+        <th class="name" scope="row">{{ result.original_title }}</th>
+        <td class="release-date">{{ result.release_date }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="css" scoped>
+  table {
+    border-collapse: collapse;
+
+    :is(td, th) {
+      padding: var(--s-4);
+      text-align: left;
+    }
+
+    thead th {
+      font-weight: 120;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+  }
+
+  .name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .release-date {
+    min-inline-size: 6rem;
+  }
+</style>

src/libs/apis/tmdb/constants.ts

@@ -1,9 +1,9 @@
 import type { TmdbMovieSearchQueryParams } from "./schemas";
 
-export const DEFAULT_SEARCH_MOVIE_PARAMS: TmdbMovieSearchQueryParams = {
+export const DEFAULT_SEARCH_MOVIE_PARAMS = {
   include_adult: false,
   language: "fr",
   page: 1,
   query: "",
   region: "fr-FR",
-};
+} satisfies TmdbMovieSearchQueryParams;

src/libs/apis/tmdb/schemas.ts

@@ -1,5 +1,7 @@
 import { Schema } from "effect";
 
+// Requête
+
 export class TmdbMovieSearchQueryParams extends Schema.Class<TmdbMovieSearchQueryParams>("TmdbMovieSearchArgs")({
   include_adult: Schema.Boolean.pipe(
     Schema.propertySignature,
@@ -22,26 +24,30 @@ export class TmdbMovieSearchQueryParams extends Schema.Class<TmdbMovieSearchQuer
   year: Schema.String.pipe(Schema.optional),
 }) {}
 
+// Réponse
+
 export class TmdbMovieSearchResponse extends Schema.Class<TmdbMovieSearchResponse>("TmdbMovieSearchResponse")({
   page: Schema.NonNegativeInt,
-  results: Schema.Array(
-    Schema.Struct({
-      adult: Schema.Boolean,
-      backdrop_path: Schema.Union(Schema.String, Schema.Null),
-      genre_ids: Schema.Array(Schema.NonNegativeInt),
-      id: Schema.NonNegativeInt,
-      original_language: Schema.String,
-      original_title: Schema.String,
-      overview: Schema.String,
-      popularity: Schema.Number,
-      poster_path: Schema.Union(Schema.String, Schema.Null),
-      release_date: Schema.String,
-      title: Schema.String,
-      video: Schema.Boolean,
-      vote_average: Schema.Number,
-      vote_count: Schema.NonNegativeInt,
-    }),
-  ),
+  results: Schema.Array(TmdbMovieSearchResponseResults),
   total_pages: Schema.NonNegativeInt,
   total_results: Schema.NonNegativeInt,
 }) {}
+
+export class TmdbMovieSearchResponseResults
+  extends Schema.Class<TmdbMovieSearchResponseResults>("TmdbMovieSearchResponseResults")({
+    adult: Schema.Boolean,
+    backdrop_path: Schema.Union(Schema.String, Schema.Null),
+    genre_ids: Schema.Array(Schema.NonNegativeInt),
+    id: Schema.NonNegativeInt,
+    original_language: Schema.String,
+    original_title: Schema.String,
+    overview: Schema.String,
+    popularity: Schema.Number,
+    poster_path: Schema.Union(Schema.String, Schema.Null),
+    release_date: Schema.String,
+    title: Schema.String,
+    video: Schema.Boolean,
+    vote_average: Schema.Number,
+    vote_count: Schema.NonNegativeInt,
+  })
+{}

src/libs/search/search.ts

@@ -4,18 +4,17 @@ import { UrlParams } from "@effect/platform";
 import { Effect, pipe } from "effect";
 
 /**
- * Transform les valeurs d'un `FormData` en `Record` trié.
+ * Transforme les valeurs d'un `FormData` en `Record` trié.
  *
  * @param formData Les valeurs d'un formulaire.
  * @returns Un `Effect` des valeurs.
  */
-export const transformFormDataToRecord = (
-  formData: FormData,
-): Effect.Effect<Record<string, NonEmptyArray<string> | string>> =>
+const formDataToRecord = (formData: FormData): Effect.Effect<Record<string, NonEmptyArray<string> | string>> =>
   pipe(
     Effect.succeed(Array.from(formData.entries())),
     // @ts-expect-error -- Impossible de typer les valeurs de FormData comme string.
     Effect.andThen(formData => new URLSearchParams(formData)),
+    // La conversion en URLSearchParams permet de trier les entrées.
     Effect.andThen((urlSearchParams: URLSearchParams) => {
       urlSearchParams.sort();
       return urlSearchParams;
@@ -23,3 +22,5 @@ export const transformFormDataToRecord = (
     Effect.andThen((urlSearchParams: URLSearchParams) => UrlParams.fromInput(urlSearchParams)),
     Effect.andThen((urlParams: UrlParams.UrlParams) => UrlParams.toRecord(urlParams)),
   );
+
+export default { formDataToRecord };

src/pages/SearchPage.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-  import { MEDIA_TYPES } from "@/db/schemas/constants";
-  import { DEFAULT_SEARCH_MOVIE_PARAMS } from "@/libs/apis/tmdb/constants";
-  import { TmdbMovieSearchQueryParams, TmdbMovieSearchResponse } from "@/libs/apis/tmdb/schemas";
-  import { SearchPageQueryParams } from "@/libs/search/schemas";
-  import { transformFormDataToRecord } from "@/libs/search/utils";
-  import { getCurrentYear } from "@/libs/utils/dates";
-  import { PrettyLogger } from "@/services/logger";
-  import { RuntimeClient } from "@/services/runtime-client";
-  import { TmdbApi } from "@/services/tmdb-api";
+  import type { NonEmptyArray } from "effect/Array";
+  import type { Ref } from "vue";
+
+  import TmdbSearchResults from "@/components/TmdbSearchResults.vue";
+  import { MEDIA_TYPES } from "@/db/schemas/constants.ts";
+  import { DEFAULT_SEARCH_MOVIE_PARAMS } from "@/libs/apis/tmdb/constants.ts";
+  import { TmdbMovieSearchQueryParams, TmdbMovieSearchResponse } from "@/libs/apis/tmdb/schemas.ts";
+  import { SearchPageQueryParams } from "@/libs/search/schemas.ts";
+  import Search from "@/libs/search/search.ts";
+  import { getCurrentYear } from "@/libs/utils/dates.ts";
+  import { PrettyLogger } from "@/services/logger.ts";
+  import { RuntimeClient } from "@/services/runtime-client.ts";
+  import { TmdbApi } from "@/services/tmdb-api.ts";
   import { Effect, pipe, Schema } from "effect";
   import { computed, onMounted } from "vue";
   import { ref } from "vue";
@@ -16,54 +20,82 @@
   import { useRoute } from "vue-router";
   import { useRouter } from "vue-router";
 
+  /*
+   * Le formulaire reçoit en valeurs initiales les paramètres de l'URL.
+   * Quand le formulaire est soumis, les paramètres de l'URL sont mis à jour.
+   * Un effet est déclenché à chaque mise à jour des paramètres d'URL : une nouvelle recherche est déclenchée et les résultats sont mis à jour.
+   */
+
   const route = useRoute();
   const router = useRouter();
+  /** L'année courante pour la limite supérieure du champs Année de la recherché. */
   const currentYear: number = getCurrentYear();
 
-  const parsedQueryParams = computed(() => Schema.decodeUnknown(SearchPageQueryParams)(route.query));
+  /** Effet des paramètres validés de la route. */
+  const routeQueryParams = computed(() => Schema.decodeUnknown(SearchPageQueryParams)(route.query));
+  /** Le formulaire de recherche. */
   const form = useTemplateRef("form");
-  const formData = ref<SearchPageQueryParams>();
-  const searchResults = ref<TmdbMovieSearchResponse>();
+  /** Les valeurs du formulaire de recherche. */
+  const searchFormData = ref<SearchPageQueryParams>();
+  /** Le retour de la requête de recherche de films auprès de l'API TMDB. */
+  const search = ref<TmdbMovieSearchResponse>();
+  /** Les résultats de la requête de recherche de films auprès de l'API TMDB. */
+  const searchResults = computed(() => search.value?.results);
+  /** L'état de chargement de la requête auprès de l'API TMDB. */
+  const loading: Ref<boolean> = ref(false);
+
+  const updateUrlQuery = async (event?: Event): Promise<void> => {
+    event?.preventDefault();
 
-  const updateQueryParams = async (event?: Event): Promise<void> => {
-    if (event) {
-      event.preventDefault();
-    }
     await pipe(
       Effect.fromNullable(form.value),
-      Effect.andThen(form => new FormData(form)),
-      Effect.andThen(formData => transformFormDataToRecord(formData)),
-      Effect.tap(queryParams => router.push({ force: true, query: queryParams })),
-      Effect.catchAll(error => Effect.succeed(error)),
-      Effect.tap(Effect.logInfo),
+      Effect.andThen((form: HTMLFormElement) => new FormData(form)),
+      Effect.andThen((searchFormData: FormData) => Search.formDataToRecord(searchFormData)),
+      // Met à jour les paramètres de l'URL.
+      Effect.tap((routeQueryParams: Record<string, NonEmptyArray<string> | string>) =>
+        router.push({ force: true, query: routeQueryParams })
+      ),
+      Effect.tapError(Effect.logError),
+      Effect.ignore,
+      Effect.provide(PrettyLogger),
       Effect.runPromise,
     );
   };
-  const resetForm = async (event: Event): Promise<void> => {
+
+  const resetInitialState = async (event: Event): Promise<void> => {
     event.preventDefault();
+
     form.value?.reset();
-    formData.value = {
+    searchFormData.value = {
       query: "",
       type: MEDIA_TYPES.FILM,
       year: "",
     };
-    router.push({ force: true });
+    search.value = undefined;
+    await router.push({ force: true });
   };
 
-  const executeSearch = async (): Promise<TmdbMovieSearchResponse | undefined> =>
+  const getSearchResultsFromApi = async (): Promise<TmdbMovieSearchResponse | undefined> =>
     await RuntimeClient.runPromise(
       Effect.gen(function*() {
         // NOTE: Ne gère que la recherche de films pour l'instant.
-        const tmdbApi = yield* TmdbApi;
-        const validQueryParams = yield* parsedQueryParams.value;
-        const queryArgs = yield* Schema.decode(TmdbMovieSearchQueryParams)({
-          ...DEFAULT_SEARCH_MOVIE_PARAMS,
-          primary_release_year: validQueryParams.year,
-          query: validQueryParams.query,
+        const tmdbApi: TmdbApi = yield* TmdbApi;
+
+        const searchArgs: TmdbMovieSearchQueryParams = yield* Effect.gen(function*() {
+          return yield* pipe(
+            routeQueryParams.value,
+            Effect.andThen(params =>
+              Schema.decode(TmdbMovieSearchQueryParams)({
+                ...DEFAULT_SEARCH_MOVIE_PARAMS,
+                primary_release_year: params.year,
+                query: params.query,
+              })
+            ),
+          );
         });
 
         return yield* pipe(
-          tmdbApi.searchMovie(queryArgs),
+          tmdbApi.searchMovie(searchArgs),
           Effect.tapError(Effect.logError),
           Effect.orElseSucceed(() => undefined),
           Effect.tap(Effect.logInfo),
@@ -71,12 +103,19 @@
         );
       }),
     );
-  const updateResults = async (): Promise<void> =>
+
+  const updateSearchResults = async (): Promise<void> =>
     pipe(
-      parsedQueryParams.value,
+      routeQueryParams.value,
       Effect.tap(async (args: SearchPageQueryParams) => {
-        formData.value = { ...args };
-        searchResults.value = await executeSearch();
+        loading.value = true;
+
+        // Met à jour les valeurs du formulaire.
+        searchFormData.value = { ...args };
+        // Récupère les résultats d'une recherche avec les nouveaux termes.
+        search.value = await getSearchResultsFromApi();
+
+        loading.value = false;
       }),
       Effect.tapError(Effect.logError),
       Effect.ignore,
@@ -84,7 +123,10 @@
       Effect.runPromise,
     );
 
-  watch(route, async () => await updateResults(), { immediate: true });
+  //
+  watch(route, async () => {
+    await updateSearchResults();
+  }, { immediate: true });
 
   onMounted(() => {
     console.debug("SearchPage.vue -- Mounted");
@@ -99,7 +141,7 @@
       <h3>Termes</h3>
       <form
         id="search-media-form" ref="form" class="cluster"
-        @submit="updateQueryParams"
+        @submit="updateUrlQuery"
       >
         <fieldset class="stack">
           <legend>Type du média</legend>
@@ -108,7 +150,7 @@
             <div class="field">
               <input
                 id="film" checked for="add-media-form"
-                name="type" type="radio" :v-model="formData?.type"
+                name="type" type="radio" :v-model="searchFormData?.type"
                 value="film"
               >
               <label for="film">Film</label>
@@ -116,7 +158,7 @@
             <div class="field">
               <input
                 id="series" for="add-media-form" name="type"
-                type="radio" :v-model="formData?.type" value="series"
+                type="radio" :v-model="searchFormData?.type" value="series"
               >
               <label for="series">Série</label>
             </div>
@@ -127,8 +169,8 @@
           <label for="query">Titre</label>
           <input
             id="query" for="add-media-form" name="query"
-            required type="text" :v-model="formData?.query"
-            :value="formData?.query"
+            required type="text" :v-model="searchFormData?.query"
+            :value="searchFormData?.query"
           >
         </div>
         <div class="field stack">
@@ -136,25 +178,23 @@
           <input
             id="year" for="add-media-form" :max="currentYear"
             min="1900" name="year" type="number"
-            :v-model="formData?.year" :value="formData?.year"
+            :v-model="searchFormData?.year" :value="searchFormData?.year"
           >
         </div>
 
         <div class="cluster buttons">
           <button class="invert" type="submit">Rechercher</button>
-          <button for="search-media-form" type="reset" @click="resetForm">Réinitialiser</button>
+          <button for="search-media-form" type="reset" @click="resetInitialState">Réinitialiser</button>
         </div>
       </form>
     </section>
 
-    <template v-if="searchResults">
-      <section id="results" class="stack">
-        <h3>Résultats</h3>
-        <p v-for="result in searchResults.results" :key="result.id">
-          <span>{{ result.original_title }}</span>
-        </p>
-      </section>
-    </template>
+    <section id="results" class="stack">
+      <h3>Résultats</h3>
+
+      <p v-if="loading" class="loading">Recherche en cours</p>
+      <TmdbSearchResults v-else :search-results="searchResults"></TmdbSearchResults>
+    </section>
   </div>
 </template>
 
@@ -170,13 +210,17 @@
   }
 
   #search-media-form {
-    padding: var(--s0);
+    padding: var(--s1);
     border: 4px double var(--color-primary);
-  }
 
-  form {
-    :is(legend) {
-      font-weight: 120;
+    .buttons {
+      flex-basis: 100%;
+      margin-block-start: var(--s1);
     }
   }
+
+  .loading::after {
+    content: "";
+    animation: loading 2s both infinite;
+  }
 </style>

src/styles/base/elements.css

@@ -5,8 +5,8 @@
 
 /* Désactive le comportement étrange des <legend> au sein de <fieldset>. */
 :where(fieldset > legend) {
-  width: 100%;
   float: left;
+  inline-size: 100%;
 }
 
 /* Hauteur de ligne plus étroite pour les éléments interactifs. */

src/styles/themes/default.css

@@ -27,7 +27,7 @@ h1 {
 }
 
 .container {
-  --max-width: 60rem;
+  --max-width: 90rem;
   --space: var(--s1);
 
   place-content: start;
@@ -58,17 +58,17 @@ main {
 }
 
 @keyframes fade-in {
-  to {
+  100% {
     opacity: 1;
   }
 }
 
 @keyframes flicker {
-  from, 49% {
+  0%, 49% {
     opacity: 0;
   }
 
-  50%, to {
+  50%, 100% {
     opacity: 1;
   }
 }