new preset icons and tooltips

app/src/components/v-icon/custom-icons/bookmark_save.vue

@@ -0,0 +1,21 @@
+<template functional>
+	<svg
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		fill="none"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		stroke-linejoin="round"
+		stroke-miterlimit="2"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M18.38 3.6c-.38-.4-.83-.6-1.36-.6H6.98c-.53 0-1 .2-1.4.6-.38.42-.56.88-.56 1.42V21L12 18l6.98 3V5.02c0-.54-.2-1-.6-1.41zm-8.05 11.5l6.7-6.7-1.4-1.4-5.3 5.3-1.92-1.93L7 11.79l3.33 3.33z"
+		/>
+	</svg>
+</template>
+
+<script lang="ts">
+export default {};
+</script>

app/src/components/v-icon/v-icon.vue

@@ -16,6 +16,7 @@ import { defineComponent, computed } from '@vue/composition-api';
 import useSizeClass, { sizeProps } from '@/composables/size-class';
 
 import CustomIconDirectus from './custom-icons/directus.vue';
+import CustomIconBookmarkSave from './custom-icons/bookmark_save.vue';
 import CustomIconBox from './custom-icons/box.vue';
 import CustomIconCommitNode from './custom-icons/commit_node.vue';
 import CustomIconGrid1 from './custom-icons/grid_1.vue';
@@ -34,6 +35,7 @@ import CustomIconLogout from './custom-icons/logout.vue';
 
 const customIcons: string[] = [
 	'directus',
+	'bookmark_save',
 	'box',
 	'commit_node',
 	'grid_1',
@@ -54,6 +56,7 @@ const customIcons: string[] = [
 export default defineComponent({
 	components: {
 		CustomIconDirectus,
+		CustomIconBookmarkSave,
 		CustomIconBox,
 		CustomIconCommitNode,
 		CustomIconGrid1,

app/src/lang/en-US/index.json

@@ -20,7 +20,9 @@
 
 	"rename_folder": "Rename Folder",
 	"delete_folder": "Delete Folder",
+	"reset_bookmark": "Reset Bookmark",
 	"rename_bookmark": "Rename Bookmark",
+	"update_bookmark": "Update Bookmark",
 	"delete_bookmark": "Delete Bookmark",
 	"delete_bookmark_copy": "Are you sure you want to delete the \"{bookmark}\" bookmark? This action cannot be undone.",
 

app/src/modules/collections/routes/browse.vue

@@ -29,8 +29,7 @@
 				<v-icon class="saved" name="bookmark" v-else-if="bookmarkSaved" />
 
 				<template v-else-if="bookmarkIsMine">
-					<v-progress-circular indeterminate small v-if="bookmarkSaving" />
-					<v-icon class="save" v-else @click="savePreset()" name="save" />
+					<v-icon class="save" @click="savePreset()" name="bookmark_save" v-tooltip.bottom="$t('update_bookmark')" />
 				</template>
 
 				<bookmark-add
@@ -47,9 +46,10 @@
 
 				<v-icon
 					v-if="bookmark && !bookmarkSaving && bookmarkSaved === false"
-					name="clear"
+					name="settings_backup_restore"
 					@click="clearLocalSave"
 					class="clear"
+					v-tooltip.bottom="$t('reset_bookmark')"
 				/>
 			</div>
 		</template>
@@ -590,7 +590,7 @@ export default defineComponent({
 	.add,
 	.save,
 	.saved,
-	.v-progress-circular {
+	.clear {
 		display: inline-block;
 		margin-left: 8px;
 	}
@@ -598,6 +598,7 @@ export default defineComponent({
 	.add,
 	.save,
 	.clear {
+		cursor: pointer;
 		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
 
@@ -606,8 +607,25 @@ export default defineComponent({
 		}
 	}
 
+	.save {
+		color: var(--warning);
+
+		&:hover {
+			color: var(--warning-125);
+		}
+	}
+
 	.saved {
 		color: var(--primary);
 	}
+
+	.clear {
+		color: var(--foreground-subdued);
+		margin-left: 4px;
+
+		&:hover {
+			color: var(--warning);
+		}
+	}
 }
 </style>