34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useInbox } from '../store.js';
|
|
import { NotebookList } from './NotebookList.js';
|
|
import { NotebookCreateModal } from './NotebookCreateModal.js';
|
|
|
|
export function Sidebar(): React.ReactElement | null {
|
|
const visible = useInbox((s) => s.sidebarVisible);
|
|
const width = useInbox((s) => s.sidebarWidth);
|
|
const notebooks = useInbox((s) => s.notebooks);
|
|
const selectedId = useInbox((s) => s.selectedNotebookId);
|
|
const selectNotebook = useInbox((s) => s.selectNotebook);
|
|
const reorderNotebook = useInbox((s) => s.reorderNotebook);
|
|
const [createOpen, setCreateOpen] = useState(false);
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<aside style={{
|
|
width, borderRight: '1px solid #e0e0e0',
|
|
background: '#fafafa', overflowY: 'auto',
|
|
flexShrink: 0
|
|
}}>
|
|
<NotebookList
|
|
notebooks={notebooks}
|
|
selectedId={selectedId}
|
|
onSelect={selectNotebook}
|
|
onCreate={() => setCreateOpen(true)}
|
|
onReorder={reorderNotebook}
|
|
/>
|
|
{createOpen && <NotebookCreateModal onClose={() => setCreateOpen(false)} />}
|
|
</aside>
|
|
);
|
|
}
|