feat(mobile): one bottom sheet for page comments, not a floating card

apps/mobile/app/(authenticated)/_layout.tsx

@@ -67,7 +67,7 @@ export default function AuthenticatedLayout() {
 			<Stack.Screen
 				name="pages/[slug]/index"
 				options={{
-					...pageScreenOptions,
+					...glassHeaderOptions,
 					title: "",
 					headerBackTitle: t({ message: "Pages" }),
 				}}
@@ -83,13 +83,12 @@ export default function AuthenticatedLayout() {
 				}}
 			/>
 			<Stack.Screen
-				name="pages/[slug]/quick"
+				name="pages/[slug]/comment"
 				options={{
-					presentation: "formSheet",
-					title: t({ message: "Quick feedback" }),
-					sheetAllowedDetents: [0.6],
-					sheetGrabberVisible: true,
-					...glassHeaderOptions,
+					presentation: "transparentModal",
+					headerShown: false,
+					animation: "fade",
+					contentStyle: { backgroundColor: "transparent" },
 				}}
 			/>
 			<Stack.Screen

apps/mobile/app/(authenticated)/pages/[slug]/comment.tsx

@@ -0,0 +1,3 @@
+import { CommentSheet } from "@/screens/(authenticated)/pages/[slug]/comment";
+
+export default CommentSheet;

apps/mobile/expo-observe-swift-version-patch.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+const repoRoot = join(import.meta.dir, "../..");
+const patched: Record<string, string> =
+	JSON.parse(readFileSync(join(repoRoot, "package.json"), "utf8"))
+		.patchedDependencies ?? {};
+const lockfile = readFileSync(join(repoRoot, "bun.lock"), "utf8");
+
+describe("expo-observe swift version patch", () => {
+	test("every resolved expo-observe version is patched", () => {
+		const resolved = [
+			...lockfile.matchAll(/"expo-observe": \["expo-observe@([^"]+)"/g),
+		].map((match) => `expo-observe@${match[1]}`);
+
+		expect(resolved.length).toBeGreaterThan(0);
+		for (const version of resolved) {
+			expect(patched[version]).toBeString();
+		}
+	});
+
+	test("the patch still drops the podspec out of Swift 6", () => {
+		for (const path of Object.entries(patched)
+			.filter(([name]) => name.startsWith("expo-observe@"))
+			.map(([, file]) => file)) {
+			const patch = readFileSync(join(repoRoot, path), "utf8");
+			expect(patch).toContain("ios/ExpoObserve.podspec");
+			expect(patch).toContain("-  s.swift_version  = '6.0'");
+			expect(patch).toContain("+  s.swift_version  = '5.0'");
+		}
+	});
+
+	test("the installed package carries the patch", () => {
+		const podspec = readFileSync(
+			join(
+				import.meta.dir,
+				"node_modules/expo-observe/ios/ExpoObserve.podspec",
+			),
+			"utf8",
+		);
+		expect(podspec).toContain("s.swift_version  = '5.0'");
+	});
+});

apps/mobile/metro.config.js

