Experimental: Display workspace rules in unassigned panel

- Add new RulesList.svelte component to display workspace rules in the unassigned panel.
- Integrate RulesList in UnassignedView.svelte gated by new workspaceRulesEnabled feature flag.
- Enhance ExperimentalSettings.svelte to allow toggling the workspace rules experimental feature.
- Update uiFeatureFlags to include workspaceRulesEnabled persisted flag.
- Update rulesService for correct Svelte query mutation usage and new listWorkspaceRules method for selector transformation.
- Adds an experimental feature for listing rules; does not include full backend implementation yet.
- Adds stub for backendService as placeholder for future backend integration.

Author: estib-vega

apps/desktop/src/components/RulesList.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import ReduxResult from '$components/ReduxResult.svelte';
+	import RulesService from '$lib/rules/rulesService.svelte';
+	import { getContext } from '@gitbutler/shared/context';
+	import Button from '@gitbutler/ui/Button.svelte';
+
+	type Props = {
+		projectId: string;
+	};
+
+	const { projectId }: Props = $props();
+
+	const rulesService = getContext(RulesService);
+	const [_, creatingRule] = rulesService.createWorkspaceRule;
+
+	const rules = $derived(rulesService.listWorkspaceRules(projectId));
+</script>
+
+<div class="rules-list">
+	<ReduxResult {projectId} result={rules.current}>
+		{#snippet children(rules)}
+			<div>
+				{#each rules as rule (rule.id)}
+					<pre class="text-12">
+                        {JSON.stringify(rules, null, 2)}
+                    </pre>
+				{:else}
+					<p class="text-12 text-grey">No rules found.</p>
+				{/each}
+			</div>
+		{/snippet}
+	</ReduxResult>
+	<Button
+		wide
+		icon="plus-small"
+		kind="outline"
+		disabled
+		tooltip="Not implemented yet"
+		loading={creatingRule.current.isLoading}>Add new rule</Button
+	>
+</div>
+
+<style lang="postcss">
+	.rules-list {
+		display: flex;
+		flex-direction: column;
+		padding: 12px;
+		gap: 8px;
+	}
+
+	.text-grey {
+		color: var(--clr-text-2);
+	}
+</style>

apps/desktop/src/components/UnassignedView.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import RulesList from '$components/RulesList.svelte';
 	import UnassignedFoldButton from '$components/UnassignedFoldButton.svelte';
 	import WorktreeChanges from '$components/WorktreeChanges.svelte';
 	import WorktreeTipsFooter from '$components/WorktreeTipsFooter.svelte';
 	import noChanges from '$lib/assets/illustrations/no-changes.svg?raw';
+	import { workspaceRulesEnabled } from '$lib/config/uiFeatureFlags';
 	import { DefinedFocusable } from '$lib/focus/focusManager.svelte';
 	import { IntelligentScrollingService } from '$lib/intelligentScrolling/service';
 	import { UncommittedService } from '$lib/selection/uncommittedService.svelte';
@@ -103,6 +105,10 @@
 				</Button>
 			</div>
 		{/if}
+
+		{#if $workspaceRulesEnabled}
+			<RulesList {projectId} />
+		{/if}
 	</div>
 {:else}
 	<div

apps/desktop/src/components/profileSettings/ExperimentalSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { SettingsService } from '$lib/config/appSettingsV2';
-	import { ircEnabled, ircServer } from '$lib/config/uiFeatureFlags';
+	import { ircEnabled, ircServer, workspaceRulesEnabled } from '$lib/config/uiFeatureFlags';
 	import { User } from '$lib/user/user';
 	import { getContext, getContextStore } from '@gitbutler/shared/context';
 	import SectionCard from '@gitbutler/ui/SectionCard.svelte';
@@ -79,11 +79,28 @@
 		{/if}
 
 		<SectionCard
-			labelFor="irc"
+			labelFor="rules"
 			roundedTop={!$settingsStore?.featureFlags.actions}
-			roundedBottom={!$ircEnabled}
+			roundedBottom={false}
 			orientation="row"
 		>
+			{#snippet title()}
+				Workspace Rules
+			{/snippet}
+			{#snippet caption()}
+				Go full dominatrix on your workspace and add a bunch rules that can automatically trigger
+				actions.
+			{/snippet}
+			{#snippet actions()}
+				<Toggle
+					id="rules"
+					checked={$workspaceRulesEnabled}
+					onclick={() => workspaceRulesEnabled.set(!$workspaceRulesEnabled)}
+				/>
+			{/snippet}
+		</SectionCard>
+
+		<SectionCard labelFor="irc" roundedTop={false} roundedBottom={!$ircEnabled} orientation="row">
 			{#snippet title()}
 				IRC
 			{/snippet}

apps/desktop/src/lib/backend/backendService.svelte.ts

@@ -0,0 +1 @@
+export default class BackendService {}

apps/desktop/src/lib/config/uiFeatureFlags.ts

@@ -10,3 +10,4 @@ export const autoSelectBranchNameFeature = persisted(false, 'autoSelectBranchLan
 export const ircEnabled = persistWithExpiration(false, 'feature-irc', 1440 * 30);
 export const ircServer = persistWithExpiration('', 'feature-irc-server', 1440 * 30);
 export const rewrapCommitMessage = persistWithExpiration(true, 'rewrap-commit-msg', 1440 * 30);
+export const workspaceRulesEnabled = persisted(false, 'workspace-rules-enabled');

apps/desktop/src/lib/rules/rulesService.svelte.ts

@@ -16,19 +16,22 @@ export default class RulesService {
 	}
 
 	get createWorkspaceRule() {
-		return this.api.endpoints.createWorkspaceRule.useMutation;
+		return this.api.endpoints.createWorkspaceRule.useMutation();
 	}
 
 	get deleteWorkspaceRule() {
-		return this.api.endpoints.deleteWorkspaceRule.useMutation;
+		return this.api.endpoints.deleteWorkspaceRule.useMutation();
 	}
 
 	get updateWorkspaceRule() {
-		return this.api.endpoints.updateWorkspaceRule.useMutation;
+		return this.api.endpoints.updateWorkspaceRule.useMutation();
 	}
 
-	get listWorkspaceRules() {
-		return this.api.endpoints.listWorkspaceRules.useQuery;
+	listWorkspaceRules(projectId: string) {
+		return this.api.endpoints.listWorkspaceRules.useQuery(
+			{ projectId },
+			{ transform: (result) => workspaceRulesSelectors.selectAll(result) }
+		);
 	}
 }
 
@@ -80,3 +83,5 @@ function injectEndpoints(api: BackendApi) {
 const workspaceRulesAdapter = createEntityAdapter<WorkspaceRule, WorkspaceRuleId>({
 	selectId: (rule) => rule.id
 });
+
+const workspaceRulesSelectors = workspaceRulesAdapter.getSelectors();