feat: New notes list design (#780)

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,23 +26,21 @@ type DropdownProps = {
   onChange: (value: string) => void;
 };
 
-type ListboxButtonProps = {
-  icon?: IconType;
-  value: string | null;
-  label: string;
+type ListboxButtonProps = DropdownItem & {
   isExpanded: boolean;
 };
 
 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>

app/assets/javascripts/components/Icon.tsx

@@ -3,7 +3,9 @@ import PencilOffIcon from '../../icons/ic-pencil-off.svg';
 import PlainTextIcon from '../../icons/ic-text-paragraph.svg';
 import RichTextIcon from '../../icons/ic-text-rich.svg';
 import TrashIcon from '../../icons/ic-trash.svg';
+import TrashFilledIcon from '../../icons/ic-trash-filled.svg';
 import PinIcon from '../../icons/ic-pin.svg';
+import PinFilledIcon from '../../icons/ic-pin-filled.svg';
 import UnpinIcon from '../../icons/ic-pin-off.svg';
 import ArchiveIcon from '../../icons/ic-archive.svg';
 import UnarchiveIcon from '../../icons/ic-unarchive.svg';
@@ -52,6 +54,7 @@ import ServerIcon from '../../icons/ic-server.svg';
 import EyeIcon from '../../icons/ic-eye.svg';
 import EyeOffIcon from '../../icons/ic-eye-off.svg';
 import LockIcon from '../../icons/ic-lock.svg';
+import LockFilledIcon from '../../icons/ic-lock-filled.svg';
 import ArrowsSortUpIcon from '../../icons/ic-arrows-sort-up.svg';
 import ArrowsSortDownIcon from '../../icons/ic-arrows-sort-down.svg';
 import WindowIcon from '../../icons/ic-window.svg';
@@ -69,6 +72,7 @@ const ICONS = {
   'arrows-sort-up': ArrowsSortUpIcon,
   'arrows-sort-down': ArrowsSortDownIcon,
   lock: LockIcon,
+  'lock-filled': LockFilledIcon,
   eye: EyeIcon,
   'eye-off': EyeOffIcon,
   server: ServerIcon,
@@ -89,7 +93,9 @@ const ICONS = {
   spreadsheets: SpreadsheetsIcon,
   tasks: TasksIcon,
   trash: TrashIcon,
+  'trash-filled': TrashFilledIcon,
   pin: PinIcon,
+  'pin-filled': PinFilledIcon,
   unpin: UnpinIcon,
   archive: ArchiveIcon,
   unarchive: UnarchiveIcon,
@@ -130,11 +136,22 @@ export type IconType = keyof typeof ICONS;
 type Props = {
   type: IconType;
   className?: string;
+  ariaLabel?: string;
 };
 
-export const Icon: FunctionalComponent<Props> = ({ type, className = '' }) => {
+export const Icon: FunctionalComponent<Props> = ({
+  type,
+  className = '',
+  ariaLabel,
+}) => {
   const IconComponent = ICONS[type];
-  return <IconComponent className={`sn-icon ${className}`} />;
+  return (
+    <IconComponent
+      className={`sn-icon ${className}`}
+      role="img"
+      {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
+    />
+  );
 };
 
 export const IconDirective = toDirective<Props>(Icon, {

app/assets/javascripts/components/NotesList.tsx

@@ -1,3 +1,4 @@
+import { WebApplication } from '@/ui_models/application';
 import { KeyboardKey } from '@/services/ioService';
 import { AppState } from '@/ui_models/app_state';
 import { DisplayOptions } from '@/ui_models/app_state/notes_view_state';
@@ -7,6 +8,7 @@ import { FunctionComponent } from 'preact';
 import { NotesListItem } from './NotesListItem';
 
 type Props = {
+  application: WebApplication;
   appState: AppState;
   notes: SNNote[];
   selectedNotes: Record<string, SNNote>;
@@ -18,23 +20,30 @@ const FOCUSABLE_BUT_NOT_TABBABLE = -1;
 const NOTES_LIST_SCROLL_THRESHOLD = 200;
 
 export const NotesList: FunctionComponent<Props> = observer(
-  ({ appState, notes, selectedNotes, displayOptions, paginate }) => {
+  ({
+    application,
+    appState,
+    notes,
+    selectedNotes,
+    displayOptions,
+    paginate,
+  }) => {
     const { selectPreviousNote, selectNextNote } = appState.notesView;
     const { hideTags, hideDate, hideNotePreview, sortBy } = displayOptions;
 
-    const tagsStringForNote = (note: SNNote): string => {
+    const tagsForNote = (note: SNNote): string[] => {
       if (hideTags) {
-        return '';
+        return [];
       }
       const selectedTag = appState.selectedTag;
       if (!selectedTag) {
-        return '';
+        return [];
       }
       const tags = appState.getNoteTags(note);
       if (!selectedTag.isSmartTag && tags.length === 1) {
-        return '';
+        return [];
       }
-      return tags.map((tag) => `#${tag.title}`).join(' ');
+      return tags.map((tag) => tag.title);
     };
 
     const openNoteContextMenu = (posX: number, posY: number) => {
@@ -46,11 +55,9 @@ export const NotesList: FunctionComponent<Props> = observer(
       appState.notes.setContextMenuOpen(true);
     };
 
-    const onContextMenu = async (note: SNNote, posX: number, posY: number) => {
-      await appState.notes.selectNote(note.uuid, true);
-      if (selectedNotes[note.uuid]) {
-        openNoteContextMenu(posX, posY);
-      }
+    const onContextMenu = (note: SNNote, posX: number, posY: number) => {
+      appState.notes.selectNote(note.uuid, true);
+      openNoteContextMenu(posX, posY);
     };
 
     const onScroll = (e: Event) => {
@@ -84,9 +91,10 @@ export const NotesList: FunctionComponent<Props> = observer(
       >
         {notes.map((note) => (
           <NotesListItem
+            application={application}
             key={note.uuid}
             note={note}
-            tags={tagsStringForNote(note)}
+            tags={tagsForNote(note)}
             selected={!!selectedNotes[note.uuid]}
             hideDate={hideDate}
             hidePreview={hideNotePreview}