Add support for custom sidebar item ordering

Sidebar icons are now rendered dynamically

src/frontend/components/sidebar/Sidebar.tsx

@@ -20,6 +20,7 @@ function reducer(state:SidebarState, action:string){
     return newstate;
 }
 
+
 export function Sidebar(){
     const [state, dispatch] = useReducer(reducer, {paneVisible: false, view: "notes"})
 

src/frontend/components/sidebar/SidebarIcons.tsx

@@ -1,15 +1,29 @@
+import { useCallback } from "react";
 import { SidebarButton } from "./SidebarButton"
 
-export default function SidebarIcons(props: {dispatch: React.Dispatch<any>, view: string, state:any}){
+export type SidebarItem = "notes" | "favorites" | "search" | "notebooks" | "tags" | "todos" | "settings" | "spacer";
+
+const ICON_MAP={
+    "notes": "stickies",
+    "favorites": "star",
+    "search": "search",
+    "notebooks": "journals",
+    "tags": "tags",
+    "todos": "check-all",
+    "settings": "gear",
+    "spacer": ""
+}
+
+const DEFAULT_ITEMS:SidebarItem[] = ["notes", "favorites", "search", "notebooks", "tags", "todos", "spacer", "settings"]
+
+export default function SidebarIcons(props: {dispatch: React.Dispatch<any>, view: string, state:any,items?:SidebarItem[]}){
     const isActive = (view:string)=>{return view===props.view && props.state.paneVisible}
+
     return <div className="flex flex-col flex-shrink-0 w-16 bg-bg1 items-center select-none gap-2 rounded-2xl p-2">
-    <SidebarButton onClick={()=>{props.dispatch("notes")}} icon="stickies" active={isActive("notes")}></SidebarButton>
-    <SidebarButton onClick={()=>{props.dispatch("favorites")}} icon="star" active={isActive("favorites")}></SidebarButton>
-    <SidebarButton onClick={()=>{props.dispatch("search")}} icon="search" active={isActive("search")}></SidebarButton>
-    <SidebarButton onClick={()=>{props.dispatch("notebooks")}} icon="journals" active={isActive("notebooks")}></SidebarButton>
-    <SidebarButton onClick={()=>{props.dispatch("tags")}} icon="tags" active={isActive("tags")}></SidebarButton>
-    <SidebarButton onClick={()=>{props.dispatch("todos")}} icon="check-all" active={isActive("todos")}></SidebarButton>
-    <div className="flex-grow"></div>
-    <SidebarButton onClick={()=>{props.dispatch("settings")}} icon="gear" active={isActive("settings")}></SidebarButton>
+        {(props.items || DEFAULT_ITEMS).map((i)=>{
+                    if(i==="spacer") return <div className="flex-grow"></div>
+                    return <SidebarButton onClick={()=>{props.dispatch(i)}} icon={ICON_MAP[i]} key={i} active={isActive(i)}></SidebarButton>
+        })}
     </div>
-}
+}
+