Fixed sidebar
This commit is contained in:
+1
-1
@@ -49,7 +49,7 @@ export default function App() {
|
||||
minSize="4rem"
|
||||
groupResizeBehavior="preserve-pixel-size"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="h-screen flex overflow-y-hidden">
|
||||
<ServerList appRef={appRef} />
|
||||
<Sidebar appRef={appRef} />
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { openUrl } from "@tauri-apps/plugin-opener";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RefreshCw, Rss } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import StatusCard from "../view/StatusCard";
|
||||
|
||||
function formatTime(publishedAt: number): string {
|
||||
if (!publishedAt) return "";
|
||||
@@ -73,7 +74,9 @@ function StaticFallback() {
|
||||
);
|
||||
}
|
||||
|
||||
export default function MainPageSidebar(_props: {
|
||||
export default function MainPageSidebar({
|
||||
appRef,
|
||||
}: {
|
||||
appRef: React.RefObject<Enclave | null>;
|
||||
}) {
|
||||
const [items, setItems] = useState<NewsItem[] | null>(null);
|
||||
@@ -98,58 +101,62 @@ export default function MainPageSidebar(_props: {
|
||||
}, [load]);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-col">
|
||||
<header className="flex items-center justify-between px-3 py-2.5 border-b border-b-border">
|
||||
<h1 className="text-lg font-semibold flex items-center gap-2">
|
||||
<Rss className="h-4 w-4 text-primary" />
|
||||
Security News
|
||||
</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
disabled={loading}
|
||||
onClick={load}
|
||||
>
|
||||
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
|
||||
</Button>
|
||||
</header>
|
||||
<div className="h-full relative w-full @container">
|
||||
<div className="flex h-screen w-full flex-col">
|
||||
<header className="flex items-center justify-between px-3 py-2.5 border-b border-b-border">
|
||||
<h1 className="text-lg font-semibold flex items-center gap-2">
|
||||
<Rss className="h-4 w-4 text-primary" />
|
||||
Security News
|
||||
</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
disabled={loading}
|
||||
onClick={load}
|
||||
>
|
||||
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<section className="flex-1 overflow-y-scroll scrollbar-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden px-2 py-2">
|
||||
{loading && items === null && (
|
||||
<p className="px-2 py-4 text-sm text-muted-foreground">
|
||||
Loading news…
|
||||
</p>
|
||||
)}
|
||||
<section className="flex-1 overflow-y-scroll scrollbar-none[&::-webkit-scrollbar]:hidden px-2 py-2 mb-28">
|
||||
{loading && items === null && (
|
||||
<p className="px-2 py-4 text-sm text-muted-foreground">
|
||||
Loading news…
|
||||
</p>
|
||||
)}
|
||||
|
||||
{error && !loading && <StaticFallback />}
|
||||
{error && !loading && <StaticFallback />}
|
||||
|
||||
{items && (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.link}
|
||||
className="group flex w-full flex-col gap-1 rounded-md px-2 py-1.5 text-left hover:bg-accent"
|
||||
onClick={() => openUrl(item.link)}
|
||||
>
|
||||
<span className="text-sm text-foreground leading-tight">
|
||||
{item.title}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<span className="truncate">{item.source}</span>
|
||||
{item.publishedAt > 0 && (
|
||||
<>
|
||||
<span aria-hidden>·</span>
|
||||
<span className="shrink-0">
|
||||
{formatTime(item.publishedAt)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
{items && (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.link}
|
||||
className="group flex w-full flex-col gap-1 rounded-md px-2 py-1.5 text-left hover:bg-accent"
|
||||
onClick={() => openUrl(item.link)}
|
||||
>
|
||||
<span className="text-sm text-foreground leading-tight">
|
||||
{item.title}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<span className="truncate">{item.source}</span>
|
||||
{item.publishedAt > 0 && (
|
||||
<>
|
||||
<span aria-hidden>·</span>
|
||||
<span className="shrink-0">
|
||||
{formatTime(item.publishedAt)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<StatusCard appRef={appRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -156,20 +156,20 @@ export default function ServerSidebar({
|
||||
appRef: React.RefObject<Enclave | null>;
|
||||
}) {
|
||||
return (
|
||||
<div className="h-screen relative w-full @container">
|
||||
<div className="h-full relative w-full @container">
|
||||
{appRef.current?.server?.meta && (
|
||||
<>
|
||||
<div className="h-full">
|
||||
<header className="px-3 pt-2.5 pb-2.5 text-lg font-semibold border-b border-b-border">
|
||||
<h1>{appRef.current.server.meta.name}</h1>
|
||||
</header>
|
||||
|
||||
<section className="px-1.5 pt-3.5 w-full h-full flex flex-col gap-1 overflow-y-scroll scrollbar-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden pb-55">
|
||||
<section className="px-1.5 pt-3.5 w-full h-full flex flex-col gap-1 overflow-y-scroll scrollbar-none [&::-webkit-scrollbar]:hidden mb-28">
|
||||
<RenderChannels
|
||||
appRef={appRef}
|
||||
channels={appRef.current.server.meta.channels}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<StatusCard appRef={appRef} />
|
||||
|
||||
Reference in New Issue
Block a user