They were floating buttons over the top-right of the iframe, which was wrong twice: they sit on top of Gitea's own controls, and an overlay on an application that fills its whole panel is invisible until you already know it is there. Reported as "I have no access to settings when the iframe is loaded", which is exactly right. The header is the platform's own furniture — always present, never competing with the content underneath — and it is where photos and jellyfin put theirs. It also names where you are, so /gitea/connection reads as "Gitea — connection" rather than looking like the frame failed to load.
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { Link, useParams } from 'react-router';
|
|
import { ExternalLink, GitBranch, Plug } from 'lucide-react';
|
|
|
|
// The panel header, which is where the settings live.
|
|
//
|
|
// They were floating buttons over the top-right of the iframe first, and that was wrong twice: they sit
|
|
// on top of Gitea's own controls, and an overlay on an application that fills its panel is invisible
|
|
// until you already know it is there. The header is the platform's own furniture — always present, never
|
|
// competing with the content underneath.
|
|
|
|
const FRAME_SRC = '/api/gitea/_web/';
|
|
|
|
export const GiteaViewHeader = () => {
|
|
const { section } = useParams();
|
|
const onConnection = section === 'connection';
|
|
|
|
return (
|
|
<>
|
|
<GitBranch className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="flex-1 truncate text-xs font-medium">{onConnection ? 'Gitea — connection' : 'Gitea'}</span>
|
|
|
|
{/* Real links, so they are cmd-clickable like any other navigation. */}
|
|
<Link
|
|
to={onConnection ? '/gitea' : '/gitea/connection'}
|
|
title={onConnection ? 'Back to Gitea' : 'Connection settings'}
|
|
className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
>
|
|
<Plug className="h-3.5 w-3.5" />
|
|
</Link>
|
|
<a
|
|
href={FRAME_SRC}
|
|
target="_blank"
|
|
rel="noopener"
|
|
title="Open Gitea in a new tab"
|
|
className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
>
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|
</a>
|
|
</>
|
|
);
|
|
};
|