Revert "Revert "feat: New notes list design (#780)""

This reverts commit d76c636e54.

app/assets/javascripts/components/Dropdown.tsx

@@ -13,6 +13,7 @@ import { useState } from 'preact/hooks';
 
 export type DropdownItem = {
   icon?: IconType;
+  iconClassName?: string;
   label: string;
   value: string;
 };
@@ -25,10 +26,7 @@ type DropdownProps = {
   onChange: (value: string) => void;
 };
 
-type ListboxButtonProps = {
-  icon?: IconType;
-  value: string | null;
-  label: string;
+type ListboxButtonProps = DropdownItem & {
   isExpanded: boolean;
 };
 
@@ -36,12 +34,13 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
   label,
   isExpanded,
   icon,
+  iconClassName = '',
 }) => (
   <>
     <div className="sn-dropdown-button-label">
       {icon ? (
         <div className="flex mr-2">
-          <Icon type={icon} className="sn-icon--small" />
+          <Icon type={icon} className={`sn-icon--small ${iconClassName}`} />
         </div>
       ) : null}
       <div className="dropdown-selected-label">{label}</div>
@@ -85,11 +84,13 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
           children={({ value, label, isExpanded }) => {
             const current = items.find((item) => item.value === value);
             const icon = current ? current?.icon : null;
+            const iconClassName = current ? current?.iconClassName : null;
             return CustomDropdownButton({
-              value,
+              value: value ? value : label.toLowerCase(),
               label,
               isExpanded,
               ...(icon ? { icon } : null),
+              ...(iconClassName ? { iconClassName } : null),
             });
           }}
         />
@@ -104,7 +105,10 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
                 >
                   {item.icon ? (
                     <div className="flex mr-3">
-                      <Icon type={item.icon} className="sn-icon--small" />
+                      <Icon
+                        type={item.icon}
+                        className={`sn-icon--small ${item.iconClassName ?? ''}`}
+                      />
                     </div>
                   ) : null}
                   <div className="text-input">{item.label}</div>