fix: show stored UUID instead of Directus ID in settings, add hint text

js/components/pages/page-settings.js

@@ -92,7 +92,7 @@ class PageSettings extends HTMLElement {
             const eyeOffIcon = this.querySelector('#toggle-uid-btn .icon-eye-off')
             if (display) {
                 display.textContent = this.uidVisible
-                    ? this.user?.id
+                    ? auth.getStoredUuid()
                     : '••••••••-••••-••••-••••-••••••••••••'
             }
             if (eyeIcon) eyeIcon.style.display = this.uidVisible ? 'none' : 'block'
@@ -101,8 +101,9 @@ class PageSettings extends HTMLElement {
 
         // Copy UUID
         this.querySelector('#copy-uid-btn')?.addEventListener('click', async () => {
-            if (this.user?.id) {
-                await navigator.clipboard.writeText(this.user.id)
+            const uuid = auth.getStoredUuid()
+            if (uuid) {
+                await navigator.clipboard.writeText(uuid)
                 this.showToast(t('auth.copy') + ' ✓')
             }
         })
@@ -225,8 +226,11 @@ class PageSettings extends HTMLElement {
                         <h2>${t('settings.account')}</h2>
                         
                         ${this.isLoggedIn ? /* html */`
-                            <div class="setting-item">
-                                <label>${t('settings.userId')}</label>
+                            <div class="setting-item setting-item-column">
+                                <div>
+                                    <label>${t('settings.userId')}</label>
+                                    <p class="setting-hint">${t('settings.userIdHint')}</p>
+                                </div>
                                 <div class="user-id-row">
                                     <code class="user-id" id="user-id-display">${'•'.repeat(8)}-••••-••••-••••-${'•'.repeat(12)}</code>
                                     <div class="user-id-actions">
@@ -351,6 +355,11 @@ style.textContent = /* css */`
         padding: var(--space-sm) 0;
     }
 
+    page-settings .setting-item-column {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
     page-settings .setting-item + .setting-item {
         border-top: 1px solid var(--color-border);
         margin-top: var(--space-sm);