feat: update sidebar - task tab

packages/web/src/common/styles/theme.ts

@@ -41,7 +41,7 @@ export const theme: DefaultTheme = {
     border: {
       primary: c.gray800,
       primaryDark: c.gray900,
-      secondary: c.gray700,
+      secondary: c.gray100,
     },
     fg: {
       primary: c.gray100,

packages/web/src/components/Icons/Calendar.tsx

@@ -1,29 +1,8 @@
-import React from "react";
 import styled from "styled-components";
 import { CalendarDots } from "@phosphor-icons/react";
 
-import { TooltipWrapper } from "../Tooltip/TooltipWrapper";
-import { IconProps } from "./icon.types";
+import { iconStyles } from "./styled";
 
-const StyledCalendarIcon = styled(CalendarDots)`
-  color: ${({ theme }) => theme.color.text.lighter};
-  transition: filter 0.2s ease;
-
-  &:hover {
-    filter: brightness(130%);
-  }
+export const CalendarIcon = styled(CalendarDots)`
+  ${iconStyles}
 `;
-
-export const CalendarIcon: React.FC<IconProps> = (props) => {
-  return (
-    <TooltipWrapper
-      description="Open month widget"
-      shortcut="SHIFT + 2"
-      onClick={() => {
-        console.log("Open month widget");
-      }}
-    >
-      <StyledCalendarIcon {...props} />
-    </TooltipWrapper>
-  );
-};

packages/web/src/components/Icons/Command.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Command } from "@phosphor-icons/react";
+
+import { iconStyles } from "./styled";
+
+export const CommandIcon = styled(Command)`
+  ${iconStyles}
+`;

packages/web/src/components/Icons/Sidebar.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Sidebar } from "@phosphor-icons/react";
+
+import { iconStyles } from "./styled";
+
+export const SidebarIcon = styled(Sidebar)`
+  ${iconStyles}
+`;

packages/web/src/components/Icons/Todo.tsx

@@ -1,29 +1,8 @@
-import React from "react";
 import styled from "styled-components";
 import { CheckCircle } from "@phosphor-icons/react";
 
-import { IconProps } from "./icon.types";
-import { TooltipWrapper } from "../Tooltip/TooltipWrapper";
+import { iconStyles } from "./styled";
 
-const StyledCheckCircleIcon = styled(CheckCircle)`
-  color: ${({ theme }) => theme.color.text.lighter};
-  transition: filter 0.2s ease;
-
-  &:hover {
-    filter: brightness(130%);
-  }
+export const TodoIcon = styled(CheckCircle)`
+  ${iconStyles}
 `;
-
-export const TodoIcon: React.FC<IconProps> = (props) => {
-  return (
-    <TooltipWrapper
-      description="Open tasks"
-      shortcut="SHIFT + 1"
-      onClick={() => {
-        console.log("Open tasks");
-      }}
-    >
-      <StyledCheckCircleIcon {...props} />
-    </TooltipWrapper>
-  );
-};

packages/web/src/components/Icons/styled.ts

@@ -0,0 +1,16 @@
+import { IconProps } from "@phosphor-icons/react";
+import { css } from "styled-components";
+
+export interface CompassIconProps extends IconProps {
+  isFocused: boolean;
+}
+
+export const iconStyles = css<CompassIconProps>`
+  color: ${({ theme, isFocused }) =>
+    isFocused ? theme.color.text.light : theme.color.text.lightInactive};
+  transition: filter 0.2s ease;
+
+  &:hover {
+    filter: brightness(130%);
+  }
+`;

packages/web/src/ducks/events/selectors/view.selectors.ts

@@ -3,4 +3,4 @@ import { RootState } from "@web/store";
 export const selectDatesInView = (state: RootState) => state.view.dates;
 export const selectIsSidebarOpen = (state: RootState) =>
   state.view.sidebar.isOpen;
-export const selectSidebar = (state: RootState) => state.view.sidebar;
+export const selectSidebarTab = (state: RootState) => state.view.sidebar.tab;

packages/web/src/views/Calendar/Calendar.tsx

@@ -15,7 +15,7 @@ import { useGridLayout } from "./hooks/grid/useGridLayout";
 import { useDateCalcs } from "./hooks/grid/useDateCalcs";
 import { useShortcuts } from "./hooks/shortcuts/useShortcuts";
 import { useRefresh } from "./hooks/useRefresh";
-import { LeftSidebar } from "./components/LeftSidebar";
+import { Sidebar } from "./components/Sidebar";
 import { Draft } from "./components/Event/Draft";
 import { Dedication } from "./components/Dedication";
 import { CmdPalette } from "../CmdPalette";
@@ -65,12 +65,13 @@ export const CalendarView = () => {
         weekProps={weekProps}
       />
 
-      <LeftSidebar
-        dateCalcs={dateCalcs}
-        measurements={measurements}
-        weekProps={weekProps}
-      />
-
+      {isSidebarOpen && (
+        <Sidebar
+          dateCalcs={dateCalcs}
+          measurements={measurements}
+          weekProps={weekProps}
+        />
+      )}
       <StyledCalendar direction={FlexDirections.COLUMN} id={ID_MAIN}>
         <Header
           rootProps={rootProps}

packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx

@@ -5,7 +5,7 @@ import { getWidthBuffer } from "@web/common/utils/grid.util";
 import { Flex } from "@web/components/Flex";
 import { AlignItems, FlexWrap } from "@web/components/Flex/styled";
 import { Text } from "@web/components/Text";
-import { SOMEDAY_EVENT_HEIGHT } from "@web/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled";
+import { SOMEDAY_EVENT_HEIGHT } from "@web/views/Calendar/components/Sidebar/SomedaySection/SomedayEvents/styled";
 import { EVENT_ALLDAY_HEIGHT } from "@web/views/Calendar/layout.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";

packages/web/src/views/Calendar/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { Dayjs } from "dayjs";
-import { useAppDispatch } from "@web/store/store.hooks";
+import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
 import { AlignItems } from "@web/components/Flex/styled";
 import { SpaceCharacter } from "@web/components/SpaceCharacter";
 import { Text } from "@web/components/Text";
@@ -11,6 +11,9 @@ import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { Util_Scroll } from "@web/views/Calendar/hooks/grid/useScroll";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 import { isEventFormOpen } from "@web/common/utils";
+import { SidebarIcon } from "@web/components/Icons/Sidebar";
+import { selectIsSidebarOpen } from "@web/ducks/events/selectors/view.selectors";
+import { viewSlice } from "@web/ducks/events/slices/view.slice";
 
 import {
   StyledHeaderRow,
@@ -40,6 +43,7 @@ export const Header: FC<Props> = ({
   const { scrollToNow } = scrollUtil;
 
   const { startOfView } = weekProps.component;
+  const isSidebarOpen = useAppSelector(selectIsSidebarOpen);
 
   const onSectionClick = () => {
     if (isEventFormOpen()) {
@@ -61,13 +65,20 @@ export const Header: FC<Props> = ({
         alignItems={AlignItems.BASELINE}
         onClick={onSectionClick}
       >
+        <TooltipWrapper
+          description={isSidebarOpen ? "Close sidebar" : "Open sidebar"}
+          onClick={() => dispatch(viewSlice.actions.toggleSidebar())}
+          shortcut="["
+        >
+          <SidebarIcon size={25} isFocused={isSidebarOpen} />
+        </TooltipWrapper>
         <StyledLeftGroup>
           <StyledHeaderLabel aria-level={1} role="heading">
             <Text size="4xl">{startOfView.format("MMMM")}</Text>
 
             <SpaceCharacter />
 
-            <Text size="xxxl">{startOfView.format("YY")}</Text>
+            <Text size="xxxl">{startOfView.format("YYYY")}</Text>
           </StyledHeaderLabel>
         </StyledLeftGroup>