Bookmark improvements (#12031)

* add icon & color to bookmarks

* update current bookmark title on edit

* clean up edit bookmark dialog on cancel

* remove unused bookmark-edit component

* interaction improvements

* sort based on scope and alphabetically

* prevent hover when locked & use tooltip

* Reduce size of right hand icon in bookmark

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

api/src/database/migrations/20220308A-add-bookmark-icon-and-color.ts

@@ -0,0 +1,15 @@
+import { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_presets', (table) => {
+		table.string('icon', 30).notNullable().defaultTo('bookmark_outline');
+		table.string('color').nullable();
+	});
+}
+
+export async function down(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_presets', (table) => {
+		table.dropColumn('icon');
+		table.dropColumn('color');
+	});
+}

api/src/database/system-data/fields/presets.yaml

@@ -33,6 +33,12 @@ fields:
   - field: bookmark
     width: half
 
+  - field: icon
+    width: half
+
+  - field: color
+    width: half
+
   - field: search
     width: half