ref(env) wip

ref(justfile) utilise watchexec pour la tâche de compilation JS à la màj des fichiers
ref(styles) wip harmonisation des Boutons
2026-04-30 17:24:22 +02:00 · 2026-04-30 17:23:05 +02:00 · 2026-04-30 17:22:37 +02:00 · 2026-04-30 17:22:37 +02:00 · 2026-04-30 17:22:37 +02:00 · 2026-04-30 17:22:37 +02:00
20 changed files with 436 additions and 155 deletions
--- a/.zed/settings.json
+++ b/.zed/settings.json
@ -11,6 +11,7 @@
    "!oxlint",
    "!prettier",
    "!tailwindcss-language-server",
+    "!tsgo",
    "!vtsls",
    "..."
  ],
--- a/aube-lock.yaml
+++ b/aube-lock.yaml
@ -13,13 +13,16 @@ importers:
        version: 4.0.0-rc.5
      '@sentry/browser':
        specifier: ^10.50.0
-        version: 10.50.0
+        version: 10.51.0
      a11y-dialog:
        specifier: ^8.1.5
        version: 8.1.5
      effect:
        specifier: ^4.0.0-beta.59
        version: 4.0.0-beta.59
+      html-template-tag:
+        specifier: ^5.0.0
+        version: 5.0.0
      lit-html:
        specifier: ^3.3.2
        version: 3.3.2
@ -52,8 +55,8 @@ importers:
        specifier: ^0.85.1
        version: 0.85.1
      '@effect/tsgo':
-        specifier: 0.5.1
-        version: 0.5.1
+        specifier: ^0.5.1
+        version: 0.5.2
      '@gcch/configuration-eslint':
        specifier: git+https://git.gcch.fr/gcch/configuration-eslint#888eb4aa54
        version: https://git.gcch.fr/gcch/configuration-eslint#888eb4aa54e5bfd6251566d7469ee99204c19f45
@ -68,7 +71,7 @@ importers:
        version: 1.59.1
      '@sentry/core':
        specifier: ^10.50.0
-        version: 10.50.0
+        version: 10.51.0
      '@types/bun':
        specifier: ^1.3.13
        version: 1.3.13
@ -116,7 +119,7 @@ importers:
        version: 2.6.1
      knip:
        specifier: ^6.8.0
-        version: 6.8.0
+        version: 6.9.0
      lightningcss:
        specifier: ^1.32.0
        version: 1.32.0
@ -740,15 +743,15 @@ packages:
    resolution: {integrity: sha512-EXnJjIy6zQ3nUO/MZ+ynWUb8B895KZPotd1++oTs9JjDkplwM7cb6zo8Zq2zU6piwq+KflO7amXbEfj1UMpHkw==}
    hasBin: true

-  '@effect/tsgo-linux-x64@0.5.1':
-    resolution: {integrity: sha512-70dMv3/H+P3KDNWb31qPXJiJh6s78k3+J+QXN8RatKiQYrJw2HhREYL6ToVx9y5WOV7XFvC0eCIIa4/AMwQLTw==}
+  '@effect/tsgo-linux-x64@0.5.2':
+    resolution: {integrity: sha512-V6sHIZlKQv693ABb9REX0RzIvzyCbNg2uP5+4MXwetlSxz8pmeAUCpraAQLXBkKlYL5rG9kMIobDFU9A88Nqig==}
    os:
    - linux
    cpu:
    - x64

-  '@effect/tsgo@0.5.1':
-    resolution: {integrity: sha512-INANZ/NK9akOwSQVWpQgSDLjlegrs4gui21nuQsgN7zCjCmj4m/ixUDuVgtW2C0UfqhPWWabyFWCDntu7ryCZQ==}
+  '@effect/tsgo@0.5.2':
+    resolution: {integrity: sha512-LEKmx1rwP1j3l9mPW6Bx8VIdGKW+uEvvML89z4xiWnPC+h/uFm3y6FGHULop9Kl09Ybwn2TVuZzVPSZLj+ydmg==}
    hasBin: true

  '@es-joy/jsdoccomment@0.86.0':
@ -969,28 +972,28 @@ packages:
  '@rolldown/pluginutils@1.0.0-rc.17':
    resolution: {integrity: sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==}

-  '@sentry-internal/browser-utils@10.50.0':
-    resolution: {integrity: sha512-42bxyRTxnCmYlWnvz4CxikuQNanw8UNma2WJrtxJ0f1MAJV2GhQGSHDLnA+lvFlmiz6qct3pfen/NXGyOTegTA==}
+  '@sentry-internal/browser-utils@10.51.0':
+    resolution: {integrity: sha512-lNKBS4P7RUvf1niojXQWe9bU3gnBUCbST4Dj0pSiyat1N96cXVyHkeE+uGxowD0RrVWhs+kGHiVX3FcmRWF6sA==}
    engines: {node: '>=18'}

-  '@sentry-internal/feedback@10.50.0':
-    resolution: {integrity: sha512-0k9XZF0wn86f77mIO2U3gNNyDZooy139CnEanRzHinrN106vVzvBZ6TUEQoHtoO1fqQxr+nWWVrqV/PXUqk47w==}
+  '@sentry-internal/feedback@10.51.0':
+    resolution: {integrity: sha512-bCM95bcpphx28e6aU0bwRLxOgwosYsdNzezM1sM0pVOkb0TB3hDFRamramVDK+/Hp1o8qmRxS4c5w/A7YBZGkA==}
    engines: {node: '>=18'}

