Implement prototype sidebar

Comment out backend methods and old layout
Create a prototype sidebar with working state management and transitions

package.json

@@ -22,6 +22,7 @@
     "react-contexify": "^6.0.0",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-transition-group": "^4.4.5",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
@@ -54,6 +55,7 @@
   "devDependencies": {
     "@hello-pangea/dnd": "^16.0.1",
     "@tauri-apps/cli": "^1.2.3",
+    "@types/react-transition-group": "^4.4.6",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
     "@vitejs/plugin-react": "^3.0.0",

src/App.tsx

@@ -24,6 +24,7 @@ import { GenerateID, NotebookInfo } from './Util';
 import { MoveToNewNotebookDialog } from './frontend/components/MoveToNewNotebookDialog';
 import {type, OsType} from '@tauri-apps/api/os'
 import { TemplateNoteInfo } from './frontend/TemplateNoteInfo';
+import MainLayout from './frontend/Layout';
 
 function App() {
   const [notebooks,setNotebooks] = useState<NotebookInfo[]>([] as NotebookInfo[]);
@@ -34,7 +35,7 @@ function App() {
   const bgImgRef = useRef<HTMLImageElement>(null);
   const [locale, setLocale] = useState("en_us");
   let platform:OsType;
-  useEffect(()=>{
+  /*useEffect(()=>{
     console.log("Application started. Initializing");
     async function Init(){
       updateSettings(await LoadSettings());
@@ -76,11 +77,10 @@ function App() {
   },[notebooks,settings]);
   useEffect(()=>{
     if(notebooks.length!=0) setActiveNotebook(notebooks[0].id);
-  },[notebooks])
+  },[notebooks])*/
   return (
-    <div className="App absolute left-0 right-0 bottom-0 top-0 background-default">
-     <div className='overflow-y-hidden overflow-x-hidden select-none relative p-2 right-0 bottom-0 items-stretch gap-2 flex flex-col text-default transition-all w-full h-full duration-200'>
-        <SettingsContext.Provider value={{settings,updateSettings}}>
+    <div className="App">
+     {/*<SettingsContext.Provider value={{settings,updateSettings}}>
           <NotebooksContext.Provider value={notebooksValue}>
             <LocaleContext.Provider value={{locale, setLocale}}>
               <ActiveNotebookContext.Provider value={{notebookID: activeNotebook, setNotebookID: setActiveNotebook}}>
@@ -98,8 +98,8 @@ function App() {
               </ActiveNotebookContext.Provider>
             </LocaleContext.Provider>
           </NotebooksContext.Provider>
-        </SettingsContext.Provider>
-      </div>
+        </SettingsContext.Provider>*/}
+        <MainLayout></MainLayout>
     </div>
   );
 }

src/frontend/Layout.tsx

@@ -0,0 +1,7 @@
+import { Sidebar } from "./components/sidebar/Sidebar";
+
+export default function MainLayout(){
+    return <div className="absolute left-0 right-0 bottom-0 top-0 flex flex-row bg-base p-2">
+        <Sidebar></Sidebar>
+    </div>
+}

src/frontend/components/Icon.tsx

@@ -0,0 +1,7 @@
+export default function Icon(props: {icon: string, size?: number, color?: string}){
+    return <i className={`bi-${props.icon} select-none`} 
+    style={{
+        "fontSize": (props.size==null ? "16px" : `${props.size}px`),
+        "color": props.color == null ? "rgb(var(--text))" : props.color
+    }}></i>
+}

src/frontend/components/sidebar/Sidebar.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useReducer, useRef, useState } from "react";
+import SidebarIcons from "./SidebarIcons";
+
+interface SidebarState{
+    paneVisible: boolean,
+    view: string
+}
+
+/**
+     * 
+     * @param state 
+     * @param action New view name
+     * @returns 
+     */
+function reducer(state:SidebarState, action:string){
+    const newstate = {...state};
+    if(action === state.view) newstate.paneVisible=!state.paneVisible;
+    else newstate.paneVisible=true
+    newstate.view=action;
+    return newstate;
+}
+
+export function Sidebar(){
+    const [state, dispatch] = useReducer(reducer, {paneVisible: false, view: "notes"})
+
+    const sidebarRef = useRef<HTMLDivElement>(null);
+    useEffect(()=>{
+        sidebarRef.current?.style.setProperty("width",state.paneVisible ? "320px" : "64px")
+    },[state.paneVisible])
+    return  <div ref={sidebarRef} className="flex duration-100 transition-all flex-row bg-bg2 gap-2 rounded-2xl">
+            <SidebarIcons dispatch={dispatch} view={state.view} state={state}></SidebarIcons>
+        </div>
+
+}

src/frontend/components/sidebar/SidebarButton.tsx

@@ -0,0 +1,21 @@
+import { CSSProperties } from "react"
+import Icon from "../Icon"
+
+const ACTIVE_STYLE:CSSProperties = {
+    "background": "rgb(var(--primary))"
+}
+
+export function SidebarButton(props:SidebarButtonProps){
+    return <div style={props.active ? ACTIVE_STYLE : {}} 
+    className={`w-12 h-12 flex justify-center items-center rounded-lg select-none
+    ${props.active ? "hover:brightness-125 active:brightness-150" : "hover:bg-widget-hover active:bg-widget-active" }
+    transition-all duration-100`} onClick={props.onClick}>
+        <Icon icon={props.icon} size={24}></Icon>
+    </div>
+}
+
+export interface SidebarButtonProps{
+    icon: string,
+    onClick: ()=>void,
+    active?: boolean
+}

src/frontend/components/sidebar/SidebarIcons.tsx

@@ -0,0 +1,15 @@
+import { SidebarButton } from "./SidebarButton"
+
+export default function SidebarIcons(props: {dispatch: React.Dispatch<any>, view: string, state:any}){
+    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>
+    </div>
+}