mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-07 09:25:27 +00:00
Use tabWidth 4 without actual tabs.
This commit is contained in:
Paul
@@ -13,9 +13,9 @@ import { connectState } from "../../../redux/connector";
|
||||
import { Unreads } from "../../../redux/reducers/unreads";
|
||||
|
||||
import {
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useServer,
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useServer,
|
||||
} from "../../../context/revoltjs/hooks";
|
||||
|
||||
import CollapsibleSection from "../../common/CollapsibleSection";
|
||||
@@ -27,124 +27,124 @@ import { ChannelButton } from "../items/ButtonItem";
|
||||
import ConnectionStatus from "../items/ConnectionStatus";
|
||||
|
||||
interface Props {
|
||||
unreads: Unreads;
|
||||
unreads: Unreads;
|
||||
}
|
||||
|
||||
const ServerBase = styled.div`
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
background: var(--secondary-background);
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
background: var(--secondary-background);
|
||||
|
||||
border-start-start-radius: 8px;
|
||||
border-end-start-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-start-start-radius: 8px;
|
||||
border-end-start-radius: 8px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const ServerList = styled.div`
|
||||
padding: 6px;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
padding: 6px;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
|
||||
> svg {
|
||||
width: 100%;
|
||||
}
|
||||
> svg {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
function ServerSidebar(props: Props) {
|
||||
const { server: server_id, channel: channel_id } =
|
||||
useParams<{ server?: string; channel?: string }>();
|
||||
const ctx = useForceUpdate();
|
||||
const { server: server_id, channel: channel_id } =
|
||||
useParams<{ server?: string; channel?: string }>();
|
||||
const ctx = useForceUpdate();
|
||||
|
||||
const server = useServer(server_id, ctx);
|
||||
if (!server) return <Redirect to="/" />;
|
||||
const server = useServer(server_id, ctx);
|
||||
if (!server) return <Redirect to="/" />;
|
||||
|
||||
const channels = (
|
||||
useChannels(server.channels, ctx).filter(
|
||||
(entry) => typeof entry !== "undefined",
|
||||
) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
|
||||
).map((x) => mapChannelWithUnread(x, props.unreads));
|
||||
const channels = (
|
||||
useChannels(server.channels, ctx).filter(
|
||||
(entry) => typeof entry !== "undefined",
|
||||
) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
|
||||
).map((x) => mapChannelWithUnread(x, props.unreads));
|
||||
|
||||
const channel = channels.find((x) => x?._id === channel_id);
|
||||
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
|
||||
if (channel) useUnreads({ ...props, channel }, ctx);
|
||||
const channel = channels.find((x) => x?._id === channel_id);
|
||||
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
|
||||
if (channel) useUnreads({ ...props, channel }, ctx);
|
||||
|
||||
useEffect(() => {
|
||||
if (!channel_id) return;
|
||||
useEffect(() => {
|
||||
if (!channel_id) return;
|
||||
|
||||
dispatch({
|
||||
type: "LAST_OPENED_SET",
|
||||
parent: server_id!,
|
||||
child: channel_id!,
|
||||
});
|
||||
}, [channel_id]);
|
||||
dispatch({
|
||||
type: "LAST_OPENED_SET",
|
||||
parent: server_id!,
|
||||
child: channel_id!,
|
||||
});
|
||||
}, [channel_id]);
|
||||
|
||||
let uncategorised = new Set(server.channels);
|
||||
let elements = [];
|
||||
let uncategorised = new Set(server.channels);
|
||||
let elements = [];
|
||||
|
||||
function addChannel(id: string) {
|
||||
const entry = channels.find((x) => x._id === id);
|
||||
if (!entry) return;
|
||||
function addChannel(id: string) {
|
||||
const entry = channels.find((x) => x._id === id);
|
||||
if (!entry) return;
|
||||
|
||||
const active = channel?._id === entry._id;
|
||||
const active = channel?._id === entry._id;
|
||||
|
||||
return (
|
||||
<ConditionalLink
|
||||
key={entry._id}
|
||||
active={active}
|
||||
to={`/server/${server!._id}/channel/${entry._id}`}>
|
||||
<ChannelButton
|
||||
channel={entry}
|
||||
active={active}
|
||||
alert={entry.unread}
|
||||
compact
|
||||
/>
|
||||
</ConditionalLink>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ConditionalLink
|
||||
key={entry._id}
|
||||
active={active}
|
||||
to={`/server/${server!._id}/channel/${entry._id}`}>
|
||||
<ChannelButton
|
||||
channel={entry}
|
||||
active={active}
|
||||
alert={entry.unread}
|
||||
compact
|
||||
/>
|
||||
</ConditionalLink>
|
||||
);
|
||||
}
|
||||
|
||||
if (server.categories) {
|
||||
for (let category of server.categories) {
|
||||
let channels = [];
|
||||
for (let id of category.channels) {
|
||||
uncategorised.delete(id);
|
||||
channels.push(addChannel(id));
|
||||
}
|
||||
if (server.categories) {
|
||||
for (let category of server.categories) {
|
||||
let channels = [];
|
||||
for (let id of category.channels) {
|
||||
uncategorised.delete(id);
|
||||
channels.push(addChannel(id));
|
||||
}
|
||||
|
||||
elements.push(
|
||||
<CollapsibleSection
|
||||
id={`category_${category.id}`}
|
||||
defaultValue
|
||||
summary={<Category text={category.title} />}>
|
||||
{channels}
|
||||
</CollapsibleSection>,
|
||||
);
|
||||
}
|
||||
}
|
||||
elements.push(
|
||||
<CollapsibleSection
|
||||
id={`category_${category.id}`}
|
||||
defaultValue
|
||||
summary={<Category text={category.title} />}>
|
||||
{channels}
|
||||
</CollapsibleSection>,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
for (let id of Array.from(uncategorised).reverse()) {
|
||||
elements.unshift(addChannel(id));
|
||||
}
|
||||
for (let id of Array.from(uncategorised).reverse()) {
|
||||
elements.unshift(addChannel(id));
|
||||
}
|
||||
|
||||
return (
|
||||
<ServerBase>
|
||||
<ServerHeader server={server} ctx={ctx} />
|
||||
<ConnectionStatus />
|
||||
<ServerList
|
||||
onContextMenu={attachContextMenu("Menu", {
|
||||
server_list: server._id,
|
||||
})}>
|
||||
{elements}
|
||||
</ServerList>
|
||||
<PaintCounter small />
|
||||
</ServerBase>
|
||||
);
|
||||
return (
|
||||
<ServerBase>
|
||||
<ServerHeader server={server} ctx={ctx} />
|
||||
<ConnectionStatus />
|
||||
<ServerList
|
||||
onContextMenu={attachContextMenu("Menu", {
|
||||
server_list: server._id,
|
||||
})}>
|
||||
{elements}
|
||||
</ServerList>
|
||||
<PaintCounter small />
|
||||
</ServerBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default connectState(ServerSidebar, (state) => {
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
};
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user