refresh on card/collection/tag changes

Author: treethought

src/sources/bookmark.ts

@@ -194,7 +194,7 @@ export class BookmarkSource implements DataSource {
 		}));
 	}
 
-	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, plugin: AtmospherePlugin): void {
+	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, onDataChange: () => void, plugin: AtmospherePlugin): void {
 		const section = container.createEl("div", { cls: "atmosphere-filter-section" });
 
 		const titleRow = section.createEl("div", { cls: "atmosphere-filter-title-row" });
@@ -203,7 +203,7 @@ export class BookmarkSource implements DataSource {
 		const createBtn = titleRow.createEl("button", { cls: "atmosphere-filter-create-btn" });
 		setIcon(createBtn, "plus");
 		createBtn.addEventListener("click", () => {
-			new CreateTagModal(plugin, onChange).open();
+			new CreateTagModal(plugin, onDataChange).open();
 		});
 
 		const chips = section.createEl("div", { cls: "atmosphere-filter-chips" });

src/sources/margin.ts

@@ -238,7 +238,7 @@ export class MarginSource implements DataSource {
 		return filters;
 	}
 
-	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, plugin: AtmospherePlugin): void {
+	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, onDataChange: () => void, plugin: AtmospherePlugin): void {
 		const collectionsSection = container.createEl("div", { cls: "atmosphere-filter-section" });
 
 		const collectionsTitleRow = collectionsSection.createEl("div", { cls: "atmosphere-filter-title-row" });
@@ -247,7 +247,7 @@ export class MarginSource implements DataSource {
 		const createCollectionBtn = collectionsTitleRow.createEl("button", { cls: "atmosphere-filter-create-btn" });
 		setIcon(createCollectionBtn, "plus");
 		createCollectionBtn.addEventListener("click", () => {
-			new CreateMarginCollectionModal(plugin, onChange).open();
+			new CreateMarginCollectionModal(plugin, onDataChange).open();
 		});
 
 		const collectionsChips = collectionsSection.createEl("div", { cls: "atmosphere-filter-chips" });

src/sources/semble.ts

@@ -215,7 +215,7 @@ export class SembleSource implements DataSource {
 		}));
 	}
 
-	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, plugin: AtmospherePlugin): void {
+	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, onDataChange: () => void, plugin: AtmospherePlugin): void {
 		const section = container.createEl("div", { cls: "atmosphere-filter-section" });
 
 		const titleRow = section.createEl("div", { cls: "atmosphere-filter-title-row" });
@@ -224,7 +224,7 @@ export class SembleSource implements DataSource {
 		const createBtn = titleRow.createEl("button", { cls: "atmosphere-filter-create-btn" });
 		setIcon(createBtn, "plus");
 		createBtn.addEventListener("click", () => {
-			new CreateCollectionModal(plugin, onChange).open();
+			new CreateCollectionModal(plugin, onDataChange).open();
 		});
 
 		const chips = section.createEl("div", { cls: "atmosphere-filter-chips" });
@@ -238,8 +238,6 @@ export class SembleSource implements DataSource {
 			onChange();
 		});
 
-		// Get collections synchronously - note: this is a limitation
-		// In a real app, we'd want to cache these or handle async properly
 		void this.getAvailableFilters().then(collections => {
 			for (const collection of collections) {
 				const chip = chips.createEl("button", {

src/sources/types.ts

@@ -23,5 +23,5 @@ export interface DataSource {
 	readonly name: "semble" | "bookmark" | "margin";
 	fetchItems(filters: SourceFilter[], plugin: AtmospherePlugin): Promise<ATBookmarkItem[]>;
 	getAvailableFilters(): Promise<SourceFilter[]>;
-	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, plugin: AtmospherePlugin): void;
+	renderFilterUI(container: HTMLElement, activeFilters: Map<string, SourceFilter>, onChange: () => void, onDataChange: () => void, plugin: AtmospherePlugin): void;
 }

src/views/bookmarks.ts

@@ -145,9 +145,9 @@ export class AtmosphereView extends ItemView {
 			attr: { "aria-label": "Refresh bookmarks" }
 		});
 		setIcon(refreshBtn, "refresh-cw");
-		refreshBtn.addEventListener("click", async () => {
+		refreshBtn.addEventListener("click", () => {
 			refreshBtn.addClass("atmosphere-refresh-btn-spinning");
-			await this.refresh();
+			void this.refresh();
 			refreshBtn.removeClass("atmosphere-refresh-btn-spinning");
 		});
 
@@ -158,6 +158,7 @@ export class AtmosphereView extends ItemView {
 				filtersContainer,
 				sourceData.filters,
 				() => void this.render(),
+				() => void this.refresh(),
 				this.plugin
 			);
 		}
@@ -172,7 +173,7 @@ export class AtmosphereView extends ItemView {
 				return;
 			}
 			new CardDetailModal(this.plugin, item, () => {
-				void this.render();
+				void this.refresh();
 			}).open();
 		});
 
@@ -191,7 +192,7 @@ export class AtmosphereView extends ItemView {
 			editBtn.addEventListener("click", (e) => {
 				e.stopPropagation();
 				item.openEditModal(() => {
-					void this.render();
+					void this.refresh();
 				});
 			});
 		}

styles.css

@@ -76,43 +76,28 @@
 }
 
 .atmosphere-refresh-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 32px;
-	height: 32px;
-	padding: 0;
 	background: transparent;
-	border: 1px solid var(--background-modifier-border);
-	border-radius: var(--radius-s);
-	cursor: pointer;
+	border: none;
 	color: var(--text-muted);
-	transition: all 0.15s ease;
-	flex-shrink: 0;
+	cursor: pointer;
+	padding: 4px;
+	display: flex;
+	align-items: center;
+	opacity: 0.6;
+	transition: opacity 0.15s ease;
 }
 
 .atmosphere-refresh-btn:hover {
-	background: var(--background-modifier-hover);
-	color: var(--text-normal);
-	border-color: var(--background-modifier-border-hover);
-}
-
-.atmosphere-refresh-btn svg {
-	width: 16px;
-	height: 16px;
+	opacity: 1;
 }
 
-.atmosphere-refresh-btn-spinning svg {
-	animation: atmosphere-spin 0.8s linear infinite;
+.atmosphere-refresh-btn-spinning {
+	animation: atmosphere-spin 0.6s linear infinite;
 }
 
 @keyframes atmosphere-spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
 }
 
 .atmosphere-filters {