feat(share): library deep links (psysonic2) with paste + toolbar actions (#261)

* feat(share): library deep links (psysonic2) with paste and toolbar actions

Add base64url-encoded payloads for track, album, artist, and ordered queue.
Handle paste outside inputs to switch server, validate entities, navigate or
play. Reuse clipboard helper for context menu, queue panel, album and artist
headers. Tests distinguish server invite strings from library shares.

* fix(share): play partial queue when some shared tracks are missing

Skip unavailable song IDs when pasting a queue share while preserving order.
Toast when some tracks are missing; error only if none resolve. Add
openedQueuePartial and queueAllUnavailable i18n; remove queueTracksMissing.

* feat(settings): paste server invites globally and scroll to add form

Handle psysonic1- magic strings outside inputs: navigate to settings or login
with prefilled add-server fields. Decode invites embedded in surrounding text.
Scroll the add-server block into view when opening from a paste so long server
lists stay oriented.

---------

Co-authored-by: Maxim Isaev <im@friclub.ru>

src/pages/Settings.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useMemo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { version as appVersion } from '../../package.json';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -53,6 +53,7 @@ import {
   encodeServerMagicString,
   copyTextToClipboard,
   DECODED_PASSWORD_VISUAL_MASK,
+  type ServerMagicPayload,
 } from '../utils/serverMagicString';
 import { shortHostFromServerUrl, serverListDisplayLabel } from '../utils/serverDisplayName';
 
@@ -227,13 +228,34 @@ function resolveTab(input: string | undefined | null): Tab {
   return (known as string[]).includes(input) ? (input as Tab) : 'servers';
 }
 
-function AddServerForm({ onSave, onCancel }: { onSave: (data: Omit<ServerProfile, 'id'>) => void; onCancel: () => void }) {
+function AddServerForm({
+  onSave,
+  onCancel,
+  initialInvite = null,
+}: {
+  onSave: (data: Omit<ServerProfile, 'id'>) => void;
+  onCancel: () => void;
+  initialInvite?: ServerMagicPayload | null;
+}) {
   const { t } = useTranslation();
   const [form, setForm] = useState({ name: '', url: '', username: '', password: '' });
   const [magicString, setMagicString] = useState('');
   const [showPass, setShowPass] = useState(false);
   const [blockPasswordReveal, setBlockPasswordReveal] = useState(false);
 
+  useEffect(() => {
+    if (!initialInvite) return;
+    setShowPass(false);
+    setBlockPasswordReveal(true);
+    setForm({
+      name: (initialInvite.name && initialInvite.name.trim()) || shortHostFromServerUrl(initialInvite.url),
+      url: initialInvite.url,
+      username: initialInvite.username,
+      password: initialInvite.password,
+    });
+    setMagicString(encodeServerMagicString(initialInvite));
+  }, [initialInvite]);
+
   const update = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
     setForm(f => ({ ...f, [k]: e.target.value }));
 
@@ -1369,7 +1391,8 @@ export default function Settings() {
   const [listeningFor, setListeningFor] = useState<KeyAction | null>(null);
   const [listeningForGlobal, setListeningForGlobal] = useState<GlobalAction | null>(null);
   const navigate = useNavigate();
-  const { state: routeState } = useLocation();
+  const location = useLocation();
+  const routeState = location.state;
   const { t, i18n } = useTranslation();
 
   const [activeTab, setActiveTab] = useState<Tab>(resolveTab((routeState as { tab?: string } | null)?.tab));
@@ -1387,6 +1410,7 @@ export default function Settings() {
   serversRef.current = auth.servers;
   const [connStatus, setConnStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({});
   const [showAddForm, setShowAddForm] = useState(false);
+  const [pastedServerInvite, setPastedServerInvite] = useState<ServerMagicPayload | null>(null);
   const [newGenre, setNewGenre] = useState('');
   const [lfmState, setLfmState] = useState<'idle' | 'waiting' | 'error'>('idle');
   const [lfmPendingToken, setLfmPendingToken] = useState<string | null>(null);
@@ -1404,6 +1428,28 @@ export default function Settings() {
   const [fontPickerOpen, setFontPickerOpen] = useState(false);
   const [ndAdminAuth, setNdAdminAuth] = useState<{ token: string; serverUrl: string; username: string } | null>(null);
   const [ndAuthChecked, setNdAuthChecked] = useState(false);
+  const addServerInviteAnchorRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!showAddForm || !pastedServerInvite) return;
+    addServerInviteAnchorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }, [showAddForm, pastedServerInvite]);
+
+  useEffect(() => {
+    const st = routeState as { openAddServerInvite?: ServerMagicPayload; tab?: Tab } | null;
+    const inv = st?.openAddServerInvite;
+    if (inv) {
+      setPastedServerInvite(inv);
+      setShowAddForm(true);
+      setActiveTab('server');
+      navigate(
+        { pathname: location.pathname, search: location.search, hash: location.hash },
+        { replace: true, state: { tab: 'server' as Tab } },
+      );
+      return;
+    }
+    if (st?.tab) setActiveTab(st.tab);
+  }, [routeState, location.pathname, location.search, location.hash, navigate]);
 
   // In-Page-Suche: filtert Sub-Sections des aktiven Tabs per data-settings-search
   // Attribut. DOM-basiert, damit wir nicht den Query durch jede Komponente
@@ -1690,8 +1736,14 @@ export default function Settings() {
     }
   };
 
+  const closeAddServerForm = () => {
+    setShowAddForm(false);
+    setPastedServerInvite(null);
+  };
+
   const handleAddServer = async (data: Omit<ServerProfile, 'id'>) => {
     setShowAddForm(false);
+    setPastedServerInvite(null);
     const tempId = '_new';
     setConnStatus(s => ({ ...s, [tempId]: 'testing' }));
     try {
@@ -3595,13 +3647,31 @@ export default function Settings() {
               </div>
             )}
 
-            {showAddForm ? (
-              <AddServerForm onSave={handleAddServer} onCancel={() => setShowAddForm(false)} />
-            ) : (
-              <button className="btn btn-surface" style={{ marginTop: '0.75rem' }} onClick={() => setShowAddForm(true)} id="settings-add-server-btn">
-                <Plus size={16} /> {t('settings.addServer')}
-              </button>
-            )}
+            <div
+              ref={addServerInviteAnchorRef}
+              id="settings-add-server-anchor"
+              style={{ scrollMarginTop: '12px' }}
+            >
+              {showAddForm ? (
+                <AddServerForm
+                  initialInvite={pastedServerInvite}
+                  onSave={handleAddServer}
+                  onCancel={closeAddServerForm}
+                />
+              ) : (
+                <button
+                  className="btn btn-surface"
+                  style={{ marginTop: '0.75rem' }}
+                  onClick={() => {
+                    setPastedServerInvite(null);
+                    setShowAddForm(true);
+                  }}
+                  id="settings-add-server-btn"
+                >
+                  <Plus size={16} /> {t('settings.addServer')}
+                </button>
+              )}
+            </div>
           </section>
 
           <section className="settings-section">