From 66527842a888545ed263421b5a7cf19eda87e1dc Mon Sep 17 00:00:00 2001
From: Rodrigo Gomes da Silva <rodrigo.smscom@gmail.com>
Date: Fri, 2 Jan 2026 15:32:39 -0300
Subject: [PATCH 1/3] Release: UI Componentization (v1.23.0) (#44)

* refactor: componentize buttons and icons (#33)

* fix: add cursor pointer to close button in ChatStats component

* feat: add reusable button components

* feat: add Icon component with 47 icons and filled state support

* refactor: replace inline SVGs with Icon component

* refactor: replace inline buttons with IconButton and ListItemButton

* refactor: replace inline SVGs and buttons in main page

- Replace all inline SVG icons with Icon component
- Replace inline button elements with IconButton component
- Fix layout structure issues for proper flex container nesting
- Fix indentation in no-chat-selected section

* style: fix linting issues

* fix: replace remaining inline SVG and hardcoded strings

- Replace inline WhatsApp SVG with Icon component in +page.svelte
- Replace hardcoded 'Delete bookmark', 'Cancel', 'Save' with i18n messages in BookmarkModal
- Replace hardcoded 'Remove Chat' with i18n message in ChatList

* fix: export new button and icon components from index.ts

* fix: address Copilot review comments

- Fix wifi-off icon SVG path (was showing lightbulb icon)
- Fix circle icon SVG path (malformed relative move command)
- Fix Icon indentation inside IconButton/Button components (7 locations)

* Initial plan

* fix: replace array class bindings with template literals and remove unused prop

Co-authored-by: rodrigogs <2362425+rodrigogs@users.noreply.github.com>

* style: use consistent template literal pattern for class bindings

Co-authored-by: rodrigogs <2362425+rodrigogs@users.noreply.github.com>

* Initial plan

* fix: resolve type check errors and a11y warning

- Use local inlang plugins instead of CDN to fix compilation in offline/restricted networks
- Add stroke-width prop to Icon component and use it in actualStrokeWidth derivation
- Add track element to video in MediaGallery to satisfy a11y requirements

Co-authored-by: rodrigogs <2362425+rodrigogs@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rodrigogs <2362425+rodrigogs@users.noreply.github.com>

* chore: auto-sync dev with main after release

* fix: add JSDoc comment to IconName type for better IDE support

* fix: use GitHub API to sync dev with main after release

The previous approach failed because dev branch is protected and requires PRs.

* feat: use peter-evans/create-pull-request for elegant branch sync

Most elegant solution for syncing protected branches:
- Industry standard (175k+ repos use it)
- No PAT required, works with GITHUB_TOKEN
- Handles branch protection automatically
- Idempotent (updates existing PR)
- Auto-deletes branch after merge

* fix: remove duplicate sync step (handled in build.yml)

* fix: add pull-requests permission for branch sync

* feat: extract reusable UI components

Extract repeated UI patterns into reusable components:

- Collapsible: Expandable sections with animated chevron
- FeatureItem: Badge list items (numbered/icon variants)
- Modal + ModalHeader + ModalContent: Dialog overlays with ESC key handling
- Dropdown + DropdownHeader + DropdownSearch + DropdownList: Floating menus

Reduced +page.svelte by 92 lines while improving maintainability.

Co-authored-by: Copilot <noreply@github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rodrigogs <2362425+rodrigogs@users.noreply.github.com>
Co-authored-by: Copilot <noreply@github.com>
---
 src/lib/components/Collapsible.svelte    |  53 +++++
 src/lib/components/Dropdown.svelte       | 115 +++++++++++
 src/lib/components/DropdownHeader.svelte |  20 ++
 src/lib/components/DropdownList.svelte   |  29 +++
 src/lib/components/DropdownSearch.svelte |  50 +++++
 src/lib/components/FeatureItem.svelte    |  62 ++++++
 src/lib/components/Icon.svelte           |   2 +-
 src/lib/components/Modal.svelte          |  69 +++++++
 src/lib/components/ModalContent.svelte   |  20 ++
 src/lib/components/ModalHeader.svelte    |  65 ++++++
 src/lib/components/index.ts              |   9 +
 src/routes/+page.svelte                  | 244 +++++++----------------
 12 files changed, 569 insertions(+), 169 deletions(-)
 create mode 100644 src/lib/components/Collapsible.svelte
 create mode 100644 src/lib/components/Dropdown.svelte
 create mode 100644 src/lib/components/DropdownHeader.svelte
 create mode 100644 src/lib/components/DropdownList.svelte
 create mode 100644 src/lib/components/DropdownSearch.svelte
 create mode 100644 src/lib/components/FeatureItem.svelte
 create mode 100644 src/lib/components/Modal.svelte
 create mode 100644 src/lib/components/ModalContent.svelte
 create mode 100644 src/lib/components/ModalHeader.svelte

diff --git a/src/lib/components/Collapsible.svelte b/src/lib/components/Collapsible.svelte
new file mode 100644
index 0000000..569afad
--- /dev/null
+++ b/src/lib/components/Collapsible.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import Icon from './Icon.svelte';
+
+interface Props {
+	/**
+	 * The title text displayed in the summary
+	 */
+	title: string;
+	/**
+	 * Optional icon to display before the title
+	 * @default 'chevron-right'
+	 */
+	icon?: 'chevron-right' | 'chevron-down';
+	/**
+	 * Whether the collapsible is open by default
+	 * @default false
+	 */
+	open?: boolean;
+	/**
+	 * Additional CSS classes to apply to the details element
+	 */
+	class?: string;
+	/**
+	 * Content to display when expanded
+	 */
+	children: Snippet;
+}
+
+let {
+	title,
+	icon = 'chevron-right',
+	open = false,
+	class: className = '',
+	children,
+}: Props = $props();
+</script>
+
+<details class="group {className}" {open}>
+	<summary
+		class="flex items-center justify-center gap-2 cursor-pointer text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors select-none"
+	>
+		<Icon
+			name={icon}
+			size="sm"
+			class="transition-transform group-open:rotate-90"
+		/>
+		{title}
+	</summary>
+	<div class="mt-3">
+		{@render children()}
+	</div>
+</details>
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
new file mode 100644
index 0000000..d03285e
--- /dev/null
+++ b/src/lib/components/Dropdown.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { browser } from '$app/environment';
+import { floating } from '$lib/actions/floating';
+
+interface Props {
+	/**
+	 * Reference element for positioning the dropdown
+	 */
+	anchor: HTMLElement | null;
+	/**
+	 * Whether the dropdown is open
+	 */
+	open: boolean;
+	/**
+	 * Callback when the dropdown should close
+	 */
+	onClose: () => void;
+	/**
+	 * Dropdown placement relative to anchor
+	 * @default 'bottom-end'
+	 */
+	placement?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+	/**
+	 * Fallback placements if primary doesn't fit
+	 */
+	fallbackPlacements?: Array<
+		'bottom-start' | 'top-end' | 'top-start' | 'left-start' | 'right-start'
+	>;
+	/**
+	 * Distance from anchor element in pixels
+	 * @default 8
+	 */
+	offsetDistance?: number;
+	/**
+	 * Width of the dropdown
+	 * @default 'w-64'
+	 */
+	width?: string;
+	/**
+	 * Additional CSS classes
+	 */
+	class?: string;
+	/**
+	 * Accessible label for the close backdrop button
+	 * @default 'Close dropdown'
+	 */
+	closeAriaLabel?: string;
+	/**
+	 * Dropdown content
+	 */
+	children: Snippet;
+}
+
+let {
+	anchor,
+	open,
+	onClose,
+	placement = 'bottom-end',
+	fallbackPlacements = [
+		'bottom-start',
+		'top-end',
+		'top-start',
+		'left-start',
+		'right-start',
+	],
+	offsetDistance = 8,
+	width = 'w-64',
+	class: className = '',
+	closeAriaLabel = 'Close dropdown',
+	children,
+}: Props = $props();
+
+// Handle ESC key to close dropdown
+$effect(() => {
+	if (!browser || !open) return;
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape') {
+			onClose();
+		}
+	};
+
+	window.addEventListener('keydown', handleKeydown);
+	return () => window.removeEventListener('keydown', handleKeydown);
+});
+</script>
+
+{#if open && anchor}
+	<!-- Backdrop to close dropdown -->
+	<button
+		type="button"
+		class="fixed inset-0 z-40 cursor-default"
+		onclick={onClose}
+		aria-label={closeAriaLabel}
+	></button>
+
+	<!-- Dropdown menu -->
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div
+		role="menu"
+		tabindex="-1"
+		class="fixed {width} bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 overflow-hidden {className}"
+		use:floating={{
+			reference: anchor,
+			placement,
+			fallbackPlacements,
+			offsetDistance,
+			enableSizeConstraint: true,
+		}}
+		onclick={(e) => e.stopPropagation()}
+	>
+		{@render children()}
+	</div>
+{/if}
diff --git a/src/lib/components/DropdownHeader.svelte b/src/lib/components/DropdownHeader.svelte
new file mode 100644
index 0000000..3a63cf2
--- /dev/null
+++ b/src/lib/components/DropdownHeader.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+interface Props {
+	/**
+	 * Header text
+	 */
+	title: string;
+	/**
+	 * Additional CSS classes
+	 */
+	class?: string;
+}
+
+let { title, class: className = '' }: Props = $props();
+</script>
+
+<div
+	class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-100 dark:border-gray-700 {className}"
+>
+	{title}
+</div>
diff --git a/src/lib/components/DropdownList.svelte b/src/lib/components/DropdownList.svelte
new file mode 100644
index 0000000..d62956d
--- /dev/null
+++ b/src/lib/components/DropdownList.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+
+interface Props {
+	/**
+	 * Maximum height for scrollable content
+	 * @default 'max-h-48'
+	 */
+	maxHeight?: string;
+	/**
+	 * Additional CSS classes
+	 */
+	class?: string;
+	/**
+	 * List items
+	 */
+	children: Snippet;
+}
+
+let {
+	maxHeight = 'max-h-48',
+	class: className = '',
+	children,
+}: Props = $props();
+</script>
+
+<div class="{maxHeight} overflow-y-auto py-1 {className}">
+	{@render children()}
+</div>
diff --git a/src/lib/components/DropdownSearch.svelte b/src/lib/components/DropdownSearch.svelte
new file mode 100644
index 0000000..8416ed5
--- /dev/null
+++ b/src/lib/components/DropdownSearch.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+import Icon from './Icon.svelte';
+
+interface Props {
+	/**
+	 * Search input value (use bind:value)
+	 */
+	value: string;
+	/**
+	 * Placeholder text
+	 */
+	placeholder: string;
+	/**
+	 * Callback when value changes
+	 */
+	onInput?: (value: string) => void;
+	/**
+	 * Reference to the input element
+	 */
+	ref?: HTMLInputElement | null;
+	/**
+	 * Additional CSS classes
+	 */
+	class?: string;
+}
+
+let {
+	value = $bindable(''),
+	placeholder,
+	onInput,
+	ref = $bindable(null),
+	class: className = '',
+}: Props = $props();
+</script>
+
+<div class="p-2 border-b border-gray-100 dark:border-gray-700 {className}">
+	<div class="relative">
+		<div class="absolute left-2.5 top-1/2 -translate-y-1/2">
+			<Icon name="search" size="sm" class="text-gray-400" />
+		</div>
+		<input
+			bind:this={ref}
+			bind:value
+			type="text"
+			{placeholder}
+			oninput={() => onInput?.(value)}
+			class="w-full pl-8 pr-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 border-0 rounded-md focus:ring-2 focus:ring-[var(--color-whatsapp-teal)] focus:outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
+		/>
+	</div>
+</div>
diff --git a/src/lib/components/FeatureItem.svelte b/src/lib/components/FeatureItem.svelte
new file mode 100644
index 0000000..3b444db
--- /dev/null
+++ b/src/lib/components/FeatureItem.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { IconName } from './Icon.svelte';
+import Icon from './Icon.svelte';
+
+interface Props {
+	/**
+	 * Badge content - either a number or an icon name (optional for icon variant)
+	 */
+	badge?: string | number;
+	/**
+	 * Icon to display in the badge (required for icon variant)
+	 */
+	icon?: IconName;
+	/**
+	 * Badge style variant
+	 * @default 'numbered' - Circle with number
+	 * 'icon' - Circle with icon
+	 */
+	variant?: 'numbered' | 'icon';
+	/**
+	 * Additional CSS classes for the container
+	 */
+	class?: string;
+	/**
+	 * Content to display next to the badge
+	 */
+	children: Snippet;
+}
+
+let {
+	badge,
+	icon,
+	variant = badge !== undefined ? 'numbered' : 'icon',
+	class: className = '',
+	children,
+}: Props = $props();
+
+// Resolve the effective variant to avoid empty badges when icon is missing
+const effectiveVariant = $derived(
+	variant === 'icon' && !icon && badge !== undefined ? 'numbered' : variant,
+);
+</script>
+
+<div
+	class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg {className}"
+>
+	{#if (effectiveVariant === 'numbered' && badge !== undefined) || (effectiveVariant === 'icon' && icon)}
+		<span
+			class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center {effectiveVariant === 'numbered' ? 'font-bold' : ''}"
+		>
+			{#if effectiveVariant === 'numbered' && badge !== undefined}
+				{badge}
+			{:else if effectiveVariant === 'icon' && icon}
+				<Icon name={icon} size="xs" stroke-width="2" />
+			{/if}
+		</span>
+	{/if}
+	<span class="text-xs text-gray-600 dark:text-gray-400">
+		{@render children()}
+	</span>
+</div>
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index ed0be09..42bf276 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 /**
  * Supported icon names for the Icon component
  */
-type IconName =
+export type IconName =
 	// Navigation
 	| 'menu'
 	| 'close'
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..17fb2c3
--- /dev/null
+++ b/src/lib/components/Modal.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { browser } from '$app/environment';
+
+interface Props {
+	/**
+	 * Whether the modal is open
+	 */
+	open: boolean;
+	/**
+	 * Callback when the modal should close (backdrop click or ESC key)
+	 */
+	onClose: () => void;
+	/**
+	 * Additional CSS classes for the modal container
+	 */
+	class?: string;
+	/**
+	 * Accessible label for the close backdrop button
+	 * @default 'Close modal'
+	 */
+	closeAriaLabel?: string;
+	/**
+	 * Modal content
+	 */
+	children: Snippet;
+}
+
+let {
+	open,
+	onClose,
+	class: className = '',
+	closeAriaLabel = 'Close modal',
+	children,
+}: Props = $props();
+
+// Handle ESC key to close modal
+$effect(() => {
+	if (!browser || !open) return;
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape') {
+			onClose();
+		}
+	};
+
+	window.addEventListener('keydown', handleKeydown);
+	return () => window.removeEventListener('keydown', handleKeydown);
+});
+</script>
+
+{#if open}
+	<!-- Backdrop -->
+	<button
+		type="button"
+		class="fixed inset-0 bg-black/50 z-[60] cursor-default"
+		onclick={onClose}
+		aria-label={closeAriaLabel}
+	></button>
+
+	<!-- Modal -->
+	<div
+		class="fixed inset-4 md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-[480px] md:max-h-[80vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl z-[70] flex flex-col overflow-hidden {className}"
+		role="dialog"
+		aria-modal="true"
+	>
+		{@render children()}
+	</div>
+{/if}
diff --git a/src/lib/components/ModalContent.svelte b/src/lib/components/ModalContent.svelte
new file mode 100644
index 0000000..d6ce968
--- /dev/null
+++ b/src/lib/components/ModalContent.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+
+interface Props {
+	/**
+	 * Additional CSS classes for the content container
+	 */
+	class?: string;
+	/**
+	 * Modal content
+	 */
+	children: Snippet;
+}
+
+let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="flex-1 overflow-y-auto {className}">
+	{@render children()}
+</div>
diff --git a/src/lib/components/ModalHeader.svelte b/src/lib/components/ModalHeader.svelte
new file mode 100644
index 0000000..2775a6c
--- /dev/null
+++ b/src/lib/components/ModalHeader.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { IconName } from './Icon.svelte';
+import Icon from './Icon.svelte';
+import IconButton from './IconButton.svelte';
+
+interface Props {
+	/**
+	 * Icon to display in the header
+	 */
+	icon?: IconName;
+	/**
+	 * Main title text
+	 */
+	title: string;
+	/**
+	 * Optional subtitle text
+	 */
+	subtitle?: string;
+	/**
+	 * Callback when close button is clicked
+	 */
+	onClose: () => void;
+	/**
+	 * Close button aria-label
+	 * @default 'Close'
+	 */
+	closeLabel?: string;
+	/**
+	 * Additional header content (optional)
+	 */
+	children?: Snippet;
+}
+
+let {
+	icon,
+	title,
+	subtitle,
+	onClose,
+	closeLabel = 'Close',
+	children,
+}: Props = $props();
+</script>
+
+<div
+	class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-[var(--color-whatsapp-dark-green)] text-white"
+>
+	<div class="flex items-center gap-3">
+		{#if icon}
+			<Icon name={icon} size="md" />
+		{/if}
+		<div>
+			<h2 class="font-semibold">{title}</h2>
+			{#if subtitle}
+				<p class="text-xs text-white/70">{subtitle}</p>
+			{/if}
+		</div>
+	</div>
+	{#if children}
+		{@render children()}
+	{/if}
+	<IconButton theme="dark" size="sm" onclick={onClose} aria-label={closeLabel}>
+		<Icon name="close" size="md" />
+	</IconButton>
+</div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 880a660..36975aa 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -3,11 +3,20 @@ export { default as Button } from './Button.svelte';
 export { default as ChatList } from './ChatList.svelte';
 export { default as ChatStats } from './ChatStats.svelte';
 export { default as ChatView } from './ChatView.svelte';
+export { default as Collapsible } from './Collapsible.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as DropdownHeader } from './DropdownHeader.svelte';
+export { default as DropdownList } from './DropdownList.svelte';
+export { default as DropdownSearch } from './DropdownSearch.svelte';
+export { default as FeatureItem } from './FeatureItem.svelte';
 export { default as FileDropZone } from './FileDropZone.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as ListItemButton } from './ListItemButton.svelte';
 export { default as MessageBubble } from './MessageBubble.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as ModalContent } from './ModalContent.svelte';
+export { default as ModalHeader } from './ModalHeader.svelte';
 export { default as SearchBar } from './SearchBar.svelte';
 export { default as UpdateToast } from './UpdateToast.svelte';
 export { default as VersionBadge } from './VersionBadge.svelte';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 64a7004..b555898 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,12 @@ import {
 	ChatList,
 	ChatStats,
 	ChatView,
+	Collapsible,
+	Dropdown,
+	DropdownHeader,
+	DropdownList,
+	DropdownSearch,
+	FeatureItem,
 	FileDropZone,
 	SearchBar,
 	VersionBadge,
@@ -18,6 +24,9 @@ import IconButton from '$lib/components/IconButton.svelte';
 import ListItemButton from '$lib/components/ListItemButton.svelte';
 import LocaleSwitcher from '$lib/components/LocaleSwitcher.svelte';
 import MediaGallery from '$lib/components/MediaGallery.svelte';
+import Modal from '$lib/components/Modal.svelte';
+import ModalContent from '$lib/components/ModalContent.svelte';
+import ModalHeader from '$lib/components/ModalHeader.svelte';
 import * as m from '$lib/paraglide/messages';
 import { parseZipFile, readFileAsArrayBuffer } from '$lib/parser';
 import { appState, type ChatData } from '$lib/state.svelte';
@@ -474,74 +483,26 @@ const currentUser = $derived.by(() => {
 					{/if}
 
 				<!-- Instructions - Collapsible -->
-				<details class="mt-6 w-full group">
-					<summary class="flex items-center justify-center gap-2 cursor-pointer text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors select-none">
-						<Icon name="chevron-right" size="sm" class="transition-transform group-open:rotate-90" />
-						{m.export_instructions_title()}
-					</summary>
-					<div class="mt-3 grid grid-cols-1 gap-2 text-xs text-gray-600 dark:text-gray-400">
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">1</span>
-							<span>{m.export_step_1()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">2</span>
-							<span>{m.export_step_2()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">3</span>
-							<span>{m.export_step_3()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">4</span>
-							<span>{m.export_step_4()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">5</span>
-							<span>{m.export_step_5()}</span>
-						</div>
+				<Collapsible title={m.export_instructions_title()} class="mt-6 w-full">
+					<div class="grid grid-cols-1 gap-2">
+						<FeatureItem badge={1}>{m.export_step_1()}</FeatureItem>
+						<FeatureItem badge={2}>{m.export_step_2()}</FeatureItem>
+						<FeatureItem badge={3}>{m.export_step_3()}</FeatureItem>
+						<FeatureItem badge={4}>{m.export_step_4()}</FeatureItem>
+						<FeatureItem badge={5}>{m.export_step_5()}</FeatureItem>
 					</div>
-				</details>
+				</Collapsible>
 
 				<!-- Privacy & Security - Collapsible -->
-				<details class="mt-4 w-full group">
-					<summary class="flex items-center justify-center gap-2 cursor-pointer text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors select-none">
-						<Icon name="chevron-right" size="sm" class="transition-transform group-open:rotate-90" />
-						{m.privacy_title()}
-					</summary>
-					<div class="mt-3 grid grid-cols-1 gap-2 text-xs text-gray-600 dark:text-gray-400">
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center">
-								<Icon name="wifi-off" size="xs" stroke-width="2" />
-							</span>
-							<span>{m.privacy_offline()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center">
-								<Icon name="shield" size="xs" stroke-width="2" />
-							</span>
-							<span>{m.privacy_local_processing()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center">
-								<Icon name="code" size="xs" stroke-width="2" />
-							</span>
-							<span>{m.privacy_local_ai()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center">
-								<Icon name="eye-off" size="xs" stroke-width="2" />
-							</span>
-							<span>{m.privacy_no_tracking()}</span>
-						</div>
-						<div class="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-							<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center">
-								<Icon name="code" size="xs" stroke-width="2" />
-							</span>
-							<span>{m.privacy_open_source()}</span>
-						</div>
+				<Collapsible title={m.privacy_title()} class="mt-4 w-full">
+					<div class="grid grid-cols-1 gap-2">
+						<FeatureItem icon="wifi-off" variant="icon">{m.privacy_offline()}</FeatureItem>
+						<FeatureItem icon="shield" variant="icon">{m.privacy_local_processing()}</FeatureItem>
+						<FeatureItem icon="code" variant="icon">{m.privacy_local_ai()}</FeatureItem>
+						<FeatureItem icon="eye-off" variant="icon">{m.privacy_no_tracking()}</FeatureItem>
+						<FeatureItem icon="code" variant="icon">{m.privacy_open_source()}</FeatureItem>
 					</div>
-				</details>
+				</Collapsible>
 
 				<!-- GitHub Star -->
 				<div class="mt-4 flex flex-col items-center gap-1.5">
@@ -679,78 +640,46 @@ const currentUser = $derived.by(() => {
 								>
 									<Icon name="user" size="md" />
 								</IconButton>
-								{#if showPerspectiveDropdown && perspectiveButtonRef}
-									<!-- Backdrop to close dropdown -->
-									<button 
-										type="button"
-										class="fixed inset-0 z-40 cursor-default" 
-										onclick={() => { showPerspectiveDropdown = false; perspectiveSearchQuery = ''; }}
-										aria-label={m.sidebar_close()}
-									></button>
+								
+								<Dropdown
+									anchor={perspectiveButtonRef}
+									open={showPerspectiveDropdown}
+									onClose={() => { showPerspectiveDropdown = false; perspectiveSearchQuery = ''; }}
+								>
+									<DropdownHeader title={m.perspective_view_as()} />
 									
-									<!-- Dropdown menu -->
-									<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-									<div
-										role="menu"
-										tabindex="-1"
-										class="fixed w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 overflow-hidden"
-										use:floating={{
-											reference: perspectiveButtonRef,
-											placement: 'bottom-end',
-											fallbackPlacements: ['bottom-start', 'top-end', 'top-start', 'left-start', 'right-start'],
-											offsetDistance: 8,
-											enableSizeConstraint: true
-										}}
-										onclick={(e) => e.stopPropagation()}
-									>
-										<div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-100 dark:border-gray-700">
-											{m.perspective_view_as()}
-										</div>
-										
-										<!-- Search input -->
-										<div class="p-2 border-b border-gray-100 dark:border-gray-700">
-											<div class="relative">
-												<div class="absolute left-2.5 top-1/2 -translate-y-1/2">
-													<Icon name="search" size="sm" class="text-gray-400" />
-												</div>
-												<input
-													bind:this={perspectiveSearchInputRef}
-													type="text"
-													bind:value={perspectiveSearchQuery}
-													placeholder={m.perspective_search_placeholder()}
-													class="w-full pl-8 pr-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 border-0 rounded-md focus:ring-2 focus:ring-[var(--color-whatsapp-teal)] focus:outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-												/>
+									<DropdownSearch
+										bind:value={perspectiveSearchQuery}
+										bind:ref={perspectiveSearchInputRef}
+										placeholder={m.perspective_search_placeholder()}
+									/>
+									
+									<DropdownList>
+										{#if !perspectiveSearchQuery}
+											<ListItemButton
+												active={currentPerspective === null}
+												onclick={() => selectPerspective(null)}
+											>
+												<span class="w-5 text-center">{currentPerspective === null ? '✓' : ''}</span>
+												<span class="italic">{m.perspective_none()}</span>
+											</ListItemButton>
+										{/if}
+										{#each filteredParticipants as participant}
+											<ListItemButton
+												active={currentPerspective === participant}
+												onclick={() => selectPerspective(participant)}
+											>
+												<span class="w-5 text-center">{currentPerspective === participant ? '✓' : ''}</span>
+												<span class="truncate">{participant}</span>
+											</ListItemButton>
+										{/each}
+										{#if filteredParticipants.length === 0 && perspectiveSearchQuery}
+											<div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 italic">
+												{m.perspective_no_match({ query: perspectiveSearchQuery })}
 											</div>
-										</div>
-										
-										<!-- Options list -->
-										<div class="max-h-48 overflow-y-auto py-1">
-											{#if !perspectiveSearchQuery}
-												<ListItemButton
-													active={currentPerspective === null}
-													onclick={() => selectPerspective(null)}
-												>
-													<span class="w-5 text-center">{currentPerspective === null ? '✓' : ''}</span>
-													<span class="italic">{m.perspective_none()}</span>
-												</ListItemButton>
-											{/if}
-											{#each filteredParticipants as participant}
-												<ListItemButton
-													active={currentPerspective === participant}
-													onclick={() => selectPerspective(participant)}
-												>
-													<span class="w-5 text-center">{currentPerspective === participant ? '✓' : ''}</span>
-													<span class="truncate">{participant}</span>
-												</ListItemButton>
-											{/each}
-											{#if filteredParticipants.length === 0 && perspectiveSearchQuery}
-												<div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 italic">
-													{m.perspective_no_match({ query: perspectiveSearchQuery })}
-												</div>
-											{/if}
-										</div>
-									</div>
-								{/if}
+										{/if}
+									</DropdownList>
+								</Dropdown>
 							</div>
 
 							<IconButton
@@ -920,37 +849,16 @@ const currentUser = $derived.by(() => {
 				{/if}
 
 				<!-- Participants modal -->
-				{#if showParticipants && appState.selectedChat && participantStats}
-					<!-- Backdrop -->
-					<button
-						type="button"
-						class="fixed inset-0 bg-black/50 z-50 cursor-default"
-						onclick={closeParticipantsModal}
-						aria-label={m.participants_close()}
-					></button>
-					
-					<!-- Modal -->
-					<div class="fixed inset-4 md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-[480px] md:max-h-[80vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl z-50 flex flex-col overflow-hidden">
-						<!-- Header -->
-						<div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-[var(--color-whatsapp-dark-green)] text-white">
-							<div class="flex items-center gap-3">
-								<Icon name="users" size="md" />
-								<div>
-									<h2 class="font-semibold">{m.participants_title()}</h2>
-									<p class="text-xs text-white/70">{m.participants_members({ count: appState.selectedChat.participants.length })}</p>
-								</div>
-							</div>
-							<IconButton
-								theme="dark"
-								size="sm"
-								onclick={closeParticipantsModal}
-								aria-label={m.participants_close()}
-							>
-								<Icon name="close" size="md" />
-							</IconButton>
-						</div>
-						<!-- Participants list -->
-						<div class="flex-1 overflow-y-auto">
+				<Modal open={showParticipants && !!appState.selectedChat && !!participantStats} onClose={closeParticipantsModal}>
+					<ModalHeader
+						icon="users"
+						title={m.participants_title()}
+						subtitle={appState.selectedChat ? m.participants_members({ count: appState.selectedChat.participants.length }) : ''}
+						onClose={closeParticipantsModal}
+						closeLabel={m.participants_close()}
+					/>
+					<ModalContent>
+						{#if appState.selectedChat && participantStats}
 							{#each appState.selectedChat.participants as participant}
 								{@const messageCount = participantStats.get(participant) || 0}
 								{@const isPhoneNumber = /\+?\d[\d\s\-()]{8,}/.test(participant)}
@@ -995,9 +903,9 @@ const currentUser = $derived.by(() => {
 									{/if}
 								</div>
 							{/each}
-						</div>
-					</div>
-				{/if}
+						{/if}
+					</ModalContent>
+				</Modal>
 			{:else}
 				<!-- No chat selected -->
 				<div class="flex-1 flex flex-col bg-gray-50 dark:bg-gray-900">

From 47f04961283f85198f36fed3b9b75fd06f4e6d41 Mon Sep 17 00:00:00 2001
From: Rodrigo Gomes da Silva <rodrigo.smscom@gmail.com>
Date: Fri, 2 Jan 2026 15:38:05 -0300
Subject: [PATCH 2/3] feat: UI componentization with reusable components

Extract repeated UI patterns into reusable components:
- Collapsible: Expandable sections with animated chevron
- FeatureItem: Badge list items (numbered/icon variants)
- Modal + ModalHeader + ModalContent: Dialog overlays with ESC key handling
- Dropdown + DropdownHeader + DropdownSearch + DropdownList: Floating menus

Reduced +page.svelte by 92 lines while improving maintainability.

From c473fe7553a914157188effc85a5348e9a30796f Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Fri, 2 Jan 2026 18:38:52 +0000
Subject: [PATCH 3/3] chore(release): 1.23.0 [skip ci]

# [1.23.0](https://github.com/rodrigogs/whats-reader/compare/v1.22.2...v1.23.0) (2026-01-02)

### Features

* UI componentization with reusable components ([47f0496](https://github.com/rodrigogs/whats-reader/commit/47f04961283f85198f36fed3b9b75fd06f4e6d41))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88e7bfd..05d5b01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [1.23.0](https://github.com/rodrigogs/whats-reader/compare/v1.22.2...v1.23.0) (2026-01-02)
+
+
+### Features
+
+* UI componentization with reusable components ([47f0496](https://github.com/rodrigogs/whats-reader/commit/47f04961283f85198f36fed3b9b75fd06f4e6d41))
+
 ## [1.22.2](https://github.com/rodrigogs/whats-reader/compare/v1.22.1...v1.22.2) (2026-01-02)
 
 
diff --git a/package-lock.json b/package-lock.json
index ee4a14a..7f53e6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "whats-reader",
-	"version": "1.22.2",
+	"version": "1.23.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "whats-reader",
-			"version": "1.22.2",
+			"version": "1.23.0",
 			"license": "AGPL-3.0",
 			"dependencies": {
 				"@floating-ui/dom": "^1.7.4",
diff --git a/package.json b/package.json
index 746959f..2e79996 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "whats-reader",
 	"productName": "WhatsApp Backup Reader",
-	"version": "1.22.2",
+	"version": "1.23.0",
 	"description": "A desktop app to read and visualize WhatsApp chat exports",
 	"license": "AGPL-3.0",
 	"author": {