feat(native): bound-device states + release flow in Devices page

MobileDeviceRow now handles three binding states driven by
boundToPlan / releaseRequestedAt from the UserDevice type:

- Bound, no release pending: blue "Gebunden" badge next to device name;
  trash icon replaced by lock-open icon → Alert → requestRelease()
- Release active (countdown running): footer shows "Freigabe in Xh Ymin"
  in amber; close-circle icon → Alert → cancelRelease()
- Current device (isCurrent): existing behaviour unchanged, no action
  button regardless of binding state

releaseAt is computed client-side as releaseRequestedAt + 24h — avoids
a backend round-trip for the countdown display.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/rebreak-native/app/devices.tsx

@@ -15,6 +15,16 @@ import { MenuView } from '@react-native-menu/menu';
 import { useTranslation } from 'react-i18next';
 import { useColors } from '../lib/theme';
 import { useDevicesStore, type UserDevice } from '../stores/devices';
+
+function formatCountdown(isoTarget: string): string {
+  const ms = new Date(isoTarget).getTime() - Date.now();
+  if (ms <= 0) return '0min';
+  const totalMin = Math.floor(ms / 60_000);
+  const h = Math.floor(totalMin / 60);
+  const m = totalMin % 60;
+  if (h > 0) return `${h}h ${m}min`;
+  return `${m}min`;
+}
 import { useProtectedDevicesStore, type ProtectedDevice } from '../stores/protectedDevices';
 import { useProtectedDevicesRealtime } from '../hooks/useProtectedDevicesRealtime';
 import { useUserPlan } from '../hooks/useUserPlan';
@@ -107,18 +117,28 @@ function StatusBadge({ status }: { status: ProtectedDevice['status'] }) {
   );
 }
 
-// ─── Mobile Device Row (existing) ────────────────────────────────────────────
+// ─── Mobile Device Row ────────────────────────────────────────────────────────
 
 function MobileDeviceRow({
   device,
   onRemove,
+  onRequestRelease,
+  onCancelRelease,
 }: {
   device: UserDevice;
   onRemove: (id: string) => void;
+  onRequestRelease: (id: string) => void;
+  onCancelRelease: (id: string) => void;
 }) {
   const { t } = useTranslation();
   const colors = useColors();
 
+  const isBound = !!device.boundToPlan;
+  const releaseAt = device.releaseRequestedAt
+    ? new Date(new Date(device.releaseRequestedAt).getTime() + 24 * 60 * 60 * 1000).toISOString()
+    : null;
+  const releaseActive = !!releaseAt && new Date(releaseAt).getTime() > Date.now();
+
   function confirmRemove() {
     Alert.alert(
       t('settings.devices_remove_title'),
@@ -134,6 +154,36 @@ function MobileDeviceRow({
     );
   }
 
+  function confirmRequestRelease() {
+    Alert.alert(
+      t('devices.release_request_title'),
+      t('devices.release_request_body'),
+      [
+        { text: t('common.cancel'), style: 'cancel' },
+        {
+          text: t('devices.release_request_confirm'),
+          style: 'destructive',
+          onPress: () => onRequestRelease(device.id),
+        },
+      ]
+    );
+  }
+
+  function confirmCancelRelease() {
+    Alert.alert(
+      t('devices.release_cancel_confirm'),
+      t('devices.release_cancel_body'),
+      [
+        { text: t('common.cancel'), style: 'cancel' },
+        {
+          text: t('devices.release_cancel_cta'),
+          style: 'destructive',
+          onPress: () => onCancelRelease(device.id),
+        },
+      ]
+    );
+  }
+
   const deviceName = device.model ?? device.name ?? device.platform;
   const footerText = `${formatLastSeen(device.lastSeenAt, t)} · ${t('settings.devices_since')} ${formatSince(device.createdAt)}`;
 
@@ -193,22 +243,64 @@ function MobileDeviceRow({
               </Text>
             </View>
           ) : null}
+          {isBound && !releaseActive ? (
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                borderRadius: 6,
+                backgroundColor: 'rgba(37,99,235,0.1)',
+              }}
+            >
+              <Ionicons name="lock-closed" size={9} color="#2563eb" />
+              <Text
+                style={{
+                  fontSize: 10,
+                  color: '#2563eb',
+                  fontFamily: 'Nunito_600SemiBold',
+                }}
+              >
+                {t('devices.bound_badge')}
+              </Text>
+            </View>
+          ) : null}
         </View>
 
         <Text
           numberOfLines={1}
           style={{
             fontSize: 11,
-            color: colors.textMuted,
+            color: releaseActive ? '#b45309' : colors.textMuted,
             fontFamily: 'Nunito_400Regular',
             marginTop: 3,
           }}
         >
-          {footerText}
+          {releaseActive && releaseAt
+            ? t('devices.release_countdown', { remaining: formatCountdown(releaseAt) })
+            : footerText}
         </Text>
       </View>
 
-      {!device.isCurrent ? (
+      {device.isCurrent ? null : releaseActive ? (
+        <TouchableOpacity
+          onPress={confirmCancelRelease}
+          hitSlop={8}
+          activeOpacity={0.5}
+        >
+          <Ionicons name="close-circle-outline" size={20} color={colors.textMuted} />
+        </TouchableOpacity>
+      ) : isBound ? (
+        <TouchableOpacity
+          onPress={confirmRequestRelease}
+          hitSlop={8}
+          activeOpacity={0.5}
+        >
+          <Ionicons name="lock-open-outline" size={18} color={colors.error} />
+        </TouchableOpacity>
+      ) : (
         <TouchableOpacity
           onPress={confirmRemove}
           hitSlop={8}
@@ -216,7 +308,7 @@ function MobileDeviceRow({
         >
           <Ionicons name="trash-outline" size={18} color={colors.error} />
         </TouchableOpacity>
-      ) : null}
+      )}
     </View>
   );
 }
@@ -384,6 +476,8 @@ export default function DevicesScreen() {
     loading: mobileLoading,
     loadDevices,
     removeDevice: removeMobileDevice,
+    requestRelease,
+    cancelRelease,
   } = useDevicesStore();
 
   const {
@@ -467,7 +561,12 @@ export default function DevicesScreen() {
                 <ActivityIndicator color={colors.brandOrange} />
               </View>
             ) : currentDevice ? (
-              <MobileDeviceRow device={currentDevice} onRemove={removeMobileDevice} />
+              <MobileDeviceRow
+                device={currentDevice}
+                onRemove={removeMobileDevice}
+                onRequestRelease={requestRelease}
+                onCancelRelease={cancelRelease}
+              />
             ) : (
               <View style={{ paddingVertical: 20, alignItems: 'center' }}>
                 <Text