[pull] main from pingdotgg:main

apps/mobile/generated-uniwind-default-theme-variables.json

@@ -6,6 +6,13 @@
     "--color-card": "#ffffff",
     "--color-card-alt": "#f5f5f5",
     "--color-card-translucent": "rgba(255, 255, 255, 0.8)",
+    "--color-thread-canvas": "#f5f5f5",
+    "--color-thread-selected": "#ffffff",
+    "--color-thread-selected-foreground": "#262626",
+    "--color-thread-selected-foreground-muted": "#737373",
+    "--color-composer-panel": "rgba(245, 245, 245, 0.88)",
+    "--color-composer-surface": "rgba(255, 255, 255, 0.94)",
+    "--color-composer-border": "rgba(0, 0, 0, 0.1)",
     "--color-foreground": "#262626",
     "--color-foreground-secondary": "#525252",
     "--color-foreground-muted": "#737373",
@@ -76,6 +83,13 @@
     "--color-card": "#171717",
     "--color-card-alt": "#1c1c1c",
     "--color-card-translucent": "rgba(17, 17, 17, 0.8)",
+    "--color-thread-canvas": "#1c1c1c",
+    "--color-thread-selected": "#171717",
+    "--color-thread-selected-foreground": "#f5f5f5",
+    "--color-thread-selected-foreground-muted": "#8e8e93",
+    "--color-composer-panel": "rgba(28, 28, 28, 0.92)",
+    "--color-composer-surface": "rgba(23, 23, 23, 0.9)",
+    "--color-composer-border": "rgba(255, 255, 255, 0.08)",
     "--color-foreground": "#f5f5f5",
     "--color-foreground-secondary": "#a3a3a3",
     "--color-foreground-muted": "#8e8e93",

apps/mobile/generated-uniwind-themes.css

@@ -128,6 +128,13 @@
       --color-card: #fdfafd;
       --color-card-alt: #faf3fb;
       --color-card-translucent: rgba(253, 250, 253, 0.8);
+      --color-thread-canvas: #faf3fb;
+      --color-thread-selected: #fdfafd;
+      --color-thread-selected-foreground: #501854;
+      --color-thread-selected-foreground-muted: #ac1668;
+      --color-composer-panel: rgba(250, 243, 251, 0.88);
+      --color-composer-surface: rgba(253, 250, 253, 0.94);
+      --color-composer-border: rgba(238, 225, 237, 0.54);
       --color-foreground: #501854;
       --color-foreground-secondary: #ac1668;
       --color-foreground-muted: #8d1255;
@@ -256,6 +263,13 @@
       --color-card: #2c2631;
       --color-card-alt: #29232d;
       --color-card-translucent: rgba(44, 38, 49, 0.8);
+      --color-thread-canvas: #29232d;
+      --color-thread-selected: #2c2631;
+      --color-thread-selected-foreground: #f9f8fb;
+      --color-thread-selected-foreground-muted: #e7d0dd;
+      --color-composer-panel: rgba(41, 35, 45, 0.92);
+      --color-composer-surface: rgba(44, 38, 49, 0.9);
+      --color-composer-border: rgba(39, 36, 44, 0.46);
       --color-foreground: #f9f8fb;
       --color-foreground-secondary: #e7d0dd;
       --color-foreground-muted: #e7d0dd;
@@ -384,6 +398,13 @@
       --color-card: #ecefed;
       --color-card-alt: #f3f7f4;
       --color-card-translucent: rgba(236, 239, 237, 0.8);
