| author |  Julius Marminge <julius0216@outlook.com> 2026-08-28 17:14:03-07:00 |
| committer |  GitHub <noreply@github.com> 2026-08-28 17:14:03-07:00 |
| log | 8fc7f22941969d7a2c06929dc29aa86ae1b02f33 |
| tree | bf7df9c9fd2cf42c203af47e7b709ffb540228ac |
| parent | 38154388d7b0274aefd3f29c38db3b2659c46c29 |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(mobile): restore composer glass and rounded shadows (#8597)
Co-authored-by: Julius Marminge <julius@mac.lan>4 files changed, 18 insertions(+), 15 deletions(-)
apps
mobile
src
components
features
threads
docs
apps/mobile/src/components/ComposerToolbar.tsx+2-2
| ... | @@ -252,7 +252,8 @@ export function ComposerToolbarButton(props: { | ... | @@ -252,7 +252,8 @@ export function ComposerToolbarButton(props: { |
| 252 | // so callers can lift it with max-w-full — flex-filling pills in the | 252 | // so callers can lift it with max-w-full — flex-filling pills in the |
| 253 | // thread composer stretch to the row's edge. The numeric maxWidth | 253 | // thread composer stretch to the row's edge. The numeric maxWidth |
| 254 | // prop still wins via the inline style below. | 254 | // prop still wins via the inline style below. |
| 255 | "h-11 max-w-[172px] flex-row items-center justify-center rounded-full border shadow-lg shadow-adaptive-black-a10-a25 active:opacity-70", | 255 | "h-11 max-w-[172px] flex-row items-center justify-center rounded-full border active:opacity-70", |
| 256 | variant === "primary" && "shadow-lg shadow-adaptive-black-a10-a25 disabled:shadow-none", | ||
| 256 | isCircle ? "w-11" : "gap-2 px-3.5", | 257 | isCircle ? "w-11" : "gap-2 px-3.5", |
| 257 | variant === "primary" | 258 | variant === "primary" |
| 258 | ? props.disabled | 259 | ? props.disabled |
| ... | @@ -279,7 +280,6 @@ export function ComposerToolbarButton(props: { | ... | @@ -279,7 +280,6 @@ export function ComposerToolbarButton(props: { |
| 279 | maxWidth: props.maxWidth, | 280 | maxWidth: props.maxWidth, |
| 280 | minWidth: props.minWidth, | 281 | minWidth: props.minWidth, |
| 281 | opacity: props.disabled ? 0.55 : pressed ? 0.72 : 1, | 282 | opacity: props.disabled ? 0.55 : pressed ? 0.72 : 1, |
| 282 | shadowOpacity: props.disabled ? 0 : 1, | ||
| 283 | }, | 283 | }, |
| 284 | props.style, | 284 | props.style, |
| 285 | ]} | 285 | ]} |
apps/mobile/src/components/GlassSurface.tsx+5-1
| ... | @@ -13,7 +13,11 @@ import { withUniwind } from "uniwind"; | ... | @@ -13,7 +13,11 @@ import { withUniwind } from "uniwind"; |
| 13 | 13 | ||
| 14 | import { cn } from "../lib/cn"; | 14 | import { cn } from "../lib/cn"; |
| 15 | 15 | ||
| 16 | const ThemedGlassView = withUniwind(GlassView); | 16 | // Explicit mappings keep the native glassEffectStyle enum out of style-array conversion. |
| 17 | const ThemedGlassView = withUniwind(GlassView, { | ||
| 18 | style: { fromClassName: "className" }, | ||
| 19 | tintColor: { fromClassName: "tintColorClassName", styleProperty: "accentColor" }, | ||
| 20 | }); | ||
| 17 | 21 | ||
| 18 | interface GlassSurfaceProps extends ViewProps { | 22 | interface GlassSurfaceProps extends ViewProps { |
| 19 | readonly children: ReactNode; | 23 | readonly children: ReactNode; |
apps/mobile/src/features/threads/ThreadComposer.tsx+8-12
| ... | @@ -119,21 +119,17 @@ export function ComposerSurface(props: { | ... | @@ -119,21 +119,17 @@ export function ComposerSurface(props: { |
| 119 | /** Existing thread composers morph between pill and card layouts. */ | 119 | /** Existing thread composers morph between pill and card layouts. */ |
| 120 | readonly animateLayout?: boolean; | 120 | readonly animateLayout?: boolean; |
| 121 | }) { | 121 | }) { |
| 122 | // Drop shadow lives on a wrapper: `overflow: "hidden"` on the surface itself | 122 | // A box shadow follows the rounded surface even when the glass is transparent. |
| 123 | // (needed to clip content to the pill shape) would clip the shadow on iOS. | 123 | // Keep it outside the clipped content so the shadow can extend past the edge. |
| 124 | const shadowStyle: ViewStyle = { | ||
| 125 | borderRadius: props.style.borderRadius, | ||
| 126 | shadowOpacity: 1, | ||
| 127 | shadowRadius: 14, | ||
| 128 | shadowOffset: { width: 0, height: 6 }, | ||
| 129 | elevation: 10, | ||
| 130 | }; | ||
| 131 | |||
| 132 | return ( | 124 | return ( |
| 133 | <Animated.View | 125 | <Animated.View |
| 134 | className="shadow-adaptive-black-a15-a35" | 126 | className="shadow-[0_6px_28px] shadow-adaptive-black-a15-a35" |
| 135 | layout={props.animateLayout === false ? undefined : COMPOSER_LAYOUT_TRANSITION} | 127 | layout={props.animateLayout === false ? undefined : COMPOSER_LAYOUT_TRANSITION} |
| 136 | style={shadowStyle} | 128 | style={{ |
| 129 | borderRadius: props.style.borderRadius, | ||
| 130 | // Android versions before 9 do not support outset box shadows. | ||
| 131 | elevation: Platform.OS === "android" && Platform.Version < 28 ? 10 : undefined, | ||
| 132 | }} | ||
| 137 | > | 133 | > |
| 138 | <GlassSurface | 134 | <GlassSurface |
| 139 | chrome="none" | 135 | chrome="none" |
docs/user/mobile-appearance.md+3
| ... | @@ -4,6 +4,9 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them | ... | @@ -4,6 +4,9 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them |
| 4 | light and dark colors that apply throughout the app, including code reviews, file previews, the | 4 | light and dark colors that apply throughout the app, including code reviews, file previews, the |
| 5 | terminal, native headers, and sheets. | 5 | terminal, native headers, and sheets. |
| 6 | 6 | ||
| 7 | On supported iOS versions, the new-task and thread composers use the system glass material. | ||
| 8 | Other platforms use a themed background. | ||
| 9 | |||
| 7 | To change themes: | 10 | To change themes: |
| 8 | 11 | ||
| 9 | 1. Open **Settings**. | 12 | 1. Open **Settings**. |