refactor(app): isolate desktop settings update and permission flows

2026-02-22 11:45:37 +07:00
parent 1c83e10c6d
commit 409a3ac5df
11 changed files with 760 additions and 579 deletions
@@ -0,0 +1,105 @@
+import { View, Text, Pressable } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { RotateCw } from "lucide-react-native";
+import { DesktopPermissionRow } from "@/desktop/components/desktop-permission-row";
+import { useDesktopPermissions } from "@/desktop/permissions/use-desktop-permissions";
+
+export function DesktopPermissionsSection() {
+  const { theme } = useUnistyles();
+  const {
+    isDesktop,
+    snapshot,
+    isRefreshing,
+    requestingPermission,
+    refreshPermissions,
+    requestPermission,
+  } = useDesktopPermissions();
+
+  if (!isDesktop) {
+    return null;
+  }
+
+  const isBusy = isRefreshing || requestingPermission !== null;
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.permissionSectionHeader}>
+        <Text style={styles.sectionTitle}>Desktop permissions</Text>
+        <Pressable
+          style={({ pressed }) => [
+            styles.permissionRefreshButton,
+            isBusy && styles.permissionRefreshButtonDisabled,
+            pressed && { opacity: 0.85 },
+          ]}
+          onPress={() => {
+            void refreshPermissions();
+          }}
+          disabled={isBusy}
+          accessibilityRole="button"
+          accessibilityLabel="Refresh desktop permissions"
+        >
+          <RotateCw size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+        </Pressable>
+      </View>
+      <View style={styles.audioCard}>
+        <DesktopPermissionRow
+          title="Notifications"
+          status={snapshot?.notifications ?? null}
+          isRequesting={requestingPermission === "notifications"}
+          onRequest={() => {
+            void requestPermission("notifications");
+          }}
+        />
+        <DesktopPermissionRow
+          title="Microphone"
+          showBorder
+          status={snapshot?.microphone ?? null}
+          isRequesting={requestingPermission === "microphone"}
+          onRequest={() => {
+            void requestPermission("microphone");
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  section: {
+    marginBottom: theme.spacing[6],
+  },
+  sectionTitle: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    marginBottom: 0,
+    marginLeft: theme.spacing[1],
+  },
+  permissionSectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
+    marginBottom: theme.spacing[3],
+  },
+  permissionRefreshButton: {
+    width: 34,
+    height: 34,
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  permissionRefreshButtonDisabled: {
+    opacity: theme.opacity[50],
+  },
+  audioCard: {
+    backgroundColor: theme.colors.surface2,
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    overflow: "hidden",
+  },
+}));