From 78d10c9e3201408808f3f32c9c48083ee80b29c6 Mon Sep 17 00:00:00 2001
From: Pixel Perfect <me@pixp.cc>
Date: Sun, 25 Oct 2026 09:40:00 -0700
Subject: [PATCH] fix(mobile): honor native iOS glass appearance

---
 apps/mobile/src/components/ui/GlassSurface.tsx     | 14 +++-----------
 .../src/features/keyboard/CommandPalette.tsx       |  3 +--
 .../features/threads/ComposerCommandPopover.tsx    | 10 +---------
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/apps/mobile/src/components/ui/GlassSurface.tsx b/apps/mobile/src/components/ui/GlassSurface.tsx
index 8af080fc19cc..100c4112495c 100644
--- a/apps/mobile/src/components/ui/GlassSurface.tsx
+++ b/apps/mobile/src/components/ui/GlassSurface.tsx
@@ -25,7 +25,6 @@ interface GlassSurfaceProps extends ViewProps {
   readonly ref?: Ref<ViewInstance>;
   readonly children: ReactNode;
   readonly glassEffectStyle?: "clear" | "regular" | "none";
-  // null leaves UIKit's material untinted instead of applying the theme tint.
   readonly tintColor?: ColorValue | null;
   readonly tintColorClassName?: string;
   readonly chrome?: "default" | "none";
@@ -49,7 +48,7 @@ export function GlassSurface({
   const { themeAppearance } = useAppearancePreferences();
   const isDarkMode = themeAppearance === "dark";
   const supportsGlass = Platform.OS === "ios" && isGlassEffectAPIAvailable();
-  const hasShadow = chrome !== "none" && Platform.OS !== "android";
+  const hasShadow = !supportsGlass && chrome !== "none" && Platform.OS !== "android";
   const surfaceStyle: ViewStyle = {
     borderRadius: MOBILE_SHAPE.glass,
     overflow: "hidden",
@@ -65,17 +64,10 @@ export function GlassSurface({
       <ThemedGlassView
         {...props}
         ref={ref}
-        className={cn(
-          chrome === "none"
-            ? "border-0 border-transparent bg-transparent"
-            : "border border-border bg-glass-surface",
-          className,
-        )}
+        className={cn("border-0 border-transparent bg-transparent", className)}
         glassEffectStyle={glassEffectStyle}
         tintColor={tintColor == null ? undefined : String(tintColor)}
-        tintColorClassName={
-          tintColorClassName ?? (tintColor === undefined ? "accent-glass-tint" : undefined)
-        }
+        tintColorClassName={tintColorClassName}
         colorScheme={isDarkMode ? "dark" : "light"}
         style={[surfaceStyle, style]}
       >
diff --git a/apps/mobile/src/features/keyboard/CommandPalette.tsx b/apps/mobile/src/features/keyboard/CommandPalette.tsx
index 7e7fea4527b8..8cd46807671b 100644
--- a/apps/mobile/src/features/keyboard/CommandPalette.tsx
+++ b/apps/mobile/src/features/keyboard/CommandPalette.tsx
@@ -580,8 +580,7 @@ export function CommandPalette(props: {
             />
             <GlassSurface
               accessibilityViewIsModal
-              className="bg-sheet"
-              tintColorClassName="accent-sheet/20"
+              fallbackClassName="bg-sheet"
               fallbackColor={themeVariables["--color-sheet"]}
               style={{
                 width: Math.min(600, width - 32 - bounds.left - bounds.right),
diff --git a/apps/mobile/src/features/threads/ComposerCommandPopover.tsx b/apps/mobile/src/features/threads/ComposerCommandPopover.tsx
index cd924e4c61f0..84a01d451b35 100644
--- a/apps/mobile/src/features/threads/ComposerCommandPopover.tsx
+++ b/apps/mobile/src/features/threads/ComposerCommandPopover.tsx
@@ -77,15 +77,7 @@ function PopoverSurface(props: { readonly children: React.ReactNode; readonly st
     ...props.style,
   };
 
-  return (
-    <GlassSurface
-      glassEffectStyle="clear"
-      tintColorClassName="accent-glass-surface"
-      style={baseStyle}
-    >
-      {props.children}
-    </GlassSurface>
-  );
+  return <GlassSurface style={baseStyle}>{props.children}</GlassSurface>;
 }
 
 const SKILL_SOURCE_SYMBOL_BY_KIND: Record<ProviderSkillSourceKind, AppSymbolName> = {