enclave-chat/enclave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fixed sidebar

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