Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
2.6 kB · 89 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import { q } from "@thorium/context/AppContext";import { useStation } from "@thorium/routes/station/useStation";import Button from "@thorium/ui/Button";import { Icon } from "@thorium/ui/Icon";import { Tooltip } from "@thorium/ui/Tooltip";import { cn } from "@thorium/utils/cn";
import type { Pages } from "./longRangeCommPages";
export function Sidebar({ currentPage, setCurrentPage,}: { currentPage: Pages; setCurrentPage: (page: Pages) => void;}) { const { shipId } = useStation();
const [pendingMessages] = q.longRangeComm.outgoingMessages.useNetRequest({ shipId, filter: "pending", }); const [encodedMessages] = q.longRangeComm.incomingMessages.useNetRequest({ shipId, });
const outboxLabel = pendingMessages.length; const inboxLabel = encodedMessages.filter((e) => e.unread).length;
return ( <div className="flex flex-col items-center gap-4"> <Tooltip content="Inbox" placement="right"> <Button className={cn("relative btn-round btn-alert inbox-button", { active: currentPage === "inbox", })} onClick={() => setCurrentPage("inbox")} > <span className="sr-only">Inbox</span> <Icon name="inbox" /> {inboxLabel > 0 ? ( <div className="badge badge-error absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 rounded-full"> {inboxLabel} </div> ) : null} </Button> </Tooltip> <Tooltip content="Compose Message" placement="right"> <Button className={cn("btn-round btn-alert compose-button", { active: currentPage === "compose", })} onClick={() => setCurrentPage("compose")} > <span className="sr-only">Compose Message</span> <Icon name="pencil-line" /> </Button> </Tooltip> <Tooltip content="Outbox" placement="right"> <Button className={cn("relative btn-round btn-alert outbox-button", { active: currentPage === "outbox", })} onClick={() => setCurrentPage("outbox")} > <span className="sr-only">Outbox</span> <Icon name="archive" />
{outboxLabel > 0 ? ( <div className="badge badge-error absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 rounded-full"> {outboxLabel} </div> ) : null} </Button> </Tooltip> <Tooltip content="Sent" placement="right"> <Button className={cn("btn-round btn-alert sent-button", { active: currentPage === "sent", })} onClick={() => setCurrentPage("sent")} > <span className="sr-only">Sent</span> <Icon name="send" /> </Button> </Tooltip> </div> );}