-  '@sentry-internal/replay-canvas@10.50.0':
-    resolution: {integrity: sha512-jx6RKBmcJSWdI92qDGS/sBv1w+7Cww879Z/moX7bw7ipHa/Ts3iDcB3rgZwvhmi17U+mvYsbJeL2DXkPo3TjPw==}
+  '@sentry-internal/replay-canvas@10.51.0':
+    resolution: {integrity: sha512-8PW1Pp+Yl3lPwYqhBCr5SgkuhDanu9ZLzUqD2bPKL/ElqbM2eDVIWxq4z4ZzePrmZa6IcCjTv6sVQJ7Z4dLyLA==}
    engines: {node: '>=18'}

-  '@sentry-internal/replay@10.50.0':
-    resolution: {integrity: sha512-51FYNfnvVLAWw1rrEWPFfwHuMRb9mkVCFGA4J9/un7SpeGBsQDziGB0Di4fsCxI7+EdSBpfLHPF0csKtCCw0oQ==}
+  '@sentry-internal/replay@10.51.0':
+    resolution: {integrity: sha512-jCpI5HXSwK6ZT2HX70+mDRciAocHzSiDk4DTgvzV69Wvd+Ei5WLgE+d39eaEPsm8lUC0Ydntb5sJIB6uG9D4bw==}
    engines: {node: '>=18'}

-  '@sentry/browser@10.50.0':
-    resolution: {integrity: sha512-1f6rAvET6myiTaSeYqvaaBwvq1LfxqWjAPIoAW/NVC9bPMkeEcuvgDajHrnZMrBeWoJ81NMyoLkyX+iOc7MoFA==}
+  '@sentry/browser@10.51.0':
+    resolution: {integrity: sha512-Zdc0sKfenxUtW/OGhtJ7xHFN44bXR7YqxJ1zBDzlZfW0nTbeTTUZBq9z5NUw6qdS0Vs/i3V4qzAKTbRKWfqSEA==}
    engines: {node: '>=18'}

-  '@sentry/core@10.50.0':
-    resolution: {integrity: sha512-J4A+vzUO3adl0TkFCjaN1+4miamrjHiEIYuLHiuu1lmAjq5WIVw32ObvAh4yMwNtxyaEMosTrrh5M6f12XSJFg==}
+  '@sentry/core@10.51.0':
+    resolution: {integrity: sha512-Y45V/YXvVLEXmOdkbD1oG1gkRWFi9guCEGg3PlIlIpRjAbZUrvLGgjRJIc1E7XpSzmOnWbs5BbUxMv4PDaPj2w==}
    engines: {node: '>=18'}

  '@sindresorhus/base62@1.0.0':
@ -1928,13 +1931,22 @@ packages:
  hookified@2.2.0:
    resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==}

+  html-element-attributes@3.5.0:
+    resolution: {integrity: sha512-rU2BFhp0kQla9sqPBI46C+zbP6PFOtD7z6XNAJ6as+cGecCDXLx0W3aIs6XdPLmBBG/Fy1meRi/n65Exofz4Qw==}
+
  html-entities@2.6.0:
    resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}

+  html-es6cape@2.0.2:
+    resolution: {integrity: sha512-utzhH8rq2VABdW1LsPdv5tmxeMNOtP83If0jKCa79xPBgLWfcMvdf9K+EZoxJ5P7KioCxTs6WBnSDWLQHJ2lWA==}
+
  html-tags@5.1.0:
    resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
    engines: {node: '>=20.10'}

+  html-template-tag@5.0.0:
+    resolution: {integrity: sha512-FwF3Fi+v5Dr6ygxqqyJwJWdHteQtDusRXF5ae1syxTKbbVRC8UPtlfIua5KWbgXGneRAc7zNc+Z6x9efFl0W/w==}
+
  ignore@5.3.2:
    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
    engines: {node: '>= 4'}
@ -2164,8 +2176,8 @@ packages:
    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
    engines: {node: '>=0.10.0'}

-  knip@6.8.0:
-    resolution: {integrity: sha512-FaTrNiqc74KTUMI4KZ5CWWxR2oVTm/bEEik16NKz7usiUJXG4+Df2XA2SPAm+mG9bBY22NvBMM4IeBcUZFslyg==}
+  knip@6.9.0:
+    resolution: {integrity: sha512-2GLjxteBwmsSA3Z5sJZpPDaNPBIMnlm4/9Nx4CZadEK7YccJZ2/4kwKgPWhVYEqxhwhD0WO4txWXNGTO/Odkkg==}
    engines: {node: ^20.19.0 || >=22.12.0}
    hasBin: true

@ -3830,11 +3842,11 @@ snapshots:

  '@effect/language-service@0.85.1': {}

-  '@effect/tsgo-linux-x64@0.5.1': {}
+  '@effect/tsgo-linux-x64@0.5.2': {}

-  '@effect/tsgo@0.5.1':
+  '@effect/tsgo@0.5.2':
    optionalDependencies:
-      '@effect/tsgo-linux-x64': 0.5.1
+      '@effect/tsgo-linux-x64': 0.5.2

  '@es-joy/jsdoccomment@0.86.0':
    dependencies:
@ -4007,33 +4019,33 @@ snapshots:

  '@rolldown/pluginutils@1.0.0-rc.17': {}

-  '@sentry-internal/browser-utils@10.50.0':
+  '@sentry-internal/browser-utils@10.51.0':
    dependencies:
-      '@sentry/core': 10.50.0
+      '@sentry/core': 10.51.0

-  '@sentry-internal/feedback@10.50.0':
+  '@sentry-internal/feedback@10.51.0':
    dependencies:
-      '@sentry/core': 10.50.0
+      '@sentry/core': 10.51.0

-  '@sentry-internal/replay-canvas@10.50.0':
+  '@sentry-internal/replay-canvas@10.51.0':
    dependencies:
-      '@sentry-internal/replay': 10.50.0
-      '@sentry/core': 10.50.0
+      '@sentry-internal/replay': 10.51.0
+      '@sentry/core': 10.51.0

