diff --git a/ui/src/App.jsx b/ui/src/App.jsx index c513404..809f3ad 100644 --- a/ui/src/App.jsx +++ b/ui/src/App.jsx @@ -141,6 +141,7 @@ export default function App() { setExpanded={setSidebarExpanded} loginUser={loginUser} onLogout={handleLogout} + sources={sources} /> @@ -201,7 +202,8 @@ export default function App() { } /> }> - } /> + } /> + } /> } /> } /> } /> diff --git a/ui/src/components/Sidebar.jsx b/ui/src/components/Sidebar.jsx index 6741839..a67d7ce 100644 --- a/ui/src/components/Sidebar.jsx +++ b/ui/src/components/Sidebar.jsx @@ -1,10 +1,37 @@ +import { Fragment, useMemo } from 'react' import { NavLink } from 'react-router-dom' import useTheme from '../theme.jsx' import { NAV } from './navItems.jsx' -export default function Sidebar({ expanded, setExpanded, loginUser, onLogout }) { +// Same distinction the Import page makes: a source is either on a bank feed or +// it gets CSVs uploaded to it. +const feedIcon = ( + + + + + +) + +const csvIcon = ( + + + + +) + +export default function Sidebar({ expanded, setExpanded, loginUser, onLogout, sources = [] }) { const { dark, setDark } = useTheme() + // Bank feeds first, then CSV sources, alphabetical within each group + const navSources = useMemo(() => ( + sources + .map(s => ({ ...s, isFeed: !!s.config?.simplefin?.account_id })) + .sort((a, b) => + (b.isFeed - a.isFeed) || a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }) + ) + ), [sources]) + return (
{/* Nav */} -