CHECKPOINT: feat: update sidebar

SwitchbackTech · Nov 18, 2024 · 7eb6743 · 7eb6743
1 parent 2083966
commit 7eb6743
Show file tree

Hide file tree

Showing 26 changed files with 288 additions and 240 deletions.
diff --git a/packages/web/src/common/styles/theme.ts b/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,

diff --git a/packages/web/src/common/utils/grid.util.ts b/packages/web/src/common/utils/grid.util.ts
@@ -16,7 +16,6 @@ import { Category } from "@web/ducks/events/event.types";
 import {
   DIVIDER_GRID,
   GRID_X_PADDING_TOTAL,
-  SIDEBAR_CLOSED_WIDTH,
   SIDEBAR_OPEN_WIDTH,
 } from "@web/views/Calendar/layout.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
@@ -470,7 +469,7 @@ export const getWidthInPixels = (
 };
 
 export const getX = (e: MouseEvent | number, isSidebarOpen: boolean) => {
-  const xOffset = isSidebarOpen ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH;
+  const xOffset = isSidebarOpen ? SIDEBAR_OPEN_WIDTH : 0;
 
   const origX = typeof e === "number" ? e : e.clientX;
   const x = origX - xOffset;

diff --git a/packages/web/src/ducks/events/selectors/view.selectors.ts b/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;
diff --git a/packages/web/src/views/Calendar/Calendar.tsx b/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/LeftSidebar";
 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}