-  '@sentry-internal/replay@10.50.0':
+  '@sentry-internal/replay@10.51.0':
    dependencies:
-      '@sentry-internal/browser-utils': 10.50.0
-      '@sentry/core': 10.50.0
+      '@sentry-internal/browser-utils': 10.51.0
+      '@sentry/core': 10.51.0

-  '@sentry/browser@10.50.0':
+  '@sentry/browser@10.51.0':
    dependencies:
-      '@sentry-internal/browser-utils': 10.50.0
-      '@sentry-internal/feedback': 10.50.0
-      '@sentry-internal/replay': 10.50.0
-      '@sentry-internal/replay-canvas': 10.50.0
-      '@sentry/core': 10.50.0
+      '@sentry-internal/browser-utils': 10.51.0
+      '@sentry-internal/feedback': 10.51.0
+      '@sentry-internal/replay': 10.51.0
+      '@sentry-internal/replay-canvas': 10.51.0
+      '@sentry/core': 10.51.0

-  '@sentry/core@10.50.0': {}
+  '@sentry/core@10.51.0': {}

  '@sindresorhus/base62@1.0.0': {}

@ -5102,10 +5114,19 @@ snapshots:

  hookified@2.2.0: {}

+  html-element-attributes@3.5.0: {}
+
  html-entities@2.6.0: {}

+  html-es6cape@2.0.2: {}
+
  html-tags@5.1.0: {}

+  html-template-tag@5.0.0:
+    dependencies:
+      html-element-attributes: 3.5.0
+      html-es6cape: 2.0.2
+
  ignore@5.3.2: {}

  ignore@7.0.5: {}
@ -5310,7 +5331,7 @@ snapshots:

  kind-of@6.0.3: {}

-  knip@6.8.0:
+  knip@6.9.0:
    dependencies:
      fdir: 6.5.0(picomatch@4.0.4)
      formatly: 0.3.0
--- a/config/environments/development.php
+++ b/config/environments/development.php
@ -8,6 +8,7 @@ declare(strict_types=1);

 use Roots\WPConfig\Config;

+use function base64_encode;
 use function Env\env;

 Config::define('SAVEQUERIES', true);
@ -25,6 +26,10 @@ Config::define('DISALLOW_FILE_MODS', false);
 // WooCommerce
 Config::define('WOOCOMMERCE_API_CONSUMER_KEY', env('WOOCOMMERCE_API_CONSUMER_KEY'));
 Config::define('WOOCOMMERCE_API_CONSUMER_SECRET', env('WOOCOMMERCE_API_CONSUMER_SECRET'));
+Config::define(
+  'WOOCOMMERCE_API_AUTH_STRING',
+  base64_encode(env('WOOCOMMERCE_API_CONSUMER_KEY') . ':' . env('WOOCOMMERCE_API_CONSUMER_SECRET')),
+);

 // Stripe
 Config::define('STRIPE_API_SECRET', env('STRIPE_API_SECRET'));
--- a/config/environments/production.php
+++ b/config/environments/production.php
@ -8,6 +8,7 @@ declare(strict_types=1);

 use Roots\WPConfig\Config;

+use function base64_encode;
 use function Env\env;

 Config::define('WP_DEBUG', true);
@ -20,6 +21,10 @@ Config::define('DISALLOW_FILE_MODS', false);

 Config::define('WOOCOMMERCE_API_CONSUMER_KEY', env('WOOCOMMERCE_API_CONSUMER_KEY'));
 Config::define('WOOCOMMERCE_API_CONSUMER_SECRET', env('WOOCOMMERCE_API_CONSUMER_SECRET'));
+Config::define(
+  'WOOCOMMERCE_API_AUTH_STRING',
+  base64_encode(env('WOOCOMMERCE_API_CONSUMER_KEY') . ':' . env('WOOCOMMERCE_API_CONSUMER_SECRET')),
+);

 // Stripe
 Config::define('STRIPE_API_SECRET', env('STRIPE_API_SECRET'));
--- a/config/environments/staging.php
+++ b/config/environments/staging.php
@ -8,8 +8,13 @@ declare(strict_types=1);

 use Roots\WPConfig\Config;

+use function base64_encode;
 use function Env\env;

 Config::define('DISALLOW_INDEXING', true);
 Config::define('WOOCOMMERCE_API_CONSUMER_KEY', env('WOOCOMMERCE_API_CONSUMER_KEY'));
 Config::define('WOOCOMMERCE_API_CONSUMER_SECRET', env('WOOCOMMERCE_API_CONSUMER_SECRET'));
+Config::define(
+  'WOOCOMMERCE_API_AUTH_STRING',
+  base64_encode(env('WOOCOMMERCE_API_CONSUMER_KEY') . ':' . env('WOOCOMMERCE_API_CONSUMER_SECRET')),
+);
--- a/10
+++ b/10
@ -90,6 +90,11 @@ watch-css:
 build-js:
    aube x vite build --config "cfg/vite.config.ts"

+# Compile TypeScript à chaque changement de fichier.
+[group('js')]
+watch-js:
+    @watchexec -w "web/app/themes/haiku-atelier-2024/src/scripts" -w "web/app/themes/haiku-atelier-2024/src/scripts-effect" -- just build-js treefmt
+
 # Compile tout.
 [group('css')]
 [group('js')]
@ -98,11 +103,6 @@ build-all:
    @just build-js
    @just format

-# Compile TypeScript à chaque changement de fichier.
-[group('js')]
-watch-js:
-    aube x vite build --config "cfg/vite.config.ts" --watch
-
 # Vérifie le code TypeScript avec des analyseurs statiques.
 [group('js')]
 [group('qualité')]
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "@sentry/browser": "^10.50.0",
    "a11y-dialog": "^8.1.5",
    "effect": "^4.0.0-beta.59",
