forked from Mirrors/gomuks
83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
// gomuks - A Matrix client written in Go.
|
|
// Copyright (C) 2024 Tulir Asokan
|
|
//
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU Affero General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU Affero General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU Affero General Public License
|
|
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
import { JSX, use } from "react"
|
|
import type { UserID } from "@/api/types"
|
|
import MainScreenContext from "../MainScreenContext.ts"
|
|
import MemberList from "./MemberList.tsx"
|
|
import PinnedMessages from "./PinnedMessages.tsx"
|
|
import UserInfo from "./UserInfo.tsx"
|
|
import BackIcon from "@/icons/back.svg?react"
|
|
import CloseIcon from "@/icons/close.svg?react"
|
|
import "./RightPanel.css"
|
|
|
|
export type RightPanelType = "pinned-messages" | "members" | "user"
|
|
|
|
interface RightPanelSimpleProps {
|
|
type: "pinned-messages" | "members"
|
|
}
|
|
|
|
interface RightPanelUserProps {
|
|
type: "user"
|
|
userID: UserID
|
|
}
|
|
|
|
export type RightPanelProps = RightPanelUserProps | RightPanelSimpleProps
|
|
|
|
function getTitle(type: RightPanelType): string {
|
|
switch (type) {
|
|
case "pinned-messages":
|
|
return "Pinned Messages"
|
|
case "members":
|
|
return "Room Members"
|
|
case "user":
|
|
return "User Info"
|
|
}
|
|
}
|
|
|
|
function renderRightPanelContent(props: RightPanelProps): JSX.Element | null {
|
|
switch (props.type) {
|
|
case "pinned-messages":
|
|
return <PinnedMessages />
|
|
case "members":
|
|
return <MemberList />
|
|
case "user":
|
|
return <UserInfo userID={props.userID} />
|
|
}
|
|
}
|
|
|
|
const RightPanel = (props: RightPanelProps) => {
|
|
let backButton: JSX.Element | null = null
|
|
if (props.type === "user") {
|
|
backButton = <button
|
|
data-target-panel="members"
|
|
onClick={use(MainScreenContext).clickRightPanelOpener}
|
|
><BackIcon/></button>
|
|
}
|
|
return <div className="right-panel">
|
|
<div className="right-panel-header">
|
|
<div className="left-side">
|
|
{backButton}
|
|
<div className="panel-name">{getTitle(props.type)}</div>
|
|
</div>
|
|
<button onClick={use(MainScreenContext).closeRightPanel}><CloseIcon/></button>
|
|
</div>
|
|
<div className={`right-panel-content ${props.type}`}>
|
|
{renderRightPanelContent(props)}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
export default RightPanel
|