LobotomyLabs/dumpsterChat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Wiki Activity

refactor: remove redundant far-left [S][@] selector

Browse Source 
ServerBar already has [@] at the top and server icons below.
The far-left w-16 div was a duplicate layer. ServerBar now
navigates on server/DM clicks.
This commit is contained in:
Dustin Newkirk
2026-07-02 09:02:40 -04:00
parent c0686d4ca3
commit 67ce6bbfd9
2 changed files with 14 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/Layout.tsx
-30
View File
@@ -34,12 +34,10 @@ export function Layout() {
const updateProfile = useAuthStore((state) => state.updateProfile); const updateProfile = useAuthStore((state) => state.updateProfile);
const wsConnect = useWebSocketStore((s) => s.connect); const wsConnect = useWebSocketStore((s) => s.connect);
const wsDisconnect = useWebSocketStore((s) => s.disconnect); const wsDisconnect = useWebSocketStore((s) => s.disconnect);
const setActiveServer = useServerStore((s) => s.setActiveServer);
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const [showStatusMenu, setShowStatusMenu] = useState(false); const [showStatusMenu, setShowStatusMenu] = useState(false);
const isDM = useLayoutStore((s) => s.isDM); const isDM = useLayoutStore((s) => s.isDM);
const setDM = useLayoutStore((s) => s.setDM);
const [showServerSettings, setShowServerSettings] = useState(false); const [showServerSettings, setShowServerSettings] = useState(false);
const activeServerId = useServerStore((s) => s.activeServerId); const activeServerId = useServerStore((s) => s.activeServerId);
useEffect(() => { useEffect(() => {
@@ -118,34 +116,6 @@ export function Layout() {
</div> </div>
</div> </div>
<div className="flex-1 flex min-h-0"> <div className="flex-1 flex min-h-0">
<div className="flex flex-col items-center w-16 bg-gb-bg-h border-r border-gb-bg-t py-2 gap-2 shrink-0">
<button
onClick={() => { setDM(false); navigate('/'); }}
className={`w-11 h-11 flex items-center justify-center font-mono text-xs border rounded ${
!isDM
? 'bg-gb-bg-t text-gb-orange border-gb-orange'
: 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t'
}`}
title="Servers"
>
[S]
</button>
<button
onClick={() => {
setDM(true);
setActiveServer(null);
navigate('/dm');
}}
className={`w-11 h-11 flex items-center justify-center font-mono text-xs border rounded ${
isDM
? 'bg-gb-bg-t text-gb-orange border-gb-orange'
: 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t'
}`}
title="Direct Messages"
>
[@]
</button>
</div>
<ServerBar /> <ServerBar />
{isDM ? <ConversationList /> : <ChannelList />} {isDM ? <ConversationList /> : <ChannelList />}
<div className="flex-1 min-w-0 flex flex-col"> <div className="flex-1 min-w-0 flex flex-col">
web/src/components/ServerBar.tsx
+14 -10
View File
@@ -1,13 +1,14 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useServerStore } from '../stores/server.ts'; import { useNavigate } from "react-router-dom";
import { useChannelStore } from '../stores/channel.ts'; import { useServerStore } from "../stores/server.ts";
import { useLayoutStore } from '../stores/layout.ts'; import { useChannelStore } from "../stores/channel.ts";
import { CreateServerModal } from './CreateServerModal.tsx'; import { useLayoutStore } from "../stores/layout.ts";
import { JoinServerModal } from './JoinServerModal.tsx'; import { CreateServerModal } from "./CreateServerModal.tsx";
import { ServerSettingsModal } from './ServerSettingsModal.tsx'; import { JoinServerModal } from "./JoinServerModal.tsx";
import { InviteModal } from './InviteModal.tsx'; import { ServerSettingsModal } from "./ServerSettingsModal.tsx";
import { useContextMenu } from './ContextMenu.tsx'; import { InviteModal } from "./InviteModal.tsx";
import { api } from '../lib/api.ts'; import { useContextMenu } from "./ContextMenu.tsx";
import { api } from "../lib/api.ts";
function getInitials(name: string): string { function getInitials(name: string): string {
const words = name.trim().split(/\s+/); const words = name.trim().split(/\s+/);
@@ -24,6 +25,7 @@ export function ServerBar() {
const setActiveServer = useServerStore((state) => state.setActiveServer); const setActiveServer = useServerStore((state) => state.setActiveServer);
const setActiveChannel = useChannelStore((state) => state.setActiveChannel); const setActiveChannel = useChannelStore((state) => state.setActiveChannel);
const { isDM, setDM } = useLayoutStore(); const { isDM, setDM } = useLayoutStore();
const navigate = useNavigate();
const [showCreate, setShowCreate] = useState(false); const [showCreate, setShowCreate] = useState(false);
const [showJoin, setShowJoin] = useState(false); const [showJoin, setShowJoin] = useState(false);
const [settingsServerId, setSettingsServerId] = useState<string | null>(null); const [settingsServerId, setSettingsServerId] = useState<string | null>(null);
@@ -39,12 +41,14 @@ export function ServerBar() {
setActiveServer(id); setActiveServer(id);
setActiveChannel(null); setActiveChannel(null);
setDM(false); setDM(false);
navigate('/');
}; };
const handleDM = () => { const handleDM = () => {
setActiveServer(null); setActiveServer(null);
setActiveChannel(null); setActiveChannel(null);
setDM(true); setDM(true);
navigate('/dm');
}; };
const handleServerContextMenu = (e: React.MouseEvent, server: { id: string; name: string }) => { const handleServerContextMenu = (e: React.MouseEvent, server: { id: string; name: string }) => {