Increased the version number

(changelog) Updated the changelog

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "12.2.0",
+    "version": "12.3.0",
     "license": "https://themeforest.net/licenses/standard",
     "private": true,
     "scripts": {

src/@fuse/components/masonry/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/components/card/public-api';

src/@fuse/components/masonry/masonry.component.html

@@ -0,0 +1,3 @@
+<div class="flex">
+    <ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container>
+</div>

src/@fuse/components/masonry/masonry.component.ts

@@ -0,0 +1,87 @@
+import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { FuseAnimations } from '@fuse/animations';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+
+@Component({
+    selector     : 'fuse-masonry',
+    templateUrl  : './masonry.component.html',
+    styleUrls    : ['./masonry.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : FuseAnimations,
+    exportAs     : 'fuseMasonry'
+})
+export class FuseMasonryComponent implements OnChanges, AfterViewInit
+{
+    @Input() columnsTemplate: TemplateRef<any>;
+    @Input() columns: number;
+    @Input() items: any[] = [];
+    distributedColumns: any[] = [];
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Columns
+        if ( 'columns' in changes )
+        {
+            // Distribute the items
+            this._distributeItems();
+        }
+
+        // Items
+        if ( 'items' in changes )
+        {
+            // Distribute the items
+            this._distributeItems();
+        }
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Distribute the items for the first time
+        this._distributeItems();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Distribute items into columns
+     */
+    private _distributeItems(): void
+    {
+        // Return an empty array if there are no items
+        if ( this.items.length === 0 )
+        {
+            this.distributedColumns = [];
+            return;
+        }
+
+        // Prepare the distributed columns array
+        this.distributedColumns = Array.from(Array(this.columns), item => ({items: []}));
+
+        // Distribute the items to columns
+        for ( let i = 0; i < this.items.length; i++ )
+        {
+            this.distributedColumns[i % this.columns].items.push(this.items[i]);
+        }
+    }
+}

src/@fuse/components/masonry/masonry.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component';
+
+@NgModule({
+    declarations: [
+        FuseMasonryComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseMasonryComponent
+    ]
+})
+export class FuseMasonryModule
+{
+}

src/@fuse/components/masonry/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@fuse/components/masonry/masonry.component';
+export * from '@fuse/components/masonry/masonry.module';

src/@fuse/styles/components/example-viewer.scss

@@ -36,7 +36,6 @@
         .mat-tab-body-content {
 
             .fuse-highlight {
-                margin: -24px;
 
                 pre {
                     margin: 0;

src/@fuse/version/fuse-version.ts

@@ -1,4 +1,4 @@
 import { Version } from '@fuse/version/version';
 
-const __FUSE_VERSION__ = '12.2.0';
+const __FUSE_VERSION__ = '12.3.0';
 export const FUSE_VERSION = new Version(__FUSE_VERSION__).full;

src/app/app.routing.ts

@@ -90,6 +90,7 @@ export const appRoutes: Route[] = [
                 {path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
                 {path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
                 {path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
+                {path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
                 {path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
             ]},
 

src/app/mock-api/apps/notes/api.ts

@@ -0,0 +1,264 @@
+import { Injectable } from '@angular/core';
+import { cloneDeep } from 'lodash-es';
+import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
+import { labels as labelsData, notes as notesData } from 'app/mock-api/apps/notes/data';
+import { FuseMockApiUtils } from '@fuse/lib/mock-api';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NotesMockApi
+{
+    private _labels: any[] = labelsData;
+    private _notes: any[] = notesData;
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMockApiService: FuseMockApiService)
+    {
+        // Register Mock API handlers
+        this.registerHandlers();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register Mock API handlers
+     */
+    registerHandlers(): void
+    {
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/notes/labels')
+            .reply(() => {
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Create a new label
+                const label = {
+                    id   : FuseMockApiUtils.guid(),
+                    title: request.body.title
+                };
+
+                // Update the labels
+                this._labels.push(label);
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - PATCH
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPatch('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Get label
+                const updatedLabel = request.body.label;
+
+                // Update the label
+                this._labels = this._labels.map((label) => {
+                    if ( label.id === updatedLabel.id )
+                    {
+                        return {
+                            ...label,
+                            title: updatedLabel.title
+                        };
+                    }
+
+                    return label;
+                });
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - DELETE
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onDelete('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Get label id
+                const id = request.params.get('id');
+
+                // Delete the label
+                this._labels = this._labels.filter((label) => label.id !== id);
+
+                // Go through notes and delete the label
+                this._notes = this._notes.map((note) => ({
+                    ...note,
+                    labels: note.labels.filter((item) => item !== id)
+                }));
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Note Tasks - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes/tasks')
+            .reply(({request}) => {
+
+                // Get note and task
+                let updatedNote = request.body.note;
+                const task = request.body.task;
+
+                // Update the note
+                this._notes = this._notes.map((note) => {
+                    if ( note.id === updatedNote.id )
+                    {
+                        // Update the tasks
+                        if ( !note.tasks )
+                        {
+                            note.tasks = [];
+                        }
+
+                        note.tasks.push({
+                            id       : FuseMockApiUtils.guid(),
+                            content  : task,
+                            completed: false
+                        });
+
+                        // Update the updatedNote with the new task
+                        updatedNote = cloneDeep(note);
+
+                        return {
+                            ...note
+                        };
+                    }
+
+                    return note;
+                });
+
+                return [
+                    200,
+                    updatedNote
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/notes/all')
+            .reply(() => {
+
+                // Clone the labels and notes
+                const labels = cloneDeep(this._labels);
+                let notes = cloneDeep(this._notes);
+
+                // Attach the labels to the notes
+                notes = notes.map((note) => (
+                    {
+                        ...note,
+                        labels: note.labels.map((labelId) => labels.find((label) => label.id === labelId))
+                    }
+                ));
+
+                return [
+                    200,
+                    notes
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get note
+                const note = request.body.note;
+
+                // Add an id
+                note.id = FuseMockApiUtils.guid();
+
+                // Push the note
+                this._notes.push(note);
+
+                return [
+                    200,
+                    note
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - PATCH
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPatch('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get note
+                const updatedNote = request.body.updatedNote;
+
+                // Update the note
+                this._notes = this._notes.map((note) => {
+                    if ( note.id === updatedNote.id )
+                    {
+                        return {
+                            ...updatedNote
+                        };
+                    }
+
+                    return note;
+                });
+
+                return [
+                    200,
+                    updatedNote
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - DELETE
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onDelete('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get the id
+                const id = request.params.get('id');
+
+                // Find the note and delete it
+                this._notes.forEach((item, index) => {
+
+                    if ( item.id === id )
+                    {
+                        this._notes.splice(index, 1);
+                    }
+                });
+
+                // Return the response
+                return [200, true];
+            });
+    }
+}

src/app/mock-api/apps/notes/data.ts

@@ -0,0 +1,314 @@
+/* tslint:disable:max-line-length */
+import moment from 'moment';
+
+export const labels = [
+    {
+        id   : 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
+        title: 'Family'
+    },
+    {
+        id   : 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
+        title: 'Work'
+    },
+    {
+        id   : 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
+        title: 'Tasks'
+    },
+    {
+        id   : '6c288794-47eb-4605-8bdf-785b61a449d3',
+        title: 'Priority'
+    },
+    {
+        id   : 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+        title: 'Personal'
+    },
+    {
+        id   : '2dc11344-3507-48e0-83d6-1c047107f052',
+        title: 'Friends'
+    }
+];
+
+export const notes = [
+    {
+        id       : '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
+        title    : '',
+        content  : 'Find a new company name',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(10).minute(19).subtract(98, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
+        title    : '',
+        content  : 'Send the photos of last summer to John',
+        tasks    : null,
+        image    : 'assets/images/cards/14-640x480.jpg',
+        reminder : null,
+        labels   : [
+            'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : false,
+        createdAt: moment().hour(15).minute(37).subtract(80, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
+        title    : '',
+        content  : 'Update the design of the theme',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['6c288794-47eb-4605-8bdf-785b61a449d3'],
+        archived : false,
+        createdAt: moment().hour(19).minute(27).subtract(74, 'day').toISOString(),
+        updatedAt: moment().hour(15).minute(36).subtract(50, 'day').toISOString()
+    },
+    {
+        id       : '89861bd4-0144-4bb4-8b39-332ca10371d5',
+        title    : '',
+        content  : 'Theming support for all apps',
+        tasks    : null,
+        image    : null,
+        reminder : moment().hour(12).minute(34).add(50, 'day').toISOString(),
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(12).minute(34).subtract(59, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
+        title    : 'Gift Ideas',
+        content  : 'Stephanie\'s birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)',
+        tasks    : [
+            {
+                id       : '330a924f-fb51-48f6-a374-1532b1dd353d',
+                content  : 'Scarf',
+                completed: false
+            },
+            {
+                id       : '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
+                content  : 'A new bike helmet',
+                completed: true
+            },
+            {
+                id       : 'bcb8923b-33cd-42c2-9203-170994fa24f5',
+                content  : 'Necklace',
+                completed: false
+            },
+            {
+                id       : '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
+                content  : 'Flowers',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : null,
+        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived : false,
+        createdAt: moment().hour(16).minute(4).subtract(47, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '71d223bb-abab-4183-8919-cd3600a950b4',
+        title    : 'Shopping list',
+        content  : '',
+        tasks    : [
+            {
+                id       : 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
+                content  : 'Bread',
+                completed: true
+            },
+            {
+                id       : '34013111-ab2c-4b2f-9352-d2ae282f57d3',
+                content  : 'Milk',
+                completed: false
+            },
+            {
+                id       : '0fbdea82-cc79-4433-8ee4-54fd542c380d',
+                content  : 'Onions',
+                completed: false
+            },
+            {
+                id       : '66490222-743e-4262-ac91-773fcd98a237',
+                content  : 'Coffee',
+                completed: true
+            },
+            {
+                id       : 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
+                content  : 'Toilet Paper',
+                completed: true
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        labels   : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
+        archived : false,
+        createdAt: moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '11fbeb98-ae5e-41ad-bed6-330886fd7906',
+        title    : 'Keynote Schedule',
+        content  : '',
+        tasks    : [
+            {
+                id       : '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
+                content  : 'Breakfast',
+                completed: true
+            },
+            {
+                id       : 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
+                content  : 'Opening ceremony',
+                completed: true
+            },
+            {
+                id       : '7a721b6d-9d85-48e0-b6c3-f927079af582',
+                content  : 'Talk 1: How we did it!',
+                completed: true
+            },
+            {
+                id       : 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
+                content  : 'Talk 2: How can you do it!',
+                completed: false
+            },
+            {
+                id       : 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
+                content  : 'Lunch break',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(11).minute(27).subtract(14, 'day').toISOString(),
+        labels   : [
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
+            'e2f749f5-41ed-49d0-a92a-1c83d879e371'
+        ],
+        archived : false,
+        createdAt: moment().hour(11).minute(27).subtract(24, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
+        title    : '',
+        content  : 'Organize the dad\'s surprise retirement party',
+        tasks    : null,
+        image    : null,
+        reminder : moment().hour(14).minute(56).subtract(25, 'day').toISOString(),
+        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived : false,
+        createdAt: moment().hour(14).minute(56).subtract(20, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '6bc9f002-1675-417c-93c4-308fba39023e',
+        title    : 'Plan the road trip',
+        content  : '',
+        tasks    : null,
+        image    : 'assets/images/cards/17-640x480.jpg',
+        reminder : null,
+        labels   : [
+            '2dc11344-3507-48e0-83d6-1c047107f052',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : false,
+        createdAt: moment().hour(9).minute(32).subtract(15, 'day').toISOString(),
+        updatedAt: moment().hour(17).minute(6).subtract(12, 'day').toISOString()
+    },
+    {
+        id       : '15188348-78aa-4ed6-b5c2-028a214ba987',
+        title    : 'Office Address',
+        content  : '933 8th Street Stamford, CT 06902',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(20).minute(5).subtract(12, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '1dbfc685-1a0a-4070-9ca7-ed896c523037',
+        title    : 'Tasks',
+        content  : '',
+        tasks    : [
+            {
+                id       : '004638bf-3ee6-47a5-891c-3be7b9f3df09',
+                content  : 'Wash the dishes',
+                completed: true
+            },
+            {
+                id       : '86e6820b-1ae3-4c14-a13e-35605a0d654b',
+                content  : 'Walk the dog',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(13).minute(43).subtract(2, 'day').toISOString(),
+        labels   : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
+        archived : false,
+        createdAt: moment().hour(13).minute(43).subtract(7, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '49548409-90a3-44d4-9a9a-f5af75aa9a66',
+        title    : '',
+        content  : 'Dinner with parents',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
+            '6c288794-47eb-4605-8bdf-785b61a449d3'
+        ],
+        archived : false,
+        createdAt: moment().hour(7).minute(12).subtract(2, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title    : '',
+        content  : 'Re-fill the medicine cabinet',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+            '6c288794-47eb-4605-8bdf-785b61a449d3'
+        ],
+        archived : true,
+        createdAt: moment().hour(17).minute(14).subtract(100, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title    : '',
+        content  : 'Update the icons pack',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : true,
+        createdAt: moment().hour(10).minute(29).subtract(85, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '46214383-f8e7-44da-aa2e-0b685e0c5027',
+        title    : 'Team Meeting',
+        content  : 'Talk about the future of the web apps',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'e2f749f5-41ed-49d0-a92a-1c83d879e371',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : true,
+        createdAt: moment().hour(15).minute(30).subtract(69, 'day').toISOString(),
+        updatedAt: null
+    }
+];

src/app/mock-api/common/navigation/data.ts

@@ -127,6 +127,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
                     classes: 'px-2 bg-pink-600 text-white rounded-full'
                 }
             },
+            {
+                id   : 'apps.notes',
+                title: 'Notes',
+                type : 'basic',
+                icon : 'heroicons_outline:pencil-alt',
+                link : '/apps/notes'
+            },
             {
                 id   : 'apps.tasks',
                 title: 'Tasks',
@@ -906,7 +913,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:speakerphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '12.2.0',
+                    title  : '12.3.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },
@@ -1242,6 +1249,13 @@ export const futuristicNavigation: FuseNavigationItem[] = [
                     classes: 'px-2 bg-black bg-opacity-25 text-white rounded-full'
                 }
             },
+            {
+                id   : 'apps.notes',
+                title: 'Notes',
+                type : 'basic',
+                icon : 'heroicons_outline:pencil-alt',
+                link : '/apps/notes'
+            },
             {
                 id   : 'apps.tasks',
                 title: 'Tasks',

src/app/mock-api/index.ts

@@ -11,6 +11,7 @@ import { IconsMockApi } from 'app/mock-api/ui/icons/api';
 import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api';
 import { MessagesMockApi } from 'app/mock-api/common/messages/api';
 import { NavigationMockApi } from 'app/mock-api/common/navigation/api';
+import { NotesMockApi } from 'app/mock-api/apps/notes/api';
 import { NotificationsMockApi } from 'app/mock-api/common/notifications/api';
 import { ProjectMockApi } from 'app/mock-api/dashboards/project/api';
 import { SearchMockApi } from 'app/mock-api/common/search/api';
@@ -32,6 +33,7 @@ export const mockApiServices = [
     MailboxMockApi,
     MessagesMockApi,
     NavigationMockApi,
+    NotesMockApi,
     NotificationsMockApi,
     ProjectMockApi,
     SearchMockApi,

src/app/modules/admin/apps/mailbox/details/details.component.html

@@ -132,7 +132,7 @@
             fuseScrollReset>
 
             <!-- Thread -->
-            <div class="flex flex-col flex-0 w-full border rounded-2xl overflow-hidden bg-card dark:bg-black dark:bg-opacity-10">
+            <div class="flex flex-col flex-0 w-full shadow rounded-2xl overflow-hidden bg-card dark:bg-black dark:bg-opacity-10">
 
                 <div class="flex flex-col py-8 px-6">
 

src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col flex-auto w-full">
     <!-- Title -->
-    <div class="mt-10 mb-8 mx-6 text-5xl font-extrabold tracking-tight leading-none">Mailbox</div>
+    <div class="mt-10 mb-8 mx-6 text-4xl font-extrabold tracking-tight leading-none">Mailbox</div>
 
     <!-- Compose button -->
     <button

src/app/modules/admin/apps/notes/details/details.component.html

@@ -0,0 +1,176 @@
+<div class="flex flex-col flex-auto md:w-160 md:min-w-160 -m-6">
+    <ng-container *ngIf="(note$ | async) as note">
+        <!-- Image -->
+        <ng-container *ngIf="note.image">
+            <div class="relative w-full">
+                <div class="absolute right-0 bottom-0 p-4">
+                    <button
+                        mat-icon-button
+                        (click)="removeImage(note)">
+                        <mat-icon
+                            class="text-white"
+                            [svgIcon]="'heroicons_outline:trash'"></mat-icon>
+                    </button>
+                </div>
+                <img
+                    class="w-full object-cover"
+                    [src]="note.image">
+            </div>
+        </ng-container>
+        <div class="m-4">
+            <!-- Title -->
+            <div>
+                <input
+                    class="w-full p-2 text-2xl"
+                    [placeholder]="'Title'"
+                    [(ngModel)]="note.title"
+                    (input)="updateNoteDetails(note)">
+            </div>
+            <!-- Note -->
+            <div>
+                <textarea
+                    class="w-full my-2.5 p-2"
+                    fuseAutogrow
+                    [placeholder]="'Note'"
+                    [(ngModel)]="note.content"
+                    (input)="updateNoteDetails(note)"></textarea>
+            </div>
+            <!-- Tasks -->
+            <ng-container *ngIf="note.tasks">
+                <div class="mx-2 mt-4 space-y-1.5">
+                    <ng-container *ngFor="let task of note.tasks; trackBy: trackByFn">
+                        <div class="group flex items-center">
+                            <mat-checkbox
+                                class="flex items-center"
+                                [color]="'primary'"
+                                [(ngModel)]="task.completed"
+                                (change)="updateTaskOnNote(note, task)"></mat-checkbox>
+                            <input
+                                class="w-full px-1 py-0.5"
+                                [ngClass]="{'text-secondary line-through': task.completed}"
+                                [placeholder]="'Task'"
+                                [(ngModel)]="task.content"
+                                (input)="updateTaskOnNote(note, task)">
+                            <mat-icon
+                                class="hidden group-hover:flex ml-auto icon-size-5 cursor-pointer"
+                                [svgIcon]="'heroicons_solid:x'"
+                                (click)="removeTaskFromNote(note, task)"></mat-icon>
+                        </div>
+                    </ng-container>
+                    <div class="flex items-center">
+                        <mat-icon
+                            class="-ml-0.5 icon-size-5 text-hint"
+                            [svgIcon]="'heroicons_solid:plus'"></mat-icon>
+                        <input
+                            class="w-full ml-1.5 px-1 py-0.5"
+                            [placeholder]="'Add task'"
+                            (keydown.enter)="addTaskToNote(note, newTaskInput.value); newTaskInput.value = ''"
+                            #newTaskInput>
+                    </div>
+                </div>
+            </ng-container>
+            <!-- Labels -->
+            <ng-container *ngIf="note.labels && note.labels.length">
+                <div class="flex flex-wrap items-center mx-1 mt-6">
+                    <ng-container *ngFor="let label of note.labels; trackBy: trackByFn">
+                        <div class="flex items-center m-1 py-0.5 px-3 rounded-full text-sm font-medium text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
+                            <div>
+                                {{label.title}}
+                            </div>
+                            <mat-icon
+                                class="ml-1 icon-size-4 cursor-pointer"
+                                [svgIcon]="'heroicons_solid:x-circle'"
+                                (click)="toggleLabelOnNote(note, label)"></mat-icon>
+                        </div>
+                    </ng-container>
+                </div>
+            </ng-container>
+            <!-- Add Actions -->
+            <ng-container *ngIf="!note.id">
+                <div class="flex items-center justify-end mt-4">
+                    <!-- Save -->
+                    <button
+                        mat-flat-button
+                        [color]="'primary'"
+                        [disabled]="!note.title && !note.content"
+                        (click)="createNote(note)">
+                        Save
+                    </button>
+                </div>
+            </ng-container>
+            <!-- Edit Actions -->
+            <ng-container *ngIf="note.id">
+                <div class="flex items-center justify-between mt-4">
+                    <div class="flex items-center space-x-2">
+                        <!-- Image -->
+                        <div>
+                            <input
+                                id="image-file-input"
+                                class="absolute h-0 w-0 opacity-0 invisible pointer-events-none"
+                                type="file"
+                                [multiple]="false"
+                                [accept]="'image/jpeg, image/png'"
+                                (change)="uploadImage(note, imageFileInput.files)"
+                                #imageFileInput>
+                            <label
+                                class="flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-gray-400 hover:bg-opacity-20 dark:hover:bg-black dark:hover:bg-opacity-5"
+                                for="image-file-input"
+                                matRipple>
+                                <mat-icon [svgIcon]="'heroicons_outline:photograph'"></mat-icon>
+                            </label>
+                        </div>
+                        <!-- Checklist -->
+                        <button
+                            mat-icon-button
+                            (click)="addTasksToNote(note)">
+                            <mat-icon [svgIcon]="'heroicons_outline:clipboard-list'"></mat-icon>
+                        </button>
+                        <!-- Labels -->
+                        <button
+                            mat-icon-button
+                            [matMenuTriggerFor]="labelsMenu">
+                            <mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
+                        </button>
+                        <mat-menu #labelsMenu="matMenu">
+                            <ng-container *ngIf="(labels$ | async) as labels">
+                                <ng-container *ngFor="let label of labels">
+                                    <button
+                                        mat-menu-item
+                                        (click)="toggleLabelOnNote(note, label)">
+                                        <span class="flex items-center">
+                                            <mat-checkbox
+                                                class="flex items-center pointer-events-none"
+                                                [color]="'primary'"
+                                                [checked]="isNoteHasLabel(note, label)"
+                                                disableRipple></mat-checkbox>
+                                            <span class="ml-1 leading-5">{{label.title}}</span>
+                                        </span>
+                                    </button>
+                                </ng-container>
+                            </ng-container>
+                        </mat-menu>
+                        <!-- Archive -->
+                        <button
+                            mat-icon-button
+                            (click)="toggleArchiveOnNote(note)">
+                            <mat-icon [svgIcon]="'heroicons_outline:archive'"></mat-icon>
+                        </button>
+                        <!-- Delete -->
+                        <button
+                            mat-icon-button
+                            (click)="deleteNote(note)">
+                            <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
+                        </button>
+                    </div>
+                    <!-- Close -->
+                    <button
+                        mat-flat-button
+                        matDialogClose>
+                        Close
+                    </button>
+                </div>
+            </ng-container>
+        </div>
+    </ng-container>
+
+</div>

src/app/modules/admin/apps/notes/details/details.component.ts

@@ -0,0 +1,346 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { debounceTime, map, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { Observable, of, Subject } from 'rxjs';
+import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
+import { Label, Note, Task } from 'app/modules/admin/apps/notes/notes.types';
+
+@Component({
+    selector       : 'notes-details',
+    templateUrl    : './details.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotesDetailsComponent implements OnInit, OnDestroy
+{
+    note$: Observable<Note>;
+    labels$: Observable<Label[]>;
+
+    noteChanged: Subject<Note> = new Subject<Note>();
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        @Inject(MAT_DIALOG_DATA) private _data: { note: Note },
+        private _notesService: NotesService,
+        private _matDialogRef: MatDialogRef<NotesDetailsComponent>
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Edit
+        if ( this._data.note.id )
+        {
+            // Request the data from the server
+            this._notesService.getNoteById(this._data.note.id).subscribe();
+
+            // Get the note
+            this.note$ = this._notesService.note$;
+        }
+        // Add
+        else
+        {
+            // Create an empty note
+            const note = {
+                id       : null,
+                title    : '',
+                content  : '',
+                tasks    : null,
+                image    : null,
+                reminder : null,
+                labels   : [],
+                archived : false,
+                createdAt: null,
+                updatedAt: null
+            };
+
+            this.note$ = of(note);
+        }
+
+        // Get the labels
+        this.labels$ = this._notesService.labels$;
+
+        // Subscribe to note updates
+        this.noteChanged
+            .pipe(
+                takeUntil(this._unsubscribeAll),
+                debounceTime(500),
+                switchMap((note) => this._notesService.updateNote(note)))
+            .subscribe(() => {
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Create a new note
+     *
+     * @param note
+     */
+    createNote(note: Note): void
+    {
+        this._notesService.createNote(note).pipe(
+            map(() => {
+                // Get the note
+                this.note$ = this._notesService.note$;
+            })).subscribe();
+    }
+
+    /**
+     * Upload image to given note
+     *
+     * @param note
+     * @param fileList
+     */
+    uploadImage(note: Note, fileList: FileList): void
+    {
+        // Return if canceled
+        if ( !fileList.length )
+        {
+            return;
+        }
+
+        const allowedTypes = ['image/jpeg', 'image/png'];
+        const file = fileList[0];
+
+        // Return if the file is not allowed
+        if ( !allowedTypes.includes(file.type) )
+        {
+            return;
+        }
+
+        this._readAsDataURL(file).then((data) => {
+
+            // Update the image
+            note.image = data;
+
+            // Update the note
+            this.noteChanged.next(note);
+        });
+    }
+
+    /**
+     * Remove the image on the given note
+     *
+     * @param note
+     */
+    removeImage(note: Note): void
+    {
+        note.image = null;
+
+        // Update the note
+        this.noteChanged.next(note);
+    }
+
+    /**
+     * Add an empty tasks array to note
+     *
+     * @param note
+     */
+    addTasksToNote(note): void
+    {
+        if ( !note.tasks )
+        {
+            note.tasks = [];
+        }
+    }
+
+    /**
+     * Add task to the given note
+     *
+     * @param note
+     * @param task
+     */
+    addTaskToNote(note: Note, task: string): void
+    {
+        if ( task.trim() === '' )
+        {
+            return;
+        }
+
+        // Add the task
+        this._notesService.addTask(note, task).subscribe();
+    }
+
+    /**
+     * Remove the given task from given note
+     *
+     * @param note
+     * @param task
+     */
+    removeTaskFromNote(note: Note, task: Task): void
+    {
+        // Remove the task
+        note.tasks = note.tasks.filter((item) => item.id !== task.id);
+
+        // Update the note
+        this.noteChanged.next(note);
+    }
+
+    /**
+     * Update the given task on the given note
+     *
+     * @param note
+     * @param task
+     */
+    updateTaskOnNote(note: Note, task: Task): void
+    {
+        // If the task is already available on the item
+        if ( task.id )
+        {
+            // Update the note
+            this.noteChanged.next(note);
+        }
+    }
+
+    /**
+     * Is the given note has the given label
+     *
+     * @param note
+     * @param label
+     */
+    isNoteHasLabel(note: Note, label: Label): boolean
+    {
+        return !!note.labels.find((item) => item.id === label.id);
+    }
+
+    /**
+     * Toggle the given label on the given note
+     *
+     * @param note
+     * @param label
+     */
+    toggleLabelOnNote(note: Note, label: Label): void
+    {
+        // If the note already has the label
+        if ( this.isNoteHasLabel(note, label) )
+        {
+            note.labels = note.labels.filter((item) => item.id !== label.id);
+        }
+        // Otherwise
+        else
+        {
+            note.labels.push(label);
+        }
+
+        // Update the note
+        this.noteChanged.next(note);
+    }
+
+    /**
+     * Toggle archived status on the given note
+     *
+     * @param note
+     */
+    toggleArchiveOnNote(note: Note): void
+    {
+        note.archived = !note.archived;
+
+        // Update the note
+        this.noteChanged.next(note);
+
+        // Close the dialog
+        this._matDialogRef.close();
+    }
+
+    /**
+     * Update the note details
+     *
+     * @param note
+     */
+    updateNoteDetails(note: Note): void
+    {
+        this.noteChanged.next(note);
+    }
+
+    /**
+     * Delete the given note
+     *
+     * @param note
+     */
+    deleteNote(note: Note): void
+    {
+        this._notesService.deleteNote(note)
+            .subscribe((isDeleted) => {
+
+                // Return if the note wasn't deleted...
+                if ( !isDeleted )
+                {
+                    return;
+                }
+
+                // Close the dialog
+                this._matDialogRef.close();
+            });
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Read the given file for demonstration purposes
+     *
+     * @param file
+     */
+    private _readAsDataURL(file: File): Promise<any>
+    {
+        // Return a new promise
+        return new Promise((resolve, reject) => {
+
+            // Create a new reader
+            const reader = new FileReader();
+
+            // Resolve the promise on success
+            reader.onload = () => {
+                resolve(reader.result);
+            };
+
+            // Reject the promise on error
+            reader.onerror = (e) => {
+                reject(e);
+            };
+
+            // Read the file as the
+            reader.readAsDataURL(file);
+        });
+    }
+}

src/app/modules/admin/apps/notes/labels/labels.component.html

@@ -0,0 +1,54 @@
+<div class="flex flex-col flex-auto w-80 min-w-80 p-2 md:p-4">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+        <div class="text-2xl font-semibold">Edit labels</div>
+        <button
+            matDialogClose
+            mat-icon-button>
+            <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
+        </button>
+    </div>
+    <!-- New label -->
+    <mat-form-field
+        class="fuse-mat-dense w-full mt-8"
+        [floatLabel]="'always'">
+        <input
+            name="new-label"
+            [autocomplete]="'off'"
+            [placeholder]="'Create new label'"
+            matInput
+            #newLabelInput>
+        <button
+            [class.invisible]="newLabelInput.value.trim() === ''"
+            mat-icon-button
+            (click)="addLabel(newLabelInput.value); newLabelInput.value = ''"
+            matSuffix>
+            <mat-icon
+                class="icon-size-5"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+        </button>
+    </mat-form-field>
+    <!-- Labels -->
+    <div class="flex flex-col mt-4">
+        <ng-container *ngIf="(labels$ | async) as labels">
+            <ng-container *ngFor="let label of labels; trackBy: trackByFn">
+                <mat-form-field class="fuse-mat-dense w-full">
+                    <button
+                        mat-icon-button
+                        matPrefix
+                        (click)="deleteLabel(label.id)">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:trash'"></mat-icon>
+                    </button>
+                    <input
+                        [autocomplete]="'off'"
+                        [(ngModel)]="label.title"
+                        (input)="updateLabel(label)"
+                        required
+                        matInput>
+                </mat-form-field>
+            </ng-container>
+        </ng-container>
+    </div>
+</div>

src/app/modules/admin/apps/notes/labels/labels.component.ts

@@ -0,0 +1,112 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
+import { Label } from 'app/modules/admin/apps/notes/notes.types';
+import { debounceTime, filter, switchMap, takeUntil } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+
+@Component({
+    selector       : 'notes-labels',
+    templateUrl    : './labels.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotesLabelsComponent implements OnInit, OnDestroy
+{
+    labels$: Observable<Label[]>;
+
+    labelChanged: Subject<Label> = new Subject<Label>();
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _notesService: NotesService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the labels
+        this.labels$ = this._notesService.labels$;
+
+        // Subscribe to label updates
+        this.labelChanged
+            .pipe(
+                takeUntil(this._unsubscribeAll),
+                debounceTime(500),
+                filter((label) => label.title.trim() !== ''),
+                switchMap((label) => this._notesService.updateLabel(label)))
+            .subscribe(() => {
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Add label
+     *
+     * @param title
+     */
+    addLabel(title: string): void
+    {
+        this._notesService.addLabel(title).subscribe();
+    }
+
+    /**
+     * Update label
+     */
+    updateLabel(label: Label): void
+    {
+        this.labelChanged.next(label);
+    }
+
+    /**
+     * Delete label
+     *
+     * @param id
+     */
+    deleteLabel(id: string): void
+    {
+        this._notesService.deleteLabel(id).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+}

src/app/modules/admin/apps/notes/list/list.component.html

@@ -0,0 +1,221 @@
+<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
+
+    <mat-drawer-container class="flex-auto h-full bg-card dark:bg-transparent">
+
+        <!-- Drawer -->
+        <mat-drawer
+            class="w-2/3 sm:w-72 lg:w-56 border-r-0 bg-default"
+            [mode]="drawerMode"
+            [opened]="drawerOpened"
+            #drawer>
+            <div class="p-6 lg:py-8 lg:pl-4 lg:pr-0">
+                <!-- Filters -->
+                <div class="space-y-2">
+                    <!-- Notes -->
+                    <div
+                        class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
+                        [ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': filterStatus === 'notes',
+                                'text-hint hover:bg-hover': filterStatus !== 'notes'}"
+                        (click)="resetFilter()"
+                        matRipple
+                        [matRippleDisabled]="filterStatus === 'notes'">
+                        <mat-icon
+                            class="text-current"
+                            [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
+                        <div class="ml-3 leading-5 select-none text-default">Notes</div>
+                    </div>
+                    <!-- Archive -->
+                    <div
+                        class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
+                        [ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': filterStatus === 'archived',
+                                'text-hint hover:bg-hover': filterStatus !== 'archived'}"
+                        (click)="filterByArchived()"
+                        matRipple
+                        [matRippleDisabled]="filterStatus === 'archived'">
+                        <mat-icon
+                            class="text-current"
+                            [svgIcon]="'heroicons_outline:archive'"></mat-icon>
+                        <div class="ml-3 leading-5 select-none text-default">Archive</div>
+                    </div>
+                    <!-- Labels -->
+                    <ng-container *ngIf="(labels$ | async) as labels">
+                        <ng-container *ngFor="let label of labels; trackBy: trackByFn">
+                            <div
+                                class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
+                                [ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': 'label:' + label.id === filterStatus,
+                                    'text-hint hover:bg-hover': 'label:' + label.id !== filterStatus}"
+                                (click)="filterByLabel(label.id)"
+                                matRipple
+                                [matRippleDisabled]="'label:' + label.id === filterStatus">
+                                <mat-icon
+                                    class="text-current"
+                                    [svgIcon]="'heroicons_outline:tag'"></mat-icon>
+                                <div class="ml-3 leading-5 select-none text-default">{{label.title}}</div>
+                            </div>
+                        </ng-container>
+                    </ng-container>
+                    <!-- Edit Labels -->
+                    <div
+                        class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer hover:bg-hover"
+                        (click)="openEditLabelsDialog()"
+                        matRipple>
+                        <mat-icon
+                            class="text-hint"
+                            [svgIcon]="'heroicons_outline:pencil'"></mat-icon>
+                        <div class="ml-3 leading-5 select-none">Edit labels</div>
+                    </div>
+                </div>
+            </div>
+        </mat-drawer>
+
+        <mat-drawer-content class="flex flex-col bg-gray-100 dark:bg-transparent">
+
+            <!-- Main -->
+            <div class="flex flex-col flex-auto p-6 md:p-8">
+
+                <!-- Header -->
+                <div class="flex items-center">
+                    <div class="flex items-center flex-auto">
+                        <button
+                            class="flex lg:hidden -ml-2"
+                            mat-icon-button
+                            (click)="drawer.toggle()">
+                            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
+                        </button>
+                        <mat-form-field class="fuse-mat-rounded fuse-mat-dense fuse-mat-no-subscript flex-auto ml-4 lg:ml-0">
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="'heroicons_solid:search'"
+                                matPrefix></mat-icon>
+                            <input
+                                matInput
+                                [autocomplete]="'off'"
+                                [placeholder]="'Search notes'"
+                                (input)="filterByQuery(searchInput.value)"
+                                #searchInput>
+                        </mat-form-field>
+                    </div>
+                    <!-- New note -->
+                    <button
+                        class="ml-4 px-1 sm:px-4 min-w-10"
+                        mat-flat-button
+                        [color]="'primary'"
+                        (click)="addNewNote()">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
+                        <span class="hidden sm:inline-block ml-2">New note</span>
+                    </button>
+                </div>
+
+                <!-- Notes -->
+                <ng-container *ngIf="(notes$ | async) as notes; else loading">
+                    <ng-container *ngIf="notes.length; else noNotes">
+
+                        <!-- Masonry layout -->
+                        <fuse-masonry
+                            class="-mx-2 mt-8"
+                            [items]="notes"
+                            [columns]="masonryColumns"
+                            [columnsTemplate]="columnsTemplate">
+                            <!-- Columns template -->
+                            <ng-template
+                                #columnsTemplate
+                                let-columns>
+                                <!-- Columns -->
+                                <ng-container *ngFor="let column of columns; trackBy: trackByFn">
+                                    <!-- Column -->
+                                    <div class="flex-1 px-2 space-y-4">
+                                        <ng-container *ngFor="let note of column.items; trackBy: trackByFn">
+                                            <!-- Note -->
+                                            <div
+                                                class="flex flex-col shadow rounded-2xl overflow-hidden cursor-pointer bg-card"
+                                                (click)="openNoteDialog(note)">
+                                                <!-- Image -->
+                                                <ng-container *ngIf="note.image">
+                                                    <img
+                                                        class="w-full object-cover"
+                                                        [src]="note.image">
+                                                </ng-container>
+                                                <div class="flex flex-auto flex-col p-6 space-y-4">
+                                                    <!-- Title -->
+                                                    <ng-container *ngIf="note.title">
+                                                        <div class="font-semibold line-clamp-3">
+                                                            {{note.title}}
+                                                        </div>
+                                                    </ng-container>
+                                                    <!-- Content -->
+                                                    <ng-container *ngIf="note.content">
+                                                        <div [class.text-xl]="note.content.length < 70">
+                                                            {{note.content}}
+                                                        </div>
+                                                    </ng-container>
+                                                    <!-- Tasks -->
+                                                    <ng-container *ngIf="note.tasks">
+                                                        <div class="space-y-1.5">
+                                                            <ng-container *ngFor="let task of note.tasks; trackBy: trackByFn">
+                                                                <div class="flex items-center">
+                                                                    <ng-container *ngIf="!task.completed">
+                                                                        <div class="flex items-center justify-center w-5 h-5">
+                                                                            <div class="w-4 h-4 rounded-full border-2"></div>
+                                                                        </div>
+                                                                    </ng-container>
+                                                                    <ng-container *ngIf="task.completed">
+                                                                        <mat-icon
+                                                                            class="text-hint icon-size-5"
+                                                                            [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                                                                    </ng-container>
+                                                                    <div
+                                                                        class="ml-1.5 leading-5"
+                                                                        [ngClass]="{'text-secondary line-through': task.completed}">
+                                                                        {{task.content}}
+                                                                    </div>
+                                                                </div>
+                                                            </ng-container>
+                                                        </div>
+                                                    </ng-container>
+                                                    <!-- Labels -->
+                                                    <ng-container *ngIf="note.labels">
+                                                        <div class="flex flex-wrap items-center -m-1">
+                                                            <ng-container *ngFor="let label of note.labels; trackBy: trackByFn">
+                                                                <div class="m-1 py-0.5 px-3 rounded-full text-sm font-medium text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
+                                                                    {{label.title}}
+                                                                </div>
+                                                            </ng-container>
+                                                        </div>
+                                                    </ng-container>
+                                                </div>
+                                            </div>
+                                        </ng-container>
+                                    </div>
+                                </ng-container>
+                            </ng-template>
+                        </fuse-masonry>
+
+                    </ng-container>
+                </ng-container>
+
+                <!-- Loading template -->
+                <ng-template #loading>
+                    <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
+                        <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Loading...</div>
+                    </div>
+                </ng-template>
+
+                <!-- No notes template -->
+                <ng-template #noNotes>
+                    <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
+                        <mat-icon
+                            class="icon-size-24"
+                            [svgIcon]="'iconsmind:file_hide'"></mat-icon>
+                        <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no notes!</div>
+                    </div>
+                </ng-template>
+
+            </div>
+
+        </mat-drawer-content>
+
+    </mat-drawer-container>
+
+</div>

src/app/modules/admin/apps/notes/list/list.component.ts

@@ -0,0 +1,255 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
+import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+import { NotesDetailsComponent } from 'app/modules/admin/apps/notes/details/details.component';
+import { NotesLabelsComponent } from 'app/modules/admin/apps/notes/labels/labels.component';
+import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
+import { Label, Note } from 'app/modules/admin/apps/notes/notes.types';
+import { cloneDeep } from 'lodash-es';
+
+@Component({
+    selector       : 'notes-list',
+    templateUrl    : './list.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotesListComponent implements OnInit, OnDestroy
+{
+    labels$: Observable<Label[]>;
+    notes$: Observable<Note[]>;
+
+    drawerMode: 'over' | 'side' = 'side';
+    drawerOpened: boolean = true;
+    filter$: BehaviorSubject<string> = new BehaviorSubject('notes');
+    searchQuery$: BehaviorSubject<string> = new BehaviorSubject(null);
+    masonryColumns: number = 4;
+
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseMediaWatcherService: FuseMediaWatcherService,
+        private _matDialog: MatDialog,
+        private _notesService: NotesService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get the filter status
+     */
+    get filterStatus(): string
+    {
+        return this.filter$.value;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Request the data from the server
+        this._notesService.getLabels().subscribe();
+        this._notesService.getNotes().subscribe();
+
+        // Get labels
+        this.labels$ = this._notesService.labels$;
+
+        // Get notes
+        this.notes$ = combineLatest([this._notesService.notes$, this.filter$, this.searchQuery$]).pipe(
+            distinctUntilChanged(),
+            map(([notes, filter, searchQuery]) => {
+
+                if ( !notes || !notes.length )
+                {
+                    return;
+                }
+
+                // Store the filtered notes
+                let filteredNotes = notes;
+
+                // Filter by query
+                if ( searchQuery )
+                {
+                    searchQuery = searchQuery.trim().toLowerCase();
+                    filteredNotes = filteredNotes.filter((note) => note.title.toLowerCase().includes(searchQuery) || note.content.toLowerCase().includes(searchQuery));
+                }
+
+                // Show all
+                if ( filter === 'notes' )
+                {
+                    // Do nothing
+                }
+
+                // Show archive
+                const isArchive = filter === 'archived';
+                filteredNotes = filteredNotes.filter((note) => note.archived === isArchive);
+
+                // Filter by label
+                if ( filter.startsWith('label:') )
+                {
+                    const labelId = filter.split(':')[1];
+                    filteredNotes = filteredNotes.filter((note) => !!note.labels.find((item) => item.id === labelId));
+                }
+
+                return filteredNotes;
+            })
+        );
+
+        // Subscribe to media changes
+        this._fuseMediaWatcherService.onMediaChange$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(({matchingAliases}) => {
+
+                // Set the drawerMode and drawerOpened if the given breakpoint is active
+                if ( matchingAliases.includes('lg') )
+                {
+                    this.drawerMode = 'side';
+                    this.drawerOpened = true;
+                }
+                else
+                {
+                    this.drawerMode = 'over';
+                    this.drawerOpened = false;
+                }
+
+                // Set the masonry columns
+                //
+                // This if block structured in a way so that only the
+                // biggest matching alias will be used to set the column
+                // count.
+                if ( matchingAliases.includes('xl') )
+                {
+                    this.masonryColumns = 5;
+                }
+                else if ( matchingAliases.includes('lg') )
+                {
+                    this.masonryColumns = 4;
+                }
+                else if ( matchingAliases.includes('md') )
+                {
+                    this.masonryColumns = 3;
+                }
+                else if ( matchingAliases.includes('sm') )
+                {
+                    this.masonryColumns = 2;
+                }
+                else
+                {
+                    this.masonryColumns = 1;
+                }
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Add a new note
+     */
+    addNewNote(): void
+    {
+        this._matDialog.open(NotesDetailsComponent, {
+            autoFocus: false,
+            data     : {
+                note: {}
+            }
+        });
+    }
+
+    /**
+     * Open the edit labels dialog
+     */
+    openEditLabelsDialog(): void
+    {
+        this._matDialog.open(NotesLabelsComponent, {autoFocus: false});
+    }
+
+    /**
+     * Open the note dialog
+     */
+    openNoteDialog(note: Note): void
+    {
+        this._matDialog.open(NotesDetailsComponent, {
+            autoFocus: false,
+            data     : {
+                note: cloneDeep(note)
+            }
+        });
+    }
+
+    /**
+     * Filter by archived
+     */
+    filterByArchived(): void
+    {
+        this.filter$.next('archived');
+    }
+
+    /**
+     * Filter by label
+     *
+     * @param labelId
+     */
+    filterByLabel(labelId: string): void
+    {
+        const filterValue = `label:${labelId}`;
+        this.filter$.next(filterValue);
+    }
+
+    /**
+     * Filter by query
+     *
+     * @param query
+     */
+    filterByQuery(query: string): void
+    {
+        this.searchQuery$.next(query);
+    }
+
+    /**
+     * Reset filter
+     */
+    resetFilter(): void
+    {
+        this.filter$.next('notes');
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+}

src/app/modules/admin/apps/notes/notes.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/modules/admin/apps/notes/notes.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector       : 'notes',
+    templateUrl    : './notes.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotesComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}

src/app/modules/admin/apps/notes/notes.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatRippleModule } from '@angular/material/core';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { FuseAutogrowModule } from '@fuse/directives/autogrow';
+import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
+import { SharedModule } from 'app/shared/shared.module';
+import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
+import { NotesDetailsComponent } from 'app/modules/admin/apps/notes/details/details.component';
+import { NotesListComponent } from 'app/modules/admin/apps/notes/list/list.component';
+import { NotesLabelsComponent } from 'app/modules/admin/apps/notes/labels/labels.component';
+import { notesRoutes } from 'app/modules/admin/apps/notes/notes.routing';
+
+@NgModule({
+    declarations: [
+        NotesComponent,
+        NotesDetailsComponent,
+        NotesListComponent,
+        NotesLabelsComponent
+    ],
+    imports     : [
+        RouterModule.forChild(notesRoutes),
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatRippleModule,
+        MatSidenavModule,
+        FuseAutogrowModule,
+        FuseMasonryModule,
+        SharedModule
+    ]
+})
+export class NotesModule
+{
+}

src/app/modules/admin/apps/notes/notes.routing.ts

@@ -0,0 +1,16 @@
+import { Route } from '@angular/router';
+import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
+import { NotesListComponent } from 'app/modules/admin/apps/notes/list/list.component';
+
+export const notesRoutes: Route[] = [
+    {
+        path     : '',
+        component: NotesComponent,
+        children : [
+            {
+                path     : '',
+                component: NotesListComponent
+            }
+        ]
+    }
+];

src/app/modules/admin/apps/notes/notes.service.ts

@@ -0,0 +1,239 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, concat, Observable, of, throwError } from 'rxjs';
+import { map, switchMap, take, tap } from 'rxjs/operators';
+import { Label, Note, Task } from 'app/modules/admin/apps/notes/notes.types';
+import { cloneDeep } from 'lodash-es';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NotesService
+{
+    // Private
+    private _labels: BehaviorSubject<Label[] | null> = new BehaviorSubject(null);
+    private _note: BehaviorSubject<Note | null> = new BehaviorSubject(null);
+    private _notes: BehaviorSubject<Note[] | null> = new BehaviorSubject(null);
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for labels
+     */
+    get labels$(): Observable<Label[]>
+    {
+        return this._labels.asObservable();
+    }
+
+    /**
+     * Getter for notes
+     */
+    get notes$(): Observable<Note[]>
+    {
+        return this._notes.asObservable();
+    }
+
+    /**
+     * Getter for note
+     */
+    get note$(): Observable<Note>
+    {
+        return this._note.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get labels
+     */
+    getLabels(): Observable<Label[]>
+    {
+        return this._httpClient.get<Label[]>('api/apps/notes/labels').pipe(
+            tap((response: Label[]) => {
+                this._labels.next(response);
+            })
+        );
+    }
+
+    /**
+     * Add label
+     *
+     * @param title
+     */
+    addLabel(title: string): Observable<Label[]>
+    {
+        return this._httpClient.post<Label[]>('api/apps/notes/labels', {title}).pipe(
+            tap((labels) => {
+
+                // Update the labels
+                this._labels.next(labels);
+            })
+        );
+    }
+
+    /**
+     * Update label
+     *
+     * @param label
+     */
+    updateLabel(label: Label): Observable<Label[]>
+    {
+        return this._httpClient.patch<Label[]>('api/apps/notes/labels', {label}).pipe(
+            tap((labels) => {
+
+                // Update the notes
+                this.getNotes().subscribe();
+
+                // Update the labels
+                this._labels.next(labels);
+            })
+        );
+    }
+
+    /**
+     * Delete a label
+     *
+     * @param id
+     */
+    deleteLabel(id: string): Observable<Label[]>
+    {
+        return this._httpClient.delete<Label[]>('api/apps/notes/labels', {params: {id}}).pipe(
+            tap((labels) => {
+
+                // Update the notes
+                this.getNotes().subscribe();
+
+                // Update the labels
+                this._labels.next(labels);
+            })
+        );
+    }
+
+    /**
+     * Get notes
+     */
+    getNotes(): Observable<Note[]>
+    {
+        return this._httpClient.get<Note[]>('api/apps/notes/all').pipe(
+            tap((response: Note[]) => {
+                this._notes.next(response);
+            })
+        );
+    }
+
+    /**
+     * Get note by id
+     */
+    getNoteById(id: string): Observable<Note>
+    {
+        return this._notes.pipe(
+            take(1),
+            map((notes) => {
+
+                // Find within the folders and files
+                const note = notes.find(value => value.id === id) || null;
+
+                // Update the note
+                this._note.next(note);
+
+                // Return the note
+                return note;
+            }),
+            switchMap((note) => {
+
+                if ( !note )
+                {
+                    return throwError('Could not found the note with id of ' + id + '!');
+                }
+
+                return of(note);
+            })
+        );
+    }
+
+    /**
+     * Add task to the given note
+     *
+     * @param note
+     * @param task
+     */
+    addTask(note: Note, task: string): Observable<Note>
+    {
+        return this._httpClient.post<Note>('api/apps/notes/tasks', {
+            note,
+            task
+        }).pipe(switchMap(() => this.getNotes().pipe(
+            switchMap(() => this.getNoteById(note.id))
+        )));
+    }
+
+    /**
+     * Create note
+     *
+     * @param note
+     */
+    createNote(note: Note): Observable<Note>
+    {
+        return this._httpClient.post<Note>('api/apps/notes', {note}).pipe(
+            switchMap((response) => this.getNotes().pipe(
+                switchMap(() => this.getNoteById(response.id).pipe(
+                    map(() => response)
+                ))
+            )));
+    }
+
+    /**
+     * Update the note
+     *
+     * @param note
+     */
+    updateNote(note: Note): Observable<Note>
+    {
+        // Clone the note to prevent accidental reference based updates
+        const updatedNote = cloneDeep(note) as any;
+
+        // Before sending the note to the server, handle the labels
+        if ( updatedNote.labels.length )
+        {
+            updatedNote.labels = updatedNote.labels.map((label) => label.id);
+        }
+
+        return this._httpClient.patch<Note>('api/apps/notes', {updatedNote}).pipe(
+            tap((response) => {
+
+                // Update the notes
+                this.getNotes().subscribe();
+            })
+        );
+    }
+
+    /**
+     * Delete the note
+     *
+     * @param note
+     */
+    deleteNote(note: Note): Observable<boolean>
+    {
+        return this._httpClient.delete<boolean>('api/apps/notes', {params: {id: note.id}}).pipe(
+            map((isDeleted: boolean) => {
+
+                // Update the notes
+                this.getNotes().subscribe();
+
+                // Return the deleted status
+                return isDeleted;
+            })
+        );
+    }
+}

src/app/modules/admin/apps/notes/notes.types.ts

@@ -0,0 +1,25 @@
+export interface Task
+{
+    id?: string;
+    content?: string;
+    completed?: string;
+}
+
+export interface Label
+{
+    id?: string;
+    title?: string;
+}
+
+export interface Note
+{
+    id?: string;
+    title?: string;
+    content?: string;
+    tasks?: Task[];
+    image?: string | null;
+    labels?: Label[];
+    archived?: boolean;
+    createdAt?: string;
+    updatedAt?: string | null;
+}

src/app/modules/admin/apps/tasks/list/list.component.html

@@ -65,7 +65,7 @@
                         <!-- Task -->
                         <div
                             [id]="'task-' + task.id"
-                            class="group w-full h-16 select-none hover:bg-hover"
+                            class="group w-full h-16 select-none hover:bg-gray-50 dark:hover:bg-hover"
                             *ngFor="let task of tasks; trackBy: trackByFn"
                             [ngClass]="{'text-lg font-semibold bg-gray-100 dark:bg-card': task.type === 'section',
                                         'text-hint': task.completed}"

src/app/modules/admin/docs/changelog/changelog.ts

@@ -10,6 +10,28 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v12.3.0
+        {
+            version    : 'v12.3.0',
+            releaseDate: 'May 07, 2021',
+            changes    : [
+                {
+                    type: 'Added',
+                    list: [
+                        '(apps/notes) New Notes app',
+                        '(fuse/masonry) Added a component for creating fast Masonry-like layouts'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(apps/tasks) Tweaked the hover color on tasks list for better consistency',
+                        '(apps/mailbox) Adjusted the app title font size for better consistency',
+                        '(apps/mailbox) Used shadow on threads for better consistency'
+                    ]
+                }
+            ]
+        },
         // v12.2.0
         {
             version    : 'v12.2.0',

src/app/modules/admin/docs/core-features/components/masonry/masonry.component.html

@@ -0,0 +1,334 @@
+<div class="flex flex-col flex-auto min-w-0">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex flex-wrap items-center font-medium">
+                <div>
+                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <a class="ml-1 text-primary-500">Core Features</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <span class="ml-1 text-secondary">Components</span>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Masonry
+                </h2>
+            </div>
+        </div>
+        <button
+            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
+            mat-icon-button
+            (click)="toggleDrawer()">
+            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
+        </button>
+    </div>
+
+    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
+
+        <p>
+            <strong>fuse-masonry</strong> is a basic Masonry layout component to show items in Masonry grid layout. Since it doesn't use any other third party library or complex calculations to
+            keep everything smooth and fast;
+        </p>
+        <ul>
+            <li>It does NOT work with elements with different widths
+            <li>It does NOT sort items based on their heights (This here is the real performance killer)</li>
+        </ul>
+        <p>
+            If you don't need to mix and match different width items and don't need to sort items based on their heights, <strong>fuse-masonry</strong> will do the job for you and it will do it very smoothly.
+        </p>
+        <p>
+            <strong>Exported as: </strong><code>fuseMasonry</code>
+        </p>
+
+        <h2>Module</h2>
+        <textarea
+            fuse-highlight
+            lang="typescript">
+            import { FuseMasonry } from '@fuse/components/masonry';
+        </textarea>
+
+        <h2>Properties</h2>
+        <div class="bg-card py-3 px-6 rounded shadow">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Default</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>@Input()</div>
+                            <div>columnsTemplate: TemplateRef</div>
+                        </td>
+                        <td>
+                            Column template for masonry component to lay out.
+                        </td>
+                        <td>
+                            <code class="whitespace-nowrap">undefined</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>@Input()</div>
+                            <div>columns: number</div>
+                        </td>
+                        <td>
+                            Number of columns to create
+                        </td>
+                        <td>
+                            <code class="whitespace-nowrap">undefined</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>@Input()</div>
+                            <div>items: any[]</div>
+                        </td>
+                        <td>
+                            Items to distribute into columns
+                        </td>
+                        <td>
+                            <code class="whitespace-nowrap">[]</code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h2>Methods</h2>
+        <p>This component doesn't have any public methods.</p>
+
+        <h2>Usage</h2>
+        <p>
+            <strong>fuse-masonry</strong> doesn't provide a default template or styling to the items. You can think of it as a helper function but in a component form:
+        </p>
+
+        <div class="example-viewer">
+
+            <div class="title">
+                <h6>Example</h6>
+            </div>
+
+            <mat-tab-group [animationDuration]="'0ms'">
+
+                <mat-tab label="Preview">
+
+                    <ng-template matTabContent>
+
+                        <div class="bg-gray-100 p-4">
+                            <div class="mx-auto max-w-80">
+                                <fuse-masonry
+                                    class="-mx-2"
+                                    [items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+                                    [columns]="4"
+                                    [columnsTemplate]="columnsTemplate">
+                                </fuse-masonry>
+                                <ng-template
+                                    #columnsTemplate
+                                    let-columns>
+                                    <ng-container *ngFor="let column of columns">
+                                        <!-- Column -->
+                                        <div class="flex-1 mx-2 p-2 border rounded space-y-2">
+                                            <ng-container *ngFor="let item of column.items">
+                                                <!-- Item -->
+                                                <div class="p-2 text-center rounded bg-primary text-on-primary">
+                                                    {{item}}
+                                                </div>
+                                            </ng-container>
+                                        </div>
+                                    </ng-container>
+                                </ng-template>
+                            </div>
+                        </div>
+
+                    </ng-template>
+
+                </mat-tab>
+
+                <mat-tab label="HTML">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'html'">
+                        <fuse-masonry
+                            class="-mx-2"
+                            [items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+                            [columns]="4"
+                            [columnsTemplate]="columnsTemplate">
+                        </fuse-masonry>
+
+                        <ng-template
+                            #columnsTemplate
+                            let-columns>
+                            <ng-container *ngFor="let column of columns">
+                                <!-- Column -->
+                                <div class="flex-1 mx-2 p-2 border rounded space-y-2">
+                                    <ng-container *ngFor="let item of column.items">
+                                        <!-- Item -->
+                                        <div class="p-2 text-center rounded bg-primary text-on-primary">
+                                            ITEM CONTENT
+                                        </div>
+                                    </ng-container>
+                                </div>
+                            </ng-container>
+                        </ng-template>
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+            </mat-tab-group>
+
+        </div>
+
+        <h3>Responsive</h3>
+        <p>
+            <strong>fuse-masonry</strong> doesn't provide a way of changing the column count depending on breakpoints but this can easily be handled by
+            combining <code>fuse-masonry</code> with <code>FuseMediaWatcherService</code>:
+        </p>
+
+        <div class="example-viewer">
+
+            <div class="title">
+                <h6>Example</h6>
+            </div>
+
+            <mat-tab-group [animationDuration]="'0ms'">
+
+                <mat-tab label="Preview">
+
+                    <ng-template matTabContent>
+
+                        <div class="bg-gray-100 p-4">
+                            <div class="mx-auto max-w-80">
+
+                                <fuse-masonry
+                                    class="-mx-2"
+                                    [items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
+                                    [columns]="columns"
+                                    [columnsTemplate]="columnsTemplate">
+                                </fuse-masonry>
+                                <ng-template
+                                    #columnsTemplate
+                                    let-columns>
+                                    <ng-container *ngFor="let column of columns">
+                                        <!-- Column -->
+                                        <div class="flex-1 mx-2 p-2 border rounded space-y-2">
+                                            <ng-container *ngFor="let item of column.items">
+                                                <!-- Item -->
+                                                <div class="p-2 text-center rounded bg-primary text-on-primary">
+                                                    {{item}}
+                                                </div>
+                                            </ng-container>
+                                        </div>
+                                    </ng-container>
+                                </ng-template>
+
+                            </div>
+                        </div>
+
+                    </ng-template>
+
+                </mat-tab>
+
+                <mat-tab label="HTML">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'html'">
+                        <fuse-masonry
+                            class="-mx-2"
+                            [items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
+                            [columns]="columns"
+                            [columnsTemplate]="columnsTemplate">
+                        </fuse-masonry>
+
+                        <ng-template
+                            #columnsTemplate
+                            let-columns>
+                            <ng-container *ngFor="let column of columns">
+                                <!-- Column -->
+                                <div class="flex-1 mx-2 p-2 border rounded space-y-2">
+                                    <ng-container *ngFor="let item of column.items">
+                                        <!-- Item -->
+                                        <div class="p-2 text-center rounded bg-primary text-on-primary">
+                                            ITEM CONTENT
+                                        </div>
+                                    </ng-container>
+                                </div>
+                            </ng-container>
+                        </ng-template>
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+                <mat-tab label="TypeScript">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'ts'">
+                        columns: number = 4;
+
+                        // Subscribe to media changes
+                        this._fuseMediaWatcherService.onMediaChange$
+                            .pipe(takeUntil(this._unsubscribeAll))
+                            .subscribe(({matchingAliases}) => {
+
+                                // Set the masonry columns
+                                //
+                                // This if block structured in a way so that only the
+                                // biggest matching alias will be used to set the column
+                                // count.
+                                if ( matchingAliases.includes('xl') )
+                                {
+                                    this.columns = 5;
+                                }
+                                else if ( matchingAliases.includes('lg') )
+                                {
+                                    this.columns = 4;
+                                }
+                                else if ( matchingAliases.includes('md') )
+                                {
+                                    this.columns = 3;
+                                }
+                                else if ( matchingAliases.includes('sm') )
+                                {
+                                    this.columns = 2;
+                                }
+                                else
+                                {
+                                    this.columns = 1;
+                                }
+                            });
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+            </mat-tab-group>
+
+        </div>
+
+    </div>
+
+</div>

src/app/modules/admin/docs/core-features/components/masonry/masonry.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { Subject } from 'rxjs';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+    selector   : 'masonry',
+    templateUrl: './masonry.component.html',
+    styles     : ['']
+})
+export class MasonryComponent implements OnInit
+{
+    columns: number = 4;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _coreFeaturesComponent: CoreFeaturesComponent,
+        private _fuseMediaWatcherService: FuseMediaWatcherService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to media changes
+        this._fuseMediaWatcherService.onMediaChange$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(({matchingAliases}) => {
+
+                // Set the masonry columns
+                //
+                // This if block structured in a way so that only the
+                // biggest matching alias will be used to set the column
+                // count.
+                if ( matchingAliases.includes('xl') )
+                {
+                    this.columns = 5;
+                }
+                else if ( matchingAliases.includes('lg') )
+                {
+                    this.columns = 4;
+                }
+                else if ( matchingAliases.includes('md') )
+                {
+                    this.columns = 3;
+                }
+                else if ( matchingAliases.includes('sm') )
+                {
+                    this.columns = 2;
+                }
+                else
+                {
+                    this.columns = 1;
+                }
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the drawer
+     */
+    toggleDrawer(): void
+    {
+        // Toggle the drawer
+        this._coreFeaturesComponent.matDrawer.toggle();
+    }
+}

src/app/modules/admin/docs/core-features/core-features.component.ts

@@ -77,6 +77,12 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy
                         type : 'basic',
                         link : '/docs/core-features/components/highlight'
                     },
+                    {
+                        id   : 'core-features.components.masonry',
+                        title: 'Masonry',
+                        type : 'basic',
+                        link : '/docs/core-features/components/masonry'
+                    },
                     {
                         id   : 'core-features.components.navigation',
                         title: 'Navigation',

src/app/modules/admin/docs/core-features/core-features.module.ts

@@ -10,6 +10,7 @@ import { FuseDateRangeModule } from '@fuse/components/date-range';
 import { FuseDrawerModule } from '@fuse/components/drawer';
 import { FuseHighlightModule } from '@fuse/components/highlight';
 import { FuseAlertModule } from '@fuse/components/alert';
+import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
 import { SharedModule } from 'app/shared/shared.module';
@@ -21,6 +22,7 @@ import { DateRangeComponent } from 'app/modules/admin/docs/core-features/compone
 import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
 import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
 import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
+import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
 import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
 import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
 import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
@@ -40,6 +42,7 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe
         DateRangeComponent,
         DrawerComponent,
         HighlightComponent,
+        MasonryComponent,
         NavigationComponent,
         AutogrowComponent,
         ScrollbarComponent,
@@ -62,6 +65,7 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe
         FuseDateRangeModule,
         FuseDrawerModule,
         FuseHighlightModule,
+        FuseMasonryModule,
         FuseNavigationModule,
         FuseScrollResetModule,
         SharedModule

src/app/modules/admin/docs/core-features/core-features.routing.ts

@@ -6,6 +6,7 @@ import { CardComponent } from 'app/modules/admin/docs/core-features/components/c
 import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
 import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
 import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
+import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
 import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
 import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
 import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
@@ -63,6 +64,10 @@ export const coreFeaturesRoutes: Route[] = [
                         path     : 'highlight',
                         component: HighlightComponent
                     },
+                    {
+                        path     : 'masonry',
+                        component: MasonryComponent
+                    },
                     {
                         path     : 'navigation',
                         component: NavigationComponent