diff --git a/src/renderer/inbox/components/NotebookList.tsx b/src/renderer/inbox/components/NotebookList.tsx index 19091a6..ddb2886 100644 --- a/src/renderer/inbox/components/NotebookList.tsx +++ b/src/renderer/inbox/components/NotebookList.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import type { Notebook } from '@shared/types'; interface Props { @@ -6,33 +6,63 @@ interface Props { selectedId: string | null; onSelect: (id: string) => void; onCreate: () => void; + onReorder?: (id: string, direction: 'up' | 'down') => Promise; } -export function NotebookList({ notebooks, selectedId, onSelect, onCreate }: Props): React.ReactElement { +export function NotebookList({ notebooks, selectedId, onSelect, onCreate, onReorder }: Props): React.ReactElement { + const [hoverId, setHoverId] = useState(null); + return (
- {notebooks.map((nb) => { + {notebooks.map((nb, idx) => { const active = nb.id === selectedId; + const hover = nb.id === hoverId; + const isFirst = idx === 0; + const isLast = idx === notebooks.length - 1; return ( - + + {hover && onReorder && notebooks.length > 1 && ( +
+ + +
+ )} +
); })}