From 75b67868f23b6bc9d5c1da1d5d485d78176a092d Mon Sep 17 00:00:00 2001
From: mgmobrien <USERNAME@users.noreply.github.com>
Date: Sun, 1 Feb 2026 19:16:02 -0700
Subject: [PATCH 1/2] Add data-page attribute for E2E test selectors

Adds a data-page attribute to the settings container that exposes
which view is currently active. This gives E2E tests a stable way
to detect the current page without fingerprint-matching on content.

Values: relay-home, relay-detail, folder-detail, shared-folder-orphan

No user-visible changes - just a data attribute for test automation.
---
 src/components/PluginSettings.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/PluginSettings.svelte b/src/components/PluginSettings.svelte
index ed00149..d9e8ac5 100644
--- a/src/components/PluginSettings.svelte
+++ b/src/components/PluginSettings.svelte
@@ -273,7 +273,8 @@
 {:else if !Platform.isMobile}
 	<Announcement {plugin} />
 {/if}
-<div class="vertical-tab-content">
+<!-- E2E: data-page for test selectors. Update if routing changes. -->
+<div class="vertical-tab-content" data-page={remoteFolder ? 'folder-detail' : sharedFolder ? 'shared-folder-orphan' : currentRelay ? 'relay-detail' : 'relay-home'}>
 	{#if remoteFolder}
 		<ManageRemoteFolder
 			{plugin}

From 89beb3faf951cb5378fb394ddf3436023ad9e71a Mon Sep 17 00:00:00 2001
From: mgmobrien <USERNAME@users.noreply.github.com>
Date: Sun, 1 Feb 2026 20:23:17 -0700
Subject: [PATCH 2/2] Refactor: move data-view attributes to individual view
 components

Per review feedback, each view component now owns its own data-view
attribute rather than having the parent calculate it. This is cleaner
because:
- Each component owns its identity
- No central routing logic needed for test selectors
- Adding new views doesn't require touching PluginSettings

Attributes:
- Relays.svelte: data-view="relays"
- ManageRelay.svelte: data-view="manage-relay"
- ManageSharedFolder.svelte: data-view="manage-shared-folder"
- ManageRemoteFolder.svelte: data-view="manage-remote-folder"

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/ManageRelay.svelte        | 3 +++
 src/components/ManageRemoteFolder.svelte | 3 +++
 src/components/ManageSharedFolder.svelte | 3 +++
 src/components/PluginSettings.svelte     | 3 +--
 src/components/Relays.svelte             | 4 ++++
 5 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/ManageRelay.svelte b/src/components/ManageRelay.svelte
index 77eea89..1fa5267 100644
--- a/src/components/ManageRelay.svelte
+++ b/src/components/ManageRelay.svelte
@@ -519,6 +519,8 @@
 	});
 </script>
 
+<!-- E2E: data-view for test selectors -->
+<div data-view="manage-relay">
 <Breadcrumbs
 	items={[
 		{
@@ -993,6 +995,7 @@
 				Transfer
 			</button>
 		</SettingItem-->
+</div>
 
 <style>
 	div.spacer {
diff --git a/src/components/ManageRemoteFolder.svelte b/src/components/ManageRemoteFolder.svelte
index cd3e793..69630f6 100644
--- a/src/components/ManageRemoteFolder.svelte
+++ b/src/components/ManageRemoteFolder.svelte
@@ -387,6 +387,8 @@
 	}
 </script>
 
+<!-- E2E: data-view for test selectors -->
+<div data-view="manage-remote-folder">
 <Breadcrumbs
 	items={[
 		{
@@ -635,6 +637,7 @@
 		{/if}
 	</SettingGroup>
 {/if}
+</div>
 
 <style>
 	div.spacer {
diff --git a/src/components/ManageSharedFolder.svelte b/src/components/ManageSharedFolder.svelte
index 0faee32..81b449b 100644
--- a/src/components/ManageSharedFolder.svelte
+++ b/src/components/ManageSharedFolder.svelte
@@ -31,6 +31,8 @@
 	}
 </script>
 
+<!-- E2E: data-view for test selectors -->
+<div data-view="manage-shared-folder">
 <Breadcrumbs
 	items={[
 		{
@@ -83,3 +85,4 @@
 		</SettingItem>
 	</SettingGroup>
 {/if}
+</div>
diff --git a/src/components/PluginSettings.svelte b/src/components/PluginSettings.svelte
index d9e8ac5..ed00149 100644
--- a/src/components/PluginSettings.svelte
+++ b/src/components/PluginSettings.svelte
@@ -273,8 +273,7 @@
 {:else if !Platform.isMobile}
 	<Announcement {plugin} />
 {/if}
-<!-- E2E: data-page for test selectors. Update if routing changes. -->
-<div class="vertical-tab-content" data-page={remoteFolder ? 'folder-detail' : sharedFolder ? 'shared-folder-orphan' : currentRelay ? 'relay-detail' : 'relay-home'}>
+<div class="vertical-tab-content">
 	{#if remoteFolder}
 		<ManageRemoteFolder
 			{plugin}
diff --git a/src/components/Relays.svelte b/src/components/Relays.svelte
index e3704f9..395f58e 100644
--- a/src/components/Relays.svelte
+++ b/src/components/Relays.svelte
@@ -192,6 +192,8 @@
 	}
 </script>
 
+<!-- E2E: data-view for test selectors -->
+<div data-view="relays">
 <SettingItemHeading name="Join a Relay Server"></SettingItemHeading>
 <SettingGroup>
 	<SettingItem
@@ -347,6 +349,8 @@
 	</SettingGroup>
 {/if}
 
+</div>
+
 <style>
 	span.faint {
 		color: var(--text-faint);