From fa1a8bee540c6e5f344d89221154526677770e04 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 17 Sep 2025 09:02:09 +0300
Subject: [PATCH] Extract FormatNumber Hook

---
 assets/js/app.js                                     |  2 ++
 assets/js/hooks/format-number.js                     |  8 ++++++++
 lib/music_library_web/components/stats_components.ex | 12 +-----------
 3 files changed, 11 insertions(+), 11 deletions(-)
 create mode 100644 assets/js/hooks/format-number.js

diff --git a/assets/js/app.js b/assets/js/app.js
index 3add91fa..456916ea 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -24,11 +24,13 @@ import { hooks as colocatedHooks } from "phoenix-colocated/music_library";
 import topbar from "../vendor/topbar";
 import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import BarcodeScannerHook from "./hooks/barcode-scanner";
+import FormatNumberHook from "./hooks/format-number";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 
 let Hooks = FluxonHooks;
 Hooks.BarcodeScanner = BarcodeScannerHook;
+Hooks.FormatNumber = FormatNumberHook;
 Hooks.LiveToast = createLiveToastHook();
 
 const csrfToken = document
diff --git a/assets/js/hooks/format-number.js b/assets/js/hooks/format-number.js
new file mode 100644
index 00000000..7ea04499
--- /dev/null
+++ b/assets/js/hooks/format-number.js
@@ -0,0 +1,8 @@
+export default {
+  mounted() {
+    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
+  },
+  updated() {
+    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
+  }
+}
diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex
index 34d442dd..c7412743 100644
--- a/lib/music_library_web/components/stats_components.ex
+++ b/lib/music_library_web/components/stats_components.ex
@@ -78,17 +78,7 @@ defmodule MusicLibraryWeb.StatsComponents do
         <dd :if={@tooltip} class="mt-1">
           <.tooltip>
             <:content>
-              <script :type={Phoenix.LiveView.ColocatedHook} name=".FormatNumber">
-                export default {
-                  mounted() {
-                    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
-                  },
-                  updated() {
-                    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
-                  }
-                }
-              </script>
-              <span id={"#{@title}-counter-tooltip"} phx-hook=".FormatNumber">{@tooltip}</span>
+              <span id={"#{@title}-counter-tooltip"} phx-hook="FormatNumber">{@tooltip}</span>
             </:content>
             <.link
               :if={@path}