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 */}
-