rules-ui-fixes (#9667)

* update header and conte menu styles

* feat: improve rule filters UI and toggle filter menu behavior

* feat(ui): add add-to-list and remove-from-list icons and update branch icon

* fix(ui): move helperText outside inner div and remove margin-top

* refactor(rule): migrate tree status to file status support

Refactored rule.ts to replace TreeStatus with FileStatus for better consistency with UI
components. Updated related functions to map file status correctly and improved semantic type
strings.

* fix(utils): update computeChangeStatus to return string file statuses

Updated utility function computeChangeStatus to return string statuses consistent with new
FileStatus types: 'addition', 'deletion', 'modification', 'rename'.

* test(stories): add extensive textbox component stories

Added multiple stories to showcase Textbox component with various input types, icons,
emojis, sizes, states, and custom behaviors for comprehensive documentation and testing.

* test(stories): update storybook files for file status and select enhancements

Updated storybook stories to use new file status values and added new select component
stories with icons, emojis, and mixed icon types for better testing coverage.

* feat(ui): enhance Textbox icons and disabled state styles

Added support for separate left and right icons in Textbox component with custom snippets.
Improved disabled state styling and button disables for count action buttons and show/hide
icon.

* refactor(file): update FileStatusBadge and types with descriptive statuses

Changed FileStatus type to descriptive string literals and updated FileStatusBadge component
to reflect this new naming scheme including tooltip and color mappings.

* fix(ui): update RuleFiltersEditor for file status support and UI improvements

Updated RuleFiltersEditor to use new file status options, added file status badge integration,
refined UI behaviors such as icon placement and filter toggle improvements.

* feat(select): add icon support and refine select UI components

Added support for icon props in Select and SelectItem components. Updated styling and added
stories to enhance UI appearance and usability.

* test(stories): add long options story for select component

Added a new story in Select.stories.svelte to test long option labels and verify text overflow and ellipsis behavior in the UI select component.

* fix(ui): add branch icon and ellipsis to branch selector placeholder

* refactor: update Rule component UI and fix RulesList mode order

* feat(rules): add 'add' mode for creating new rules and improve UI state handling

* fix(ui): update RuleFiltersEditor inputs to use oninput for live updates

* feat(ui): add autofocus support in Select component

Added autofocus prop to Select.svelte and updated keyboard handling for list opening and navigation to improve accessibility and usability.
fix(ui): add autofocus to filter inputs for better UX

Added autofocus attribute to filter inputs in RuleFiltersEditor.svelte for improved user experience during filtering.

* fix(ui): simplify Textbox usage in EmojiPicker header

Replaced multiline Textbox component with simpler inline self-closing Textbox in EmojiPicker.svelte.
fix(config): update onDisk method to await Promise

Modified onDisk method in appSettings.ts to properly await the promise returned by get(writable) for consistency.
fix(ui): cleanup unused imports in Minimap.svelte

Removed extra blank line in imports section in Minimap.svelte for code cleanliness.
fix(ui): correct typo in openAddRuleContextMenu function

Fixed a typo in the function name from openAddRuleContextMenut to openAddRuleContextMenu in RulesList.svelte.
chore(pkg): add esm-env dependency and update vitest version in pnpm lock

Added esm-env dependency to pnpm-lock.yaml and updated jsdom version in vitest optional dependencies.

* chore: remove enableSourcemap and reorder dependencies for cleanup

* fix(logging): use esm-env DEV constant for environment check

Replaced import.meta.env.MODE check with esm-env DEV constant in logging.ts for better environment detection.

Author: PavelLaptev

apps/desktop/src/components/NewRuleMenu.svelte

@@ -27,12 +27,12 @@
 		contextMenu?.close();
 	}
 