+      --color-thread-canvas: #f3f7f4;
+      --color-thread-selected: #ecefed;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #746c73;
+      --color-composer-panel: rgba(243, 247, 244, 0.88);
+      --color-composer-surface: rgba(236, 239, 237, 0.94);
+      --color-composer-border: rgba(203, 213, 209, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #746c73;
       --color-foreground-muted: #6e696f;
@@ -512,6 +533,13 @@
       --color-card: #36413c;
       --color-card-alt: #1b2821;
       --color-card-translucent: rgba(54, 65, 60, 0.8);
+      --color-thread-canvas: #1b2821;
+      --color-thread-selected: #36413c;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #919595;
+      --color-composer-panel: rgba(27, 40, 33, 0.92);
+      --color-composer-surface: rgba(54, 65, 60, 0.9);
+      --color-composer-border: rgba(65, 95, 79, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #919595;
       --color-foreground-muted: #9da5a2;
@@ -640,6 +668,13 @@
       --color-card: #edeff1;
       --color-card-alt: #f5f7f8;
       --color-card-translucent: rgba(237, 239, 241, 0.8);
+      --color-thread-canvas: #f5f7f8;
+      --color-thread-selected: #edeff1;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #746c75;
+      --color-composer-panel: rgba(245, 247, 248, 0.88);
+      --color-composer-surface: rgba(237, 239, 241, 0.94);
+      --color-composer-border: rgba(205, 212, 220, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #746c75;
       --color-foreground-muted: #6f6873;
@@ -768,6 +803,13 @@
       --color-card: #333b45;
       --color-card-alt: #17212b;
       --color-card-translucent: rgba(51, 59, 69, 0.8);
+      --color-thread-canvas: #17212b;
+      --color-thread-selected: #333b45;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #8d8f97;
+      --color-composer-panel: rgba(23, 33, 43, 0.92);
+      --color-composer-surface: rgba(51, 59, 69, 0.9);
+      --color-composer-border: rgba(64, 85, 103, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #8d8f97;
       --color-foreground-muted: #969ca6;
@@ -896,6 +938,13 @@
       --color-card: #f1efee;
       --color-card-alt: #f9f7f5;
       --color-card-translucent: rgba(241, 239, 238, 0.8);
+      --color-thread-canvas: #f9f7f5;
+      --color-thread-selected: #f1efee;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #766c74;
+      --color-composer-panel: rgba(249, 247, 245, 0.88);
+      --color-composer-surface: rgba(241, 239, 238, 0.94);
+      --color-composer-border: rgba(221, 210, 206, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #766c74;
       --color-foreground-muted: #74686f;
@@ -1024,6 +1073,13 @@
       --color-card: #433835;
       --color-card-alt: #291e1a;
       --color-card-translucent: rgba(67, 56, 53, 0.8);
+      --color-thread-canvas: #291e1a;
+      --color-thread-selected: #433835;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #968e8f;
+      --color-composer-panel: rgba(41, 30, 26, 0.92);
+      --color-composer-surface: rgba(67, 56, 53, 0.9);
+      --color-composer-border: rgba(102, 76, 63, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #968e8f;
       --color-foreground-muted: #a59996;
@@ -1152,6 +1208,13 @@
       --color-card: #f0eff2;
       --color-card-alt: #f8f7f9;
       --color-card-translucent: rgba(240, 239, 242, 0.8);
+      --color-thread-canvas: #f8f7f9;
+      --color-thread-selected: #f0eff2;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #766c76;
+      --color-composer-panel: rgba(248, 247, 249, 0.88);
+      --color-composer-surface: rgba(240, 239, 242, 0.94);
+      --color-composer-border: rgba(214, 209, 222, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #766c76;
       --color-foreground-muted: #726874;
@@ -1280,6 +1343,13 @@
       --color-card: #383443;
       --color-card-alt: #1d1929;
       --color-card-translucent: rgba(56, 52, 67, 0.8);
+      --color-thread-canvas: #1d1929;
+      --color-thread-selected: #383443;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #8e8a95;
+      --color-composer-panel: rgba(29, 25, 41, 0.92);
+      --color-composer-surface: rgba(56, 52, 67, 0.9);
+      --color-composer-border: rgba(77, 67, 102, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #8e8a95;
       --color-foreground-muted: #9690a1;

apps/mobile/global.css

@@ -19,6 +19,13 @@
       --color-card: #ffffff;
       --color-card-alt: #f5f5f5;
       --color-card-translucent: rgba(255, 255, 255, 0.8);
+      --color-thread-canvas: #f5f5f5;
+      --color-thread-selected: #ffffff;
+      --color-thread-selected-foreground: #262626;
+      --color-thread-selected-foreground-muted: #737373;
+      --color-composer-panel: rgba(245, 245, 245, 0.88);
+      --color-composer-surface: rgba(255, 255, 255, 0.94);
+      --color-composer-border: rgba(0, 0, 0, 0.1);
 
       /* Text */
       --color-foreground: #262626;
@@ -123,6 +130,13 @@
       --color-card: #171717;
       --color-card-alt: #1c1c1c;
       --color-card-translucent: rgba(17, 17, 17, 0.8);
+      --color-thread-canvas: #1c1c1c;
+      --color-thread-selected: #171717;
+      --color-thread-selected-foreground: #f5f5f5;
+      --color-thread-selected-foreground-muted: #8e8e93;
+      --color-composer-panel: rgba(28, 28, 28, 0.92);
+      --color-composer-surface: rgba(23, 23, 23, 0.9);
+      --color-composer-border: rgba(255, 255, 255, 0.08);
 
       /* Text */
       --color-foreground: #f5f5f5;

apps/mobile/modules/t3-composer-editor/android/src/main/java/expo/modules/t3composereditor/T3ComposerEditorView.kt

@@ -7,11 +7,13 @@ import android.graphics.Canvas
 import android.graphics.Paint
 import android.graphics.RectF
 import android.graphics.Typeface
+import android.os.Build
 import android.text.Editable
 import android.text.InputType
 import android.text.Spanned
 import android.text.TextWatcher
 import android.text.style.ReplacementSpan
+import android.util.TypedValue
 import android.view.Gravity
 import android.view.ViewGroup
 import android.view.inputmethod.InputMethodManager
@@ -27,6 +29,11 @@ class T3ComposerEditorView(context: Context, appContext: AppContext) : ExpoView(
   appContext
 ) {
   private val editor = SelectionAwareEditText(context)
+  private val defaultHighlightColor = editor.highlightColor
+  private val defaultSelectionColor = context.resolveThemeColor(
+    android.R.attr.colorAccent,
+    editor.currentTextColor,
+  )
   private val onComposerChange by EventDispatcher()
   private val onComposerSelectionChange by EventDispatcher()
   private val onComposerFocus by EventDispatcher()
@@ -152,6 +159,11 @@ class T3ComposerEditorView(context: Context, appContext: AppContext) : ExpoView(
       val theme = JSONObject(themeJson)
       editor.setTextColor(parseColor(theme.optString("text"), Color.BLACK))
       editor.setHintTextColor(parseColor(theme.optString("placeholder"), Color.GRAY))
+      if (theme.isNull("selection")) {
+        resetSelectionTheme()
+      } else {
+        applySelectionTheme(parseColor(theme.optString("selection"), editor.currentTextColor))
+      }
       chipTheme = ComposerChipTheme(
         chipBackground = parseColor(theme.optString("chipBackground"), chipTheme.chipBackground),
         chipBorder = parseColor(theme.optString("chipBorder"), chipTheme.chipBorder),
@@ -277,6 +289,21 @@ class T3ComposerEditorView(context: Context, appContext: AppContext) : ExpoView(
     editor.setLineSpacing(max(0, desiredLineHeightPx - fontHeight).toFloat(), 1f)
   }
 
+  private fun applySelectionTheme(color: Int) {
+    editor.highlightColor = color.withAlpha(0x52)
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) return
+
+    editor.textCursorDrawable = editor.textCursorDrawable?.mutate()?.apply { setTint(color) }
+    editor.textSelectHandle?.mutate()?.setTint(color)
+    editor.textSelectHandleLeft?.mutate()?.setTint(color)
+    editor.textSelectHandleRight?.mutate()?.setTint(color)
+  }
+
+  private fun resetSelectionTheme() {
+    applySelectionTheme(defaultSelectionColor)
+    editor.highlightColor = defaultHighlightColor
+  }
+
   private fun currentSelectionPayload(): Map<String, Int> =
     mapOf(
       "start" to editor.selectionStart.coerceAtLeast(0),
@@ -335,12 +362,24 @@ class T3ComposerEditorView(context: Context, appContext: AppContext) : ExpoView(
 
   private fun parseColor(value: String, fallback: Int): Int =
     try {
-      Color.parseColor(value)
+      val androidColor = if (value.length == 9 && value.startsWith("#")) {
+        "#${value.takeLast(2)}${value.substring(1, 7)}"
+      } else {
+        value
+      }
+      Color.parseColor(androidColor)
     } catch (_: Exception) {
       fallback
     }
 }
 
+private fun Int.withAlpha(alpha: Int): Int = (this and 0x00FFFFFF) or (alpha shl 24)
+
+private fun Context.resolveThemeColor(attribute: Int, fallback: Int): Int {
+  val value = TypedValue()
+  return if (theme.resolveAttribute(attribute, value, true)) value.data else fallback
+}
+
 private data class ComposerToken(
   val type: String,
   val source: String,

apps/mobile/package.json

@@ -51,6 +51,7 @@
     "@expo/metro-runtime": "~57.0.14",
     "@expo/ui": "~57.0.14",
     "@legendapp/list": "catalog:",
+    "@material/material-color-utilities": "0.3.0",
     "@noble/curves": "catalog:",
     "@pierre/diffs": "catalog:",
     "@react-native-ai/apple": "0.12.0",

apps/mobile/src/components/AndroidScreenHeader.tsx

@@ -48,6 +48,7 @@ export function AndroidScreenHeader(props: {
   readonly trailing?: ReactNode;
   readonly onBack?: () => void;
   readonly embedded?: boolean;
+  readonly hideBottomBorder?: boolean;
 }) {
   const insets = useSafeAreaInsets();
 
@@ -56,6 +57,7 @@ export function AndroidScreenHeader(props: {
       className="border-b border-header-border bg-header px-3 pb-2.5"
       style={{
         paddingTop: props.embedded ? 8 : Math.max(insets.top, 12),
+        borderBottomWidth: props.hideBottomBorder ? 0 : undefined,
       }}
     >
       <View className="min-h-12 flex-row items-center gap-2">

apps/mobile/src/components/ThemedSwitch.tsx

@@ -1,6 +1,52 @@
-import { Platform, Switch, type SwitchProps } from "react-native";
+import { Platform, Pressable, Switch, View, type SwitchProps } from "react-native";
+
+import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
+import { SymbolView } from "./AppSymbol";
 
 export function ThemedSwitch(props: SwitchProps) {
+  const { materialYouStyleLayoutActive } = useAppearancePreferences();
+  if (materialYouStyleLayoutActive) {
+    return (
+      <Pressable
+        accessibilityHint={props.accessibilityHint}
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: Boolean(props.value), disabled: props.disabled }}
+        disabled={props.disabled}
+        hitSlop={8}
+        onPress={() => props.onValueChange?.(!props.value)}
+        style={props.style}
+        testID={props.testID}
+        className={props.disabled ? "opacity-40" : "active:opacity-70"}
+      >
+        <View
+          className={
+            props.value
+              ? "h-8 w-[52px] items-end justify-center rounded-full border-2 border-switch-active-track bg-switch-active-track px-0.5"
+              : "h-8 w-[52px] items-start justify-center rounded-full border-2 border-switch-inactive-thumb bg-switch-inactive-track px-0.5"
+          }
+        >
+          <View
+            className={
+              props.value
+                ? "size-6 items-center justify-center rounded-full bg-switch-active-thumb"
+                : "size-6 items-center justify-center rounded-full bg-switch-inactive-thumb"
+            }
+          >
+            <SymbolView
+              name={props.value ? "checkmark" : "xmark"}
+              size={13}
+              tintColorClassName={
+                props.value ? "accent-switch-active-track" : "accent-switch-inactive-track"
+              }
+              type="monochrome"
+            />
+          </View>
+        </View>
+      </Pressable>
+    );
+  }
+
   return (
     <Switch
       {...props}