@@ -35,6 +35,7 @@ config.resolver.unstable_enablePackageExports = true;
 config.resolver.extraNodeModules = {
 	"@superset/alert-prompt": path.resolve(projectRoot, "modules/alert-prompt"),
 	"@superset/composer": path.resolve(projectRoot, "modules/composer"),
+	"@superset/symbol-button": path.resolve(projectRoot, "modules/symbol-button"),
 	"@superset/attachments-sheet": path.resolve(
 		projectRoot,
 		"modules/attachments-sheet",

apps/mobile/modules/symbol-button/expo-module.config.json

@@ -0,0 +1,4 @@
+{
+	"platforms": ["apple"],
+	"apple": { "modules": ["SymbolButtonModule"] }
+}

apps/mobile/modules/symbol-button/ios/SymbolButton.podspec

@@ -0,0 +1,25 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'SymbolButton'
+  s.version        = package['version']
+  s.summary        = 'SF Symbol button with an optional anchored menu'
+  s.description    = 'A UIButton rendering an SF Symbol, which shows a UIMenu anchored to itself when given items'
+  s.license        = 'MIT'
+  s.author         = 'Superset'
+  s.homepage       = 'https://superset.sh'
+  s.platforms      = { :ios => '26.0' }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/superset-sh/superset.git' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES'
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

apps/mobile/modules/symbol-button/ios/SymbolButtonModule.swift

@@ -0,0 +1,117 @@
+import ExpoModulesCore
+import UIKit
+
+struct SymbolMenuItem: Record {
+  @Field var id: String = ""
+  @Field var title: String = ""
+  @Field var systemImage: String?
+}
+
+public class SymbolButtonModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("SymbolButton")
+
+    View(SymbolButtonView.self) {
+      Events("onTap", "onSelect")
+
+      Prop("systemImage") { (view: SymbolButtonView, name: String) in
+        view.setSymbol(name)
+      }
+
+      Prop("size") { (view: SymbolButtonView, size: Double) in
+        view.setSymbolSize(CGFloat(size))
+      }
+
+      Prop("tint") { (view: SymbolButtonView, color: UIColor?) in
+        view.setTint(color)
+      }
+
+      Prop("accessibilityLabel") { (view: SymbolButtonView, label: String?) in
+        view.button.accessibilityLabel = label
+      }
+
+      Prop("enabled") { (view: SymbolButtonView, enabled: Bool) in
+        view.button.isEnabled = enabled
+      }
+
+      Prop("items") { (view: SymbolButtonView, items: [SymbolMenuItem]?) in
+        view.setItems(items ?? [])
+      }
+    }
+  }
+}
+
+final class SymbolButtonView: ExpoView {
+  let button = UIButton(type: .system)
+
+  private let onTap = EventDispatcher()
+  private let onSelect = EventDispatcher()
+
+  private var symbolName = "circle"
+  private var symbolSize: CGFloat = 20
+  private var items: [SymbolMenuItem] = []
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+
+    button.translatesAutoresizingMaskIntoConstraints = false
+    button.addTarget(self, action: #selector(handleTap), for: .touchUpInside)
+    addSubview(button)
+
+    isAccessibilityElement = false
+
+    NSLayoutConstraint.activate([
+      button.leadingAnchor.constraint(equalTo: leadingAnchor),
+      button.trailingAnchor.constraint(equalTo: trailingAnchor),
+      button.topAnchor.constraint(equalTo: topAnchor),
+      button.bottomAnchor.constraint(equalTo: bottomAnchor),
+    ])
+
+    applySymbol()
+  }
+
+  func setSymbol(_ name: String) {
+    symbolName = name
+    applySymbol()
+  }
+
+  func setSymbolSize(_ size: CGFloat) {
+    symbolSize = size
+    applySymbol()
+  }
+
+  func setTint(_ color: UIColor?) {
+    button.tintColor = color
+  }
+
+  func setItems(_ items: [SymbolMenuItem]) {
+    self.items = items
+    guard !items.isEmpty else {
+      button.menu = nil
+      button.showsMenuAsPrimaryAction = false
+      return
+    }
+
+    let actions = items.map { item in
+      UIAction(
+        title: item.title,
+        image: item.systemImage.flatMap { UIImage(systemName: $0) }
+      ) { [weak self] _ in
+        self?.onSelect(["id": item.id])
+      }
+    }
+
+    button.menu = UIMenu(children: actions)
+    button.showsMenuAsPrimaryAction = true
+  }
+
+  @objc private func handleTap() {
+    guard items.isEmpty else { return }
+    onTap()
+  }
+
+  private func applySymbol() {
+    let config = UIImage.SymbolConfiguration(pointSize: symbolSize, weight: .regular)
+    button.setImage(UIImage(systemName: symbolName, withConfiguration: config), for: .normal)
+  }
+}

apps/mobile/modules/symbol-button/package.json

@@ -0,0 +1,11 @@
+{
+	"name": "@superset/symbol-button",
+	"version": "0.0.1",
+	"main": "src/index.tsx",
+	"private": true,
+	"peerDependencies": {
+		"expo": "*",
+		"react": "*",
+		"react-native": "*"
+	}
+}

apps/mobile/modules/symbol-button/src/index.tsx

@@ -0,0 +1,39 @@
+import { requireNativeView } from "expo";
+import type { StyleProp, ViewStyle } from "react-native";
+
+export interface SymbolMenuItem {
+	id: string;
+	title: string;
+	systemImage?: string;
+}
+
+interface SymbolButtonProps {
+	systemImage: string;
+	size?: number;
+	tint?: string;
+	accessibilityLabel?: string;
+	enabled?: boolean;
+	items?: SymbolMenuItem[];
+	onTap?: () => void;
+	onSelect?: (event: { nativeEvent: { id: string } }) => void;
+	style?: StyleProp<ViewStyle>;
+}
+
+const NativeSymbolButton = requireNativeView<SymbolButtonProps>("SymbolButton");
+
+export function SymbolButton({
+	onSelect,
+	onPress,
+	...props
+}: Omit<SymbolButtonProps, "onSelect" | "onTap"> & {
+	onSelect?: (id: string) => void;
+	onPress?: () => void;
+}) {
+	return (
+		<NativeSymbolButton
+			{...props}
+			onTap={onPress}
+			onSelect={(event) => onSelect?.(event.nativeEvent.id)}
+		/>
+	);
+}