diff --git a/packages/app/src/desktop/components/desktop-permissions-section.tsx b/packages/app/src/desktop/components/desktop-permissions-section.tsx
index 5662798e2..b9812ec30 100644
--- a/packages/app/src/desktop/components/desktop-permissions-section.tsx
+++ b/packages/app/src/desktop/components/desktop-permissions-section.tsx
@@ -43,26 +43,34 @@ export function DesktopPermissionsSection() {
void sendTestNotification();
}, [sendTestNotification]);
- if (!isDesktopApp) {
- return null;
- }
-
const isBusy = isRefreshing || requestingPermission !== null;
const notificationsGranted = snapshot?.notifications.state === "granted";
- const refreshButton = (
- }
- onPress={handleRefreshPress}
- disabled={isBusy}
- accessibilityLabel="Refresh desktop permissions"
- >
- {isRefreshing ? "Refreshing..." : "Refresh"}
-
+ const refreshIcon = useMemo(
+ () => ,
+ [theme.iconSize.md, theme.colors.foregroundMuted],
);
+ const refreshButton = useMemo(
+ () => (
+
+ ),
+ [refreshIcon, handleRefreshPress, isBusy, isRefreshing],
+ );
+
+ if (!isDesktopApp) {
+ return null;
+ }
+
return (
diff --git a/packages/app/src/desktop/components/desktop-updates-section.tsx b/packages/app/src/desktop/components/desktop-updates-section.tsx
index ea83f0c44..6fc8a254b 100644
--- a/packages/app/src/desktop/components/desktop-updates-section.tsx
+++ b/packages/app/src/desktop/components/desktop-updates-section.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
import { ActivityIndicator, Alert, Text, View } from "react-native";
import * as Clipboard from "expo-clipboard";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -247,24 +247,56 @@ export function LocalDaemonSection() {
const handleCloseLogsModal = useCallback(() => setIsLogsModalOpen(false), []);
const handleCloseCliStatusModal = useCallback(() => setIsCliStatusModalOpen(false), []);
+ const advancedSettingsIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foregroundMuted],
+ );
+ const playIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foreground],
+ );
+ const pauseIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foreground],
+ );
+ const rotateIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foreground],
+ );
+ const copyIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foreground],
+ );
+ const fileTextIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foreground],
+ );
+ const activityIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foreground],
+ );
+
+ const advancedSettingsButton = useMemo(
+ () => (
+
+ ),
+ [advancedSettingsIcon, handleOpenAdvancedSettings],
+ );
+
if (!showSection) {
return null;
}
- const advancedSettingsButton = (
- }
- textStyle={settingsStyles.sectionHeaderLinkText}
- style={settingsStyles.sectionHeaderLink}
- onPress={handleOpenAdvancedSettings}
- accessibilityLabel="Open advanced daemon settings"
- >
- Advanced settings
-
- );
-
return (
- ) : (
-
- )
- }
+ leftIcon={isDaemonManagementPaused ? playIcon : pauseIcon}
onPress={handleToggleDaemonManagement}
disabled={isUpdatingDaemonManagement}
>
@@ -330,7 +356,7 @@ export function LocalDaemonSection() {
}
+ leftIcon={rotateIcon}
onPress={handleUpdateLocalDaemon}
disabled={isRestartingDaemon}
>
@@ -353,7 +379,7 @@ export function LocalDaemonSection() {
}
+ leftIcon={copyIcon}
onPress={handleCopyLogPath}
>
Copy path
@@ -362,7 +388,7 @@ export function LocalDaemonSection() {
}
+ leftIcon={fileTextIcon}
onPress={handleOpenLogs}
disabled={!daemonLogs}
>
@@ -380,7 +406,7 @@ export function LocalDaemonSection() {
}
+ leftIcon={activityIcon}
onPress={handleRunCliStatus}
disabled={isLoadingCliStatus}
>
diff --git a/packages/app/src/desktop/components/integrations-section.tsx b/packages/app/src/desktop/components/integrations-section.tsx
index f38e7f981..6a6853f35 100644
--- a/packages/app/src/desktop/components/integrations-section.tsx
+++ b/packages/app/src/desktop/components/integrations-section.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
import { Text, View } from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -85,37 +85,45 @@ export function IntegrationsSection() {
void openExternalUrl(SKILLS_DOCS_URL);
}, []);
+ const arrowIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foregroundMuted],
+ );
+
+ const trailing = useMemo(
+ () => (
+
+
+
+
+ ),
+ [arrowIcon, handleOpenCliDocs, handleOpenSkillsDocs],
+ );
+
if (!showSection) {
return null;
}
- const trailing = (
-
- }
- textStyle={settingsStyles.sectionHeaderLinkText}
- style={settingsStyles.sectionHeaderLink}
- onPress={handleOpenCliDocs}
- accessibilityLabel="Open CLI documentation"
- >
- CLI docs
-
- }
- textStyle={settingsStyles.sectionHeaderLinkText}
- style={settingsStyles.sectionHeaderLink}
- onPress={handleOpenSkillsDocs}
- accessibilityLabel="Open skills documentation"
- >
- Skills docs
-
-
- );
-
return (
diff --git a/packages/app/src/desktop/components/pair-device-section.tsx b/packages/app/src/desktop/components/pair-device-section.tsx
index 5cacc0dd7..e098aa46d 100644
--- a/packages/app/src/desktop/components/pair-device-section.tsx
+++ b/packages/app/src/desktop/components/pair-device-section.tsx
@@ -55,6 +55,20 @@ export function PairDeviceSection() {
[qrQuery.data],
);
+ const retryIcon = useMemo(
+ () => ,
+ [theme.iconSize.sm, theme.colors.foreground],
+ );
+ const copyButtonIcon = useMemo(
+ () =>
+ copied ? (
+
+ ) : (
+
+ ),
+ [copied, theme.iconSize.sm, theme.colors.accent, theme.colors.foreground],
+ );
+
if (!showSection) return null;
return (
@@ -72,12 +86,7 @@ export function PairDeviceSection() {
? pairingQuery.error.message
: "Failed to load pairing offer."}
- }
- onPress={handleRefetch}
- >
+
@@ -88,12 +97,7 @@ export function PairDeviceSection() {
? "Relay is not enabled. Enable relay to pair a device."
: "Pairing offer unavailable."}
- }
- onPress={handleRefetch}
- >
+
@@ -124,13 +128,7 @@ export function PairDeviceSection() {
- ) : (
-
- )
- }
+ leftIcon={copyButtonIcon}
onPress={handleCopyPress}
>
{copied ? "Copied" : "Copy"}