feat: nicer smart filters & folders theme (#795)

* fix: color add button and drop

* fix: color scrollbars

* fix: remove infinite scroll and fix scrollbars

* fix: plus icon center

* fix: navigation padding, structure simplif and naming

* fix: simplify scrollbars

* fix: scroll bar simplif + scheme in macos

* fix: magic variables to const

* refactor: extract panel ref state

* refactor: remove dead code, simple macos theme

app/assets/javascripts/components/Navigation.tsx

@@ -12,27 +12,35 @@ import { PANEL_NAME_NAVIGATION } from '@/views/constants';
 import { PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { useCallback, useMemo, useState } from 'preact/hooks';
 import { PremiumModalProvider } from './Premium';
 
 type Props = {
   application: WebApplication;
 };
 
+const NAVIGATION_SELECTOR = 'navigation';
+
+const useNavigationPanelRef = (): [HTMLDivElement | null, () => void] => {
+  const [panelRef, setPanelRefInternal] = useState<HTMLDivElement | null>(null);
+
+  const setPanelRefPublic = useCallback(() => {
+    const elem = document.querySelector(
+      NAVIGATION_SELECTOR
+    ) as HTMLDivElement | null;
+    setPanelRefInternal(elem);
+  }, [setPanelRefInternal]);
+
+  return [panelRef, setPanelRefPublic];
+};
+
 export const Navigation: FunctionComponent<Props> = observer(
   ({ application }) => {
     const appState = useMemo(() => application.getAppState(), [application]);
     const componentViewer = appState.foldersComponentViewer;
     const enableNativeSmartTagsFeature =
       appState.features.enableNativeSmartTagsFeature;
-    const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      const elem = document.querySelector(
-        'navigation'
-      ) as HTMLDivElement | null;
-      setPanelRef(elem);
-    }, [setPanelRef]);
+    const [panelRef, setPanelRef] = useNavigationPanelRef();
 
     const onCreateNewTag = useCallback(() => {
       appState.tags.createNewTemplate();
@@ -53,10 +61,10 @@ export const Navigation: FunctionComponent<Props> = observer(
     return (
       <PremiumModalProvider state={appState.features}>
         <div
-          id="tags-column"
+          id="navigation"
+          className="sn-component section"
+          data-aria-label="Navigation"
           ref={setPanelRef}
-          className="sn-component section tags"
-          data-aria-label="Tags"
         >
           {componentViewer ? (
             <div className="component-view-container">
@@ -69,8 +77,8 @@ export const Navigation: FunctionComponent<Props> = observer(
               </div>
             </div>
           ) : (
-            <div id="tags-content" className="content">
-              <div className="tags-title-section section-title-bar">
+            <div id="navigation-content" className="content">
+              <div className="section-title-bar">
                 <div className="section-title-bar-header">
                   <div className="sk-h3 title">
                     <span className="sk-bold">Views</span>
@@ -89,10 +97,8 @@ export const Navigation: FunctionComponent<Props> = observer(
                 </div>
               </div>
               <div className="scrollable">
-                <div className="infinite-scroll">
-                  <SmartTagsSection appState={appState} />
-                  <TagsSection appState={appState} />
-                </div>
+                <SmartTagsSection appState={appState} />
+                <TagsSection appState={appState} />
               </div>
             </div>
           )}

app/assets/javascripts/components/Tags/RootTagDropZone.tsx

@@ -50,7 +50,7 @@ export const RootTagDropZone: React.FC<Props> = observer(
       <div
         ref={dropRef}
         className={`root-drop ${canDrop ? 'active' : ''} ${
-          isOver ? 'is-over' : ''
+          isOver ? 'is-drag-over' : ''
         }`}
       >
         <Icon className="color-neutral" type="link-off" />

app/assets/javascripts/components/Tags/SmartTagsListItem.tsx

@@ -13,6 +13,9 @@ type Props = {
   features: FeaturesState;
 };
 
+const PADDING_BASE_PX = 14;
+const PADDING_PER_LEVEL_PX = 21;
+
 const smartTagIconType = (tag: SNSmartTag): IconType => {
   if (tag.isAllTag) {
     return 'notes';
@@ -95,7 +98,9 @@ export const SmartTagsListItem: FunctionComponent<Props> = observer(
             isFaded ? 'faded' : ''
           }`}
           onClick={selectCurrentTag}
-          style={{ paddingLeft: `${level + 0.5}rem` }}
+          style={{
+            paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
+          }}
         >
           {!tag.errorDecrypting ? (
             <div className="tag-info">

app/assets/javascripts/components/Tags/TagsListItem.tsx

@@ -21,6 +21,9 @@ type Props = {
   level: number;
 };
 
+const PADDING_BASE_PX = 14;
+const PADDING_PER_LEVEL_PX = 21;
+
 export const TagsListItem: FunctionComponent<Props> = observer(
   ({ tag, features, tagsState, level }) => {
     const [title, setTitle] = useState(tag.title || '');
@@ -151,7 +154,9 @@ export const TagsListItem: FunctionComponent<Props> = observer(
           }`}
           onClick={selectCurrentTag}
           ref={dragRef}
-          style={{ paddingLeft: `${level * 21 + 10}px` }}
+          style={{
+            paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
+          }}
         >
           {!tag.errorDecrypting ? (
             <div className="tag-info" title={title} ref={dropRef}>

app/assets/javascripts/components/Tags/TagsSection.tsx

@@ -13,7 +13,7 @@ export const TagsSection: FunctionComponent<Props> = observer(
   ({ appState }) => {
     return (
       <section>
-        <div className="tags-title-section section-title-bar">
+        <div className="section-title-bar">
           <div className="section-title-bar-header">
             <TagsSectionTitle features={appState.features} />
             <TagsSectionAddButton

app/assets/javascripts/components/Tags/TagsSectionAddButton.tsx

@@ -1,5 +1,4 @@
 import { IconButton } from '@/components/IconButton';
-import { AppState } from '@/ui_models/app_state';
 import { FeaturesState } from '@/ui_models/app_state/features_state';
 import { TagsState } from '@/ui_models/app_state/tags_state';
 import { observer } from 'mobx-react-lite';
@@ -23,6 +22,7 @@ export const TagsSectionAddButton: FunctionComponent<Props> = observer(
         focusable={true}
         icon="add"
         title="Create a new tag"
+        className="color-neutral"
         onClick={() => tags.createNewTemplate()}
       />
     );