From 918f752b1c6ef07614882506a433e89f6f23fdcb Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Tue, 6 Jan 2026 10:31:46 +0800
Subject: [PATCH] refactor: move Server button into help links section below
 login form

Reorganizes the LoginPrompt layout by moving the Server button from an
absolute-positioned top-right corner into the main content flow as a text
link in a new "Help links" section below the login form. Also adds a
"Needs help?" link pointing to the documentation. This reduces visual
clutter, improves hierarchy by grouping related actions, and provides
better guidance for new users.
---
 web/src/components/LoginPrompt.tsx | 122 +++++++++++++++--------------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/web/src/components/LoginPrompt.tsx b/web/src/components/LoginPrompt.tsx
index 70cbbfe0..bebd4708 100644
--- a/web/src/components/LoginPrompt.tsx
+++ b/web/src/components/LoginPrompt.tsx
@@ -98,66 +98,6 @@ export function LoginPrompt(props: LoginPromptProps) {
 
     return (
         <div className="relative h-full flex items-center justify-center p-4">
-            {!isBindMode && (
-                <div className="absolute right-4 top-4 z-10">
-                    <Dialog open={isServerDialogOpen} onOpenChange={setIsServerDialogOpen}>
-                        <DialogTrigger asChild>
-                            <Button variant="outline" size="sm" className="gap-2">
-                                Server
-                                <span className="text-[10px] uppercase tracking-wide text-[var(--app-hint)]">
-                                    {props.serverUrl ? 'Custom' : 'Default'}
-                                </span>
-                            </Button>
-                        </DialogTrigger>
-                        <DialogContent className="max-w-md">
-                            <DialogHeader>
-                                <DialogTitle>Server URL</DialogTitle>
-                                <DialogDescription>
-                                    Set the hapi server origin for API and live updates.
-                                </DialogDescription>
-                            </DialogHeader>
-                            <form onSubmit={handleSaveServer} className="space-y-4">
-                                <div className="text-xs text-[var(--app-hint)]">
-                                    Current: {serverSummary}
-                                </div>
-                                <div className="space-y-2">
-                                    <label className="text-xs font-medium">Server origin</label>
-                                    <input
-                                        type="url"
-                                        value={serverInput}
-                                        onChange={(e) => {
-                                            setServerInput(e.target.value)
-                                            setServerError(null)
-                                        }}
-                                        placeholder="https://hapi.example.com"
-                                        className="w-full px-3 py-2.5 rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent"
-                                    />
-                                    <div className="text-[11px] text-[var(--app-hint)]">
-                                        Use http(s) only. Any path is ignored.
-                                    </div>
-                                </div>
-
-                                {serverError && (
-                                    <div className="text-sm text-red-500">
-                                        {serverError}
-                                    </div>
-                                )}
-
-                                <div className="flex items-center justify-end gap-2">
-                                    {props.serverUrl && (
-                                        <Button type="button" variant="outline" onClick={handleClearServer}>
-                                            Use same origin
-                                        </Button>
-                                    )}
-                                    <Button type="submit">
-                                        Save server
-                                    </Button>
-                                </div>
-                            </form>
-                        </DialogContent>
-                    </Dialog>
-                </div>
-            )}
             <div className="w-full max-w-sm space-y-6">
                 {/* Header */}
                 <div className="text-center space-y-2">
@@ -203,6 +143,68 @@ export function LoginPrompt(props: LoginPromptProps) {
                         )}
                     </button>
                 </form>
+
+                {/* Help links */}
+                {!isBindMode && (
+                    <div className="flex items-center justify-between text-xs text-[var(--app-hint)]">
+                        <a href="https://hapi.run/docs" target="_blank" rel="noopener noreferrer" className="underline hover:text-[var(--app-fg)]">
+                            Needs help?
+                        </a>
+                        <Dialog open={isServerDialogOpen} onOpenChange={setIsServerDialogOpen}>
+                            <DialogTrigger asChild>
+                                <button type="button" className="underline hover:text-[var(--app-fg)]">
+                                    Server {props.serverUrl ? '(Custom)' : '(Default)'}
+                                </button>
+                            </DialogTrigger>
+                            <DialogContent className="max-w-md">
+                                <DialogHeader>
+                                    <DialogTitle>Server URL</DialogTitle>
+                                    <DialogDescription>
+                                        Set the hapi server origin for API and live updates.
+                                    </DialogDescription>
+                                </DialogHeader>
+                                <form onSubmit={handleSaveServer} className="space-y-4">
+                                    <div className="text-xs text-[var(--app-hint)]">
+                                        Current: {serverSummary}
+                                    </div>
+                                    <div className="space-y-2">
+                                        <label className="text-xs font-medium">Server origin</label>
+                                        <input
+                                            type="url"
+                                            value={serverInput}
+                                            onChange={(e) => {
+                                                setServerInput(e.target.value)
+                                                setServerError(null)
+                                            }}
+                                            placeholder="https://hapi.example.com"
+                                            className="w-full px-3 py-2.5 rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent"
+                                        />
+                                        <div className="text-[11px] text-[var(--app-hint)]">
+                                            Use http(s) only. Any path is ignored.
+                                        </div>
+                                    </div>
+
+                                    {serverError && (
+                                        <div className="text-sm text-red-500">
+                                            {serverError}
+                                        </div>
+                                    )}
+
+                                    <div className="flex items-center justify-end gap-2">
+                                        {props.serverUrl && (
+                                            <Button type="button" variant="outline" onClick={handleClearServer}>
+                                                Use same origin
+                                            </Button>
+                                        )}
+                                        <Button type="submit">
+                                            Save server
+                                        </Button>
+                                    </div>
+                                </form>
+                            </DialogContent>
+                        </Dialog>
+                    </div>
+                )}
             </div>
 
             {/* Footer */}