-	export function open(e: MouseEvent) {
-		contextMenu?.open(e);
+	export function toggle(e: MouseEvent) {
+		contextMenu?.toggle(e);
 	}
 </script>
 
-<ContextMenu bind:this={contextMenu} rightClickTrigger={trigger}>
+<ContextMenu bind:this={contextMenu} leftClickTrigger={trigger}>
 	<ContextMenuSection>
 		<ContextMenuItem
 			icon="folder"
@@ -69,7 +69,7 @@
 	</ContextMenuSection>
 	{#if addEmpty}
 		<ContextMenuSection>
-			<ContextMenuItem label="Assign all to branch" onclick={handleAddEmpty} />
+			<ContextMenuItem icon="arrow-right" label="Assign all to branch" onclick={handleAddEmpty} />
 		</ContextMenuSection>
 	{/if}
 </ContextMenu>

apps/desktop/src/components/Rule.svelte

@@ -10,7 +10,7 @@
 	import { getStackName } from '$lib/stacks/stack';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { inject } from '@gitbutler/shared/context';
-	import { Button, Icon, Modal, Tooltip } from '@gitbutler/ui';
+	import { Button, FileStatusBadge, Icon, Modal, Tooltip } from '@gitbutler/ui';
 
 	type Props = {
 		projectId: string;
@@ -66,7 +66,7 @@
 			<Icon name="text-width" opacity={0.6} />
 			<span class="text-12 truncate" title={filter.subject}>{filter.subject}</span>
 		{:else if filter.type === 'fileChangeType'}
-			<Icon name="file-changes" opacity={0.6} />
+			<FileStatusBadge status={filter.subject} style="dot" />
 			<span class="text-12 truncate">{treeStatusToShortString(filter.subject)}</span>
 		{:else if filter.type === 'semanticType'}
 			<Icon name="tag" opacity={0.6} />
@@ -76,7 +76,7 @@
 {/snippet}
 
 {#snippet assignChip()}
-	<div class="rule__chip">
+	<div class="rule__action-chip">
 		<Icon name="arrow-right" />
 	</div>
 {/snippet}
@@ -85,7 +85,13 @@
 	<div class="rule__actions">
 		<div class="rule__actions-buttons">
 			<Button icon="edit-text" size="tag" kind="ghost" onclick={editRule} />
-			<Button icon="bin" size="tag" kind="ghost" onclick={() => confirmationModal?.show()} />
+			<Button
+				icon="remove-from-list"
+				style="error"
+				size="tag"
+				kind="ghost"
+				onclick={() => confirmationModal?.show()}
+			/>
 		</div>
 	</div>
 {/snippet}
@@ -134,7 +140,8 @@
 	.rule {
 		display: flex;
 		position: relative;
-		padding: 12px;
+		flex-wrap: wrap;
+		padding: 12px 10px;
 		overflow: hidden;
 		gap: 4px;
 
@@ -143,6 +150,7 @@
 		}
 
 		&:hover .rule__actions {
+			transform: scale(1);
 			opacity: 1;
 			pointer-events: auto;
 		}
@@ -151,43 +159,48 @@
 	.rule__actions {
 		display: flex;
 		position: absolute;
-		top: 9px;
-		right: 9px;
+		top: 8px;
+		right: 8px;
 		align-items: center;
-		background-color: var(--clr-bg-1);
-		box-shadow: 0 0 34px 30px var(--clr-bg-1);
-
 		/* Initial state is hidden */
+		transform: scale(0.9);
+		transform-origin: top right;
+		background-color: var(--clr-bg-1);
+		box-shadow: 0 0 30px 30px var(--clr-bg-1);
 		opacity: 0;
 		pointer-events: none;
-		transition: opacity var(--transition-slow);
+		transition:
+			opacity var(--transition-fast),
+			transform var(--transition-medium);
 	}
 
 	.rule__actions-buttons {
 		display: flex;
-		padding: 2px 4px;
-		gap: 4px;
+		padding: 3px;
+		gap: 2px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-ml);
 	}
 
-	.rule__chip {
+	.rule__action-chip {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border-radius: 46px;
+		height: var(--size-tag);
+		padding: 0 4px;
+		border-radius: 100px;
 		background: var(--clr-bg-2);
+		color: var(--clr-text-2);
 	}
 
 	.rule__pill {
 		display: flex;
 		align-items: center;
-		padding: 4px 6px;
-		gap: 4px;
-		border: 1px solid var(--clr-btn-ntrl-outline);
-		border-radius: 46px;
+		height: var(--size-tag);
+		padding: 0 6px;
+		gap: 6px;
+		border: 1px solid var(--clr-border-2);
+		border-radius: 100px;
 
 		&.error {
 			border: 1px solid var(--clr-theme-err-element);

apps/desktop/src/components/RuleFiltersEditor.svelte

@@ -2,9 +2,7 @@
 	import NewRuleMenu from '$components/NewRuleMenu.svelte';
 	import {
 		type SemanticType,
-		type TreeStatus,
 		type RuleFilterType,
-		RULE_FILTER_TREE_STATUS,
 		SEMANTIC_TYPES,
 		type RuleFilter,
 		treeStatusToString,
@@ -13,7 +11,10 @@
 		type RuleFilterMap
 	} from '$lib/rules/rule';
 	import { typedKeys } from '$lib/utils/object';
-	import { Button, Select, SelectItem, Textbox } from '@gitbutler/ui';
+	import { Button, Select, SelectItem, Textbox, FileStatusBadge } from '@gitbutler/ui';
+	import type { FileStatus } from '@gitbutler/ui/components/file/types';
+
+	const FILE_STATUS_OPTIONS: FileStatus[] = ['addition', 'modification', 'deletion', 'rename'];
 
 	type Props = {
 		initialFilterValues: Partial<RuleFilterMap>;
@@ -30,7 +31,7 @@
 	let contentRegex = $state<string | undefined>(
 		initialFilterValues.contentMatchesRegex ?? undefined
 	);
-	let treeChangeType = $state<TreeStatus | undefined>(
+	let treeChangeType = $state<FileStatus | undefined>(
 		initialFilterValues.fileChangeType ?? undefined
 	);
 	let semanticType = $state<SemanticType | undefined>(initialFilterValues.semanticType?.type);
@@ -66,7 +67,7 @@
 
 	function handleAddFilter(e: MouseEvent) {
 		e.stopPropagation();
-		newFilterContextMenu?.open(e);
+		newFilterContextMenu?.toggle(e);
 	}
 
 	export function getRuleFilters(): RuleFilter[] | undefined {
@@ -107,42 +108,49 @@
 <!-- Path filter -->
 {#snippet pathMatchesRegex()}
 	<Textbox
-		icon="folder"
+		iconLeft="folder"
 		wide
 		value={pathRegex}
-		onchange={(v) => (pathRegex = v)}
+		oninput={(v) => (pathRegex = v)}
 		placeholder="Path: e.g. src/components"
+		autofocus
 	/>
 {/snippet}
 
 <!-- Content filter -->
 {#snippet contentMatchesRegex()}
 	<Textbox
-		icon="text-width"
+		iconLeft="text-width"
 		wide
 		value={contentRegex}
-		onchange={(v) => (contentRegex = v)}
+		oninput={(v) => (contentRegex = v)}
 		placeholder="Contains: e.g. TODO"
+		autofocus
 	/>
 {/snippet}
 
 <!-- File change type filter -->
 {#snippet fileChangeType()}
 	<Select
 		value={treeChangeType}
-		options={RULE_FILTER_TREE_STATUS.map((type) => ({
+		options={FILE_STATUS_OPTIONS.map((type) => ({
 			label: treeStatusToString(type),
 			value: type
 		}))}
 		placeholder="Change type..."
 		flex="1"
+		icon="file-changes"
+		autofocus
 		onselect={(selected) => {
-			treeChangeType = selected as TreeStatus;
+			treeChangeType = selected as FileStatus;
 		}}
 	>
 		{#snippet itemSnippet({ item, highlighted })}
 			<SelectItem selected={item.value === treeChangeType} {highlighted}>
 				{item.label}
+				{#snippet iconSnippet()}
+					<FileStatusBadge style="dot" status={item.value as FileStatus} />
+				{/snippet}
 			</SelectItem>
 		{/snippet}
 	</Select>
@@ -156,6 +164,8 @@
 		placeholder="Work category..."
 		flex="1"
 		searchable
+		icon="tag"
+		autofocus
 		onselect={(selected) => {
 			semanticType = selected as SemanticType;
 		}}
@@ -185,16 +195,24 @@
 		<div class="rule-filter-row__actions">
 			<Button
 				icon="bin"
-				size="icon"
+				size="cta"
+				class="rule-filter-row__button"
 				kind="ghost"
+				width="auto"
 				onclick={() => {
 					deleteFilter(type);
 				}}
 			/>
 			{#if isLastFilterType(type) && canAddMore}
-				<div bind:this={addFilterButton}>
-					<Button icon="plus" size="icon" kind="ghost" onclick={handleAddFilter} />
-				</div>
+				<Button
+					bind:el={addFilterButton}
+					class="rule-filter-row__button"
+					width="auto"
+					icon="plus"
+					size="cta"
+					kind="ghost"
+					onclick={handleAddFilter}
+				/>
 			{/if}
 		</div>
 	</div>
@@ -228,13 +246,21 @@
 <style lang="postcss">
 	.rule-filter-row {
 		display: flex;
-		align-items: center;
+		margin-bottom: 8px;
 		gap: 8px;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
 	}
 
 	.rule-filter-row__actions {
 		display: flex;
 		align-items: center;
-		gap: 4px;
+		/* gap: 2px; */
+	}
+
+	:global(.rule-filter-row .rule-filter-row__button) {
+		padding: 0 6px;
 	}
 </style>