feat: ability to favorite tags + customize icon (#1858)

2022-10-21 11:11:31 -05:00
parent 3b048a31aa
commit cbd0063926
38 changed files with 568 additions and 262 deletions
--- a/packages/models/package.json
+++ b/packages/models/package.json
@@ -25,6 +25,7 @@
    "@types/jest": "^28.1.5",
    "@types/lodash": "^4.14.182",
    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "eslint": "*",
    "eslint-plugin-prettier": "*",
    "jest": "^28.1.2",
    "ts-jest": "^28.0.5",
--- a/packages/models/src/Domain/Syncable/SmartView/SmartView.ts
+++ b/packages/models/src/Domain/Syncable/SmartView/SmartView.ts
@@ -1,41 +1,33 @@
 import { DecryptedItem } from '../../Abstract/Item/Implementations/DecryptedItem'
-import { PredicateInterface, PredicateJsonForm } from '../../Runtime/Predicate/Interface'
+import { PredicateInterface } from '../../Runtime/Predicate/Interface'
 import { predicateFromJson } from '../../Runtime/Predicate/Generators'
-import { ItemContent } from '../../Abstract/Content/ItemContent'
 import { DecryptedPayloadInterface } from '../../Abstract/Payload/Interfaces/DecryptedPayload'
+import { SystemViewId } from './SystemViewId'
+import { EmojiString, IconType } from '../../Utilities/Icon/IconType'
+import { SmartViewDefaultIconName, systemViewIcon } from './SmartViewIcons'
+import { SmartViewContent } from './SmartViewContent'

 export const SMART_TAG_DSL_PREFIX = '!['

-export enum SystemViewId {
-  AllNotes = 'all-notes',
-  Files = 'files',
-  ArchivedNotes = 'archived-notes',
-  TrashedNotes = 'trashed-notes',
-  UntaggedNotes = 'untagged-notes',
-  StarredNotes = 'starred-notes',
-}
-
-export interface SmartViewContent extends ItemContent {
-  title: string
-  predicate: PredicateJsonForm
-}
-
 export function isSystemView(view: SmartView): boolean {
  return Object.values(SystemViewId).includes(view.uuid as SystemViewId)
 }

-/**
- * A tag that defines a predicate that consumers can use
- * to retrieve a dynamic list of items.
- */
 export class SmartView extends DecryptedItem<SmartViewContent> {
  public readonly predicate!: PredicateInterface<DecryptedItem>
  public readonly title: string
+  public readonly iconString: IconType | EmojiString

  constructor(payload: DecryptedPayloadInterface<SmartViewContent>) {
    super(payload)
    this.title = String(this.content.title || '')

+    if (isSystemView(this)) {
+      this.iconString = systemViewIcon(this.uuid as SystemViewId)
+    } else {
+      this.iconString = this.payload.content.iconString || SmartViewDefaultIconName
+    }
+
    try {
      this.predicate = this.content.predicate && predicateFromJson(this.content.predicate)
    } catch (error) {
--- a/packages/models/src/Domain/Syncable/SmartView/SmartViewBuilder.ts
+++ b/packages/models/src/Domain/Syncable/SmartView/SmartViewBuilder.ts
@@ -1,6 +1,8 @@
 import { DecryptedPayload } from './../../Abstract/Payload/Implementations/DecryptedPayload'
 import { SNNote } from '../Note/Note'
-import { SmartViewContent, SmartView, SystemViewId } from './SmartView'
+import { SmartView } from './SmartView'
+import { SmartViewContent } from './SmartViewContent'
+import { SystemViewId } from './SystemViewId'
 import { ItemWithTags } from '../../Runtime/Display/Search/ItemWithTags'
 import { ContentType } from '@standardnotes/common'
 import { FillItemContent } from '../../Abstract/Content/ItemContent'
--- a/packages/models/src/Domain/Syncable/SmartView/SmartViewContent.ts
+++ b/packages/models/src/Domain/Syncable/SmartView/SmartViewContent.ts
@@ -0,0 +1,6 @@
+import { TagContent } from './../Tag/TagContent'
+import { PredicateJsonForm } from '../../Runtime/Predicate/Interface'
+
+export interface SmartViewContent extends TagContent {
+  predicate: PredicateJsonForm
+}
--- a/packages/models/src/Domain/Syncable/SmartView/SmartViewIcons.ts
+++ b/packages/models/src/Domain/Syncable/SmartView/SmartViewIcons.ts
@@ -0,0 +1,17 @@
+import { SystemViewId } from './SystemViewId'
+import { IconType } from '../../Utilities/Icon/IconType'
+
+export const SmartViewIcons: Record<SystemViewId, IconType> = {
+  [SystemViewId.AllNotes]: 'notes',
+  [SystemViewId.Files]: 'folder',
+  [SystemViewId.ArchivedNotes]: 'archive',
+  [SystemViewId.TrashedNotes]: 'trash',
+  [SystemViewId.UntaggedNotes]: 'hashtag-off',
+  [SystemViewId.StarredNotes]: 'star-filled',
+}
+
+export function systemViewIcon(id: SystemViewId): IconType {
+  return SmartViewIcons[id]
+}
+
+export const SmartViewDefaultIconName: IconType = 'restore'
--- a/packages/models/src/Domain/Syncable/SmartView/SystemViewId.ts
+++ b/packages/models/src/Domain/Syncable/SmartView/SystemViewId.ts
@@ -0,0 +1,8 @@
+export enum SystemViewId {
+  AllNotes = 'all-notes',
+  Files = 'files',
+  ArchivedNotes = 'archived-notes',
+  TrashedNotes = 'trashed-notes',
+  UntaggedNotes = 'untagged-notes',
+  StarredNotes = 'starred-notes',
+}
--- a/packages/models/src/Domain/Syncable/SmartView/index.ts
+++ b/packages/models/src/Domain/Syncable/SmartView/index.ts
@@ -1,2 +1,4 @@
 export * from './SmartView'
 export * from './SmartViewBuilder'
+export * from './SystemViewId'
+export * from './SmartViewContent'
--- a/packages/models/src/Domain/Syncable/Tag/Tag.spec.ts
+++ b/packages/models/src/Domain/Syncable/Tag/Tag.spec.ts
@@ -1,10 +1,11 @@
 import { PayloadSource } from './../../Abstract/Payload/Types/PayloadSource'
 import { DecryptedPayload } from './../../Abstract/Payload/Implementations/DecryptedPayload'
-import { SNTag, TagContent } from './Tag'
+import { SNTag } from './Tag'
 import { ContentType } from '@standardnotes/common'
 import { FillItemContent } from '../../Abstract/Content/ItemContent'
 import { ContentReference } from '../../Abstract/Reference/ContentReference'
 import { PayloadTimestampDefaults } from '../../Abstract/Payload'
+import { TagContent } from './TagContent'

 const randUuid = () => String(Math.random())

--- a/packages/models/src/Domain/Syncable/Tag/Tag.ts
+++ b/packages/models/src/Domain/Syncable/Tag/Tag.ts
@@ -1,32 +1,28 @@
+import { VectorIconNameOrEmoji, IconType } from './../../Utilities/Icon/IconType'
 import { ContentType, Uuid } from '@standardnotes/common'
 import { DecryptedItem } from '../../Abstract/Item/Implementations/DecryptedItem'
 import { ItemInterface } from '../../Abstract/Item/Interfaces/ItemInterface'
-import { ItemContent } from '../../Abstract/Content/ItemContent'
 import { ContentReference } from '../../Abstract/Reference/ContentReference'
 import { isTagToParentTagReference } from '../../Abstract/Reference/Functions'
 import { DecryptedPayloadInterface } from '../../Abstract/Payload/Interfaces/DecryptedPayload'
+import { TagContent, TagContentSpecialized } from './TagContent'

 export const TagFolderDelimitter = '.'

-interface TagInterface {
-  title: string
-  expanded: boolean
-}
-
-export type TagContent = TagInterface & ItemContent
+export const DefaultTagIconName: IconType = 'hashtag'

 export const isTag = (x: ItemInterface): x is SNTag => x.content_type === ContentType.Tag

-export class SNTag extends DecryptedItem<TagContent> implements TagInterface {
+export class SNTag extends DecryptedItem<TagContent> implements TagContentSpecialized {
  public readonly title: string
-
-  /** Whether to render child tags in view hierarchy. Opposite of collapsed. */
+  public readonly iconString: VectorIconNameOrEmoji
  public readonly expanded: boolean

  constructor(payload: DecryptedPayloadInterface<TagContent>) {
    super(payload)
    this.title = this.payload.content.title || ''
    this.expanded = this.payload.content.expanded != undefined ? this.payload.content.expanded : true
+    this.iconString = this.payload.content.iconString || DefaultTagIconName
  }

  get noteReferences(): ContentReference[] {
--- a/packages/models/src/Domain/Syncable/Tag/TagContent.ts
+++ b/packages/models/src/Domain/Syncable/Tag/TagContent.ts
@@ -0,0 +1,11 @@
+import { IconType } from './../../Utilities/Icon/IconType'
+import { ItemContent } from '../../Abstract/Content/ItemContent'
+import { EmojiString } from '../../Utilities/Icon/IconType'
+
+export interface TagContentSpecialized {
+  title: string
+  expanded: boolean
+  iconString: IconType | EmojiString
+}
+
+export type TagContent = TagContentSpecialized & ItemContent
--- a/packages/models/src/Domain/Syncable/Tag/TagMutator.ts
+++ b/packages/models/src/Domain/Syncable/Tag/TagMutator.ts
@@ -1,5 +1,6 @@
 import { ContentType } from '@standardnotes/common'
-import { TagContent, SNTag } from './Tag'
+import { SNTag } from './Tag'
+import { TagContent } from './TagContent'
 import { FileItem } from '../File'
 import { SNNote } from '../Note'
 import { isTagToParentTagReference } from '../../Abstract/Reference/Functions'
@@ -17,6 +18,10 @@ export class TagMutator extends DecryptedItemMutator<TagContent> {
    this.mutableContent.expanded = expanded
  }

+  set iconString(iconString: string) {
+    this.mutableContent.iconString = iconString
+  }
+
  public makeChildOf(tag: SNTag): void {
    const references = this.immutableItem.references.filter((ref) => !isTagToParentTagReference(ref))

--- a/packages/models/src/Domain/Syncable/Tag/index.ts
+++ b/packages/models/src/Domain/Syncable/Tag/index.ts
@@ -1,2 +1,3 @@
 export * from './Tag'
 export * from './TagMutator'
+export * from './TagContent'
--- a/packages/models/src/Domain/Utilities/Icon/IconType.ts
+++ b/packages/models/src/Domain/Utilities/Icon/IconType.ts
@@ -1,3 +1,7 @@
+export type VectorIconNameOrEmoji = EmojiString | IconType
+
+export type EmojiString = string
+
 export type IconType =
  | 'accessibility'
  | 'account-card-details-outline'
--- a/packages/models/src/Domain/Utilities/Test/SpecUtils.ts
+++ b/packages/models/src/Domain/Utilities/Test/SpecUtils.ts
@@ -1,4 +1,4 @@
-import { TagContent } from './../../Syncable/Tag/Tag'
+import { TagContent } from './../../Syncable/Tag/TagContent'
 import { ContentType } from '@standardnotes/common'
 import { FillItemContent, ItemContent } from '../../Abstract/Content/ItemContent'
 import { DecryptedPayload, PayloadSource, PayloadTimestampDefaults } from '../../Abstract/Payload'
--- a/packages/models/src/Domain/index.ts
+++ b/packages/models/src/Domain/index.ts
@@ -1,7 +1,7 @@
 export * from './Abstract/Component/ActionObserver'
-export * from './Abstract/Component/ComponentViewerEvent'
-export * from './Abstract/Component/ComponentMessage'
 export * from './Abstract/Component/ComponentEventObserver'
+export * from './Abstract/Component/ComponentMessage'
+export * from './Abstract/Component/ComponentViewerEvent'
 export * from './Abstract/Component/IncomingComponentItemPayload'
 export * from './Abstract/Component/KeyboardModifier'
 export * from './Abstract/Component/MessageData'
@@ -43,9 +43,9 @@ export * from './Runtime/Collection/Payload/ImmutablePayloadCollection'
 export * from './Runtime/Collection/Payload/PayloadCollection'
 export * from './Runtime/Deltas'
 export * from './Runtime/DirtyCounter/DirtyCounter'
+export * from './Runtime/Display'
 export * from './Runtime/Display/ItemDisplayController'
 export * from './Runtime/Display/Types'
-export * from './Runtime/Display'
 export * from './Runtime/History'
 export * from './Runtime/Index/ItemDelta'
 export * from './Runtime/Index/SNIndex'
@@ -70,6 +70,7 @@ export * from './Syncable/SmartView'
 export * from './Syncable/Tag'
 export * from './Syncable/Theme'
 export * from './Syncable/UserPrefs'
+export * from './Utilities/Icon/IconType'
 export * from './Utilities/Item/FindItem'
 export * from './Utilities/Item/ItemContentsDiffer'
 export * from './Utilities/Item/ItemContentsEqual'
--- a/packages/snjs/lib/Client/IconsController.ts
+++ b/packages/snjs/lib/Client/IconsController.ts
@@ -1,5 +1,5 @@
 import { NoteType } from '@standardnotes/features'
-import { IconType } from '@Lib/Types/IconType'
+import { IconType } from '@standardnotes/models'

 export class IconsController {
  getIconForFileType(type: string): IconType {
--- a/packages/snjs/lib/Types/index.ts
+++ b/packages/snjs/lib/Types/index.ts
@@ -1,3 +1,2 @@
 export * from './ApplicationEventPayload'
-export * from './IconType'
 export * from './UuidString'
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -111,6 +111,10 @@ const ContentListView: FunctionComponent<Props> = ({

  const { selectedUuids, selectNextItem, selectPreviousItem } = selectionController

+  const { selected: selectedTag } = navigationController
+
+  const icon = selectedTag?.iconString
+
  const isFilesSmartView = useMemo(
    () => navigationController.selected?.uuid === SystemViewId.Files,
    [navigationController.selected?.uuid],
@@ -259,6 +263,7 @@ const ContentListView: FunctionComponent<Props> = ({
            <ContentListHeader
              application={application}
              panelTitle={panelTitle}
+              icon={icon}
              addButtonLabel={addButtonLabel}
              addNewItem={addNewItem}
              isFilesSmartView={isFilesSmartView}
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -5,6 +5,7 @@ import { classNames } from '@/Utils/ConcatenateClassNames'
 import Popover from '@/Components/Popover/Popover'
 import DisplayOptionsMenu from './DisplayOptionsMenu'
 import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu'
+import { IconType } from '@standardnotes/snjs'
 import RoundIconButton from '@/Components/Button/RoundIconButton'

 type Props = {
@@ -14,6 +15,7 @@ type Props = {
    isNativeMobileWeb: WebApplication['isNativeMobileWeb']
  }
  panelTitle: string
+  icon?: IconType | string
  addButtonLabel: string
  addNewItem: () => void
  isFilesSmartView: boolean
@@ -23,6 +25,7 @@ type Props = {
 const ContentListHeader = ({
  application,
  panelTitle,
+  icon,
  addButtonLabel,
  addNewItem,
  isFilesSmartView,
@@ -41,8 +44,19 @@ const ContentListHeader = ({
    <div className="section-title-bar-header items-start gap-1 overflow-hidden">
      <NavigationMenuButton />
      <div className="flex min-w-0 flex-grow flex-col break-words">
-        <div className="text-lg font-semibold text-text">{panelTitle}</div>
-        {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
+        <div className={`flex min-w-0 flex-grow flex-row ${!optionsSubtitle ? 'items-center' : ''}`}>
+          {icon && (
+            <Icon
+              type={icon as IconType}
+              size={'large'}
+              className={`ml-0.5 mr-1.5 text-neutral ${optionsSubtitle ? 'mt-1' : ''}`}
+            />
+          )}
+          <div className="flex min-w-0 flex-grow flex-col break-words">
+            <div className="text-lg font-semibold text-text">{panelTitle}</div>
+            {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
+          </div>
+        </div>
      </div>
      <div className="flex">
        <div className="relative" ref={displayOptionsContainerRef}>
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
@@ -19,7 +19,7 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
          className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant py-1 px-1.5 text-foreground"
          key={tag.uuid}
        >
-          <Icon type="hashtag" className="mr-1 text-passive-1" size="small" />
+          <Icon type={tag.iconString} className="mr-1 text-passive-1" size="small" />
          <span>{tag.title}</span>
        </span>
      ))}
--- a/packages/web/src/javascripts/Components/ContentListView/Types/DisplayableListItemProps.ts
+++ b/packages/web/src/javascripts/Components/ContentListView/Types/DisplayableListItemProps.ts
@@ -5,5 +5,6 @@ export type DisplayableListItemProps = AbstractListItemProps & {
  tags: {
    uuid: SNTag['uuid']
    title: SNTag['title']
+    iconString: SNTag['iconString']
  }[]
 }
--- a/packages/web/src/javascripts/Components/FilePreview/getFileIconComponent.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/getFileIconComponent.tsx
@@ -1,7 +1,7 @@
-import { ICONS } from '@/Components/Icon/Icon'
+import { IconNameToSvgMapping } from '@/Components/Icon/IconNameToSvgMapping'

 export const getFileIconComponent = (iconType: string, className: string) => {
-  const IconComponent = ICONS[iconType as keyof typeof ICONS]
+  const IconComponent = IconNameToSvgMapping[iconType as keyof typeof IconNameToSvgMapping]

  return <IconComponent className={className} />
 }
--- a/packages/web/src/javascripts/Components/Icon/Icon.tsx
+++ b/packages/web/src/javascripts/Components/Icon/Icon.tsx
@@ -1,141 +1,77 @@
-import { FunctionComponent, useMemo } from 'react'
-import { IconType } from '@standardnotes/snjs'
-import * as icons from '@standardnotes/icons'
-
-export const ICONS = {
-  'account-circle': icons.AccountCircleIcon,
-  'arrow-left': icons.ArrowLeftIcon,
-  'arrow-right': icons.ArrowRightIcon,
-  'arrows-sort-down': icons.ArrowsSortDownIcon,
-  'arrows-sort-up': icons.ArrowsSortUpIcon,
-  'attachment-file': icons.AttachmentFileIcon,
-  'check-bold': icons.CheckBoldIcon,
-  'check-circle': icons.CheckCircleIcon,
-  'chevron-down': icons.ChevronDownIcon,
-  'chevron-left': icons.ChevronLeftIcon,
-  'chevron-right': icons.ChevronRightIcon,
-  'clear-circle-filled': icons.ClearCircleFilledIcon,
-  'cloud-off': icons.CloudOffIcon,
-  'diamond-filled': icons.DiamondFilledIcon,
-  'eye-off': icons.EyeOffIcon,
-  'file-doc': icons.FileDocIcon,
-  'file-image': icons.FileImageIcon,
-  'file-mov': icons.FileMovIcon,
-  'file-music': icons.FileMusicIcon,
-  'file-other': icons.FileOtherIcon,
-  'file-pdf': icons.FilePdfIcon,
-  'file-ppt': icons.FilePptIcon,
-  'file-xls': icons.FileXlsIcon,
-  'file-zip': icons.FileZipIcon,
-  'hashtag-off': icons.HashtagOffIcon,
-  'link-off': icons.LinkOffIcon,
-  'list-bulleted': icons.ListBulleted,
-  'lock-filled': icons.LockFilledIcon,
-  'menu-arrow-down-alt': icons.MenuArrowDownAlt,
-  'menu-arrow-down': icons.MenuArrowDownIcon,
-  'menu-arrow-right': icons.MenuArrowRightIcon,
-  'menu-close': icons.MenuCloseIcon,
-  'menu-variant': icons.MenuVariantIcon,
-  'notes-filled': icons.NotesFilledIcon,
-  'pencil-filled': icons.PencilFilledIcon,
-  'pencil-off': icons.PencilOffIcon,
-  'pin-filled': icons.PinFilledIcon,
-  'plain-text': icons.PlainTextIcon,
-  'premium-feature': icons.PremiumFeatureIcon,
-  'rich-text': icons.RichTextIcon,
-  'sort-descending': icons.SortDescendingIcon,
-  'star-circle-filled': icons.StarCircleFilled,
-  'star-filled': icons.StarFilledIcon,
-  'star-variant-filled': icons.StarVariantFilledIcon,
-  'trash-filled': icons.TrashFilledIcon,
-  'trash-sweep': icons.TrashSweepIcon,
-  'user-add': icons.UserAddIcon,
-  'user-switch': icons.UserSwitch,
-  accessibility: icons.AccessibilityIcon,
-  add: icons.AddIcon,
-  archive: icons.ArchiveIcon,
-  asterisk: icons.AsteriskIcon,
-  authenticator: icons.AuthenticatorIcon,
-  check: icons.CheckIcon,
-  close: icons.CloseIcon,
-  code: icons.CodeIcon,
-  copy: icons.CopyIcon,
-  dashboard: icons.DashboardIcon,
-  diamond: icons.DiamondIcon,
-  download: icons.DownloadIcon,
-  editor: icons.EditorIcon,
-  email: icons.EmailIcon,
-  eye: icons.EyeIcon,
-  file: icons.FileIcon,
-  folder: icons.FolderIcon,
-  hashtag: icons.HashtagIcon,
-  help: icons.HelpIcon,
-  history: icons.HistoryIcon,
-  info: icons.InfoIcon,
-  keyboard: icons.KeyboardIcon,
-  link: icons.LinkIcon,
-  listed: icons.ListedIcon,
-  lock: icons.LockIcon,
-  markdown: icons.MarkdownIcon,
-  more: icons.MoreIcon,
-  notes: icons.NotesIcon,
-  password: icons.PasswordIcon,
-  pencil: icons.PencilIcon,
-  pin: icons.PinIcon,
-  restore: icons.RestoreIcon,
-  search: icons.SearchIcon,
-  security: icons.SecurityIcon,
-  server: icons.ServerIcon,
-  settings: icons.SettingsIcon,
-  share: icons.ShareIcon,
-  signIn: icons.SignInIcon,
-  signOut: icons.SignOutIcon,
-  spreadsheets: icons.SpreadsheetsIcon,
-  star: icons.StarIcon,
-  subtract: icons.SubtractIcon,
-  sync: icons.SyncIcon,
-  tasks: icons.TasksIcon,
-  themes: icons.ThemesIcon,
-  trash: icons.TrashIcon,
-  tune: icons.TuneIcon,
-  unarchive: icons.UnarchiveIcon,
-  unpin: icons.UnpinIcon,
-  user: icons.UserIcon,
-  view: icons.ViewIcon,
-  warning: icons.WarningIcon,
-  window: icons.WindowIcon,
-}
+import { FunctionComponent } from 'react'
+import { VectorIconNameOrEmoji } from '@standardnotes/snjs'
+import { IconNameToSvgMapping } from './IconNameToSvgMapping'
+import { classNames } from '@/Utils/ConcatenateClassNames'

 type Props = {
-  type: IconType
+  type: VectorIconNameOrEmoji
  className?: string
  ariaLabel?: string
-  size?: 'small' | 'medium' | 'normal' | 'custom'
+  size?: 'small' | 'medium' | 'normal' | 'large' | 'custom'
+}
+
+const ContainerDimensions = {
+  small: 'w-3.5 h-3.5',
+  medium: 'w-4 h-4',
+  normal: 'w-5 h-5',
+  large: 'w-6 h-6',
+  custom: '',
+}
+
+const EmojiContainerDimensions = {
+  small: 'w-4 h-4',
+  medium: 'w-5 h-5',
+  normal: 'w-5 h-5',
+  large: 'w-7 h-6',
+  custom: '',
+}
+
+const EmojiOffset = {
+  small: '',
+  medium: '',
+  normal: '-mt-0.5',
+  large: '',
+  custom: '',
+}
+
+const EmojiSize = {
+  small: 'text-xs',
+  medium: 'text-sm',
+  normal: 'text-base',
+  large: 'text-lg',
+  custom: '',
+}
+
+const getIconComponent = (type: VectorIconNameOrEmoji) => {
+  return IconNameToSvgMapping[type as keyof typeof IconNameToSvgMapping]
+}
+
+export const isIconEmoji = (type: VectorIconNameOrEmoji): boolean => {
+  return getIconComponent(type) == undefined
 }

 const Icon: FunctionComponent<Props> = ({ type, className = '', ariaLabel, size = 'normal' }) => {
-  const IconComponent = ICONS[type as keyof typeof ICONS]
-
-  const dimensions = useMemo(() => {
-    switch (size) {
-      case 'small':
-        return 'w-3.5 h-3.5'
-      case 'medium':
-        return 'w-4 h-4'
-      case 'custom':
-        return ''
-      default:
-        return 'w-5 h-5'
-    }
-  }, [size])
-
+  const IconComponent = getIconComponent(type)
  if (!IconComponent) {
-    return null
+    return (
+      <label
+        className={classNames(
+          'fill-current',
+          'text-center',
+          EmojiSize[size],
+          EmojiContainerDimensions[size],
+          EmojiOffset[size],
+          className,
+        )}
+      >
+        {type}
+      </label>
+    )
  }

  return (
    <IconComponent
-      className={`${dimensions} fill-current ${className}`}
+      className={`${ContainerDimensions[size]} fill-current ${className}`}
      role="img"
      {...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true })}
    />
--- a/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
+++ b/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
@@ -0,0 +1,106 @@
+import * as icons from '@standardnotes/icons'
+
+export const IconNameToSvgMapping = {
+  'account-circle': icons.AccountCircleIcon,
+  'arrow-left': icons.ArrowLeftIcon,
+  'arrow-right': icons.ArrowRightIcon,
+  'arrows-sort-down': icons.ArrowsSortDownIcon,
+  'arrows-sort-up': icons.ArrowsSortUpIcon,
+  'attachment-file': icons.AttachmentFileIcon,
+  'check-bold': icons.CheckBoldIcon,
+  'check-circle': icons.CheckCircleIcon,
+  'chevron-down': icons.ChevronDownIcon,
+  'chevron-left': icons.ChevronLeftIcon,
+  'chevron-right': icons.ChevronRightIcon,
+  'clear-circle-filled': icons.ClearCircleFilledIcon,
+  'cloud-off': icons.CloudOffIcon,
+  'diamond-filled': icons.DiamondFilledIcon,
+  'eye-off': icons.EyeOffIcon,
+  'file-doc': icons.FileDocIcon,
+  'file-image': icons.FileImageIcon,
+  'file-mov': icons.FileMovIcon,
+  'file-music': icons.FileMusicIcon,
+  'file-other': icons.FileOtherIcon,
+  'file-pdf': icons.FilePdfIcon,
+  'file-ppt': icons.FilePptIcon,
+  'file-xls': icons.FileXlsIcon,
+  'file-zip': icons.FileZipIcon,
+  'hashtag-off': icons.HashtagOffIcon,
+  'link-off': icons.LinkOffIcon,
+  'list-bulleted': icons.ListBulleted,
+  'lock-filled': icons.LockFilledIcon,
+  'menu-arrow-down-alt': icons.MenuArrowDownAlt,
+  'menu-arrow-down': icons.MenuArrowDownIcon,
+  'menu-arrow-right': icons.MenuArrowRightIcon,
+  'menu-close': icons.MenuCloseIcon,
+  'menu-variant': icons.MenuVariantIcon,
+  'notes-filled': icons.NotesFilledIcon,
+  'pencil-filled': icons.PencilFilledIcon,
+  'pencil-off': icons.PencilOffIcon,
+  'pin-filled': icons.PinFilledIcon,
+  'plain-text': icons.PlainTextIcon,
+  'premium-feature': icons.PremiumFeatureIcon,
+  'rich-text': icons.RichTextIcon,
+  'sort-descending': icons.SortDescendingIcon,
+  'star-circle-filled': icons.StarCircleFilled,
+  'star-filled': icons.StarFilledIcon,
+  'star-variant-filled': icons.StarVariantFilledIcon,
+  'trash-filled': icons.TrashFilledIcon,
+  'trash-sweep': icons.TrashSweepIcon,
+  'user-add': icons.UserAddIcon,
+  'user-switch': icons.UserSwitch,
+  'fullscreen-exit': icons.FullscreenExitIcon,
+  accessibility: icons.AccessibilityIcon,
+  add: icons.AddIcon,
+  archive: icons.ArchiveIcon,
+  asterisk: icons.AsteriskIcon,
+  authenticator: icons.AuthenticatorIcon,
+  check: icons.CheckIcon,
+  close: icons.CloseIcon,
+  code: icons.CodeIcon,
+  copy: icons.CopyIcon,
+  dashboard: icons.DashboardIcon,
+  diamond: icons.DiamondIcon,
+  download: icons.DownloadIcon,
+  editor: icons.EditorIcon,
+  email: icons.EmailIcon,
+  eye: icons.EyeIcon,
+  file: icons.FileIcon,
+  folder: icons.FolderIcon,
+  hashtag: icons.HashtagIcon,
+  help: icons.HelpIcon,
+  history: icons.HistoryIcon,
+  info: icons.InfoIcon,
+  keyboard: icons.KeyboardIcon,
+  link: icons.LinkIcon,
+  listed: icons.ListedIcon,
+  lock: icons.LockIcon,
+  markdown: icons.MarkdownIcon,
+  more: icons.MoreIcon,
+  notes: icons.NotesIcon,
+  password: icons.PasswordIcon,
+  pencil: icons.PencilIcon,
+  pin: icons.PinIcon,
+  restore: icons.RestoreIcon,
+  search: icons.SearchIcon,
+  security: icons.SecurityIcon,
+  server: icons.ServerIcon,
+  settings: icons.SettingsIcon,
+  share: icons.ShareIcon,
+  signIn: icons.SignInIcon,
+  signOut: icons.SignOutIcon,
+  spreadsheets: icons.SpreadsheetsIcon,
+  star: icons.StarIcon,
+  subtract: icons.SubtractIcon,
+  sync: icons.SyncIcon,
+  tasks: icons.TasksIcon,
+  themes: icons.ThemesIcon,
+  trash: icons.TrashIcon,
+  tune: icons.TuneIcon,
+  unarchive: icons.UnarchiveIcon,
+  unpin: icons.UnpinIcon,
+  user: icons.UserIcon,
+  view: icons.ViewIcon,
+  warning: icons.WarningIcon,
+  window: icons.WindowIcon,
+}
--- a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
+++ b/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
@@ -0,0 +1,131 @@
+import { EmojiString, Platform, VectorIconNameOrEmoji } from '@standardnotes/snjs'
+import { FunctionComponent, useMemo, useRef, useState } from 'react'
+import Dropdown from '../Dropdown/Dropdown'
+import { DropdownItem } from '../Dropdown/DropdownItem'
+import { isIconEmoji } from './Icon'
+import { IconNameToSvgMapping } from './IconNameToSvgMapping'
+import { IconPickerType } from './IconPickerType'
+
+type Props = {
+  selectedValue: VectorIconNameOrEmoji
+  onIconChange: (value?: string) => void
+  platform: Platform
+  className?: string
+}
+
+const IconPicker = ({ selectedValue, onIconChange, platform, className }: Props) => {
+  const iconOptions = useMemo(
+    () =>
+      [...Object.keys(IconNameToSvgMapping)].map(
+        (value) =>
+          ({
+            label: value,
+            value: value,
+            icon: value,
+          } as DropdownItem),
+      ),
+    [],
+  )
+
+  const isSelectedEmoji = isIconEmoji(selectedValue)
+  const isMacOS = platform === Platform.MacWeb || platform === Platform.MacDesktop
+  const isWindows = platform === Platform.WindowsWeb || platform === Platform.WindowsDesktop
+
+  const emojiInputRef = useRef<HTMLInputElement>(null)
+  const [emojiInputFocused, setEmojiInputFocused] = useState(true)
+  const [currentType, setCurrentType] = useState<IconPickerType>(isSelectedEmoji ? 'emoji' : 'icon')
+  const [emojiInputValue, setEmojiInputValue] = useState(isSelectedEmoji ? selectedValue : '')
+
+  const selectTab = (type: IconPickerType | 'reset') => {
+    if (type === 'reset') {
+      onIconChange(undefined)
+      setEmojiInputValue('')
+    } else {
+      setCurrentType(type)
+    }
+  }
+
+  const TabButton: FunctionComponent<{
+    label: string
+    type: IconPickerType | 'reset'
+  }> = ({ type, label }) => {
+    const isSelected = currentType === type
+
+    return (
+      <button
+        className={`relative mr-2 cursor-pointer border-0 bg-default pb-1.5 text-sm focus:shadow-none ${
+          isSelected ? 'font-medium text-info' : 'text-text'
+        }`}
+        onClick={() => {
+          selectTab(type)
+        }}
+      >
+        {label}
+      </button>
+    )
+  }
+
+  const handleIconChange = (value: string) => {
+    onIconChange(value)
+  }
+
+  const handleEmojiChange = (value: EmojiString) => {
+    setEmojiInputValue(value)
+
+    const emojiLength = [...value].length
+    if (emojiLength === 1) {
+      onIconChange(value)
+      emojiInputRef.current?.blur()
+      setEmojiInputFocused(false)
+    } else {
+      setEmojiInputFocused(true)
+    }
+  }
+
+  return (
+    <div className={`flex h-full flex-grow flex-col overflow-auto ${className}`}>
+      <div className="flex">
+        <TabButton label="Icon" type={'icon'} />
+        <TabButton label="Emoji" type={'emoji'} />
+        <TabButton label="Reset" type={'reset'} />
+      </div>
+      <div className={'mt-2 h-full min-h-0 overflow-auto'}>
+        {currentType === 'icon' && (
+          <Dropdown
+            id="change-tag-icon-dropdown"
+            label="Change the icon for a tag"
+            items={iconOptions}
+            value={selectedValue}
+            onChange={handleIconChange}
+          />
+        )}
+        {currentType === 'emoji' && (
+          <>
+            <div>
+              <input
+                ref={emojiInputRef}
+                autoComplete="off"
+                autoFocus={emojiInputFocused}
+                className="w-full flex-grow rounded border border-solid border-passive-3 bg-default px-2 py-1 text-base font-bold text-text focus:shadow-none focus:outline-none"
+                type="text"
+                value={emojiInputValue}
+                onChange={({ target: input }) => handleEmojiChange((input as HTMLInputElement)?.value)}
+              />
+            </div>
+            <div className="mt-2 text-xs text-passive-0">
+              Use your keyboard to enter or paste in an emoji character.
+            </div>
+            {isMacOS && (
+              <div className="mt-2 text-xs text-passive-0">On macOS: ⌘ + ⌃ + Space bar to bring up emoji picker.</div>
+            )}
+            {isWindows && (
+              <div className="mt-2 text-xs text-passive-0">On Windows: Windows key + . to bring up emoji picker.</div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default IconPicker
--- a/packages/web/src/javascripts/Components/Icon/IconPickerType.ts
+++ b/packages/web/src/javascripts/Components/Icon/IconPickerType.ts
@@ -0,0 +1 @@
+export type IconPickerType = 'icon' | 'emoji'
--- a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
@@ -6,6 +6,7 @@ import { IconType } from '@standardnotes/snjs'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { MenuItemType } from './MenuItemType'
 import RadioIndicator from '../Radio/RadioIndicator'
+import { classNames } from '@/Utils/ConcatenateClassNames'

 type MenuItemProps = {
  children: ReactNode
@@ -40,7 +41,10 @@ const MenuItem = forwardRef(
      <li className="list-none" role="none">
        <button
          ref={ref}
-          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className={classNames(
+            'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5',
+            'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
+          )}
          onClick={() => {
            onChange(!checked)
          }}
@@ -59,7 +63,12 @@ const MenuItem = forwardRef(
          ref={ref}
          role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
-          className={`flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item ${className}`}
+          className={classNames(
+            'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left',
+            'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
+            'focus:bg-info-backdrop focus:shadow-none md:text-menu-item',
+            className,
+          )}
          onClick={onClick}
          onBlur={onBlur}
          {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}
--- a/packages/web/src/javascripts/Components/ResponsivePane/AppPaneMetadata.ts
+++ b/packages/web/src/javascripts/Components/ResponsivePane/AppPaneMetadata.ts
@@ -1,19 +1,5 @@
-import { IconType } from '@standardnotes/snjs'
-
 export enum AppPaneId {
  Navigation = 'NavigationColumn',
  Items = 'ItemsColumn',
  Editor = 'EditorColumn',
 }
-
-export const AppPaneTitles = {
-  [AppPaneId.Navigation]: 'Navigation',
-  [AppPaneId.Items]: 'Notes & Files',
-  [AppPaneId.Editor]: 'Editor',
-}
-
-export const AppPaneIcons: Record<AppPaneId, IconType> = {
-  [AppPaneId.Navigation]: 'hashtag',
-  [AppPaneId.Items]: 'notes',
-  [AppPaneId.Editor]: 'plain-text',
-}
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -2,7 +2,7 @@ import Icon from '@/Components/Icon/Icon'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import '@reach/tooltip/styles.css'
-import { SmartView, SystemViewId, IconType, isSystemView } from '@standardnotes/snjs'
+import { SmartView, SystemViewId, isSystemView } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import {
  FormEventHandler,
@@ -27,19 +27,6 @@ type Props = {
 const PADDING_BASE_PX = 14
 const PADDING_PER_LEVEL_PX = 21

-const smartViewIconType = (view: SmartView, isSelected: boolean): IconType => {
-  const mapping: Record<SystemViewId, IconType> = {
-    [SystemViewId.AllNotes]: isSelected ? 'notes-filled' : 'notes',
-    [SystemViewId.Files]: 'folder',
-    [SystemViewId.ArchivedNotes]: 'archive',
-    [SystemViewId.TrashedNotes]: 'trash',
-    [SystemViewId.UntaggedNotes]: 'hashtag-off',
-    [SystemViewId.StarredNotes]: 'star-filled',
-  }
-
-  return mapping[view.uuid as SystemViewId] || 'hashtag'
-}
-
 const getIconClass = (view: SmartView, isSelected: boolean): string => {
  const mapping: Partial<Record<SystemViewId, string>> = {
    [SystemViewId.StarredNotes]: 'text-warning',
@@ -111,7 +98,6 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
  }, [tagsState, view])

  const isFaded = false
-  const iconType = smartViewIconType(view, isSelected)
  const iconClass = getIconClass(view, isSelected)

  return (
@@ -127,7 +113,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
      >
        <div className="tag-info">
          <div className={'tag-icon mr-2'}>
-            <Icon type={iconType} className={iconClass} />
+            <Icon type={view.iconString} className={iconClass} />
          </div>
          {isEditing ? (
            <input
--- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
@@ -5,13 +5,14 @@ import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import { SNTag } from '@standardnotes/snjs'
+import { SNTag, VectorIconNameOrEmoji, DefaultTagIconName } from '@standardnotes/snjs'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import Popover from '../Popover/Popover'
+import IconPicker from '../Icon/IconPicker'

 type ContextMenuProps = {
  navigationController: NavigationController
@@ -22,7 +23,7 @@ type ContextMenuProps = {
 const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag }: ContextMenuProps) => {
  const premiumModal = usePremiumModal()

-  const { contextMenuOpen, contextMenuClickLocation } = navigationController
+  const { contextMenuOpen, contextMenuClickLocation, application } = navigationController

  const contextMenuRef = useRef<HTMLDivElement>(null)
  useCloseOnClickOutside(contextMenuRef, () => navigationController.setContextMenuOpen(false))
@@ -39,6 +40,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag

  const onClickRename = useCallback(() => {
    navigationController.setContextMenuOpen(false)
+    navigationController.editingFrom = navigationController.contextMenuOpenFrom
    navigationController.editingTag = selectedTag
  }, [navigationController, selectedTag])

@@ -51,6 +53,15 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
    [selectedTag.userModifiedDate],
  )

+  const handleIconChange = (value?: VectorIconNameOrEmoji) => {
+    navigationController.setIcon(selectedTag, value || DefaultTagIconName)
+  }
+
+  const onClickStar = useCallback(() => {
+    navigationController.setFavorite(selectedTag, !selectedTag.starred).catch(console.error)
+    navigationController.setContextMenuOpen(false)
+  }, [navigationController, selectedTag])
+
  const tagCreatedAt = useMemo(() => formatDateForContextMenu(selectedTag.created_at), [selectedTag.created_at])

  return (
@@ -62,6 +73,20 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
    >
      <div ref={contextMenuRef}>
        <Menu a11yLabel="Tag context menu" isOpen={contextMenuOpen}>
+          <IconPicker
+            key={'icon-picker'}
+            onIconChange={handleIconChange}
+            selectedValue={selectedTag.iconString}
+            platform={application.platform}
+            className={'px-3 py-1.5'}
+          />
+          <HorizontalSeparator classes="my-2" />
+          <MenuItem type={MenuItemType.IconButton} className={'justify-between py-1.5'} onClick={onClickStar}>
+            <div className="flex items-center">
+              <Icon type="star" className="mr-2 text-neutral" />
+              {selectedTag.starred ? 'Unfavorite' : 'Favorite'}
+            </div>
+          </MenuItem>
          <MenuItem type={MenuItemType.IconButton} className={'justify-between py-1.5'} onClick={onClickAddSubtag}>
            <div className="flex items-center">
              <Icon type="add" className="mr-2 text-neutral" />
--- a/packages/web/src/javascripts/Components/Tags/TagListSection.ts
+++ b/packages/web/src/javascripts/Components/Tags/TagListSection.ts
@@ -0,0 +1 @@
+export type TagListSectionType = 'all' | 'favorites'
--- a/packages/web/src/javascripts/Components/Tags/TagsList.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsList.tsx
@@ -5,15 +5,17 @@ import { FunctionComponent, useCallback } from 'react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import RootTagDropZone from './RootTagDropZone'
+import { TagListSectionType } from './TagListSection'
 import { TagsListItem } from './TagsListItem'

 type Props = {
  viewControllerManager: ViewControllerManager
+  type: TagListSectionType
 }

-const TagsList: FunctionComponent<Props> = ({ viewControllerManager }: Props) => {
-  const tagsState = viewControllerManager.navigationController
-  const allTags = tagsState.allLocalRootTags
+const TagsList: FunctionComponent<Props> = ({ viewControllerManager, type }: Props) => {
+  const navigationController = viewControllerManager.navigationController
+  const allTags = type === 'all' ? navigationController.allLocalRootTags : navigationController.starredTags

  const backend = HTML5Backend

@@ -23,10 +25,11 @@ const TagsList: FunctionComponent<Props> = ({ viewControllerManager }: Props) =>
        x: posX,
        y: posY,
      })
+      viewControllerManager.navigationController.setContextMenuOpenFrom(type)
      viewControllerManager.navigationController.reloadContextMenuLayout()
      viewControllerManager.navigationController.setContextMenuOpen(true)
    },
-    [viewControllerManager],
+    [viewControllerManager, type],
  )

  const onContextMenu = useCallback(
@@ -49,17 +52,20 @@ const TagsList: FunctionComponent<Props> = ({ viewControllerManager }: Props) =>
                level={0}
                key={tag.uuid}
                tag={tag}
-                tagsState={tagsState}
+                type={type}
+                navigationController={navigationController}
                features={viewControllerManager.featuresController}
                linkingController={viewControllerManager.linkingController}
                onContextMenu={onContextMenu}
              />
            )
          })}
-          <RootTagDropZone
-            tagsState={viewControllerManager.navigationController}
-            featuresState={viewControllerManager.featuresController}
-          />
+          {type === 'all' && (
+            <RootTagDropZone
+              tagsState={viewControllerManager.navigationController}
+              featuresState={viewControllerManager.featuresController}
+            />
+          )}
        </>
      )}
    </DndProvider>
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
@@ -5,13 +5,14 @@ import { KeyboardKey } from '@standardnotes/ui-services'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import '@reach/tooltip/styles.css'
-import { SNTag } from '@standardnotes/snjs'
+import { IconType, SNTag } from '@standardnotes/snjs'
 import { computed } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import {
  FormEventHandler,
  FunctionComponent,
  KeyboardEventHandler,
+  MouseEvent,
  MouseEventHandler,
  useCallback,
  useEffect,
@@ -26,10 +27,12 @@ import { classNames } from '@/Utils/ConcatenateClassNames'
 import { mergeRefs } from '@/Hooks/mergeRefs'
 import { useFileDragNDrop } from '../FileDragNDropProvider/FileDragNDropProvider'
 import { LinkingController } from '@/Controllers/LinkingController'
+import { TagListSectionType } from './TagListSection'

 type Props = {
  tag: SNTag
-  tagsState: NavigationController
+  type: TagListSectionType
+  navigationController: NavigationController
  features: FeaturesController
  linkingController: LinkingController
  level: number
@@ -40,25 +43,27 @@ const PADDING_BASE_PX = 14
 const PADDING_PER_LEVEL_PX = 21

 export const TagsListItem: FunctionComponent<Props> = observer(
-  ({ tag, features, tagsState, level, onContextMenu, linkingController }) => {
+  ({ tag, type, features, navigationController: navigationController, level, onContextMenu, linkingController }) => {
    const { toggleAppPane } = useResponsiveAppPane()

+    const isFavorite = type === 'favorites'
+
    const [title, setTitle] = useState(tag.title || '')
    const [subtagTitle, setSubtagTitle] = useState('')
    const inputRef = useRef<HTMLInputElement>(null)
    const subtagInputRef = useRef<HTMLInputElement>(null)
    const menuButtonRef = useRef<HTMLAnchorElement>(null)

-    const isSelected = tagsState.selected === tag
-    const isEditing = tagsState.editingTag === tag
-    const isAddingSubtag = tagsState.addingSubtagTo === tag
-    const noteCounts = computed(() => tagsState.getNotesCount(tag))
+    const isSelected = navigationController.selected === tag
+    const isEditing = navigationController.editingTag === tag && navigationController.editingFrom === type
+    const isAddingSubtag = navigationController.addingSubtagTo === tag
+    const noteCounts = computed(() => navigationController.getNotesCount(tag))

-    const childrenTags = computed(() => tagsState.getChildren(tag)).get()
+    const childrenTags = computed(() => navigationController.getChildren(tag)).get()
    const hasChildren = childrenTags.length > 0

    const hasFolders = features.hasFolders
-    const hasAtLeastOneFolder = tagsState.hasAtLeastOneFolder
+    const hasAtLeastOneFolder = navigationController.hasAtLeastOneFolder

    const premiumModal = usePremiumModal()

@@ -76,27 +81,28 @@ export const TagsListItem: FunctionComponent<Props> = observer(
      setTitle(tag.title || '')
    }, [setTitle, tag])

-    const toggleChildren: MouseEventHandler = useCallback(
-      (e) => {
-        e.stopPropagation()
+    const toggleChildren = useCallback(
+      (e?: MouseEvent) => {
+        e?.stopPropagation()
        const shouldShowChildren = !showChildren
        setShowChildren(shouldShowChildren)
-        tagsState.setExpanded(tag, shouldShowChildren)
+        navigationController.setExpanded(tag, shouldShowChildren)
      },
-      [showChildren, tag, tagsState],
+      [showChildren, tag, navigationController],
    )

    const selectCurrentTag = useCallback(async () => {
-      await tagsState.setSelectedTag(tag, {
+      await navigationController.setSelectedTag(tag, {
        userTriggered: true,
      })
+      toggleChildren()
      toggleAppPane(AppPaneId.Items)
-    }, [tagsState, tag, toggleAppPane])
+    }, [navigationController, tag, toggleAppPane, toggleChildren])

    const onBlur = useCallback(() => {
-      tagsState.save(tag, title).catch(console.error)
+      navigationController.save(tag, title).catch(console.error)
      setTitle(tag.title)
-    }, [tagsState, tag, title, setTitle])
+    }, [navigationController, tag, title, setTitle])

    const onInput: FormEventHandler = useCallback(
      (e) => {
@@ -128,9 +134,9 @@ export const TagsListItem: FunctionComponent<Props> = observer(
    }, [])

    const onSubtagInputBlur = useCallback(() => {
-      tagsState.createSubtagAndAssignParent(tag, subtagTitle).catch(console.error)
+      navigationController.createSubtagAndAssignParent(tag, subtagTitle).catch(console.error)
      setSubtagTitle('')
-    }, [subtagTitle, tag, tagsState])
+    }, [subtagTitle, tag, navigationController])

    const onSubtagKeyDown: KeyboardEventHandler = useCallback(
      (e) => {
@@ -166,21 +172,21 @@ export const TagsListItem: FunctionComponent<Props> = observer(
      () => ({
        accept: ItemTypes.TAG,
        canDrop: (item) => {
-          return tagsState.isValidTagParent(tag, item as SNTag)
+          return navigationController.isValidTagParent(tag, item as SNTag)
        },
        drop: (item) => {
          if (!hasFolders) {
            premiumModal.activate(TAG_FOLDERS_FEATURE_NAME)
            return
          }
-          tagsState.assignParent(item.uuid, tag.uuid).catch(console.error)
+          navigationController.assignParent(item.uuid, tag.uuid).catch(console.error)
        },
        collect: (monitor) => ({
          isOver: !!monitor.isOver(),
          canDrop: !!monitor.canDrop(),
        }),
      }),
-      [tag, tagsState, hasFolders, premiumModal],
+      [tag, navigationController, hasFolders, premiumModal],
    )

    const readyToDrop = isOver && canDrop
@@ -194,16 +200,16 @@ export const TagsListItem: FunctionComponent<Props> = observer(
          return
        }

-        const contextMenuOpen = tagsState.contextMenuOpen
+        const contextMenuOpen = navigationController.contextMenuOpen
        const menuButtonRect = menuButtonRef.current?.getBoundingClientRect()

        if (contextMenuOpen) {
-          tagsState.setContextMenuOpen(false)
+          navigationController.setContextMenuOpen(false)
        } else {
          onContextMenu(tag, menuButtonRect.right, menuButtonRect.top)
        }
      },
-      [onContextMenu, tagsState, tag],
+      [onContextMenu, navigationController, tag],
    )

    const tagRef = useRef<HTMLDivElement>(null)
@@ -248,7 +254,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(
          }}
        >
          <div className="tag-info" title={title} ref={dropRef}>
-            {hasAtLeastOneFolder && (
+            {hasAtLeastOneFolder && !isFavorite && (
              <div className="tag-fold-container">
                <a
                  role="button"
@@ -262,12 +268,12 @@ export const TagsListItem: FunctionComponent<Props> = observer(
              </div>
            )}
            <div className={'tag-icon draggable mr-2'} ref={dragRef}>
-              <Icon type="hashtag" className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
+              <Icon type={tag.iconString as IconType} className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
            </div>
            {isEditing ? (
              <input
                className={'title editing focus:shadow-none focus:outline-none'}
-                id={`react-tag-${tag.uuid}`}
+                id={`react-tag-${tag.uuid}-${type}`}
                onBlur={onBlur}
                onInput={onInput}
                value={title}
@@ -278,7 +284,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(
            ) : (
              <div
                className={'title overflow-hidden text-left focus:shadow-none focus:outline-none'}
-                id={`react-tag-${tag.uuid}`}
+                id={`react-tag-${tag.uuid}-${type}`}
              >
                {title}
              </div>
@@ -334,7 +340,8 @@ export const TagsListItem: FunctionComponent<Props> = observer(
                  level={level + 1}
                  key={tag.uuid}
                  tag={tag}
-                  tagsState={tagsState}
+                  type={type}
+                  navigationController={navigationController}
                  features={features}
                  linkingController={linkingController}
                  onContextMenu={onContextMenu}
--- a/packages/web/src/javascripts/Components/Tags/TagsSection.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsSection.tsx
@@ -52,22 +52,37 @@ const TagsSection: FunctionComponent<Props> = ({ viewControllerManager }) => {
  }, [viewControllerManager, checkIfMigrationNeeded])

  return (
-    <section>
-      <div className={'section-title-bar'}>
-        <div className="section-title-bar-header">
-          <TagsSectionTitle
-            features={viewControllerManager.featuresController}
-            hasMigration={hasMigration}
-            onClickMigration={runMigration}
-          />
-          <TagsSectionAddButton
-            tags={viewControllerManager.navigationController}
-            features={viewControllerManager.featuresController}
-          />
+    <>
+      {viewControllerManager.navigationController.starredTags.length > 0 && (
+        <section>
+          <div className={'section-title-bar'}>
+            <div className="section-title-bar-header">
+              <div className="title text-sm">
+                <span className="font-bold">Favorites</span>
+              </div>
+            </div>
+          </div>
+          <TagsList type="favorites" viewControllerManager={viewControllerManager} />
+        </section>
+      )}
+
+      <section>
+        <div className={'section-title-bar'}>
+          <div className="section-title-bar-header">
+            <TagsSectionTitle
+              features={viewControllerManager.featuresController}
+              hasMigration={hasMigration}
+              onClickMigration={runMigration}
+            />
+            <TagsSectionAddButton
+              tags={viewControllerManager.navigationController}
+              features={viewControllerManager.featuresController}
+            />
+          </div>
        </div>
-      </div>
-      <TagsList viewControllerManager={viewControllerManager} />
-    </section>
+        <TagsList type="all" viewControllerManager={viewControllerManager} />
+      </section>
+    </>
  )
 }

--- a/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
+++ b/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
@@ -64,7 +64,7 @@ export class ItemListController
  items: ListableContentItem[] = []
  notesToDisplay = 0
  pageSize = 0
-  panelTitle = 'All Notes'
+  panelTitle = 'Notes'
  panelWidth = 0
  renderedItems: ListableContentItem[] = []
  searchSubmitted = false
--- a/packages/web/src/javascripts/Controllers/LinkingController.tsx
+++ b/packages/web/src/javascripts/Controllers/LinkingController.tsx
@@ -236,9 +236,11 @@ export class LinkingController extends AbstractViewController {
    } else if (item instanceof FileItem) {
      const icon = this.application.iconsController.getIconForFileType(item.mimeType)
      return [icon, 'text-info']
+    } else if (item instanceof SNTag) {
+      return [item.iconString as IconType, 'text-info']
    }

-    return ['hashtag', 'text-info']
+    throw new Error('Unhandled case in getLinkedItemIcon')
  }

  activateItem = async (item: LinkableItem): Promise<AppPaneId | undefined> => {
--- a/packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts
+++ b/packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts
@@ -14,6 +14,7 @@ import {
  SystemViewId,
  InternalEventBus,
  InternalEventPublishStrategy,
+  VectorIconNameOrEmoji,
 } from '@standardnotes/snjs'
 import { action, computed, makeAutoObservable, makeObservable, observable, reaction, runInAction } from 'mobx'
 import { WebApplication } from '../../Application/Application'
@@ -24,6 +25,7 @@ import { AnyTag } from './AnyTagType'
 import { CrossControllerEvent } from '../CrossControllerEvent'
 import { AbstractViewController } from '../Abstract/AbstractViewController'
 import { Persistable } from '../Abstract/Persistable'
+import { TagListSectionType } from '@/Components/Tags/TagListSection'

 export type NavigationControllerPersistableValue = {
  selectedTagUuid: AnyTag['uuid']
@@ -35,14 +37,17 @@ export class NavigationController
 {
  tags: SNTag[] = []
  smartViews: SmartView[] = []
+  starredTags: SNTag[] = []
  allNotesCount_ = 0
  selectedUuid: AnyTag['uuid'] | undefined = undefined
  selected_: AnyTag | undefined
  previouslySelected_: AnyTag | undefined
  editing_: SNTag | SmartView | undefined
+  editingFrom?: TagListSectionType
  addingSubtagTo: SNTag | undefined

  contextMenuOpen = false
+  contextMenuOpenFrom?: TagListSectionType
  contextMenuPosition: { top?: number; left: number; bottom?: number } = {
    top: 0,
    left: 0,
@@ -66,6 +71,7 @@ export class NavigationController

    makeObservable(this, {
      tags: observable,
+      starredTags: observable,
      smartViews: observable.ref,
      hasAtLeastOneFolder: computed,
      allNotesCount_: observable,
@@ -111,7 +117,7 @@ export class NavigationController
      this.application.streamItems([ContentType.Tag, ContentType.SmartView], ({ changed, removed }) => {
        runInAction(() => {
          this.tags = this.application.items.getDisplayableTags()
-
+          this.starredTags = this.tags.filter((tag) => tag.starred)
          this.smartViews = this.application.items.getSmartViews()

          const currentSelectedTag = this.selected_
@@ -266,6 +272,10 @@ export class NavigationController
    this.addingSubtagTo = tag
  }

+  setContextMenuOpenFrom(section: TagListSectionType): void {
+    this.contextMenuOpenFrom = section
+  }
+
  setContextMenuOpen(open: boolean): void {
    this.contextMenuOpen = open
  }
@@ -476,6 +486,22 @@ export class NavigationController
      .catch(console.error)
  }

+  public async setFavorite(tag: SNTag, favorite: boolean) {
+    return this.application.mutator
+      .changeAndSaveItem<TagMutator>(tag, (mutator) => {
+        mutator.starred = favorite
+      })
+      .catch(console.error)
+  }
+
+  public setIcon(tag: SNTag, icon: VectorIconNameOrEmoji) {
+    this.application.mutator
+      .changeAndSaveItem<TagMutator>(tag, (mutator) => {
+        mutator.iconString = icon
+      })
+      .catch(console.error)
+  }
+
  public get editingTag(): SNTag | SmartView | undefined {
    return this.editing_
  }
@@ -500,6 +526,7 @@ export class NavigationController
  }

  public undoCreateNewTag() {
+    this.editingFrom = undefined
    this.editing_ = undefined
    const previousTag = this.previouslySelected_ || this.smartViews[0]
    void this.setSelectedTag(previousTag)
@@ -528,6 +555,7 @@ export class NavigationController
    const hasDuplicatedTitle = siblings.some((other) => other.title.toLowerCase() === newTitle.toLowerCase())

    runInAction(() => {
+      this.editingFrom = undefined
      this.editing_ = undefined
    })

--- a/yarn.lock
+++ b/yarn.lock
@@ -6666,6 +6666,7 @@ __metadata:
    "@types/jest": ^28.1.5
    "@types/lodash": ^4.14.182
    "@typescript-eslint/eslint-plugin": ^5.30.0
+    eslint: "*"
    eslint-plugin-prettier: "*"
    jest: ^28.1.2
    lodash: ^4.17.21
				`@@ -0,0 +1 @@`
				`export type IconPickerType = 'icon' \| 'emoji'`
				`@@ -0,0 +1 @@`
				`export type TagListSectionType = 'all' \| 'favorites'`