toggle-corp · frozenhelium · Nov 6, 2024 · Oct 24, 2024 · Oct 29, 2024
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
@@ -6,6 +6,7 @@ import {
 } from 'react';
 import {
     RiArrowLeftSLine,
+    RiArrowRightSLine,
     RiListUnordered,
     RiMenuLine,
 } from 'react-icons/ri';
@@ -66,7 +67,7 @@ function Page(props: Props) {
 
     const setFieldValue = useSetFieldValue(setStoredConfig);
 
-    const setSidebarShown = useCallback(
+    const handleStartSidebarToggle = useCallback(
         (newValue: boolean) => setFieldValue(newValue, 'startSidebarShown'),
         [setFieldValue],
     );
@@ -130,7 +131,7 @@ function Page(props: Props) {
                 <Portal container={startActionsRef}>
                     <Button
                         name={!startSidebarShown}
-                        onClick={setSidebarShown}
+                        onClick={handleStartSidebarToggle}
                         className={styles.toggleCollapsedButton}
                         variant="transparent"
                         title="Toggle left pane"
@@ -145,10 +146,11 @@ function Page(props: Props) {
                     {startSidebarShown && (
                         <Button
                             name={false}
-                            onClick={setSidebarShown}
+                            onClick={handleStartSidebarToggle}
                             className={styles.closeLeftPaneButton}
-                            variant="transparent"
+                            variant="quaternary"
                             title="Close left pane"
+                            spacing="sm"
                         >
                             <RiArrowLeftSLine />
                         </Button>
@@ -175,6 +177,18 @@ function Page(props: Props) {
             {endAsideContent && screen === 'desktop' && (
                 <aside className={_cs(styles.endAside, endAsideContainerClassName)}>
                     {endAsideContent}
+                    {endSidebarShown && (
+                        <Button
+                            name={false}
+                            onClick={handleEndSidebarToggle}
+                            className={styles.closeRightPaneButton}
+                            variant="quaternary"
+                            title="Close right pane"
+                            spacing="sm"
+                        >
+                            <RiArrowRightSLine />
+                        </Button>
+                    )}
                 </aside>
             )}
         </div>

diff --git a/src/components/Page/styles.module.css b/src/components/Page/styles.module.css
@@ -23,35 +23,53 @@
     }
 
     .start-aside {
+        display: flex;
         position: absolute;
         top: 0;
         left: 0;
+        flex-direction: column;
+        justify-content: space-between;
         border-right: var(--width-separator-sm) solid var(--color-separator);
         width: var(--width-start-sidebar);
         height: 100%;
 
         .close-left-pane-button {
-            position: absolute;
-            right: var(--spacing-sm);
-            bottom: var(--spacing-sm);
-            font-size: var(--font-size-2xl);
+            position: sticky;
+            bottom: var(--spacing-md);
+            align-self: flex-end;
+            transform: translate(50%);
+            font-size: var(--font-size-xl);
         }
 
         @media screen and (max-width: 900px) {
             z-index: 1;
             background-color: var(--color-background);
             width: 100%;
+
+            .close-left-pane-button {
+            transform: translate(calc(-1 * var(--spacing-md)));
+            }
         }
     }
 
     .end-aside {
+        display: flex;
         position: absolute;
         top: 0;
         right: 0;
+        flex-direction: column;
         flex-shrink: 0;
+        justify-content: space-between;
         border-left: var(--width-separator-sm) solid var(--color-separator);
         width: var(--width-end-sidebar);
         height: 100%;
+
+        .close-right-pane-button {
+            position: sticky;
+            bottom: var(--spacing-md);
+            transform: translate(-50%);
+            font-size: var(--font-size-xl);
+        }
     }
 
     &.end-sidebar-visible {

diff --git a/src/components/RawTextArea/index.tsx b/src/components/RawTextArea/index.tsx
@@ -77,7 +77,6 @@ function RawTextArea<N>(props: Props<N>) {
             className={_cs(
                 styles.growWrap,
                 compact && styles.compact,
-                className,
             )}
         >
             <textarea
@@ -87,6 +86,7 @@ function RawTextArea<N>(props: Props<N>) {
                 className={_cs(
                     styles.rawInput,
                     !value && styles.empty,
+                    className,
                 )}
                 // FIXME: do we even need to pass name?
                 name={isDefined(name) ? String(name) : undefined}

diff --git a/src/components/SelectInputContainer/index.tsx b/src/components/SelectInputContainer/index.tsx
@@ -316,7 +316,6 @@ function SelectInputContainer<
                         style={(searchText || !valueDisplay) ? undefined : {
                             backgroundColor: valueBgColor ?? colorscheme[0][1],
                             color: valueFgColor ?? colorscheme[0][0],
-                            border: 'var(--width-separator-sm) solid var(--color-foreground)',
                         }}
                         id={inputId}
                         name={name}

diff --git a/src/components/SelectInputContainer/styles.module.css b/src/components/SelectInputContainer/styles.module.css
@@ -1,5 +1,6 @@
 .select-input-container {
     .input {
+        border: var(--width-separator-sm) solid var(--color-foreground);
         border-radius: var(--border-radius-md);
         padding: 0 var(--spacing-sm);
     }

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -11,6 +11,7 @@ export const defaultConfigValue: ConfigStorage = {
     compactTextArea: false,
     checkboxForStatus: false,
     enableCollapsibleGroups: false,
+    enableStrikethrough: false,
     startSidebarShown: window.innerWidth >= 900,
     endSidebarShown: false,
     dailyJournalGrouping: {

diff --git a/src/utils/temporal.ts b/src/utils/temporal.ts
@@ -53,6 +53,7 @@ function getTemporalDiff(min: DateLike, max: DateLike) {
     };
 }
 
+// FIXME: We need to revisit this logic
 export function toRelativeDate(dateLike: DateLike): RelativeDate | undefined {
     const today = new Date();
     const date = new Date(dateLike);
@@ -111,9 +112,9 @@ export function toRelativeDate(dateLike: DateLike): RelativeDate | undefined {
     }
 
     return {
-        direction: 'present',
+        direction,
         resolution: 'day',
-        value: 0,
+        value: temporalDiff.day,
     };
 }
 

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -43,6 +43,7 @@ export type ConfigStorage = {
     compactTextArea: boolean,
     indent: boolean,
     enableCollapsibleGroups: boolean,
+    enableStrikethrough: boolean,
 
     dailyJournalAttributeOrder: DailyJournalAttribute[];
     dailyJournalGrouping: DailyJournalGrouping;

diff --git a/src/views/DailyJournal/AvailabilityDialog/index.tsx b/src/views/DailyJournal/AvailabilityDialog/index.tsx
@@ -78,9 +78,7 @@ const UPDATE_JOURNAL = gql`
                     id
                     date
                     leaveType
-                    leaveTypeDisplay
                     wfhType
-                    wfhTypeDisplay
                 }
             }
         }

diff --git a/src/views/DailyJournal/DayView/WorkItemRow/index.tsx b/src/views/DailyJournal/DayView/WorkItemRow/index.tsx
@@ -216,6 +216,9 @@ function WorkItemRow(props: Props) {
     const descriptionInput = (
         <TextArea
             className={styles.description}
+            inputClassName={_cs(
+                config.enableStrikethrough && workItem.status === 'DONE' && styles.strike,
+            )}
             inputElementRef={inputRef}
             name="description"
             title="Description"

diff --git a/src/views/DailyJournal/DayView/WorkItemRow/styles.module.css b/src/views/DailyJournal/DayView/WorkItemRow/styles.module.css
@@ -9,6 +9,12 @@
         grid-template-columns: 1rem 2fr 5fr 10rem 4rem 4rem;
     }
 
+    .description {
+        .strike {
+            text-decoration: line-through;
+        }
+    }
+
     .actions {
         display: flex;
         align-items: baseline;
@@ -17,7 +23,6 @@
         gap: var(--spacing-xs);
     }
 
-
     /* TODO: sync this color from colorscheme */
     .status-checkbox {
         &.doing {

diff --git a/src/views/DailyJournal/EndSidebar/index.tsx b/src/views/DailyJournal/EndSidebar/index.tsx
@@ -1,12 +1,11 @@
 import {
+    useCallback,
     useContext,
-    useEffect,
     useMemo,
     useState,
 } from 'react';
 import {
     _cs,
-    isDefined,
     listToGroupList,
     mapToList,
 } from '@togglecorp/fujs';
@@ -35,14 +34,15 @@ function EndSidebar(props: Props) {
 
     const [activeProject, setActiveProject] = useState<string>();
     const [searchText] = useState<string | undefined>();
-
     const { enums } = useContext(EnumsContext);
-    useEffect(() => {
-        const projectId = enums?.private.allActiveTasks?.[0].contract.project.id;
-        if (isDefined(projectId)) {
-            setActiveProject(projectId);
-        }
-    }, [enums?.private.allActiveTasks]);
+
+    const handleProjectToggle = useCallback(
+        (value: string) => {
+            setActiveProject((prevValue) => (prevValue === value ? undefined : value));
+        },
+        [],
+    );
+
     const filteredTaskList = useMemo(
         () => fuzzySearch(
             enums?.private.allActiveTasks ?? [],
@@ -103,8 +103,8 @@ function EndSidebar(props: Props) {
                                 activeProject === project.id && styles.active,
                             )}
                             name={project.id}
-                            onClick={setActiveProject}
-                            title="Expand project tasks"
+                            onClick={handleProjectToggle}
+                            title="Expand/Collapse project tasks"
                         >
                             <DisplayPicture
                                 imageUrl={project.logo?.url}
@@ -123,7 +123,7 @@ function EndSidebar(props: Props) {
                                 className={styles.taskList}
                             >
                                 {projectWorkItems.map((task) => {
-                                    const { contract } = task;
+                                    // const { contract } = task;
                                     const count = taskCountMapping?.[task.id] ?? 0;
 
                                     return (
@@ -138,9 +138,11 @@ function EndSidebar(props: Props) {
                                             <span className={styles.taskName}>
                                                 {task.name}
                                             </span>
+                                            {/*
                                             <span className={styles.contractName}>
                                                 {contract.name}
                                             </span>
+                                            */}
                                             {count > 0 && (
                                                 <span className={styles.usageCount}>
                                                     {count}

diff --git a/src/views/DailyJournal/EndSidebar/styles.module.css b/src/views/DailyJournal/EndSidebar/styles.module.css
@@ -41,6 +41,7 @@
             .task-list {
                 display: flex;
                 flex-direction: column;
+                padding-left: var(--spacing-md);
 
                 .task {
                     display: flex;
@@ -57,6 +58,7 @@
                         white-space: nowrap;
                     }
 
+                    /*
                     .contract-name {
                         max-width: 6rem;
                         overflow: hidden;
@@ -65,21 +67,13 @@
                         color: var(--color-text-light);
                         font-size: var(--font-size-xs);
                     }
+                    */
 
                     .usage-count {
-                        display: flex;
-                        position: absolute;
-                        align-items: center;
-                        justify-content: center;
-                        transform: translateX(-100%) translateY(-50%);
-                        border-radius: 1rem;
-                        background-color: var(--color-secondary);
-                        padding: var(--spacing-3xs) var(--spacing-2xs);
-                        min-width: 1em;
-                        height: 1.5em;
-                        line-height: 1;
-                        color: var(--color-text-on-dark);
-                        font-size: var(--font-size-2xs);
+                        flex-shrink: 0;
+                        border-radius: var(--border-radius-lg);
+                        background-color: var(--color-quaternary);
+                        padding: 0 var(--spacing-sm);
                     }
 
                     &:hover {
-Original file line number
+Diff line change
@@ Expand Up / @@ -78,9 +78,7 @@ const UPDATE_JOURNAL = gql` @@
                         id
                         date
                         leaveType
-                        leaveTypeDisplay
                         wfhType
-                        wfhTypeDisplay
                     }
                 }
             }
@@ Expand Down @@