feat(scanner): Hilfe zum Cookie-Export per Mouseover

Neben "Cookie-Import" auf den Boersen-Konten steht ein Fragezeichen. Beim
Ueberfahren (oder Fokus) zeigt es den Export-Dialog von Cookie-Editor mit
kurzer Anleitung. Bild unter public/help/.

Doku: Die Zugangsdaten loesen keinen automatischen Login aus - das stand
bisher falsch in der Anleitung.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
2026-09-23 09:16:54 +02:00
co-authored by Claude Opus 5.5
parent 8cb5cbc7cc
commit 0d41d46a3c
3 changed files with 37 additions and 6 deletions
+32 -2
View File
@@ -259,8 +259,38 @@ export const ScannerPortals: React.FC = () => {
</div>
</form>
<form onSubmit={importSession} className={cardClass}>
<h3 className="text-base text-ink-900">Cookie-Import</h3>
<form onSubmit={importSession} className={`${cardClass} relative`}>
{/*
Hilfe zum Export per Mouseover. Das Bild zeigt den Export-Dialog von
Cookie-Editor; ueber focus-within oeffnet es sich auch per Tastatur.
Ausgerichtet an der Karte (relative am form), nicht am Fragezeichen -
sonst ragt es rechts ueber die Karte hinaus.
*/}
<div className="group inline-flex items-center gap-2">
<h3 className="text-base text-ink-900">Cookie-Import</h3>
<button
type="button"
aria-label="Hilfe zum Cookie-Export"
aria-describedby="cookie-import-help"
className="flex h-5 w-5 items-center justify-center rounded-full border border-ink-300 text-[11px] font-bold text-ink-500 transition hover:border-brand-300 hover:text-brand-700"
>
?
</button>
<div
id="cookie-import-help"
role="tooltip"
className="pointer-events-none invisible absolute inset-x-3 top-14 z-20 rounded-xl border border-ink-200 bg-surface p-3 opacity-0 shadow-card transition group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100"
>
<p className="mb-2 text-sm text-ink-700">
Auf die Website gehen, einloggen und dann als JSON exportieren. Dies hier einfügen.
</p>
<img
src="/help/cookie-editor-export.png"
alt="Cookie-Editor: Export-Knopf unten rechts, dann „JSON“ wählen"
className="w-full rounded-lg border border-ink-200"
/>
</div>
</div>
<p className="mt-1 text-xs text-ink-400">
Cookies aus der Browser-Erweiterung Cookie-Editor als JSON exportieren und hier
einfügen. Ein roher Cookie-Header wird ebenfalls erkannt.