WIP

src/app/components/note/note.component.html

@@ -7,6 +7,12 @@
     <textarea #textarea [(ngModel)]="note.content" rows="1"></textarea>
   </div>
 
+  <ul style="margin: 1rem 0; display: flex; gap: .5rem; list-style-type: none; padding: 0">
+    <li *ngFor="let tag of note.cache.tags" style="background: black; color: white; border-radius: 1rem; padding: .25rem .5rem; font-size: .8rem;">
+       {{ tag }}
+    </li>
+  </ul>
+
   <footer class="note__footer">
     <button class="note__button">Créer une note associée</button>
     <button class="note__button" (click)="delete()">Supprimer</button>

src/app/components/note/note.component.ts

@@ -5,6 +5,7 @@ import { Note } from '../../models/note';
 import * as HyperMD from 'hypermd';
 import { cm_t } from "hypermd";
 import { InMemoryNoteService } from "../../services/in-memory-note.service";
+import slugify from "slugify";
 
 @Component({
   selector: 'app-note',
@@ -41,7 +42,7 @@ export class NoteComponent implements OnInit, OnChanges {
         }
       });
 
-      this.editor.on('change',  () => this.autosave());
+      this.editor.on('change',  () => this.onChange());
       this.editor.on('blur',    () => this.onBlur());
 
       // Forces to recalculate the visual position of the cursor after a blur which would have hidden a nearby token.
@@ -55,13 +56,13 @@ export class NoteComponent implements OnInit, OnChanges {
       const currentNote  = changes['note'].currentValue;
 
 
-      if (this.isExternalUpdate(previousNote, currentNote)) {
+      if (this.isExternalUpdate(currentNote)) {
         this.editor.setValue(changes['note'].currentValue.content);
       }
     }
   }
 
-  isExternalUpdate(previousDate: Note, currentNote: Note): boolean {
+  isExternalUpdate(currentNote: Note): boolean {
     return this.savedAt !== currentNote.updatedAt;
   }
 
@@ -83,6 +84,26 @@ export class NoteComponent implements OnInit, OnChanges {
     }
   }
 
+  onChange() {
+    this.autosave();
+  }
+
+  cacheTitle() {
+    const titleMatch = this.note.content.match(/^# (?<title>.*)(?:\n|$)/);
+
+    if (titleMatch && titleMatch.groups && titleMatch?.groups['title']) {
+      this.note.cache.title = titleMatch?.groups['title'];
+    }
+  }
+
+  cacheTags() {
+    const hashtags = [...this.note.content.matchAll(/#(\w+)/g)];
+
+    if (hashtags) {
+      this.note.cache.tags = hashtags.map(tag => tag[1]);
+    }
+  }
+
   autosave() {
     this.clearAutosaveTimeout();
     this.autosaveTimeout = setTimeout(() => this.save(), this.autosaveDelay);
@@ -101,6 +122,8 @@ export class NoteComponent implements OnInit, OnChanges {
       clearTimeout(this.autosaveTimeout);
       this.note.content = this.editor.getValue();
       this.note.updatedAt = this.savedAt = Date.now();
+      this.cacheTitle();
+      this.cacheTags();
       this.noteService.persist(this.note);
 
     } else {

src/app/components/taskbar/taskbar.component.html

@@ -1,6 +1,6 @@
 <div class="taskbar">
   <div class="taskbar__body">
-    <button class="taskbar__button" (click)="createNote()">
+    <button class="taskbar__button -primary" (click)="createNote()">
       Créer
     </button>
 

src/app/models/note.ts

@@ -3,4 +3,8 @@ export interface Note {
   createdAt: number;
   updatedAt?: number;
   content: string;
+  cache: {
+    title: string;
+    tags: Array<string>;
+  }
 }

src/app/services/firestore-note.service.ts

@@ -31,7 +31,11 @@ export class FirestoreNoteService implements NoteService, OnDestroy {
   create(): Promise<void> {
     const note = {
       createdAt: Date.now(),
-      content: ''
+      content: '',
+      cache: {
+        title: '',
+        tags: [],
+      }
     };
 
     return this.persist(note);
@@ -199,7 +203,11 @@ export class FirestoreNoteService implements NoteService, OnDestroy {
       id:         firestoreNote.id,
       createdAt:  firestoreNote.createdAt.toMillis(),
       updatedAt:  firestoreNote.updatedAt ? firestoreNote.updatedAt.toMillis() : undefined,
-      content:    firestoreNote.content
+      content:    firestoreNote.content,
+      cache: {
+        title: '',
+        tags: [],
+      }
     }
   }
 

src/app/services/in-memory-note.service.ts

@@ -50,21 +50,28 @@ export class InMemoryNoteService implements NoteService{
       this.notes.push({
         id: `${i}`,
         createdAt: Date.parse(`2022-${month}-${day}T${hours}:${minutes}`),
-        content: ''
+        content: '',
+        cache: {
+          title: '',
+          tags: [],
+        }
       });
     }
 
     this.notes.sort((noteA, noteB) => noteA.createdAt > noteB.createdAt ? 1 : -1)
 
     this.notes.forEach((note, index) => {
-      let content = `# Lorem ipsum ${index+1}`;
+      const title = `# Lorem ipsum ${index+1}`;
+      let content = title;
 
       for (let line = 0, lineMax = Math.random() * 5; line < lineMax; line++) {
         content += '\n\n';
         content += loremIpsumParagraph.slice(0, Math.floor(11 + Math.random() * loremIpsumParagraph.length)) + '.';
       }
 
       note.content = content;
+      note.cache.title = title;
+
       //note.content = `${index + 1}`; // TODO: remove
     })
   }
@@ -77,7 +84,11 @@ export class InMemoryNoteService implements NoteService{
     const note = {
       id: `${this.notes.length}`,
       createdAt: Date.now(),
-      content: ''
+      content: '',
+      cache: {
+        title: '',
+        tags: [],
+      }
     };
 
     return this.persist(note);

src/styles/_note.scss

@@ -31,8 +31,11 @@
     margin-right: auto;
     margin-left: auto;
     z-index: 1;
-    background: var(--color-primary);
+    background: white;
+    color: var(--color-primary);
+    border: 1px solid currentColor;
     border-radius: .5rem;
+    box-shadow: 0 0 .3rem #B85FC822, 0 .3rem .6rem #B85FC844;
     transform: scale(0);
     transform-origin: bottom;
     width: fit-content;
@@ -133,6 +136,6 @@
     font-size: 0.8rem;
     padding: 0.5rem;
     border: none;
-    color: white;
+    color: inherit;
   }
 }

src/styles/_taskbar.scss

@@ -21,6 +21,7 @@
     border-radius: .5rem;
     margin: 0 auto;
     height: 3rem;
+    padding: .25rem;
     width: fit-content;
     box-shadow: 0 0 .3rem #7c50de22, 0 .3rem .6rem #7c50de44;
   }
@@ -31,8 +32,13 @@
     font: inherit;
     font-size: 0.9rem;
     color: var(--color-secondary);
-    border-radius: .5rem;
+    border-radius: .25rem;
     padding: .25rem .75rem;
     background: none;
+
+    &.-primary {
+      background: var(--color-secondary);
+      color: white;
+    }
   }
 }