refactor(ui): unify LanguageSelector, ConfirmDialog, and AppSlider across apps

- contacts, zitare: migrate LanguageSelector to shared PillDropdown pattern
- context, times: replace local ConfirmDialog with ConfirmationModal from @manacore/shared-ui
  - delete local ConfirmDialog.svelte in both apps
  - map open→visible, onCancel→onClose, remove destructive prop (default in shared-ui)
- calendar, chat, contacts, presi, todo: switch AppSlider from static MANA_APPS
  to getActiveManaApps() to filter inactive apps consistently

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-31 19:10:55 +02:00
parent 3ea2c03ab2
commit 5e4518b418
16 changed files with 62 additions and 228 deletions

View file

@ -1,56 +0,0 @@
<script lang="ts">
import { _ } from 'svelte-i18n';
let {
visible = false,
title = '',
message = '',
confirmLabel,
cancelLabel,
destructive = true,
onConfirm,
onCancel,
}: {
visible: boolean;
title: string;
message?: string;
confirmLabel?: string;
cancelLabel?: string;
destructive?: boolean;
onConfirm: () => void;
onCancel: () => void;
} = $props();
</script>
{#if visible}
<div
class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm"
role="dialog"
aria-modal="true"
>
<div
class="mx-4 w-full max-w-sm rounded-2xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-6 shadow-xl"
>
<h3 class="text-lg font-semibold text-[hsl(var(--foreground))]">{title}</h3>
{#if message}
<p class="mt-2 text-sm text-[hsl(var(--muted-foreground))]">{message}</p>
{/if}
<div class="mt-5 flex gap-2">
<button
onclick={onCancel}
class="flex-1 rounded-lg border border-[hsl(var(--border))] py-2.5 text-sm text-[hsl(var(--muted-foreground))] transition-colors hover:text-[hsl(var(--foreground))]"
>
{cancelLabel || $_('common.cancel')}
</button>
<button
onclick={onConfirm}
class="flex-1 rounded-lg py-2.5 text-sm font-medium transition-colors {destructive
? 'bg-red-500 text-white hover:bg-red-600'
: 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:opacity-90'}"
>
{confirmLabel || $_('common.delete')}
</button>
</div>
</div>
</div>
{/if}

View file

@ -5,7 +5,7 @@
import { formatDurationCompact } from '$lib/data/queries';
import { CurrencyDollar } from '@manacore/shared-icons';
import type { TimeEntry, Project, Client } from '@times/shared';
import ConfirmDialog from './ConfirmDialog.svelte';
import { ConfirmationModal } from '@manacore/shared-ui';
let {
entry,
@ -200,10 +200,10 @@
{/if}
</div>
<ConfirmDialog
<ConfirmationModal
visible={showDeleteConfirm}
title={$_('common.delete')}
message={$_('entry.deleteConfirm')}
onConfirm={confirmDelete}
onCancel={() => (showDeleteConfirm = false)}
onClose={() => (showDeleteConfirm = false)}
/>

View file

@ -5,7 +5,7 @@
import { getTotalDuration, formatDurationCompact } from '$lib/data/queries';
import type { Client, Project, TimeEntry } from '@times/shared';
import { PROJECT_COLORS } from '@times/shared/constants';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import { ConfirmationModal } from '@manacore/shared-ui';
import { CaretRight } from '@manacore/shared-icons';
const allClients = getContext<{ value: Client[] }>('clients');
@ -348,10 +348,10 @@
{/if}
</div>
<ConfirmDialog
<ConfirmationModal
visible={deleteConfirmId !== null}
title={$_('common.delete')}
message={$_('client.deleteConfirm')}
onConfirm={confirmDelete}
onCancel={() => (deleteConfirmId = null)}
onClose={() => (deleteConfirmId = null)}
/>

View file

@ -5,7 +5,7 @@
import { getTotalDuration, formatDurationCompact } from '$lib/data/queries';
import type { Project, Client, TimeEntry } from '@times/shared';
import { PROJECT_COLORS } from '@times/shared/constants';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import { ConfirmationModal } from '@manacore/shared-ui';
import { CaretRight } from '@manacore/shared-icons';
const allProjects = getContext<{ value: Project[] }>('projects');
@ -357,10 +357,10 @@
{/if}
</div>
<ConfirmDialog
<ConfirmationModal
visible={deleteConfirmId !== null}
title={$_('common.delete')}
message={$_('project.deleteConfirm')}
onConfirm={confirmDelete}
onCancel={() => (deleteConfirmId = null)}
onClose={() => (deleteConfirmId = null)}
/>