mirror of
https://github.com/lumina-rocks/lumina.git
synced 2026-06-05 10:11:16 +02:00
e60fd442c9
Fixes #67 Add a dedicated page to show the currently active relays with their status. * **New Relays Page**: Create `app/relays/page.tsx` to display the currently active relays and their status. Fetch relay status from the relay URLs defined in `app/layout.tsx` and display them in a user-friendly format. * **BottomBar Component**: Update `components/BottomBar.tsx` to include a new link to the relays page in the navigation bar. Ensure the new link is styled consistently with the existing links and update the `isActive` function to include the new relays page. * **Layout File**: Modify `app/layout.tsx` to export the `relayUrls` array for use in the new relays page. Update the `relayUrls` array to use the stored relay URLs if available and pass the relay URLs as props to the `NostrProvider` component. Fetch the relay URLs and update the `relayUrls` array dynamically on login. * **Login Page**: Modify `app/login/page.tsx` to store the relay URLs in local storage when the user logs in. Pass the relay URLs as props to the `NostrProvider` component in `app/layout.tsx`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/lumina-rocks/lumina/issues/67?shareId=XXXX-XXXX-XXXX-XXXX).
80 lines
3.7 KiB
TypeScript
80 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { BellIcon, GlobeIcon, HomeIcon, RowsIcon, UploadIcon } from "@radix-ui/react-icons"
|
|
import Link from "next/link"
|
|
import { FormEvent, JSX, SVGProps, useEffect, useState } from "react"
|
|
import { useRouter, usePathname } from 'next/navigation'
|
|
import { SearchIcon } from "lucide-react";
|
|
|
|
export default function BottomBar() {
|
|
const router = useRouter();
|
|
const [pubkey, setPubkey] = useState<null | string>(null);
|
|
const [mounted, setMounted] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
setPubkey(window.localStorage.getItem('pubkey'));
|
|
}, []);
|
|
|
|
const isActive = (path: string, currentPath: string) => currentPath === path ? 'text-purple-500' : '';
|
|
|
|
// Render minimal navigation during SSR and hydration
|
|
if (!mounted) {
|
|
return (
|
|
<nav className="fixed inset-x-0 bottom-0 h-14 flex flex-row shrink-0 items-center justify-between border-t bg-background/90 shadow-up-4 z-50 backdrop-blur">
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/', pathname)}`} href="/">
|
|
<HomeIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Home</span>
|
|
</Link>
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/global', pathname)}`} href="/global">
|
|
<GlobeIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Global</span>
|
|
</Link>
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/search', pathname)}`} href="/search">
|
|
<SearchIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Search</span>
|
|
</Link>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<nav className="fixed inset-x-0 bottom-0 h-14 flex flex-row shrink-0 items-center justify-between border-t bg-background/90 shadow-up-4 z-50 backdrop-blur">
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/', pathname)}`} href="/">
|
|
<HomeIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Home</span>
|
|
</Link>
|
|
{pubkey && (
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/feed', pathname)}`} href="/feed">
|
|
<RowsIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Follower Feed</span>
|
|
</Link>
|
|
)}
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/global', pathname)}`} href="/global">
|
|
<GlobeIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Global</span>
|
|
</Link>
|
|
{pubkey && window.localStorage.getItem('loginType') != 'readOnly_npub' && (
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/upload', pathname)}`} href="/upload">
|
|
<UploadIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Upload</span>
|
|
</Link>
|
|
)}
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/search', pathname)}`} href="/search">
|
|
<SearchIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Search</span>
|
|
</Link>
|
|
{pubkey && (
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/notifications', pathname)}`} href="/notifications">
|
|
<BellIcon className={`h-6 w-6`} />
|
|
<span className="sr-only">Notifications</span>
|
|
</Link>
|
|
)}
|
|
<Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/relays', pathname)}`} href="/relays">
|
|
<span className="sr-only">Relays</span>
|
|
</Link>
|
|
</nav>
|
|
)
|
|
}
|