HealthConnectionCard

Reworks meal-tracker's ProfilTab Health Connect card (connection status + edit/toggle button, optional resync button, optional hint text, a danger-colored "delete my data" link) into a yemek component. No Health Connect API logic and no dialog logic here — enable/disable and delete-confirmation stay the consumer's own dialogs, same rule as MetricRing's editable/BodyMetricsCard's edit.

Least nutrition-specific of yemek's Domain components so far (closer to a generic connection/ consent status card than a nutrition concept) — built per explicit owner decision.

Playground

Health Connect

Verbunden

Verlauf siehe Statistik-Tab.

Click "Trennen"/"Verbinden" to toggle — the status dot and text update, and the button briefly shows a checkmark + "Gespeichert".

<script setup>
import { HealthConnectionCard } from 'yemek'

const saved = ref(false)
const resyncLoading = ref(false)
const resyncSaved = ref(false)

function toggleHealthConnect() {
  healthDialogOpen.value = true // consumer's own enable/disable dialog
}

async function resyncHealthHistory() {
  resyncLoading.value = true
  await loadTodayHealthSnapshot()
  resyncLoading.value = false
  resyncSaved.value = true
  setTimeout(() => { resyncSaved.value = false }, 2000)
}
</script>

<template>
  <HealthConnectionCard
    title="Health Connect"
    :connected="healthEnabled"
    :status-label="healthEnabled ? t('profil.healthConnectStatusOn') : t('profil.healthConnectStatusOff')"
    :edit-label="t('profil.editHealthConnectBtn')"
    saved-label="Gespeichert"
    :saved="healthSavedFeedback"
    :manageable="canManageHealthConnect"
    :unavailable-hint="t('profil.healthConnectDesktopHint')"
    :resync-label="healthEnabled ? t('profil.healthHistoryResync') : undefined"
    :resync-saved-label="t('profil.healthHistoryResynced')"
    :resync-loading="healthHistoryLoading"
    :resync-saved="healthResyncedFeedback"
    :hint="healthEnabled ? t('profil.healthHistoryStatistikHint') : undefined"
    :delete-label="t('profil.healthHistoryDeleteBtn')"
    @edit="toggleHealthConnect"
    @resync="resyncHealthHistory"
    @delete="healthDeleteDialogOpen = true"
  />
</template>

Props

Prop	Type	Default	Description
title	string	—	Card heading.
connected	boolean	—	Drives the status dot's color (accent when connected, muted otherwise).
statusLabel	string	—	Already-formatted status text.
editLabel	string	—	Edit/toggle button label.
savedLabel	string	undefined	Shown (with a checkmark) instead of editLabel while saved is true.
saved	boolean	false	Swaps the edit button for a checkmark + savedLabel.
manageable	boolean	true	When false, hides the edit/resync/delete controls and shows unavailableHint instead (e.g. desktop, where the integration doesn't exist).
unavailableHint	string	undefined	Shown instead of the status/controls when manageable is false.
resyncLabel	string	undefined	Resync button label. Button only renders when set (and manageable).
resyncSavedLabel	string	undefined	Shown (with a checkmark) instead of resyncLabel while resyncSaved is true.
resyncSaved	boolean	false	—
resyncLoading	boolean	false	Disables the resync button and shows a spinner.
hint	string	undefined	Shown below the status row while manageable.
deleteLabel	string	undefined	Danger-colored link at the bottom. Only renders when set.

Events

Event	Payload	Fired when
edit	—	The edit/toggle button is clicked.
resync	—	The resync button is clicked (not fired while resyncLoading is true, since the button is disabled).
delete	—	The delete link is clicked.

Behavior notes

• No Health Connect API logic or dialog logic lives here — the consumer's own enable/disable dialog and delete-confirmation dialog stay exactly as they are; this only renders the card and emits which action was requested.
• The status dot picks up a small accent glow (box-shadow) when connected — not just a plain color swap.
• prefers-reduced-motion: reduce keeps the spinner but slows its rotation, and drops the card's entrance transition.