92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
export function renderHeader(currentHandle: string, isLoggedIn: boolean, userHandle?: string): string {
|
|
const loginBtn = isLoggedIn
|
|
? `<button type="button" class="header-btn user-btn" id="user-btn" title="${userHandle}">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
|
|
</svg>
|
|
</button>`
|
|
: `<button type="button" class="header-btn login-btn" id="login-btn" title="Login">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
|
|
<polyline points="10 17 15 12 10 7"/>
|
|
<line x1="15" y1="12" x2="3" y2="12"/>
|
|
</svg>
|
|
</button>`
|
|
|
|
// Use logged-in user's handle for input if available
|
|
const inputHandle = isLoggedIn && userHandle ? userHandle : currentHandle
|
|
|
|
return `
|
|
<div class="header">
|
|
<form class="header-form" id="header-form">
|
|
<input
|
|
type="text"
|
|
class="header-input"
|
|
id="header-input"
|
|
placeholder="handle (e.g., syui.ai)"
|
|
value="${inputHandle}"
|
|
>
|
|
<button type="submit" class="header-btn at-btn" title="Browse">@</button>
|
|
${loginBtn}
|
|
</form>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
export interface HeaderCallbacks {
|
|
onBrowse: (handle: string) => void
|
|
onLogin: () => void
|
|
onLogout: () => void
|
|
}
|
|
|
|
export function mountHeader(
|
|
container: HTMLElement,
|
|
currentHandle: string,
|
|
isLoggedIn: boolean,
|
|
userHandle: string | undefined,
|
|
callbacks: HeaderCallbacks,
|
|
isStatic: boolean = false
|
|
): void {
|
|
// For static pages, only update if login state requires it
|
|
const existingLoginBtn = container.querySelector('#login-btn')
|
|
const existingUserBtn = container.querySelector('#user-btn')
|
|
const needsUpdate = !isStatic ||
|
|
(isLoggedIn && existingLoginBtn) || // Need to show user button
|
|
(!isLoggedIn && existingUserBtn) // Need to show login button
|
|
|
|
if (needsUpdate) {
|
|
container.innerHTML = renderHeader(currentHandle, isLoggedIn, userHandle)
|
|
}
|
|
|
|
const form = document.getElementById('header-form') as HTMLFormElement
|
|
const input = document.getElementById('header-input') as HTMLInputElement
|
|
|
|
if (!form) return
|
|
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault()
|
|
const handle = input.value.trim()
|
|
if (handle) {
|
|
callbacks.onBrowse(handle)
|
|
}
|
|
})
|
|
|
|
if (isLoggedIn) {
|
|
const userBtn = document.getElementById('user-btn')
|
|
userBtn?.addEventListener('click', async (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
if (confirm('Logout?')) {
|
|
await callbacks.onLogout()
|
|
}
|
|
})
|
|
} else {
|
|
const loginBtn = document.getElementById('login-btn')
|
|
loginBtn?.addEventListener('click', (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
callbacks.onLogin()
|
|
})
|
|
}
|
|
}
|