Merge pull request #1196 from Immick/fix/hide-not-applicable-items

fix(customisation-sync): hide identical items with "Hide not applicable items"

src/features/ConfigSync/PluginCombo.svelte

@@ -12,6 +12,7 @@
     // import { askString } from "../../common/utils";
     import { Menu } from "@/deps.ts";
     import { $msg as translateMessage } from "@/common/translation";
+    import { selectSourceTerms } from "./PluginTerms.ts";
 
     export let list: IPluginDataExDisplay[] = [];
     export let thisTerm = "";
@@ -182,24 +183,20 @@
         }
     }
 
-    async function updateTerms(list: IPluginDataExDisplay[], selectNewest: boolean, isMaintenanceMode: boolean) {
+    async function updateTerms(
+        list: IPluginDataExDisplay[],
+        selectNewest: boolean,
+        isMaintenanceMode: boolean,
+        hideNotApplicable: boolean
+    ) {
         const local = list.find((e) => e.term == thisTerm);
         // selected = "";
-        if (isMaintenanceMode) {
-            terms = [...new Set(list.map((e) => e.term))];
-        } else if (hideNotApplicable) {
-            const termsTmp = [];
-            const wk = [...new Set(list.map((e) => e.term))];
-            for (const termName of wk) {
-                const remote = list.find((e) => e.term == termName);
-                if ((await comparePlugin(local, remote)).canApply) {
-                    termsTmp.push(termName);
-                }
-            }
-            terms = [...termsTmp];
-        } else {
-            terms = [...new Set(list.map((e) => e.term))].filter((e) => e != thisTerm);
-        }
+        terms = await selectSourceTerms(
+            list,
+            thisTerm,
+            { isMaintenanceMode, hideNotApplicable },
+            async (local, remote) => (await comparePlugin(local, remote)).canApply
+        );
         let newest: IPluginDataExDisplay | undefined = local;
         if (selectNewest) {
             for (const term of terms) {
@@ -230,7 +227,7 @@
             }
             // currentSelectNewest = selectNewest;
         }
-        updateTerms(list, doSelectNewest, isMaintenanceMode);
+        updateTerms(list, doSelectNewest, isMaintenanceMode, hideNotApplicable);
         currentSelectNewest = selectNewest;
     }
     $: {

src/features/ConfigSync/PluginPane.svelte

@@ -32,7 +32,8 @@
     export let core :LiveSyncBaseCore;
     // $: core = plugin.core;
 
-    $: hideNotApplicable = false;
+    // Comparing every copy is only worth it while the user asks to hide the unchanged ones.
+    $: hideNotApplicable = hideEven;
     $: thisTerm = core.services.setting.getDeviceAndVaultName();
 
     const addOn = core.getAddOn<ConfigSync>(ConfigSync.name)!;

src/features/ConfigSync/PluginTerms.ts

@@ -0,0 +1,32 @@
+import type { IPluginDataExDisplay } from "./CmdConfigSync.ts";
+
+export type CanApplyFrom = (
+    local: IPluginDataExDisplay | undefined,
+    remote: IPluginDataExDisplay | undefined
+) => Promise<boolean>;
+
+/**
+ * Devices offered as sources for one item in the Customisation Sync dialogue.
+ *
+ * Maintenance mode lists every device, including this one. Otherwise every other
+ * device that has the item is listed; with `hideNotApplicable`, only devices whose
+ * copy can actually be applied remain, so an item that is the same everywhere ends
+ * up with no source and is shown as "All the same or non-existent".
+ */
+export async function selectSourceTerms(
+    list: IPluginDataExDisplay[],
+    thisTerm: string,
+    options: { isMaintenanceMode: boolean; hideNotApplicable: boolean },
+    canApplyFrom: CanApplyFrom
+): Promise<string[]> {
+    const terms = [...new Set(list.map((e) => e.term))];
+    if (options.isMaintenanceMode) return terms;
+    if (!options.hideNotApplicable) return terms.filter((term) => term != thisTerm);
+    const local = list.find((e) => e.term == thisTerm);
+    const applicable: string[] = [];
+    for (const term of terms) {
+        const remote = list.find((e) => e.term == term);
+        if (await canApplyFrom(local, remote)) applicable.push(term);
+    }
+    return applicable;
+}

src/features/ConfigSync/PluginTerms.unit.spec.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it, vi } from "vitest";
+import type { IPluginDataExDisplay } from "./CmdConfigSync.ts";
+import { selectSourceTerms } from "./PluginTerms.ts";
+
+const copyOn = (term: string) => ({ term, files: [] }) as unknown as IPluginDataExDisplay;
+const list = [copyOn("desktop"), copyOn("phone"), copyOn("tablet")];
+const differsOn =
+    (...terms: string[]) =>
+    (_local: IPluginDataExDisplay | undefined, remote: IPluginDataExDisplay | undefined) =>
+        Promise.resolve(terms.includes(remote?.term ?? ""));
+
+describe("selectSourceTerms", () => {
+    it("offers every other device without comparing copies by default", async () => {
+        const canApplyFrom = vi.fn(differsOn());
+        const terms = await selectSourceTerms(
+            list,
+            "desktop",
+            { isMaintenanceMode: false, hideNotApplicable: false },
+            canApplyFrom
+        );
+        expect(terms).toEqual(["phone", "tablet"]);
+        expect(canApplyFrom).not.toHaveBeenCalled();
+    });
+
+    it("offers every device, including this one, in maintenance mode", async () => {
+        const terms = await selectSourceTerms(
+            list,
+            "desktop",
+            { isMaintenanceMode: true, hideNotApplicable: true },
+            differsOn()
+        );
+        expect(terms).toEqual(["desktop", "phone", "tablet"]);
+    });
+
+    it("leaves out devices whose copy is the same when hiding items that are not applicable", async () => {
+        const terms = await selectSourceTerms(
+            list,
+            "desktop",
+            { isMaintenanceMode: false, hideNotApplicable: true },
+            differsOn("tablet")
+        );
+        expect(terms).toEqual(["tablet"]);
+    });
+
+    it("offers no source for an item that is the same on every device", async () => {
+        const terms = await selectSourceTerms(
+            list,
+            "desktop",
+            { isMaintenanceMode: false, hideNotApplicable: true },
+            differsOn()
+        );
+        expect(terms).toEqual([]);
+    });
+});

test/e2e-obsidian/README.md

@@ -219,7 +219,7 @@ This proves in real Obsidian the plug-in behaviour shared by supported platforms
 
 `test:e2e:obsidian:customisation-sync` runs a two-vault Customisation Sync workflow. It scans a real snippet CSS file, config JSON file, and sample plug-in fixture into per-file Customisation Sync data, synchronises the entries through CouchDB, applies them on the second vault, verifies the resulting `.obsidian` files, propagates a snippet update, and verifies deletion of the source-vault snippet sync data without confusing it with the target vault's own applied copy.
 
-The workflow also opens the Customisation Sync dialogue. `--case=mtime` gives the multi-file plug-in fixture modern millisecond timestamps and requires an older remote copy to remain labelled **Older** and unselected by **Select All Shiny**. With no case argument, this check runs before the existing apply, update, and deletion workflow.
+The workflow also opens the Customisation Sync dialogue. `--case=visibility` checks that **Hide not applicable items** hides an identical snippet, preserves a different snippet and its source selector, and restores the identical snippet when cleared. `--case=mtime` gives the multi-file plug-in fixture modern millisecond timestamps and requires an older remote copy to remain labelled **Older** and unselected by **Select All Shiny**. With no case argument, both checks run before the existing apply, update, and deletion workflow.
 
 `test:e2e:obsidian:received-change-readiness` uses two sequential real Obsidian sessions and isolated CouchDB databases. The source creates ordinary notes and their Chunks; the target starts continuous replication, resets readiness through the public lifecycle service, and receives those documents while its Vault files remain absent. Marking the target ready twice must emit one readiness event and reflect the queued content. A second note remains absent after readiness while database reflecting is explicitly suspended, then appears when that setting is resumed. This focused scenario is outside `test:e2e:obsidian:local-suite`.
 

test/e2e-obsidian/scripts/customisation-sync.ts

@@ -27,6 +27,7 @@ import {
 import { startObsidianLiveSyncSession, type ObsidianLiveSyncSession } from "../runner/session.ts";
 import { waitForVisibleObsidianDialogue, withObsidianPage } from "../runner/ui.ts";
 import { createTemporaryVault, type TemporaryVault } from "../runner/vault.ts";
+import type { Locator } from "playwright";
 
 process.env.E2E_OBSIDIAN_CLI_TIMEOUT_MS ??= "30000";
 process.env.E2E_OBSIDIAN_COUCHDB_TIMEOUT_MS ??= "20000";
@@ -58,6 +59,11 @@ const pluginDir = ".obsidian/plugins/livesync-e2e-sample";
 const pluginManifestPath = `${pluginDir}/manifest.json`;
 const pluginMainPath = `${pluginDir}/main.js`;
 const pluginStylesPath = `${pluginDir}/styles.css`;
+const identicalSnippetPath = ".obsidian/snippets/livesync-customisation-e2e-identical.css";
+const identicalSnippetContent = ".livesync-customisation-identical { color: #3d6f54; }\n";
+const differentSnippetPath = ".obsidian/snippets/livesync-customisation-e2e-different.css";
+const sourceDifferentSnippetContent = ".livesync-customisation-different { color: #73548f; }\n";
+const targetDifferentSnippetContent = ".livesync-customisation-different { color: #3d6f54; }\n";
 const pluginManifestContent =
     JSON.stringify(
         {
@@ -85,15 +91,20 @@ const targetPluginStylesContent = ".livesync-e2e-sample { color: #3d6f54; }\n";
 // These dates straddle a signed 32-bit wrap boundary for millisecond timestamps.
 const sourcePluginMtime = new Date("2026-09-01T12:00:00.000Z");
 const targetPluginMtime = new Date("2026-09-15T12:00:00.000Z");
+const matchingMtime = new Date("2026-09-15T12:00:00.000Z");
 const sourceDeviceName = "customisation-sync-a";
 const targetDeviceName = "customisation-sync-b";
+const visibilityFixtures = [
+    { path: identicalSnippetPath, source: identicalSnippetContent, target: identicalSnippetContent },
+    { path: differentSnippetPath, source: sourceDifferentSnippetContent, target: targetDifferentSnippetContent },
+] as const;
 const pluginFixtures = [
     { path: pluginManifestPath, source: pluginManifestContent, target: pluginManifestContent },
     { path: pluginMainPath, source: pluginMainContent, target: pluginMainContent },
     { path: pluginStylesPath, source: pluginStylesContent, target: targetPluginStylesContent },
 ] as const;
 
-type CustomisationSyncCase = "all" | "mtime";
+type CustomisationSyncCase = "all" | "visibility" | "mtime";
 
 type CustomisationSyncTestGlobal = typeof globalThis & {
     app?: { commands?: { executeCommandById(commandId: string): boolean } };
@@ -136,13 +147,59 @@ function selectedCase(): CustomisationSyncCase {
     if (args.length === 0) return "all";
     const arg = args[0];
     if (args.length !== 1 || !arg?.startsWith("--case=")) {
-        throw new Error("Usage: test:e2e:obsidian:customisation-sync [--case=all|mtime]");
+        throw new Error("Usage: test:e2e:obsidian:customisation-sync [--case=all|visibility|mtime]");
     }
     const selected = arg.slice("--case=".length);
-    if (selected === "all" || selected === "mtime") return selected;
+    if (selected === "all" || selected === "visibility" || selected === "mtime") return selected;
     throw new Error(`Unknown Customisation Sync E2E case: ${selected}`);
 }
 
+async function assertSourceCandidate(row: Locator, term: string, name: string): Promise<void> {
+    const candidate = row.locator(`select option[value="${term}"]`);
+    try {
+        await candidate.waitFor({ state: "attached", timeout: 10000 });
+    } catch {
+        throw new Error(`Customisation Sync ${name} source candidate was not available: ${term}`);
+    }
+}
+
+async function inspectCustomisationVisibility(session: ObsidianLiveSyncSession): Promise<void> {
+    await withObsidianPage(session.remoteDebuggingPort, async (page) => {
+        const opened = await page.evaluate(() =>
+            (globalThis as CustomisationSyncTestGlobal).app?.commands?.executeCommandById(
+                "obsidian-livesync:livesync-plugin-dialog-ex"
+            )
+        );
+        if (opened !== true) throw new Error("Could not open the Customisation Sync dialogue command.");
+        const dialogue = await waitForVisibleObsidianDialogue(page, "Customization Sync (Beta3)");
+        const identicalName = identicalSnippetPath.split("/").pop() ?? identicalSnippetPath;
+        const differentName = differentSnippetPath.split("/").pop() ?? differentSnippetPath;
+        const identicalRow = dialogue.locator(".labelrow").filter({ hasText: identicalName }).first();
+        const differentRow = dialogue.locator(".labelrow").filter({ hasText: differentName }).first();
+        const hideCheckbox = dialogue
+            .locator("label")
+            .filter({ hasText: "Hide not applicable items" })
+            .locator('input[type="checkbox"]');
+
+        await identicalRow.waitFor({ state: "visible", timeout: 10000 });
+        await differentRow.waitFor({ state: "visible", timeout: 10000 });
+        await assertSourceCandidate(identicalRow, sourceDeviceName, "identical item");
+        await assertSourceCandidate(differentRow, sourceDeviceName, "different item");
+        if (await hideCheckbox.isChecked()) throw new Error("Hide not applicable items started checked.");
+
+        await hideCheckbox.check();
+        await identicalRow.waitFor({ state: "hidden", timeout: 10000 });
+        await differentRow.waitFor({ state: "visible", timeout: 10000 });
+        await assertSourceCandidate(differentRow, sourceDeviceName, "different item while hiding identical items");
+
+        await hideCheckbox.uncheck();
+        await identicalRow.waitFor({ state: "visible", timeout: 10000 });
+        await assertSourceCandidate(identicalRow, sourceDeviceName, "identical item after unhiding");
+        await page.keyboard.press("Escape");
+        await dialogue.waitFor({ state: "hidden", timeout: 10000 });
+    });
+}
+
 async function inspectPluginFreshnessAndNewestSelection(session: ObsidianLiveSyncSession): Promise<void> {
     await withObsidianPage(session.remoteDebuggingPort, async (page) => {
         const opened = await page.evaluate(() =>
@@ -515,6 +572,7 @@ async function applyRemoteCustomisationGroup(
 
 async function main(): Promise<void> {
     const testCase = selectedCase();
+    const testVisibility = testCase === "all" || testCase === "visibility";
     const testMtime = testCase === "all" || testCase === "mtime";
     const binary = requireObsidianBinary();
     const cli = discoverObsidianCli();
@@ -546,11 +604,23 @@ async function main(): Promise<void> {
         await writeVaultFile(vaultA.path, pluginManifestPath, pluginManifestContent);
         await writeVaultFile(vaultA.path, pluginMainPath, pluginMainContent);
         await writeVaultFile(vaultA.path, pluginStylesPath, pluginStylesContent);
+        if (testVisibility) {
+            for (const fixture of visibilityFixtures) {
+                await writeVaultFile(vaultA.path, fixture.path, fixture.source);
+                await setVaultFileMtime(vaultA.path, fixture.path, matchingMtime);
+            }
+        }
         if (testMtime) {
             for (const fixture of pluginFixtures) {
                 await setVaultFileMtime(vaultA.path, fixture.path, sourcePluginMtime);
             }
         }
+        if (testVisibility) {
+            for (const fixture of visibilityFixtures) {
+                await writeVaultFile(vaultB.path, fixture.path, fixture.target);
+                await setVaultFileMtime(vaultB.path, fixture.path, matchingMtime);
+            }
+        }
         if (testMtime) {
             for (const fixture of pluginFixtures) {
                 await writeVaultFile(vaultB.path, fixture.path, fixture.target);
@@ -566,6 +636,11 @@ async function main(): Promise<void> {
         for (const fixture of pluginFixtures) {
             await storeCustomisationFile(context.cliBinary, session.cliEnv, fixture.path);
         }
+        if (testVisibility) {
+            for (const fixture of visibilityFixtures) {
+                await storeCustomisationFile(context.cliBinary, session.cliEnv, fixture.path);
+            }
+        }
         const entry = await waitForCustomisationEntry(context.cliBinary, session.cliEnv, "SNIPPET", snippetName);
         const configEntry = await waitForCustomisationEntry(context.cliBinary, session.cliEnv, "CONFIG", configName);
         const pluginEntries = await waitForCustomisationEntries(
@@ -605,6 +680,11 @@ async function main(): Promise<void> {
         await session.app.stop();
 
         session = await startConfiguredSession(context, vaultB, targetDeviceName);
+        if (testVisibility) {
+            for (const fixture of visibilityFixtures) {
+                await storeCustomisationFile(context.cliBinary, session.cliEnv, fixture.path);
+            }
+        }
         if (testMtime) {
             for (const fixture of pluginFixtures) {
                 await storeCustomisationFile(context.cliBinary, session.cliEnv, fixture.path);
@@ -612,6 +692,14 @@ async function main(): Promise<void> {
         }
         await pushLocalChanges(context.cliBinary, session.cliEnv);
         await waitForCustomisationEntry(context.cliBinary, session.cliEnv, "SNIPPET", snippetName, sourceDeviceName);
+        if (testVisibility) {
+            for (const fixture of visibilityFixtures) {
+                const name = fixture.path.split("/").pop() ?? fixture.path;
+                for (const term of [sourceDeviceName, targetDeviceName]) {
+                    await waitForCustomisationEntry(context.cliBinary, session.cliEnv, "SNIPPET", name, term);
+                }
+            }
+        }
         if (testMtime) {
             await waitForCustomisationEntries(
                 context.cliBinary,
@@ -631,6 +719,7 @@ async function main(): Promise<void> {
             );
         }
         try {
+            if (testVisibility) await inspectCustomisationVisibility(session);
             if (testMtime) await inspectPluginFreshnessAndNewestSelection(session);
         } catch (error) {
             await session.app.stop().catch(() => undefined);

updates.md

@@ -43,6 +43,7 @@ Earlier releases remain available in the 1.0 release history, the 1.0 preview hi
 
 - Received changes held during start-up or a fetch are applied when LiveSync becomes ready, without waiting for another change or a settings save. **Suspend database reflecting** continues to hold changes (#1200).
 - Customisation Sync now compares full millisecond timestamps, so the freshness labels and **Select All Shiny** no longer mistake an older copy for a newer one because of timestamp truncation. (#1194)
+- **Hide not applicable items** now hides identical Customisation Sync items and refreshes the list when toggled. Items with applicable differences stay visible. (#1193)
 
 ## 1.0.32