Sprint 11: Freunde & Chat + Phosphor-Icon-Vollmigration

- Freundschaften (pending/accepted), Nutzersuche, Anfragen per Push
- Direktnachrichten mit Polling, iMessage-Stil, Deep-Links aus Push
- Alle Seiten (map, places, diary, health, dog-profile, sitting, knigge,
  forum, wiki, walks) vollständig auf Phosphor-Icons migriert
- Wikidata-Rassen-Scraper (~833 neue Rassen, lokal gespiegelte Fotos)
- TheDogAPI lokal gespiegelt (169 Rassen + Fotos)
- Quiz-Result-Cards horizontal (korrekte Bildproportionen)
- SW by-v89

backend/static/js/ui.js

@@ -6,6 +6,13 @@
 
 const UI = (() => {
 
+  // ----------------------------------------------------------
+  // PHOSPHOR ICON HELPER — erzeugt SVG-String für Templates
+  // ----------------------------------------------------------
+  function _svgIcon(name, extraClass = '') {
+    return `<svg class="ph-icon${extraClass ? ' ' + extraClass : ''}" aria-hidden="true"><use href="/icons/phosphor.svg#${name}"></use></svg>`;
+  }
+
   // ----------------------------------------------------------
   // TOAST
   // ----------------------------------------------------------
@@ -16,9 +23,9 @@ const UI = (() => {
       const el = document.createElement('div');
       el.className = `toast${type !== 'default' ? ` toast-${type}` : ''}`;
 
-      const icon = { success: '✓', danger: '✕', warning: '⚠', info: 'ℹ' }[type] || '';
-      el.innerHTML = icon
-        ? `<span style="font-size:1.1em">${icon}</span><span>${message}</span>`
+      const iconName = { success: 'check', danger: 'x', warning: 'warning', info: 'info' }[type];
+      el.innerHTML = iconName
+        ? `${_svgIcon(iconName)}<span>${message}</span>`
         : `<span>${message}</span>`;
 
       container().appendChild(el);
@@ -59,7 +66,7 @@ const UI = (() => {
           ${title ? `
             <div class="modal-header">
               <span class="modal-title">${title}</span>
-              <button class="btn btn-ghost btn-icon modal-close-btn" aria-label="Schließen">✕</button>
+              <button class="btn btn-ghost btn-icon modal-close-btn" aria-label="Schließen"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg></button>
             </div>
           ` : ''}
           <div class="modal-body">${body || ''}</div>
@@ -259,6 +266,7 @@ const UI = (() => {
     formData, setFormError, clearFormErrors,
     emptyState, time,
     setupPhotoPreview, scrollTop, skeleton,
+    icon: _svgIcon,
   };
 
 })();