frontend: remove address
Kim committed
Mar 23, 2026 at 14:32 UTC
48794be8c0e5bd17a28b7dbdcbe7eefe2053c2c3
5 files changed
+22
-116
cmd/relay-server/frontend.go
-1
@@ -235,7 +235,6 @@ func (f *Frontend) injectOGMetadata(htmlContent, title, description string) stri
235
"[%OG_TITLE%]", html.EscapeString(title),
236
"[%OG_DESCRIPTION%]", html.EscapeString(description),
237
"[%LANDING_PAGE_ENABLED%]", html.EscapeString(strconv.FormatBool(f.isLandingPageEnabled())),
238
- "[%SERVER_OWNER_ADDRESS%]", html.EscapeString(f.server.OwnerAddress()),
238
"[%RELEASE_VERSION%]", html.EscapeString(types.ReleaseVersion),
239
)
240
return replacer.Replace(htmlContent)
frontend/index.html
-1
@@ -14,7 +14,6 @@
14
<meta name="twitter:title" content="[%OG_TITLE%]" />
15
<meta name="twitter:description" content="[%OG_DESCRIPTION%]" />
16
<meta name="portal-landing-page-enabled" content="[%LANDING_PAGE_ENABLED%]" />
17
- <meta name="portal-server-owner-address" content="[%SERVER_OWNER_ADDRESS%]" />
17
<meta name="portal-release-version" content="[%RELEASE_VERSION%]" />
18
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
19
<title>Portal - Local to web. Instant access.</title>
frontend/src/components/Header.tsx
+17
-110
@@ -1,5 +1,4 @@
1
-import { useEffect, useState } from "react";
2
-import { Check, Copy, LogOut } from "lucide-react";
1
+import { LogOut } from "lucide-react";
2
import { Button } from "@/components/ui/button";
3
import { ThemeToggleButton } from "@/components/ThemeToggleButton";
4
import {
@@ -14,72 +13,18 @@ interface HeaderProps {
13
title?: string;
14
isAdmin?: boolean;
15
onLogout?: () => void;
16
+ showQuickStartLink?: boolean;
17
}
18
19
const repoURL = "https://github.com/gosuda/portal";
20
-const SERVER_OWNER_ADDRESS_META_NAME = "portal-server-owner-address";
21
-
22
-function getServerOwnerAddress(doc?: Document): string {
23
- const targetDoc =
24
- doc ?? (typeof document !== "undefined" ? document : undefined);
25
- if (!targetDoc) {
26
- return "";
27
- }
28
-
29
- return (
30
- targetDoc
31
- .querySelector<HTMLMetaElement>(
32
- `meta[name="${SERVER_OWNER_ADDRESS_META_NAME}"]`
33
- )
34
- ?.content.trim() || ""
35
- );
36
-}
37
-
38
-function formatOwnerAddress(address: string): string {
39
- const trimmed = address.trim();
40
- if (trimmed.length <= 14) {
41
- return trimmed;
42
- }
43
-
44
- return `${trimmed.slice(0, 6)}...${trimmed.slice(-4)}`;
45
-}
20
21
export function Header({
22
title = "PORTAL",
23
isAdmin,
24
onLogout,
25
+ showQuickStartLink = true,
26
}: HeaderProps) {
27
const releaseVersion = getReleaseVersion();
53
- const serverOwnerAddress = getServerOwnerAddress();
54
- const [ownerAddressCopied, setOwnerAddressCopied] = useState(false);
55
- const displayOwnerAddress = formatOwnerAddress(serverOwnerAddress);
56
-
57
- useEffect(() => {
58
- if (!ownerAddressCopied) {
59
- return;
60
- }
61
-
62
- const timer = window.setTimeout(() => {
63
- setOwnerAddressCopied(false);
64
- }, 1800);
65
-
66
- return () => {
67
- window.clearTimeout(timer);
68
- };
69
- }, [ownerAddressCopied]);
70
-
71
- const handleCopyOwnerAddress = async () => {
72
- if (!serverOwnerAddress) {
73
- return;
74
- }
75
-
76
- try {
77
- await navigator.clipboard.writeText(serverOwnerAddress);
78
- setOwnerAddressCopied(true);
79
- } catch (error) {
80
- console.error("Failed to copy owner address", error);
81
- }
82
- };
28
29
return (
30
<header className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3 py-2 lg:flex-nowrap">
@@ -115,12 +60,14 @@ export function Header({
60
</div>
61
{!isAdmin && (
62
<nav className="hidden items-center gap-6 pl-2 text-base font-semibold text-text-muted xl:flex xl:pl-3">
118
- <a
119
- href="#quick-start"
120
- className="transition-colors hover:text-foreground"
121
- >
122
- Quick Start
123
- </a>
63
+ {showQuickStartLink && (
64
+ <a
65
+ href="#quick-start"
66
+ className="transition-colors hover:text-foreground"
67
+ >
68
+ Quick Start
69
+ </a>
70
+ )}
71
<a
72
href="#live-servers"
73
className="transition-colors hover:text-foreground"
@@ -138,60 +85,20 @@ export function Header({
85
</div>
86
87
<div className="flex shrink-0 flex-wrap items-center gap-2 sm:gap-3">
141
- {serverOwnerAddress && (
142
- <div
143
- title={serverOwnerAddress}
144
- className="inline-flex h-11 max-w-full items-center gap-2 rounded-full border border-sky-500/20 bg-background/85 pl-1.5 pr-1 shadow-[0_10px_28px_rgba(15,23,42,0.08)] backdrop-blur"
145
- >
146
- <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-sky-400 via-cyan-300 to-blue-500 shadow-[0_8px_20px_rgba(56,189,248,0.28)]">
147
- <svg
148
- xmlns="http://www.w3.org/2000/svg"
149
- width="16"
150
- height="16"
151
- viewBox="0 0 906.26 1457.543"
152
- className="h-4 w-4 text-slate-950"
153
- >
154
- <path
155
- fill="currentColor"
156
- d="M254.854 137.158c-34.46 84.407-88.363 149.39-110.934 245.675 90.926-187.569 308.397-483.654 554.729-348.685 135.487 74.216 194.878 270.78 206.058 467.566 21.924 385.996-190.977 853.604-467.585 943.057-174.879 56.543-307.375-86.447-364.527-198.115-176.498-344.82 2.041-910.077 182.259-1109.498zm198.13 7.918C202.61 280.257 4.622 968.542 207.322 1270.414c51.713 77.029 194.535 160.648 285.294 71.318-209.061 31.529-288.389-176.143-301.145-340.765 31.411 147.743 139.396 326.12 309.075 253.588 251.957-107.723 376.778-648.46 269.433-966.817 22.394 134.616 15.572 317.711-47.551 412.087 86.655-230.615 7.903-704.478-269.444-554.749z"
157
- />
158
- </svg>
159
- </div>
160
-
161
- <span className="max-w-[6.75rem] truncate font-mono text-[13px] font-semibold tracking-tight text-foreground sm:max-w-[8.5rem]">
162
- {displayOwnerAddress}
163
- </span>
164
-
165
- <button
166
- type="button"
167
- onClick={() => {
168
- void handleCopyOwnerAddress();
169
- }}
170
- className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 text-text-muted transition-colors hover:text-foreground"
171
- aria-label="Copy owner address"
172
- >
173
- {ownerAddressCopied ? (
174
- <Check className="h-4 w-4 text-sky-500" />
175
- ) : (
176
- <Copy className="h-4 w-4" />
177
- )}
178
- </button>
179
- </div>
180
- )}
88
{!isAdmin && (
89
<a
90
href={repoURL}
91
target="_blank"
92
rel="noopener noreferrer"
186
- className="hidden h-11 w-11 items-center justify-center text-foreground transition-transform transition-colors hover:-translate-y-0.5 hover:text-primary xl:inline-flex"
93
+ className="hidden h-12 w-12 items-center justify-center rounded-full border border-border/70 bg-background/90 text-foreground shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:text-primary xl:inline-flex"
94
aria-label="View source on GitHub"
95
>
96
<svg
190
- height="20"
191
- width="20"
97
+ height="22"
98
+ width="22"
99
viewBox="0 0 24 24"
100
fill="currentColor"
194
- className="opacity-80 transition-opacity hover:opacity-100"
101
+ className="opacity-85 transition-opacity hover:opacity-100"
102
>
103
<path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z" />
104
</svg>
@@ -208,10 +115,10 @@ export function Header({
115
variant="outline"
116
size="icon"
117
onClick={onLogout}
211
- className="h-11 w-11 cursor-pointer rounded-full text-foreground hover:text-destructive"
118
+ className="h-12 w-12 cursor-pointer rounded-full border-border/70 bg-background/90 text-foreground shadow-sm transition-all hover:-translate-y-0.5 hover:border-destructive/40 hover:bg-background hover:text-destructive"
119
aria-label="Logout"
120
>
214
- <LogOut className="h-5 w-5" />
121
+ <LogOut className="h-[22px] w-[22px]" />
122
</Button>
123
</TooltipTrigger>
124
<TooltipContent>
frontend/src/components/ServerListView.tsx
+1
@@ -640,6 +640,7 @@ export function ServerListView({
640
title={title}
641
isAdmin={isAdmin}
642
onLogout={onLogout}
643
+ showQuickStartLink={landingPageEnabled}
644
/>
645
</div>
646
</div>
frontend/src/components/ThemeToggleButton.tsx
+4
-4
@@ -14,20 +14,20 @@ export function ThemeToggleButton({ className }: ThemeToggleButtonProps) {
14
return (
15
<Button
16
type="button"
17
- variant="ghost"
17
+ variant="outline"
18
size="icon"
19
onClick={toggleTheme}
20
className={clsx(
21
- "h-11 w-11 cursor-pointer rounded-full text-foreground shadow-none hover:bg-transparent hover:-translate-y-0.5 hover:text-primary",
21
+ "h-12 w-12 cursor-pointer rounded-full border-border/70 bg-background/90 text-foreground shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:bg-background hover:text-primary",
22
className
23
)}
24
aria-label={`Switch to ${nextTheme} theme`}
25
title={theme === "dark" ? "Light theme" : "Dark theme"}
26
>
27
{theme === "dark" ? (
28
- <Sun className="h-5 w-5" />
28
+ <Sun className="h-[22px] w-[22px]" />
29
) : (
30
- <Moon className="h-5 w-5" />
30
+ <Moon className="h-[22px] w-[22px]" />
31
)}
32
</Button>
33
);