From 9f8e4438a966289bbe0b2032f252ff24c8a6604f Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 5 Mar 2022 15:54:17 +0530
Subject: [PATCH 1/4] feat: add new utility class

---
 app/assets/stylesheets/_sn.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 4c2fc3caad3..1a9fab412b9 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -396,6 +396,10 @@
   min-width: 22.5rem;
 }
 
+.min-h-min {
+  min-height: min-content;
+}
+
 .min-h-1px {
   min-height: 1px;
 }

From 7743fbefe7bd79c72a2b7039314eb483a909b546 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 5 Mar 2022 15:54:33 +0530
Subject: [PATCH 2/4] fix: notes list options menu sizing

---
 .../components/NotesListOptionsMenu.tsx       | 291 +++++++++---------
 1 file changed, 144 insertions(+), 147 deletions(-)

diff --git a/app/assets/javascripts/components/NotesListOptionsMenu.tsx b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
index 2976ed27567..42c7254683e 100644
--- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
@@ -16,10 +16,6 @@ type Props = {
 
 export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
   ({ closeDisplayOptionsMenu, closeOnBlur, application, isOpen }) => {
-    const menuClassName =
-      'sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \
-border-1 border-solid border-main text-sm z-index-dropdown-menu \
-flex flex-col py-2 top-full bottom-0 left-2 absolute';
     const [sortBy, setSortBy] = useState(() =>
       application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
     );
@@ -117,154 +113,155 @@ flex flex-col py-2 top-full bottom-0 left-2 absolute';
       application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon);
     };
 
-    const menuRef = useRef<HTMLDivElement>(null);
-
     return (
-      <div ref={menuRef} className={menuClassName}>
-        <Menu
-          a11yLabel="Notes list options menu"
-          closeMenu={closeDisplayOptionsMenu}
-          isOpen={isOpen}
+      <Menu
+        className={
+          'sn-dropdown sn-dropdown--animated min-w-70 min-h-min max-h-120 overflow-y-auto \
+        border-1 border-solid border-main text-sm z-index-dropdown-menu \
+        flex flex-col py-2 top-full bottom-0 left-2 absolute'
+        }
+        a11yLabel="Notes list options menu"
+        closeMenu={closeDisplayOptionsMenu}
+        isOpen={isOpen}
+      >
+        <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
+          Sort by
+        </div>
+        <MenuItem
+          className="py-2"
+          type={MenuItemType.RadioButton}
+          onClick={toggleSortByDateModified}
+          checked={sortBy === CollectionSort.UpdatedAt}
+          onBlur={closeOnBlur}
         >
-          <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
-            Sort by
+          <div className="flex flex-grow items-center justify-between">
+            <span>Date modified</span>
+            {sortBy === CollectionSort.UpdatedAt ? (
+              sortReverse ? (
+                <Icon type="arrows-sort-up" className="color-neutral" />
+              ) : (
+                <Icon type="arrows-sort-down" className="color-neutral" />
+              )
+            ) : null}
           </div>
-          <MenuItem
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={toggleSortByDateModified}
-            checked={sortBy === CollectionSort.UpdatedAt}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-grow items-center justify-between">
-              <span>Date modified</span>
-              {sortBy === CollectionSort.UpdatedAt ? (
-                sortReverse ? (
-                  <Icon type="arrows-sort-up" className="color-neutral" />
-                ) : (
-                  <Icon type="arrows-sort-down" className="color-neutral" />
-                )
-              ) : null}
-            </div>
-          </MenuItem>
-          <MenuItem
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={toggleSortByCreationDate}
-            checked={sortBy === CollectionSort.CreatedAt}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-grow items-center justify-between">
-              <span>Creation date</span>
-              {sortBy === CollectionSort.CreatedAt ? (
-                sortReverse ? (
-                  <Icon type="arrows-sort-up" className="color-neutral" />
-                ) : (
-                  <Icon type="arrows-sort-down" className="color-neutral" />
-                )
-              ) : null}
-            </div>
-          </MenuItem>
-          <MenuItem
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={toggleSortByTitle}
-            checked={sortBy === CollectionSort.Title}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-grow items-center justify-between">
-              <span>Title</span>
-              {sortBy === CollectionSort.Title ? (
-                sortReverse ? (
-                  <Icon type="arrows-sort-up" className="color-neutral" />
-                ) : (
-                  <Icon type="arrows-sort-down" className="color-neutral" />
-                )
-              ) : null}
-            </div>
-          </MenuItem>
-          <MenuItemSeparator />
-          <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
-            View
+        </MenuItem>
+        <MenuItem
+          className="py-2"
+          type={MenuItemType.RadioButton}
+          onClick={toggleSortByCreationDate}
+          checked={sortBy === CollectionSort.CreatedAt}
+          onBlur={closeOnBlur}
+        >
+          <div className="flex flex-grow items-center justify-between">
+            <span>Creation date</span>
+            {sortBy === CollectionSort.CreatedAt ? (
+              sortReverse ? (
+                <Icon type="arrows-sort-up" className="color-neutral" />
+              ) : (
+                <Icon type="arrows-sort-down" className="color-neutral" />
+              )
+            ) : null}
           </div>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hidePreview}
