47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
import { useWaste } from '../store'
|
||
|
|
|
||
|
|
export function Sidebar() {
|
||
|
|
const { localPeer, networks, activeNetworkId, activeRoom, setActiveRoom, setActiveNetwork, messages } = useWaste()
|
||
|
|
|
||
|
|
// Rooms = general + any DM threads that have messages
|
||
|
|
const rooms = ['general']
|
||
|
|
Object.keys(messages).forEach(r => {
|
||
|
|
if (r.startsWith('dm:') && !rooms.includes(r)) rooms.push(r)
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="sidebar">
|
||
|
|
<div className="sidebar-identity">
|
||
|
|
<span className="alias">{localPeer?.alias}</span>
|
||
|
|
<span className="peer-id">{localPeer?.id.slice(0, 8)}…</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="sidebar-section">
|
||
|
|
<span className="sidebar-label">Networks</span>
|
||
|
|
{networks.map(n => (
|
||
|
|
<button
|
||
|
|
key={n.network_id}
|
||
|
|
className={`sidebar-item ${n.network_id === activeNetworkId ? 'active' : ''}`}
|
||
|
|
onClick={() => setActiveNetwork(n.network_id)}
|
||
|
|
>
|
||
|
|
{n.network_name}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="sidebar-section">
|
||
|
|
<span className="sidebar-label">Rooms</span>
|
||
|
|
{rooms.map(r => (
|
||
|
|
<button
|
||
|
|
key={r}
|
||
|
|
className={`sidebar-item ${r === activeRoom ? 'active' : ''}`}
|
||
|
|
onClick={() => setActiveRoom(r)}
|
||
|
|
>
|
||
|
|
{r.startsWith('dm:') ? `@ ${r.slice(3, 11)}…` : `# ${r}`}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|