feat: modify current tags to v4 style

app/assets/javascripts/app.ts

@@ -64,6 +64,7 @@ import { MultipleSelectedNotesDirective } from './components/MultipleSelectedNot
 import { NotesContextMenuDirective } from './components/NotesContextMenu';
 import { NotesOptionsPanelDirective } from './components/NotesOptionsPanel';
 import { IconDirective } from './components/Icon';
+import { NoteTagsDirective } from './components/NoteTags';
 
 function reloadHiddenFirefoxTab(): boolean {
   /**
@@ -157,7 +158,8 @@ const startApplication: StartApplication = async function startApplication(
     .directive('multipleSelectedNotesPanel', MultipleSelectedNotesDirective)
     .directive('notesContextMenu', NotesContextMenuDirective)
     .directive('notesOptionsPanel', NotesOptionsPanelDirective)
-    .directive('icon', IconDirective);
+    .directive('icon', IconDirective)
+    .directive('noteTags', NoteTagsDirective);
 
   // Filters
   angular.module('app').filter('trusted', ['$sce', trusted]);

app/assets/javascripts/components/NoteTags.tsx

@@ -0,0 +1,23 @@
+import { AppState } from "@/ui_models/app_state";
+import { observer } from "mobx-react-lite";
+import { toDirective } from "./utils";
+import { Icon } from "./Icon";
+
+type Props = {
+  appState: AppState;
+}
+
+const NoteTags = observer(({ appState }: Props) => {
+  return (
+    <div className="flex mt-2">
+      {appState.notes.activeNoteTags.map(tag => (
+        <span className="bg-contrast rounded text-sm color-text p-1 flex items-center mr-2">
+          <Icon type="hashtag" className="small color-neutral mr-1" />
+          {tag.title}
+        </span>
+      ))}
+    </div>
+  );
+});
+
+export const NoteTagsDirective = toDirective<Props>(NoteTags);

app/assets/javascripts/ui_models/app_state/notes_state.ts

@@ -29,6 +29,7 @@ export class NotesState {
   };
   contextMenuMaxHeight: number | 'auto' = 'auto';
   showProtectedWarning = false;
+  activeNoteTags: SNTag[] = [];
 
   constructor(
     private application: WebApplication,
@@ -40,6 +41,7 @@ export class NotesState {
       contextMenuOpen: observable,
       contextMenuPosition: observable,
       showProtectedWarning: observable,
+      activeNoteTags: observable,
 
       selectedNotesCount: computed,
       trashedNotesCount: computed,
@@ -164,6 +166,11 @@ export class NotesState {
     } else {
       this.activeEditor.setNote(note);
     }
+    
+    runInAction(() => {
+      this.activeNoteTags = this.application.getAppState().getNoteTags(note);
+    });
+
     await this.onActiveEditorChanged();
 
     if (note.waitingForKey) {

app/assets/javascripts/views/editor/editor-view.pug

@@ -30,7 +30,7 @@
       div.flex-grow(
         ng-class="{'locked' : self.noteLocked}"
       )
-        .title
+        .title.overflow-auto
           input#note-title-editor.input(
             ng-blur='self.onTitleBlur()',
             ng-change='self.onTitleChange()',
@@ -48,16 +48,20 @@
               ng-style="self.notesLocked && {'pointer-events' : 'none'}",
               application='self.application'
               )
-          input.tags-input(
-            ng-blur='self.onTagsInputBlur()',
-            ng-disabled='self.noteLocked',
-            ng-if='!self.state.tagsComponent',
-            ng-keyup='$event.keyCode == 13 && $event.target.blur();',
-            ng-model='self.editorValues.tagsInputValue',
-            placeholder='#tags',
-            spellcheck='false',
-            type='text'
+          div.flex
+            note-tags(
+              app-state='self.appState'
             )
+            input.tags-input(
+              ng-blur='self.onTagsInputBlur()',
+              ng-disabled='self.noteLocked',
+              ng-if='!self.state.tagsComponent',
+              ng-keyup='$event.keyCode == 13 && $event.target.blur();',
+              ng-model='self.editorValues.tagsInputValue',
+              placeholder='#tags',
+              spellcheck='false',
+              type='text'
+              )
       div.flex.items-center
         #save-status
           .message(

app/assets/stylesheets/_editor.scss

@@ -106,7 +106,6 @@ $heading-height: 75px;
     .tags-input {
       background-color: transparent;
       color: var(--sn-stylekit-foreground-color);
-      width: 100%;
       border: none;
 
       &:focus {

app/assets/stylesheets/_sn.scss

@@ -53,6 +53,14 @@
   margin-bottom: 0.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
 .py-1\.5  {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -167,10 +175,18 @@
   overflow-y: scroll;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .items-start {
   align-items: flex-start;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.
@@ -205,6 +221,11 @@
   @extend .fill-current;
 }
 
+.sn-icon.small {
+  @extend .h-3\.5;
+  @extend .w-3\.5;
+}
+
 .sn-dropdown {
   @extend .bg-default;
   @extend .min-w-80;