Fix: Icons collapsing in flex.

Feature: Remember what channel was opened last.
Channels: ESC to focus message box / cancel editing.

src/components/navigation/left/HomeSidebar.tsx

@@ -1,5 +1,5 @@
 import { Localizer, Text } from "preact-i18n";
-import { useContext } from "preact/hooks";
+import { useContext, useEffect } from "preact/hooks";
 import { Home, Users, Tool, Save } from "@styled-icons/feather";
 
 import Category from '../../ui/Category';
@@ -10,6 +10,7 @@ import { connectState } from "../../../redux/connector";
 import ConnectionStatus from '../items/ConnectionStatus';
 import { WithDispatcher } from "../../../redux/reducers";
 import { Unreads } from "../../../redux/reducers/unreads";
+import ConditionalLink from "../../../lib/ConditionalLink";
 import { mapChannelWithUnread, useUnreads } from "./common";
 import { Users as UsersNS } from 'revolt.js/dist/api/objects';
 import ButtonItem, { ChannelButton } from '../items/ButtonItem';
@@ -37,6 +38,16 @@ function HomeSidebar(props: Props) {
     if (channel && !obj) return <Redirect to="/" />;
     if (obj) useUnreads({ ...props, channel: obj });
 
+    useEffect(() => {
+        if (!channel) return;
+
+        props.dispatcher({
+            type: 'LAST_OPENED_SET',
+            parent: 'home',
+            child: channel
+        });
+    }, [ channel ]);
+
     const channelsArr = channels
         .filter(x => x.channel_type !== 'SavedMessages')
         .map(x => mapChannelWithUnread(x, props.unreads));
@@ -55,13 +66,13 @@ function HomeSidebar(props: Props) {
             <GenericSidebarList>
                 {!isTouchscreenDevice && (
                     <>
-                        <Link to="/">
+                        <ConditionalLink active={pathname === "/"} to="/">
                             <ButtonItem active={pathname === "/"}>
                                 <Home size={20} />
                                 <span><Text id="app.navigation.tabs.home" /></span>
                             </ButtonItem>
-                        </Link>
-                        <Link to="/friends">
+                        </ConditionalLink>
+                        <ConditionalLink active={pathname === "/friends"} to="/friends">
                             <ButtonItem
                                 active={pathname === "/friends"}
                                 alert={
@@ -75,15 +86,15 @@ function HomeSidebar(props: Props) {
                                 <Users size={20} />
                                 <span><Text id="app.navigation.tabs.friends" /></span>
                             </ButtonItem>
-                        </Link>
+                        </ConditionalLink>
                     </>
                 )}
-                <Link to="/open/saved">
+                <ConditionalLink active={obj?.channel_type === "SavedMessages"} to="/open/saved">
                     <ButtonItem active={obj?.channel_type === "SavedMessages"}>
                         <Save size={20} />
                         <span><Text id="app.navigation.tabs.saved" /></span>
                     </ButtonItem>
-                </Link>
+                </ConditionalLink>
                 {import.meta.env.DEV && (
                     <Link to="/dev">
                         <ButtonItem active={pathname === "/dev"}>
@@ -115,7 +126,7 @@ function HomeSidebar(props: Props) {
                     }
                     
                     return (
-                        <Link to={`/channel/${x._id}`}>
+                        <ConditionalLink active={x._id === channel} to={`/channel/${x._id}`}>
                             <ChannelButton
                                 user={user}
                                 channel={x}
@@ -123,7 +134,7 @@ function HomeSidebar(props: Props) {
                                 alertCount={x.alertCount}
                                 active={x._id === channel}
                             />
-                        </Link>
+                        </ConditionalLink>
                     );
                 })}
                 <PaintCounter />

src/components/navigation/left/ServerListSidebar.tsx

@@ -8,9 +8,11 @@ import { PlusCircle } from "@styled-icons/feather";
 import PaintCounter from "../../../lib/PaintCounter";
 import { attachContextMenu } from 'preact-context-menu';
 import { connectState } from "../../../redux/connector";
+import { useLocation, useParams } from "react-router-dom";
 import { Unreads } from "../../../redux/reducers/unreads";
+import ConditionalLink from "../../../lib/ConditionalLink";
 import { Channel, Servers } from "revolt.js/dist/api/objects";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { LastOpened } from "../../../redux/reducers/last_opened";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
@@ -104,9 +106,10 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
 
 interface Props {
     unreads: Unreads;
+    lastOpened: LastOpened;
 }
 
-export function ServerListSidebar({ unreads }: Props) {
+export function ServerListSidebar({ unreads, lastOpened }: Props) {
     const ctx = useForceUpdate();
     const activeServers = useServers(undefined, ctx) as Servers.Server[];
     const channels = (useChannels(undefined, ctx) as Channel[])
@@ -148,31 +151,36 @@ export function ServerListSidebar({ unreads }: Props) {
     }
 
     if (alertCount > 0) homeUnread = 'mention';
+    const homeActive = typeof server === 'undefined' && !path.startsWith('/invite');
 
     return (
         <ServersBase>
             <ServerList>
-                <Link to={`/`}>
-                    <ServerEntry invert
-                        active={typeof server === 'undefined' && !path.startsWith('/invite')}>
+                <ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
+                    <ServerEntry invert active={homeActive}>
                         <Icon size={36} unread={homeUnread}>
                             <img src={logoSVG} />
                         </Icon>
                     </ServerEntry>
-                </Link>
+                </ConditionalLink>
                 <LineDivider />
                 {
-                    servers.map(entry =>
-                        <Link to={`/server/${entry!._id}`}>
-                            <ServerEntry
-                                active={entry!._id === server?._id}
-                                onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
-                                <Icon size={36} unread={entry.unread}>
-                                    <ServerIcon size={32} target={entry} />
-                                </Icon>
-                            </ServerEntry>
-                        </Link>
-                    )
+                    servers.map(entry => {
+                        const active = entry!._id === server?._id;
+                        const id = lastOpened[entry!._id];
+                        
+                        return (
+                            <ConditionalLink active={active} to={`/server/${entry!._id}` + (id ? `/channel/${id}` : '')}>
+                                <ServerEntry
+                                    active={active}
+                                    onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
+                                    <Icon size={36} unread={entry.unread}>
+                                        <ServerIcon size={32} target={entry} />
+                                    </Icon>
+                                </ServerEntry>
+                            </ConditionalLink>
+                        )
+                    })
                 }
                 <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
                     <PlusCircle size={36} />
@@ -187,7 +195,8 @@ export default connectState(
     ServerListSidebar,
     state => {
         return {
-            unreads: state.unreads
+            unreads: state.unreads,
+            lastOpened: state.lastOpened
         };
     }
 );

src/components/navigation/left/ServerSidebar.tsx

@@ -15,6 +15,8 @@ import PaintCounter from "../../../lib/PaintCounter";
 import styled from "styled-components";
 import { attachContextMenu } from 'preact-context-menu';
 import ServerHeader from "../../common/ServerHeader";
+import { useEffect } from "preact/hooks";
+import ConditionalLink from "../../../lib/ConditionalLink";
 
 interface Props {
     unreads: Unreads;
@@ -51,24 +53,37 @@ function ServerSidebar(props: Props & WithDispatcher) {
         .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);
 
+    useEffect(() => {
+        if (!channel_id) return;
+
+        props.dispatcher({
+            type: 'LAST_OPENED_SET',
+            parent: server_id!,
+            child: channel_id!
+        });
+    }, [ channel_id ]);
+
     return (
         <ServerBase>
             <ServerHeader server={server} ctx={ctx} />
             <ConnectionStatus />
             <ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
                 {channels.map(entry => {
+                    const active = channel?._id === entry._id;
+
                     return (
-                        <Link to={`/server/${server._id}/channel/${entry._id}`}>
+                        <ConditionalLink active={active} to={`/server/${server._id}/channel/${entry._id}`}>
                             <ChannelButton
                                 key={entry._id}
                                 channel={entry}
-                                active={channel?._id === entry._id}
+                                active={active}
                                 alert={entry.unread}
                                 compact
                             />
-                        </Link>
+                        </ConditionalLink>
                     );
                 })}
             </ServerList>