new: pkg: add tracking code for the app #10

CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
 
+## v2026.2.8-3 (2026-04-22)
+
+### Fix
+
+* The error message cannot be seen during avatar changing #10. [Lang]
+
+
+## v2026.2.8-2 (2026-04-21)
+
+### Changes
+
+* Increase the 2 MB avatar maximum file size to 10 MB #10. [Lang]
+
+
 ## v2026.2.8-1 (2026-04-21)
 
 ### Changes

assets/css/homepage/_profile.scss

@@ -28,6 +28,21 @@
   box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
 }
 
+#profile-avatar-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.profile-avatar__error {
+  font-size: 11px;
+  color: #e57373;
+  text-align: center;
+  max-width: 120px;
+  line-height: 1.3;
+}
+
 .profile-avatar {
   position: relative;
   width: 80px;

assets/js/components/AvatarUpload.jsx

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 
-import React, { useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { string } from 'prop-types';
 import { useProfileDataProvider } from '@mine-hooks/useGameDataProvider';
 
@@ -16,6 +16,8 @@ export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
   const [thumbUrl, setThumbUrl] = React.useState(initialThumbUrl || null);
   const { uploadAvatarMutation: { isPending, error, mutate } } = useProfileDataProvider();
 
+  const errorMessage = useMemo(() => error?.message ?? null, [error]);
+
   const handleChange = e => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -40,9 +42,8 @@ export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
     });
   };
 
-  const errorMessage = useMemo(() => error?.message ?? null, [error]);
-
   return (
+    <Fragment>
       <div
         className={`profile-avatar${isPending ? ' profile-avatar--loading' : ''}`}
         title="Click to change profile picture"
@@ -62,10 +63,11 @@ export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
           style={{ display: 'none' }}
           onChange={handleChange}
         />
-      {errorMessage && <div className="profile-avatar__error">{errorMessage}</div>}
       </div>
+      {errorMessage && <div className="profile-avatar__error">{errorMessage}</div>}
+    </Fragment>
   );
-}
+};
 
 AvatarUpload.propTypes = {
   uploadUrl: string.isRequired,

templates/base.html.twig

@@ -28,6 +28,20 @@
   <link rel="icon" href="{{ asset('/images/favicon/favicon.ico') }}" type="image/x-icon">
   {% block metas %}{% endblock %}
   <title>MineSeeker{% block title %}{% endblock %}</title>
+  <script
+    defer src="https://umami.splendidbear.org/script.js"
+    data-website-id="825e02a9-d675-4cbd-9e68-72b98de2e4e9"
+  >
+  </script>
+  <script
+    defer
+    src="https://umami.splendidbear.org/recorder.js"
+    data-website-id="825e02a9-d675-4cbd-9e68-72b98de2e4e9"
+    data-sample-rate="0.15"
+    data-mask-level="moderate"
+    data-max-duration="300000"
+  >
+  </script>
   {% block stylesheets %}{% endblock %}
 </head>