Add clear bookmark changes button

app/src/composables/use-preset/use-preset.ts

@@ -9,7 +9,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	const presetsStore = usePresetsStore();
 	const userStore = useUserStore();
 
-	const saving = ref(false);
+	const busy = ref(false);
 
 	const { info: collectionInfo } = useCollection(collection);
 
@@ -25,19 +25,26 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	const bookmarkIsMine = computed(() => localPreset.value.user === userStore.state.currentUser!.id);
 
 	const savePreset = async (preset?: Partial<Preset>) => {
-		saving.value = true;
+		busy.value = true;
 		const updatedValues = await presetsStore.savePreset(preset ? preset : localPreset.value);
 		initLocalPreset();
 		localPreset.value.id = updatedValues.id;
-		saving.value = false;
+		busy.value = false;
 		return updatedValues;
 	};
 
-	const saveLocal = async () => {
+	const saveLocal = () => {
 		presetsStore.saveLocal(localPreset.value);
 		initLocalPreset();
 	};
 
+	const clearLocalSave = async () => {
+		busy.value = true;
+		await presetsStore.clearLocalSave(localPreset.value);
+		initLocalPreset();
+		busy.value = false;
+	};
+
 	const autoSave = debounce(async () => {
 		if (!bookmark || bookmark.value === null) {
 			savePreset();
@@ -159,7 +166,8 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		resetPreset,
 		bookmarkSaved,
 		bookmarkIsMine,
-		saving,
+		busy,
+		clearLocalSave,
 	};
 
 	async function resetPreset() {

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

@@ -44,6 +44,13 @@
 						<v-icon class="toggle" name="bookmark_outline" @click="on" />
 					</template>
 				</bookmark-add>
+
+				<v-icon
+					v-if="bookmark && !bookmarkSaving && bookmarkSaved === false"
+					name="clear"
+					@click="clearLocalSave"
+					class="clear"
+				/>
 			</div>
 		</template>
 
@@ -287,7 +294,8 @@ export default defineComponent({
 			resetPreset,
 			bookmarkSaved,
 			bookmarkIsMine,
-			saving: bookmarkSaving,
+			busy: bookmarkSaving,
+			clearLocalSave,
 		} = usePreset(collection, bookmarkID);
 
 		const {
@@ -359,6 +367,7 @@ export default defineComponent({
 			bookmarkSaved,
 			bookmarkIsMine,
 			bookmarkSaving,
+			clearLocalSave,
 		};
 
 		function useBreadcrumb() {
@@ -587,7 +596,8 @@ export default defineComponent({
 	}
 
 	.add,
-	.save {
+	.save,
+	.clear {
 		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
 

app/src/stores/presets.ts

@@ -168,7 +168,7 @@ export const usePresetsStore = createStore({
 			}
 		},
 
-		async saveLocal(updatedPreset: Preset) {
+		saveLocal(updatedPreset: Preset) {
 			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
 				if (preset.id === updatedPreset.id) {
 					return {
@@ -180,5 +180,18 @@ export const usePresetsStore = createStore({
 				return preset;
 			});
 		},
+
+		async clearLocalSave(preset: Preset) {
+			const response = await api.get(`/presets/${preset.id}`);
+
+			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
+				if (preset.id === response.data.data.id) {
+					console.log('replace');
+					return response.data.data;
+				}
+
+				return preset;
+			});
+		},
 	},
 });