You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.9 KiB
64 lines
2.9 KiB
<script lang="ts"> |
|
import { sessionManager, type UserSession } from '../../services/auth/session-manager.js'; |
|
import ThemeToggle from '../preferences/ThemeToggle.svelte'; |
|
import UserPreferences from '../preferences/UserPreferences.svelte'; |
|
import ProfileBadge from '../layout/ProfileBadge.svelte'; |
|
|
|
let currentSession = $state<UserSession | null>(sessionManager.session.value); |
|
let isLoggedIn = $derived(currentSession !== null); |
|
let currentPubkey = $derived(currentSession?.pubkey || null); |
|
|
|
// Subscribe to session changes |
|
$effect(() => { |
|
const unsubscribe = sessionManager.session.subscribe((session: UserSession | null) => { |
|
currentSession = session; |
|
}); |
|
return unsubscribe; |
|
}); |
|
</script> |
|
|
|
<header class="relative border-b border-fog-border dark:border-fog-dark-border"> |
|
<!-- Banner image --> |
|
<div class="h-32 md:h-48 overflow-hidden bg-fog-surface dark:bg-fog-dark-surface"> |
|
<div class="max-w-7xl mx-auto h-full"> |
|
<img |
|
src="/aither.png" |
|
alt="Aitherboard banner" |
|
class="w-full h-full object-cover opacity-90 dark:opacity-70" |
|
/> |
|
<!-- Overlay gradient for text readability --> |
|
<div class="absolute inset-0 bg-gradient-to-b from-fog-bg/30 to-fog-bg/80 dark:from-fog-dark-bg/40 dark:to-fog-dark-bg/90 pointer-events-none"></div> |
|
</div> |
|
</div> |
|
|
|
<!-- Navigation --> |
|
<nav class="bg-fog-surface/95 dark:bg-fog-dark-surface/95 backdrop-blur-sm border-b border-fog-border dark:border-fog-dark-border px-4 py-3"> |
|
<div class="flex items-center justify-between max-w-7xl mx-auto"> |
|
<a href="/" class="text-xl font-semibold text-fog-text dark:text-fog-dark-text hover:text-fog-text-light dark:hover:text-fog-dark-text-light transition-colors">Aitherboard</a> |
|
<div class="flex gap-4 items-center text-sm"> |
|
<a href="/" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Threads</a> |
|
<a href="/feed" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Feed</a> |
|
{#if isLoggedIn && currentPubkey} |
|
<span class="text-fog-text-light dark:text-fog-dark-text-light">Logged in as </span> |
|
<ProfileBadge pubkey={currentPubkey} /> |
|
<button |
|
onclick={() => sessionManager.clearSession()} |
|
class="px-3 py-1 rounded border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight text-fog-text dark:text-fog-dark-text transition-colors" |
|
> |
|
Logout |
|
</button> |
|
{:else} |
|
<a href="/login" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Login</a> |
|
{/if} |
|
<UserPreferences /> |
|
<ThemeToggle /> |
|
</div> |
|
</div> |
|
</nav> |
|
</header> |
|
|
|
<style> |
|
header { |
|
max-width: 100%; |
|
} |
|
</style>
|
|
|