Improve review comment UI

packages/app/src/components/ui/button.tsx

@@ -1,10 +1,12 @@
 import {
+  default as React,
   useCallback,
   useMemo,
   useState,
   type ComponentType,
   type PropsWithChildren,
   type ReactElement,
+  type ReactNode,
 } from "react";
 import { ActivityIndicator, Pressable, Text, View } from "react-native";
 import type {
@@ -17,7 +19,7 @@ import type {
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
 type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive";
-type ButtonSize = "sm" | "md" | "lg";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
 
 type LeftIcon =
   | ReactElement
@@ -25,7 +27,7 @@ type LeftIcon =
   | ((color: string) => ReactElement)
   | null;
 
-const ICON_SIZE: Record<ButtonSize, number> = { sm: 14, md: 16, lg: 20 };
+const ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 14, md: 16, lg: 20 };
 
 const styles = StyleSheet.create((theme) => ({
   base: {
@@ -41,6 +43,12 @@ const styles = StyleSheet.create((theme) => ({
     paddingVertical: theme.spacing[3],
     paddingHorizontal: theme.spacing[4],
   },
+  xs: {
+    minHeight: 28,
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[3],
+    borderRadius: theme.borderRadius.md,
+  },
   sm: {
     paddingVertical: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
@@ -82,6 +90,9 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.normal,
   },
+  textXs: {
+    fontSize: theme.fontSize.xs,
+  },
   textDefault: {
     color: theme.colors.palette.white,
   },
@@ -101,6 +112,7 @@ export function Button({
   variant = "secondary",
   size = "md",
   leftIcon,
+  trailing,
   style,
   textStyle,
   disabled,
@@ -112,6 +124,7 @@ export function Button({
     variant?: ButtonVariant;
     size?: ButtonSize;
     leftIcon?: LeftIcon;
+    trailing?: ReactNode;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
     loading?: boolean;
@@ -135,7 +148,9 @@ export function Button({
   }
 
   let sizeStyle: ViewStyle;
-  if (size === "sm") {
+  if (size === "xs") {
+    sizeStyle = styles.xs;
+  } else if (size === "sm") {
     sizeStyle = styles.sm;
   } else if (size === "lg") {
     sizeStyle = styles.lg;
@@ -162,13 +177,14 @@ export function Button({
   const resolvedTextStyle = useMemo(
     () => [
       styles.text,
+      size === "xs" ? styles.textXs : null,
       variant === "default" ? styles.textDefault : null,
       variant === "destructive" ? styles.textDestructive : null,
       variant === "ghost" ? styles.textGhost : null,
       textStyle,
       isGhostHovered ? styles.textGhostHovered : null,
     ],
-    [variant, textStyle, isGhostHovered],
+    [size, variant, textStyle, isGhostHovered],
   );
 
   const accessibilityState = useMemo(
@@ -235,6 +251,7 @@ export function Button({
     >
       {renderIcon()}
       {children != null ? <Text style={resolvedTextStyle}>{children}</Text> : null}
+      {trailing}
     </Pressable>
   );
 }

packages/app/src/components/ui/shortcut.tsx

@@ -1,9 +1,26 @@
-import { useMemo, type ReactElement } from "react";
+import React, { useMemo, type ReactElement } from "react";
 import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { formatShortcut, type ShortcutKey } from "@/utils/format-shortcut";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 
+function colorWithOpacity(color: string, opacity: number): string {
+  const hex = color.trim();
+  if (/^#[0-9a-fA-F]{3}$/.test(hex)) {
+    const r = Number.parseInt(hex[1] + hex[1], 16);
+    const g = Number.parseInt(hex[2] + hex[2], 16);
+    const b = Number.parseInt(hex[3] + hex[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
+    const r = Number.parseInt(hex.slice(1, 3), 16);
+    const g = Number.parseInt(hex.slice(3, 5), 16);
+    const b = Number.parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return `rgba(255, 255, 255, ${opacity})`;
+}
+
 export function Shortcut({
   keys,
   chord,
@@ -53,9 +70,8 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 2,
     borderRadius: theme.borderRadius.md,
-    backgroundColor: theme.colors.surface2,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.borderAccent,
+    backgroundColor: colorWithOpacity(theme.colors.foreground, 0.05),
+    borderWidth: 0,
   },
   sequence: {
     flexDirection: "row",
@@ -66,6 +82,6 @@ const styles = StyleSheet.create((theme) => ({
   text: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.foregroundMuted,
+    color: colorWithOpacity(theme.colors.foreground, 0.6),
   },
 }));