Merge pull request #10 from toggle-corp/feature/journal-improvements

Add improvements to Journal View
toggle-corp · Oct 23, 2024 · 94c3556 · 94c3556
2 parents 24b5bb1 + 3f0f481
commit 94c3556
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 69 deletions.
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -159,10 +159,40 @@ function App() {
         },
     });
 
+    const handleStorageStateUpdate: typeof setStorageState = useCallback(
+        (val) => {
+            setStorageState((prevValue) => {
+                const newValue = typeof val === 'function'
+                    ? val(prevValue)
+                    : val;
+
+                if (
+                    prevValue['timur-config'].value?.dailyJournalGrouping !== newValue['timur-config'].value?.dailyJournalGrouping
+                    || prevValue['timur-config'].value?.dailyJournalAttributeOrder !== newValue['timur-config'].value?.dailyJournalAttributeOrder
+                ) {
+                    const overriddenValue: typeof newValue = {
+                        ...newValue,
+                        'timur-config': {
+                            ...newValue['timur-config'],
+                            value: {
+                                ...(newValue['timur-config'].value ?? defaultConfigValue),
+                                collapsedGroups: [],
+                            },
+                        },
+                    };
+                    return overriddenValue;
+                }
+
+                return newValue;
+            });
+        },
+        [],
+    );
+
     const storageContextValue = useMemo<LocalStorageContextProps>(() => ({
         storageState,
-        setStorageState,
-    }), [storageState]);
+        setStorageState: handleStorageStateUpdate,
+    }), [storageState, handleStorageStateUpdate]);
 
     // Device Size
 

diff --git a/src/components/SelectInputContainer/index.tsx b/src/components/SelectInputContainer/index.tsx
@@ -316,6 +316,7 @@ 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/index.css b/src/index.css
@@ -23,15 +23,15 @@
 
     --base-font-size: 1rem;
 
-    --font-size-2xs: calc(var(--base-font-size) * 0.625);
-    --font-size-xs: calc(var(--base-font-size) * 0.75);
-    --font-size-sm: calc(var(--base-font-size) * 0.875);
-    --font-size-md: var(--base-font-size);
-    --font-size-lg: calc(var(--base-font-size) * 1.25);
-    --font-size-xl: calc(var(--base-font-size) * 1.44);
-    --font-size-2xl: calc(var(--base-font-size) * 1.8);
-    --font-size-3xl: calc(var(--base-font-size) * 2.5);
-    --font-size-4xl: calc(var(--base-font-size) * 3.6);
+    --font-size-2xs: calc(var(--base-font-size) * 0.625);   /* -1 */
+    --font-size-xs: calc(var(--base-font-size) * 0.75);     /* -0.5 */
+    --font-size-sm: calc(var(--base-font-size) * 0.875);    /* -0.25 */
+    --font-size-md: var(--base-font-size);                  /* 0 */
+    --font-size-lg: calc(var(--base-font-size) * 1.25);     /* 0.5 */
+    --font-size-xl: calc(var(--base-font-size) * 1.44);     /* 1 */
+    --font-size-2xl: calc(var(--base-font-size) * 1.8);     /* 1.5 */
+    --font-size-3xl: calc(var(--base-font-size) * 2.5);     /* 2 */
+    --font-size-4xl: calc(var(--base-font-size) * 3.6);     /* 2.5 */
 
     @media screen and (max-width: 40rem) {
         --base-font-size: 0.875rem;
@@ -165,23 +165,23 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: var(--font-size-2xl);
+    font-size: var(--font-size-3xl);
 }
 
 h2 {
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-2xl);
 }
 
 h3 {
-    font-size: var(--font-size-lg);
+    font-size: var(--font-size-xl);
 }
 
 h4 {
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-lg);
 }
 
 h5 {
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-md);
 }
 
 p {

diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -255,6 +255,7 @@ type GroupedItem<LIST_ITEM, ATTRIBUTE> = {
     attribute: ATTRIBUTE;
     level: number;
 } | {
+    itemKey: string;
     type: 'list-item';
     value: LIST_ITEM;
     level: number;
@@ -273,18 +274,21 @@ export function groupListByAttributes<LIST_ITEM, ATTRIBUTE>(
 
     const groupedItems = list.flatMap((listItem, listIndex) => {
         if (listIndex === 0) {
-            const groupKey = getGroupKey(listItem, attributes);
-            const headings = attributes.map((attribute, i) => ({
-                type: 'heading' as const,
-                value: listItem,
-                attribute,
-                level: i,
-                groupKey,
-            }));
+            const headings = attributes.map((attribute, i) => {
+                const groupKey = getGroupKey(listItem, attributes.slice(0, i + 1));
+                return {
+                    type: 'heading' as const,
+                    value: listItem,
+                    attribute,
+                    level: i,
+                    groupKey,
+                };
+            });
 
             return [
                 ...headings,
                 {
+                    itemKey: getGroupKey(listItem, attributes),
                     type: 'list-item' as const,
                     value: listItem,
                     level: attributes.length,
@@ -306,19 +310,20 @@ export function groupListByAttributes<LIST_ITEM, ATTRIBUTE>(
         if (attributeMismatchIndex === -1) {
             return [
                 {
+                    itemKey: getGroupKey(listItem, attributes),
                     type: 'list-item' as const,
                     value: listItem,
                     level: attributes.length,
                 },
             ];
         }
 
-        const groupKey = getGroupKey(listItem, attributes);
         const headings = attributes.map((attribute, i) => {
             if (i < attributeMismatchIndex) {
                 return undefined;
             }
 
+            const groupKey = getGroupKey(listItem, attributes.slice(0, i + 1));
             return {
                 type: 'heading' as const,
                 value: listItem,
@@ -331,6 +336,7 @@ export function groupListByAttributes<LIST_ITEM, ATTRIBUTE>(
         return [
             ...headings,
             {
+                itemKey: getGroupKey(listItem, attributes),
                 type: 'list-item' as const,
                 value: listItem,
                 level: attributes.length,

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -10,6 +10,7 @@ export const defaultConfigValue: ConfigStorage = {
     indent: true,
     compactTextArea: false,
     checkboxForStatus: false,
+    enableCollapsibleGroups: false,
     startSidebarShown: window.innerWidth >= 900,
     endSidebarShown: false,
     dailyJournalGrouping: {
@@ -22,6 +23,7 @@ export const defaultConfigValue: ConfigStorage = {
         { key: 'task', sortDirection: 1 },
         { key: 'status', sortDirection: 1 },
     ],
+    collapsedGroups: [],
 };
 
 export const colorscheme: [string, string][] = [

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -42,10 +42,12 @@ export type ConfigStorage = {
     checkboxForStatus: boolean,
     compactTextArea: boolean,
     indent: boolean,
+    enableCollapsibleGroups: boolean,
 
     dailyJournalAttributeOrder: DailyJournalAttribute[];
     dailyJournalGrouping: DailyJournalGrouping;
 
+    collapsedGroups: string[],
     startSidebarShown: boolean,
     endSidebarShown: boolean,
 }

diff --git a/src/views/DailyJournal/AddWorkItemDialog/index.tsx b/src/views/DailyJournal/AddWorkItemDialog/index.tsx
@@ -88,7 +88,7 @@ function AddWorkItemDialog(props: Props) {
         <Dialog
             open={showAddWorkItemDialog}
             onClose={handleModalClose}
-            heading="Add new entry"
+            heading="Add entry"
             contentClassName={styles.modalContent}
             className={styles.addWorkItemDialog}
             focusElementRef={titleInputRef}