+    "html-template-tag": "^5.0.0",
    "lit-html": "^3.3.2",
    "purify-ts": "2.1.2",
    "ts-pattern": "^5.9.0",
@ -23,7 +24,7 @@
  },
  "devDependencies": {
    "@effect/language-service": "^0.85.1",
-    "@effect/tsgo": "0.5.1",
+    "@effect/tsgo": "^0.5.1",
    "@gcch/configuration-eslint": "git+https://git.gcch.fr/gcch/configuration-eslint#888eb4aa54",
    "@gcch/configuration-oxlint": "git+https://git.gcch.fr/gcch/configuration-oxlint#83547fc1ebfd",
    "@gcch/configuration-prettier": "git+https://git.gcch.fr/gcch/configuration-prettier#d267d6dc5e",
--- a/web/app/themes/haiku-atelier-2024/archive-product.php
+++ b/web/app/themes/haiku-atelier-2024/archive-product.php
@ -17,7 +17,6 @@ use WC_Product;
 use function add_action;
 use function array_map;
 use function assert;
-use function base64_encode;
 use function is_string;
 use function wc_get_products;
 use function wp_create_nonce;
@ -33,12 +32,7 @@ $products = array_map(callback: Product::from_wc_product(...), array: $wc_produc
 $context['products'] = $products;

 // Injecte les états initiaux des données du Produit sous forme de JSON dans le contexte.
-$page_states = [
-  'nonce' => wp_create_nonce('wc_store_api'),
-  'authString' => base64_encode(
-    Config::get('WOOCOMMERCE_API_CONSUMER_KEY') . ':' . Config::get('WOOCOMMERCE_API_CONSUMER_SECRET'),
-  ),
-]
+$page_states = ['authString' => Config::get('WOOCOMMERCE_API_AUTH_STRING'), 'nonce' => wp_create_nonce('wc_store_api')]
  |> wp_json_encode(...);
 assert(is_string($page_states));
 $context['page_states'] = $page_states;
--- a/web/app/themes/haiku-atelier-2024/assets/css/main.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css
@ -462,8 +462,8 @@ input[type="checkbox"], input[type="radio"] {
  transition: 0.2s background;
 }
 input[type="checkbox"]:checked, input[type="radio"]:checked {
-  color: var(--couleur-blanc);
-  background: var(--couleur-gris-fonce);
+  color: var(--couleur-noir);
+  background: var(--arriere-plan-points);
 }
 input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
  content: "x";
@ -492,7 +492,7 @@ input[type="radio"] + label {
 }
@media (hover: hover) {
  input[type="checkbox"]:hover, input[type="radio"]:hover {
-    background: var(--couleur-gris-fonce);
+    background: var(--arriere-plan-points);
  }
 }

--- a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css
--- a/web/app/themes/haiku-atelier-2024/src/inc/FonctionnalitesWooCommerce.php
+++ b/web/app/themes/haiku-atelier-2024/src/inc/FonctionnalitesWooCommerce.php
@ -131,7 +131,8 @@ function retire_merdes_wc(): void {
 */
 function genere_balises_img_dans_produit_dans_reponse_rest(
  WP_REST_Response $response,
-  mixed $_product,
+  WC_Data $_product,
+  WP_REST_Request $_request,
 ): WP_REST_Response {
  // Vérifie que la Réponse a des données
  if (empty($response->data)) {
@ -169,37 +170,34 @@ function genere_balises_img_dans_produit_dans_reponse_rest(
  return $response;
 }

-add_filter('woocommerce_rest_prepare_product_object', 'genere_balises_img_dans_produit_dans_reponse_rest', 10, 2);
-
 /**
 * TODO.
 */
 function genere_prix_maximal_produit_variable_dans_reponse_rest(
-  WP_REST_Response $reponse,
-  WC_Data $_produit,
+  WP_REST_Response $response,
+  WC_Data $_product,
+  WP_REST_Request $_request,
 ): WP_REST_Response {
  // Vérifie que la Réponse a des données
-  if (empty($reponse->data)) {
-    return $reponse;
+  if (empty($response->data)) {
+    return $response;
  }

  // Si le Produit n'est pas Variable, assigner le prix du Produit comme prix maximal
-  if ('variable' !== $reponse->data['type']) {
-    $reponse->data['prix_maximal'] = $reponse->data['regular_price'];
+  if ('variable' !== $response->data['type']) {
+    $response->data['prix_maximal'] = $response->data['regular_price'];

-    return $reponse;
+    return $response;
  }

  // Assigne le prix de la Variation la plus chère dans la Réponse
-  $reponse->data['prix_maximal'] = collect($reponse->data['variations'])
+  $response->data['prix_maximal'] = collect($response->data['variations'])
    ->map(wc_get_product(...))
    ->map(static fn($p) => $p->get_price())->max();

-  return $reponse;
+  return $response;
 }

-add_filter('woocommerce_rest_prepare_product_object', 'genere_prix_maximal_produit_variable_dans_reponse_rest', 10, 2);
-
 /**
 * Retire la propagande commerciale de WooCommerce du menu.
 */
@ -216,3 +214,8 @@ add_action('init', 'retire_script_galerie');
 add_action('template_redirect', 'retire_merdes_wc');
 add_action('wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts');
 add_filter('woocommerce_enqueue_styles', '__return_empty_array');
+add_filter('woocommerce_rest_prepare_product_object', 'genere_balises_img_dans_produit_dans_reponse_rest', 10, 3);
+add_filter('woocommerce_rest_prepare_product_object', 'genere_prix_maximal_produit_variable_dans_reponse_rest', 10, 3);
+
+// DEBUG
+// add_filter('woocommerce_store_api_disable_nonce_check', '__return_true');
--- a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
@ -66,8 +66,8 @@ input[type="checkbox"], input[type="radio"] {
  transition: 0.2s background;

  &:checked {
-    color: var(--couleur-blanc);
-    background: var(--couleur-gris-fonce);
+    color: var(--couleur-noir);
+    background: var(--arriere-plan-points);

    // TODO: Utiliser un SVG plutôt qu'un « x » ?
    &::before {
@ -98,7 +98,7 @@ input[type="checkbox"], input[type="radio"] {

  @media (hover: hover) {
    &:hover {
-      background: var(--couleur-gris-fonce);
+      background: var(--arriere-plan-points);
    }
  }
 }
--- a/web/app/themes/haiku-atelier-2024/src/scripts-effect/lib/api.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts-effect/lib/api.ts
@ -1,4 +1,4 @@
-import { Console, Context, Effect, Layer, Match, pipe, Schedule, Schema, SchemaIssue } from "effect";
+import { Console, Context, Effect, Layer, Match, pipe, References, Schedule, Schema, SchemaIssue } from "effect";
 import type { SchemaError } from "effect/Schema";
 import type {
  HttpClientError,
@ -11,6 +11,7 @@ import {
 } from "effect/unstable/http";
 import { HttpClientErrorSchema } from "effect/unstable/http/HttpClientError";
 import type { CartProduct, GetProducts } from "../schemas/api.ts";
+import { Product } from "../schemas/api.ts";
 import { WooCommerceCart } from "../schemas/cart.ts";

 /** Le nombre maximal d'essais pour une Requête. */
@ -52,7 +53,7 @@ const APIFetchClient = FetchHttpClient.layer.pipe(
    Layer.succeed(
      FetchHttpClient.RequestInit,
      {
-        credentials: "same-origin",
+        credentials: "include",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
@ -135,18 +136,22 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
    );

    const GetProducts = Effect.fn("APIClient.GetProducts")(
-      function*(nonce: string, authString: string, queryParams: GetProducts) {
+      function*(nonce: string, queryParams: GetProducts) {
        const request = pipe(
-          HttpClientRequest.get(`/wp-json/wc/store/products`),
+          HttpClientRequest.get(`/wp-json/wc/v3/products`),
          HttpClientRequest.setHeader("Nonce", nonce),
-          HttpClientRequest.bearerToken(authString),
+          // TODO: Utiliser l'environnement
+          HttpClientRequest.basicAuth(
+            "ck_eded693107df0dbc19dab937e0c71325db810a4a",
+            "cs_a68c0f3e711c4a21be51495d09e6fe807649bbfb",
+          ),
          // Le corps de la Requête a été validée en amont, on peut utiliser Unsafe.
          HttpClientRequest.setUrlParams(queryParams),
        );

        const response = yield* pipe(
          haikuHTTPClient.execute(request),
-          Effect.flatMap(HttpClientResponse.schemaBodyJson(Schema.Unknown)),
+          Effect.flatMap(HttpClientResponse.schemaBodyJson(Schema.Array(Product))),
          Effect.mapError(error => matchAPIError(error)),
          Effect.tapError(error => printErrorAsSuccinctMessage(error)),
        );
--- a/web/app/themes/haiku-atelier-2024/src/scripts-effect/schemas/api.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts-effect/schemas/api.ts
@ -1,5 +1,5 @@
 import { Schema } from "effect";
-import { ProductId, ProductQuantity, ProductVariationAttribute } from "./product.ts";
+import { ProductId, ProductQuantity, ProductStatus, ProductVariationAttribute } from "./product.ts";

 class CartProduct extends Schema.Class<CartProduct>("CartProduct")({
  id: ProductId,
@ -7,4 +7,58 @@ class CartProduct extends Schema.Class<CartProduct>("CartProduct")({
  variation: Schema.Array(ProductVariationAttribute),
 }) {}

-export { CartProduct };
+class GetProducts extends Schema.Class<GetProducts>("GetProducts")({
+  /** L'ID de la Catégorie de Produits demandé. */
+  category: Schema.Int.pipe(Schema.optional),
+  /** Le numéro de page demandé. */
+  page: Schema.Int,
+  /** Le nombre de Produits par page demandé. */
+  per_page: Schema.Int,
+  /** Le statut demandé des Produits. */
+  status: ProductStatus,
+}) {}
+
+class Product extends Schema.Class<Product>("Product")({
+  attributes: Schema.Unknown,
+  brands: Schema.Unknown,
+  // TODO: Pourrait être une énumération.
+  catalog_visibility: Schema.String,
+  categories: Schema.Unknown,
+  description: Schema.String,
+  dimensions: Schema.Unknown,
+  featured: Schema.Boolean,
+  grouped_products: Schema.Unknown,
+  has_options: Schema.Boolean,
+  id: Schema.Int,
+  // NOTE: Non-standard, injecté dans la Réponse.
+  image_repos: Schema.String,
+  // NOTE: Non-standard, injecté dans la Réponse.
+  image_survol: Schema.String,
+  images: Schema.Unknown,
+  low_stock_amount: Schema.Union([Schema.Number, Schema.Null]),
+  menu_order: Schema.Int,
+  meta_data: Schema.Unknown,
+  name: Schema.String,
+  on_sale: Schema.Boolean,
+  parent_id: Schema.Int,
+  permalink: Schema.URLFromString,
+  price: Schema.String,
+  // NOTE: Non-standard, injecté dans la Réponse.
+  prix_maximal: Schema.String,
+  regular_price: Schema.String,
+  sale_price: Schema.String,
+  short_description: Schema.String,
+  sku: Schema.String,
+  slug: Schema.String,
+  sold_individually: Schema.Boolean,
+  stock_quantity: Schema.Union([Schema.Int, Schema.Null]),
+  // TODO: Pourrait être une énumération.
+  stock_status: Schema.String,
+  tags: Schema.Unknown,
+  type: Schema.Literals(["external", "grouped", "simple", "variable"]),
+  variations: Schema.Array(Schema.Int),
+  virtual: Schema.Boolean,
+  weight: Schema.String,
+}) {}
+
+export { CartProduct, GetProducts, Product };
--- a/web/app/themes/haiku-atelier-2024/src/scripts-effect/schemas/product.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts-effect/schemas/product.ts
@ -2,6 +2,8 @@
 import { Effect, Option, pipe, Schema, SchemaIssue, SchemaTransformation } from "effect";
 import type { SchemaError } from "effect/Schema";

+const ProductStatus = Schema.Literals(["any", "draft", "future", "pending", "private", "publish", "trash"]);
+
 /** Représente l'identifiant numérique unique d'un Produit. */
 const ProductId = Schema.Int.pipe(Schema.brand("ProductId")).check(Schema.isGreaterThan(0));

@ -78,6 +80,7 @@ export {
  ProductId,
  ProductQuantity,
  ProductQuantityFromString,
+  ProductStatus,
  ProductVariation,
  ProductVariationAttribute,
 };
--- a/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/runtime.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/runtime.ts
@ -0,0 +1,17 @@
+import { Console, Layer, ManagedRuntime, pipe } from "effect";
+
+import { APIClient } from "../../scripts-effect/lib/api.ts";
+import ShopPageDOM from "./service-dom.ts";
+import ShopPageElements from "./service-elements.ts";
+import ShopPageMessages from "./service-messages.ts";
+
+const ShopPageRuntime = ManagedRuntime.make(
+  pipe(
+    ShopPageDOM.Live,
+    Layer.provideMerge(ShopPageMessages.Live),
+    Layer.provideMerge(ShopPageElements.Live),
+    Layer.provide(APIClient.Live),
+    Layer.tapError(error => Console.error("ProductPageRuntime", "Impossible de créer le Layer :", error)),
+  ),
+);
+export default ShopPageRuntime;
--- a/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/service-dom.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/service-dom.ts
@ -0,0 +1,163 @@
+import {
+  Array as FxArray,
+  Console,
+  Context,
+  Effect,
+  Layer,
+  Option,
+  pipe,
+  Ref,
+  Schema,
+  SchemaIssue,
+  Stream,
+  SubscriptionRef,
+} from "effect";
+import { SchemaError } from "effect/Schema";
+import html from "html-template-tag";
+import { APIClient } from "../../scripts-effect/lib/api.ts";
+import { setLoadingState } from "../../scripts-effect/lib/elements.ts";
+import { GetProducts, Product } from "../../scripts-effect/schemas/api.ts";
+import { ATTRIBUT_HIDDEN, ATTRIBUT_ID_CATEGORIE_PRODUITS, ATTRIBUT_PAGE } from "../constantes/dom.ts";
+import ShopPageElements from "./service-elements.ts";
+import ShopPageMessages from "./service-messages.ts";
+
+/** Le nombre de Produits à afficher par « page ». */
+const PRODUCTS_PER_PAGE = 18;
+
+/** Forme attendue des données injectées dans la page sous forme de JSON. */
+class PageStates extends Schema.Opaque<PageStates>()(
+  Schema.Struct({
+    authString: Schema.NonEmptyString,
+    nonce: Schema.NonEmptyString,
+  }),
+) {}
+
+/** Représente une Erreur liée à un état de page invalide ou incohérent empêchant la poursuite des interactions/de la navigation. */
+class InvalidShopPageStateError
+  extends Schema.TaggedErrorClass<InvalidShopPageStateError>()("InvalidShopPageStateError", {
+    cause: Schema.String,
+  })
+{
+  /** Créé une `InvalidShopPageStateError` depuis une `SchemaError` levée suite à une validation. */
+  static readonly fromSchemaError = (schemaError: SchemaError): InvalidShopPageStateError =>
+    new InvalidShopPageStateError({
+      cause: SchemaIssue.makeFormatterDefault()(schemaError.issue),
+    });
+}
+
+class ShopPageDOM extends Context.Service<ShopPageDOM>()("haikuatelier.fr/Shop/ShopPageDOM", {
+  make: Effect.gen(function*() {
+    const { PageStatesRawJson, ProductsGrid, ShowMoreButton } = yield* ShopPageElements;
+    const { ShowMoreButtonText } = yield* ShopPageMessages;
+    const API = yield* APIClient;
+
+    const { authString, nonce } = yield* pipe(
+      PageStatesRawJson.textContent,
+      (textContent: string) =>
+        Schema.decodeUnknownEffect(Schema.fromJsonString(PageStates))(textContent, { errors: "all" }),
+      Effect.mapError(InvalidShopPageStateError.fromSchemaError),
+    );
+
+    /** ID de la Catégorie des Produits de la Page, si la Page courante est une Archive. */
+    const ProductsCategoryId = yield* pipe(
+      ProductsGrid.getAttribute(ATTRIBUT_ID_CATEGORIE_PRODUITS),
+      Number,
+      Option.fromNullishOr,
+      Ref.make,
+    );
+
+    // TODO: Créer une SubscriptionRef mettant à jour le DOM au changement de valeur.
+    const PageNumber = yield* Ref.make(1);
+
+    const createProductDOM = (product: Product): HTMLElement => {
+      const article = document.createElement("article");
+      article.classList.add("produit");
+      article.innerHTML = html`<figure>
+                <a href="/product/${product.slug}">
+                  <picture class="produit__illustration produit__illustration__principale">
+                    $${product.image_repos}
+                  </picture>
+
+                  <picture class="produit__illustration produit__illustration__survol">
+                    $${product.image_survol}
+                  </picture>
+                </a>
+
+                <figcaption class="produit__textuel">
+                  <h3 class="produit__textuel__titre">
+                    <a href="$${product.permalink.toString()}">${product.name}</a>
+                  </h3>
+                  <p class="produit__textuel__prix">
+                    ${product.prix_maximal}€
+                  </p>
+                </figcaption>
+              </figure>
+          `;
+      return article;
+    };
+    const createNewPageDOM = (products: ReadonlyArray<Product>) => {
+      const fragment: DocumentFragment = document.createDocumentFragment();
+
+      // Ajoute le HTML des cartes des Produits au fragment.
+      pipe(
+        FxArray.take(products, PRODUCTS_PER_PAGE),
+        FxArray.forEach(product => {
+          const productHTML = createProductDOM(product);
+          fragment.append(productHTML);
+        }),
+      );
+
+      return fragment;
+    };
+
+    const onMoreProductedWantedHandler = Effect.fn("onMoreProductedWantedHandler")(function*() {
+      yield* Console.debug("onMoreProductedWantedHandler");
+
+      /** Le numéro de page souhaitée. */
+      const newPageNumber = yield* Ref.updateAndGet(PageNumber, pageNumber => pageNumber + 1);
+      /** L'ID de la Catégorie de Produits affichée dans la page si elle existe. */
+      const categoryId = pipe(yield* Ref.get(ProductsCategoryId), Option.getOrUndefined);
+
+      const requestBody = yield* GetProducts.makeEffect({
+        page: newPageNumber,
+        per_page: PRODUCTS_PER_PAGE,
+        status: "publish",
+        ...(categoryId && { category: categoryId }),
+      });
+
+      // Désactive les interactions et affiche un texte de chargement le temps de la requête.
+      yield* setLoadingState(ShowMoreButton, true);
+      yield* SubscriptionRef.set(ShowMoreButtonText, "Getting Products...");
+
+      const newProducts = yield* API.GetProducts(nonce, requestBody);
+      yield* Console.debug("onMoreProductedWantedHandler", newProducts);
+
+      // Rétablis le texte du Bouton et réactive les interactions.
+      yield* SubscriptionRef.set(ShowMoreButtonText, "Show more");
+      yield* setLoadingState(ShowMoreButton, false);
+
+      // Cache le bouton s'il y a moins de Produits disponibles que PRODUCTS_PER_PAGE (que l'on est donc à la dernière page).
+      ShowMoreButton.toggleAttribute(ATTRIBUT_HIDDEN, newProducts.length < PRODUCTS_PER_PAGE);
+
+      // Ajoute les nouveaux Produits dans le DOM.
+      ProductsGrid.append(fragment);
+      ProductsGrid.setAttribute(ATTRIBUT_PAGE, String(newPageNumber));
+    });
+
+    const initLoadMoreProductsOnButtonClick = Effect.fn("initLoadMoreProductsOnButtonClick")(function*() {
+      return yield* pipe(
+        Stream.fromEventListener(ShowMoreButton, "click"),
+        Stream.tap(onMoreProductedWantedHandler),
+        Stream.runDrain,
+      );
+    });
+
+    return {
+      ProductsCategoryId,
+      initLoadMoreProductsOnButtonClick,
+    };
+  }),
+}) {
+  static readonly Live = Layer.effect(this, this.make);
+}
+export default ShopPageDOM;
--- a/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/service-elements.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/service-elements.ts
@ -0,0 +1,26 @@
+import { Context, Effect, Layer } from "effect";
+import { getFirstSelectorFromDocument } from "../../scripts-effect/lib/dom.ts";
+import { IncoherentDOMError } from "../page-produit/errors.ts";
+
+class ShopPageElements extends Context.Service<ShopPageElements>()("haikuatelier.fr/Shop/ShopPageElements", {
+  make: Effect.gen(function*() {
+    const PageStatesRawJson = yield* getFirstSelectorFromDocument<HTMLScriptElement>("#page-states");
+
+    /** Le Bouton « Show more » pour afficher plus de Produits à la suite de la Grille. */
+    const ShowMoreButton = yield* getFirstSelectorFromDocument<HTMLButtonElement>(
+      "#page-boutique #bouton-plus-de-produits",
+    );
+
+    /** Le conteneur de la Grille des Produits. */
+    const ProductsGrid = yield* getFirstSelectorFromDocument<HTMLDivElement>("#page-boutique .grille-produits");
+
+    return {
+      PageStatesRawJson,
+      ProductsGrid,
+      ShowMoreButton,
+    };
+  }).pipe(Effect.mapErrorEager(IncoherentDOMError.fromNoSuchElementError)),
+}) {
+  static readonly Live = Layer.effect(this, this.make);
+}
+export default ShopPageElements;
--- a/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/service-messages.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-boutique/service-messages.ts
@ -0,0 +1,29 @@
+import { Context, Effect, Layer, pipe, Stream, SubscriptionRef } from "effect";
+
+import ShopPageElements from "./service-elements.ts";
+
+class ShopPageMessages extends Context.Service<ShopPageMessages>()("haikuatelier.fr/Shop/Messages", {
+  make: Effect.gen(function*() {
+    const { ShowMoreButton } = yield* ShopPageElements;
+
+    const ShowMoreButtonText = yield* SubscriptionRef.make("Show more");
+    // Const ShowMoreErrorText = yield* SubscriptionRef.make<Option.Option<string>>(Option.none());
+
+    const initShowMoreButtonUpdates = Effect.fn("initShowMoreButtonUpdates")(function*() {
+      return yield* pipe(
+        SubscriptionRef.changes(ShowMoreButtonText),
+        Stream.tap(newText => {
+          ShowMoreButton.textContent = newText;
+          return Effect.succeed(newText);
+        }),
+        Stream.runDrain,
+      );
+    });
+
+    return { ShowMoreButtonText, initShowMoreButtonUpdates };
+  }),
+}) {
+  static readonly Live = Layer.effect(this, this.make);
+}
+
+export default ShopPageMessages;
--- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts
+++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts
@ -2,75 +2,24 @@
 * Scripts pour les fonctionnalités de la page Boutique.
 */

-import { pipe } from "@mobily/ts-belt";
-import { tap } from "@mobily/ts-belt/Function";
-import { EitherAsync } from "purify-ts";
-import { match, P } from "ts-pattern";
-import { ValiError } from "valibot";
-
-import type { APIFetchErrors } from "./lib/types/api/erreurs";
-import type { WCV3Products, WCV3ProductsArgs } from "./lib/types/api/v3/products.ts";
-import type { GenericPageState } from "./lib/types/pages";
-
-import { ROUTE_API_NOUVELLE_PRODUCTS } from "./constantes/api.ts";
-import { PRODUCT_STATUTES } from "./constantes/api/products.ts";
-import {
-  ATTRIBUT_CHARGEMENT,
-  ATTRIBUT_DESACTIVE,
-  ATTRIBUT_HIDDEN,
-  ATTRIBUT_ID_CATEGORIE_PRODUITS,
-  ATTRIBUT_PAGE,
-  DOM_BOUTON_PLUS_PRODUITS,
-  DOM_GRILLE_PRODUITS,
-} from "./constantes/dom.ts";
-import { lanceAnimationCycleLoading } from "./lib/animations.ts";
-import { html, mustGetEleInDocument } from "./lib/dom.ts";
-import { BadRequestError, reporteErreur, ServerError } from "./lib/erreurs.ts";
-import { getBackendAvecParametresUrl, newPartialResponse } from "./lib/reseau.ts";
-import { WCV3ProductsArgsSchema, WCV3ProductsSchema } from "./lib/schemas/api/v3/products.ts";
-import { safeSchemaParse } from "./lib/validation.ts";
-
-type APIProductsErrors =
-  | APIFetchErrors
-  | ValiError<typeof WCV3ProductsArgsSchema>
-  | ValiError<typeof WCV3ProductsSchema>;
-
-// @ts-expect-error -- États injectés par le modèle PHP
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- États injectés par le modèle PHP
-const ETATS_PAGE: GenericPageState = _etats;
-
-// Numéros magiques
-const PRODUCTS_PER_PAGE = 12;
-
-// Éléments d'intérêt
-const E = {
-  BOUTON_PLUS_DE_PRODUITS: mustGetEleInDocument<HTMLButtonElement>(DOM_BOUTON_PLUS_PRODUITS),
-  GRILLE_PRODUITS: mustGetEleInDocument<HTMLDivElement>(DOM_GRILLE_PRODUITS),
-};
-
-/**
- * TODO
- */
-const initialisePageBoutique = (): void => {
-  /** ID de la Catégorie de Produits si la Page courante est l'Archive d'une Catégorie. */
-  const idCategorieProduits: null | string = E.GRILLE_PRODUITS.getAttribute(ATTRIBUT_ID_CATEGORIE_PRODUITS);
-
-  E.BOUTON_PLUS_DE_PRODUITS.addEventListener("click", (): void => {
-    /** Le numéro de page demandée par l'Utilisateur. */
-    const nouveauNumeroPage = Number(E.GRILLE_PRODUITS.getAttribute(ATTRIBUT_PAGE)) + 1;
-    /** Les arguments passés à la requête auprès Backend pour la nouvelle page de Produits. */
-    const args: WCV3ProductsArgs = {
-      page: nouveauNumeroPage,
-      per_page: PRODUCTS_PER_PAGE,
-      status: PRODUCT_STATUTES.PUBLISH,
-      // Ajoute conditionnellement la Catégorie de Produits
-      ...(idCategorieProduits && { category: idCategorieProduits }),
-    };
-
-    undefined;
-  });
-};
+import { Console, Effect } from "effect";
+import ShopPageRuntime from "./page-boutique/runtime.ts";
+import ShopPageDOM from "./page-boutique/service-dom.ts";
+import ShopPageElements from "./page-boutique/service-elements.ts";
+import ShopPageMessages from "./page-boutique/service-messages.ts";

 document.addEventListener("DOMContentLoaded", (): void => {
-  initialisePageBoutique();
+  console.debug("scripts-page-boutique");
+  // initialisePageBoutique();
+  ShopPageRuntime.runFork(Effect.gen(function*() {
+    const Elements = yield* ShopPageElements;
+    const DOM = yield* ShopPageDOM;
+    const Messages = yield* ShopPageMessages;
+
+    yield* Effect.all([DOM.initLoadMoreProductsOnButtonClick(), Messages.initShowMoreButtonUpdates()], {
+      concurrency: "unbounded",
+    }).pipe(Effect.tapError(Console.error));
+
+    console.debug(Elements.ProductsGrid);
+  }));
 });
Author	SHA1	Message	Date
gcch	c61e631172	ref(env) wip	2026-04-30 17:24:22 +02:00
gcch	53d71ea183	ref(justfile) utilise watchexec pour la tâche de compilation JS à la màj des fichiers	2026-04-30 17:23:05 +02:00
gcch	50f2b67bc4	ref(styles) wip harmonisation des Boutons	2026-04-30 17:22:37 +02:00
gcch	de0a175624	corvée(deps) installe html-template-tag	2026-04-30 17:22:37 +02:00
gcch	b643443b57	corvée(deps) met à jour les dépendances	2026-04-30 17:22:37 +02:00
gcch	c08717195a	ref(boutique) wip scripts sous forme Effect	2026-04-30 17:22:37 +02:00