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(