-            onChange={toggleHidePreview}
-            onBlur={closeOnBlur}
-          >
-            <div className="flex flex-col max-w-3/4">Show note preview</div>
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideDate}
-            onChange={toggleHideDate}
-            onBlur={closeOnBlur}
-          >
-            Show date
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideTags}
-            onChange={toggleHideTags}
-            onBlur={closeOnBlur}
-          >
-            Show tags
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideEditorIcon}
-            onChange={toggleEditorIcon}
-            onBlur={closeOnBlur}
-          >
-            Show editor icon
-          </MenuItem>
-          <div className="h-1px my-2 bg-border"></div>
-          <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
-            Other
+        </MenuItem>
+        <MenuItem
+          className="py-2"
+          type={MenuItemType.RadioButton}
+          onClick={toggleSortByTitle}
+          checked={sortBy === CollectionSort.Title}
+          onBlur={closeOnBlur}
+        >
+          <div className="flex flex-grow items-center justify-between">
+            <span>Title</span>
+            {sortBy === CollectionSort.Title ? (
+              sortReverse ? (
+                <Icon type="arrows-sort-up" className="color-neutral" />
+              ) : (
+                <Icon type="arrows-sort-down" className="color-neutral" />
+              )
+            ) : null}
           </div>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hidePinned}
-            onChange={toggleHidePinned}
-            onBlur={closeOnBlur}
-          >
-            Show pinned notes
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={!hideProtected}
-            onChange={toggleHideProtected}
-            onBlur={closeOnBlur}
-          >
-            Show protected notes
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={showArchived}
-            onChange={toggleShowArchived}
-            onBlur={closeOnBlur}
-          >
-            Show archived notes
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.SwitchButton}
-            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-            checked={showTrashed}
-            onChange={toggleShowTrashed}
-            onBlur={closeOnBlur}
-          >
-            Show trashed notes
-          </MenuItem>
-        </Menu>
-      </div>
+        </MenuItem>
+        <MenuItemSeparator />
+        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
+          View
+        </div>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hidePreview}
+          onChange={toggleHidePreview}
+          onBlur={closeOnBlur}
+        >
+          <div className="flex flex-col max-w-3/4">Show note preview</div>
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideDate}
+          onChange={toggleHideDate}
+          onBlur={closeOnBlur}
+        >
+          Show date
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideTags}
+          onChange={toggleHideTags}
+          onBlur={closeOnBlur}
+        >
+          Show tags
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideEditorIcon}
+          onChange={toggleEditorIcon}
+          onBlur={closeOnBlur}
+        >
+          Show editor icon
+        </MenuItem>
+        <div className="h-1px my-2 bg-border"></div>
+        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
+          Other
+        </div>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hidePinned}
+          onChange={toggleHidePinned}
+          onBlur={closeOnBlur}
+        >
+          Show pinned notes
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={!hideProtected}
+          onChange={toggleHideProtected}
+          onBlur={closeOnBlur}
+        >
+          Show protected notes
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={showArchived}
+          onChange={toggleShowArchived}
+          onBlur={closeOnBlur}
+        >
+          Show archived notes
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.SwitchButton}
+          className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+          checked={showTrashed}
+          onChange={toggleShowTrashed}
+          onBlur={closeOnBlur}
+        >
+          Show trashed notes
+        </MenuItem>
+      </Menu>
     );
   }
 );

From 87b8866e07bda0c21dc0cb6ad36743aa515ff7be Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 5 Mar 2022 16:10:36 +0530
Subject: [PATCH 3/4] fix: remove unnecessary class

---
 app/assets/javascripts/components/NotesListOptionsMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/components/NotesListOptionsMenu.tsx b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
index 42c7254683e..943911140ae 100644
--- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
@@ -116,9 +116,9 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
     return (
       <Menu
         className={
-          'sn-dropdown sn-dropdown--animated min-w-70 min-h-min max-h-120 overflow-y-auto \
+          'sn-dropdown sn-dropdown--animated min-w-70 max-h-120 overflow-y-auto \
         border-1 border-solid border-main text-sm z-index-dropdown-menu \
-        flex flex-col py-2 top-full bottom-0 left-2 absolute'
+        flex flex-col py-2 top-full left-2 absolute'
         }
         a11yLabel="Notes list options menu"
         closeMenu={closeDisplayOptionsMenu}

From 8801ffa18cc35e1fb8be40be2755cc96399fd9ee Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 5 Mar 2022 16:13:22 +0530
Subject: [PATCH 4/4] feat: remove unnecessary class

---
 app/assets/stylesheets/_sn.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 1a9fab412b9..4c2fc3caad3 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -396,10 +396,6 @@
   min-width: 22.5rem;
 }
 
-.min-h-min {
-  min-height: min-content;
-}
-
 .min-h-1px {
   min-height: 1px;
 }