diff --git a/packages/web/src/views/Calendar/components/Header/Header.tsx b/packages/web/src/views/Calendar/components/Header/Header.tsx
@@ -11,6 +11,7 @@ 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 { Sidebar } from "@phosphor-icons/react";
 
 import {
   StyledHeaderRow,
@@ -61,13 +62,14 @@ export const Header: FC<Props> = ({
         alignItems={AlignItems.BASELINE}
         onClick={onSectionClick}
       >
+        <Sidebar size={25} />
         <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>
 

diff --git a/packages/web/src/views/Calendar/components/Header/styled.ts b/packages/web/src/views/Calendar/components/Header/styled.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import {
   EVENT_WIDTH_MINIMUM,
-  PAGE_X_PADDING,
+  PAGE_MARGIN_X,
 } from "@web/views/Calendar/layout.constants";
 import { Flex } from "@web/components/Flex";
 import { Text } from "@web/components/Text";
@@ -42,7 +42,6 @@ export const StyledHeaderRow = styled(Flex)`
   color: ${({ theme }) => theme.color.text.light};
   font-size: 40px;
   justify-content: ${JustifyContent.SPACE_BETWEEN};
-  margin-left: ${GRID_MARGIN_LEFT}px;
   height: ${HEADER_HEIGHT}px;
   width: 100%;
 `;
@@ -57,9 +56,7 @@ export const StyledNavigationGroup = styled(Flex)`
   margin-right: 20px;
 `;
 
-export const StyledRightGroup = styled(Flex)`
-  padding-right: ${PAGE_X_PADDING * 2}px;
-`;
+export const StyledRightGroup = styled(Flex)``;
 
 export const StyledWeekDaysFlex = styled(Flex)`
   width: calc(100% - ${GRID_MARGIN_LEFT}px);

diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/Sidebar.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/Sidebar.tsx
@@ -0,0 +1,90 @@
+import React, { FC } from "react";
+import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
+import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
+import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
+import { Divider } from "@web/components/Divider/Divider";
+import { useAppSelector } from "@web/store/store.hooks";
+import { selectSidebarTab } from "@web/ducks/events/selectors/view.selectors";
+import { Text } from "@web/components/Text";
+import { theme } from "@web/common/styles/theme";
+
+import {
+  SidebarContainer,
+  CalendarLabel,
+  CalendarListContainer,
+  SidebarTabContainer,
+} from "./styled";
+import { SomedaySection } from "./SomedaySection";
+import { SidebarIconRow } from "./SidebarIconRow";
+import { ToggleableMonthWidget } from "./ToggleableMonthWidget/ToggleableMonthWidget";
+import { useSidebar } from "../../hooks/draft/sidebar/useSidebar";
+
+interface Props {
+  dateCalcs: DateCalcs;
+  measurements: Measurements_Grid;
+  weekProps: WeekProps;
+}
+
+export const Sidebar: FC<Props & React.HTMLAttributes<HTMLDivElement>> = ({
+  dateCalcs,
+  measurements,
+  weekProps,
+}: Props) => {
+  const weekStart = weekProps.component.startOfView;
+  const weekEnd = weekProps.component.endOfView;
+
+  const tab = useAppSelector(selectSidebarTab);
+  const sidebarProps = useSidebar(measurements, dateCalcs);
+
+  return (
+    <SidebarContainer
+      id="sidebar"
+      role="complementary"
+      onClick={sidebarProps.util.discardIfDrafting}
+    >
+      <SidebarTabContainer>
+        {tab === "tasks" && (
+          <SomedaySection
+            dateCalcs={dateCalcs}
+            measurements={measurements}
+            sidebarProps={sidebarProps}
+            viewStart={weekStart}
+            viewEnd={weekEnd}
+          />
+        )}
+        {tab === "monthWidget" && (
+          <>
+            <ToggleableMonthWidget
+              monthsShown={1}
+              setStartOfView={weekProps.state.setStartOfView}
+              isCurrentWeek={weekProps.component.isCurrentWeek}
+              weekStart={weekProps.component.startOfView}
+            />
+            <Divider
+              role="separator"
+              title="right sidebar divider"
+              withAnimation={false}
+            />
+            <CalendarListContainer>
+              <Text color={theme.color.text.light} size="xl">
+                Calendars
+              </Text>
+              <CalendarLabel>
+                <input
+                  checked={true}
+                  disabled={true}
+                  type="checkbox"
+                  style={{ marginRight: "6px" }}
+                />
+                <Text color={theme.color.text.light} size="m">
+                  primary
+                </Text>
+              </CalendarLabel>
+            </CalendarListContainer>
+          </>
+        )}
+      </SidebarTabContainer>
+      <SidebarIconRow />
+    </SidebarContainer>
+  );
+};
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx
@@ -3,16 +3,16 @@ import { MetaKeyIcon } from "@web/components/Icons/MetaKey";
 import { CalendarIcon } from "@web/components/Icons/Calendar";
 import { TodoIcon } from "@web/components/Icons/Todo";
 
-import { StyledIconRow, StyledLeftIconGroup } from "../styled";
+import { IconRow, LeftIconGroup } from "../styled";
 
 export const SidebarIconRow = () => {
   return (
-    <StyledIconRow>
-      <StyledLeftIconGroup>
+    <IconRow>
+      <LeftIconGroup>
         <MetaKeyIcon size={25} />
         <TodoIcon size={25} />
         <CalendarIcon size={25} />
-      </StyledLeftIconGroup>
-    </StyledIconRow>
+      </LeftIconGroup>
+    </IconRow>
   );
 };
diff --git a/...eb/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx b/...eb/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { Categories_Event } from "@core/types/event.types";
-import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar";
+import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { Text } from "@web/components/Text";
@@ -9,13 +9,13 @@ import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
 import { getMonthListLabel } from "@web/common/utils/event.util";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 
-import { StyledAddEventButton, StyledSidebarHeader } from "../styled";
+import { AddEventButton, SidebarHeader, SidebarSection } from "../styled";
 import { SomedayEvents } from "../SomedayEvents";
 
 interface Props {
   dateCalcs: DateCalcs;
   measurements: Measurements_Grid;
-  somedayProps: SomedayEventsProps;
+  somedayProps: SidebarProps;
   viewStart: WeekProps["component"]["startOfView"];
 }
 
@@ -28,8 +28,8 @@ export const MonthSection: FC<Props> = ({
   const monthLabel = getMonthListLabel(viewStart);
 
   return (
-    <>
-      <StyledSidebarHeader
+    <SidebarSection>
+      <SidebarHeader
         alignItems={AlignItems.CENTER}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
@@ -40,24 +40,26 @@ export const MonthSection: FC<Props> = ({
           <TooltipWrapper
             description="Add to month"
             onClick={() =>
-              somedayProps.util.onSectionClick(Categories_Event.SOMEDAY_MONTH)
+              somedayProps.util.onPlaceholderClick(
+                Categories_Event.SOMEDAY_MONTH
+              )
             }
             shortcut="M"
           >
             <div role="button">
-              <StyledAddEventButton size="xl">+</StyledAddEventButton>
+              <AddEventButton size="xl">+</AddEventButton>
             </div>
           </TooltipWrapper>
         </div>
-      </StyledSidebarHeader>
+      </SidebarHeader>
 
       <SomedayEvents
         category={Categories_Event.SOMEDAY_MONTH}
         dateCalcs={dateCalcs}
         measurements={measurements}
-        somedayProps={somedayProps}
+        sidebarProps={somedayProps}
         viewStart={viewStart}
       />
-    </>
+    </SidebarSection>
   );
 };