ruby_everywhere 0.3.0 → 0.4.0

data/support/mobile/android/app/src/main/java/com/rubyeverywhere/shell/bridge/MenuComponent.kt

@@ -0,0 +1,361 @@
+package com.rubyeverywhere.shell.bridge
+
+import android.content.Context
+import android.graphics.drawable.Drawable
+import android.util.Log
+import android.util.TypedValue
+import android.view.LayoutInflater
+import android.view.MenuItem
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.appcompat.widget.Toolbar
+import androidx.core.content.ContextCompat
+import androidx.core.graphics.drawable.DrawableCompat
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.rubyeverywhere.shell.IconFont
+import com.rubyeverywhere.shell.R
+import dev.hotwire.core.bridge.BridgeComponent
+import dev.hotwire.core.bridge.BridgeDelegate
+import dev.hotwire.core.bridge.Message
+import dev.hotwire.navigation.destinations.HotwireDestination
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+/**
+ * Bridge component backing `everywhere--menu`: the native chrome the page
+ * declares with `data-everywhere-nav-*` / `data-everywhere-menu` (the
+ * everywhere_nav_button / everywhere_nav_menu / everywhere_menu Rails helpers).
+ *
+ * Two events, both replied to by echoing back the tapped item's id so the web
+ * half can `.click()` the element it mirrors — behavior stays defined once, in
+ * the page:
+ *
+ *   * `navItems` — install this screen's toolbar items (plain buttons, and
+ *     overflow menus for pull-downs). Native re-replies to the same message on
+ *     every tap, `{action: "tap", id}`, for as long as the page is up.
+ *   * `menu` — present an action sheet, replying once with
+ *     `{action: "select", id}` or `{action: "cancel", id: null}`.
+ *
+ * Both work on `delegate.destination` — the fragment this component instance
+ * belongs to — so items land on the right screen and go away with it, exactly
+ * like the framework's own per-page bridge components.
+ *
+ * ### Where this differs from iOS, and why
+ *
+ * **There is no left side.** iOS splits nav items into
+ * `leftBarButtonItems`/`rightBarButtonItems`; an Android toolbar's left slot is
+ * the Up button, which belongs to the navigator. `side: "left"` is honoured as
+ * ordering — those items sort first — rather than dropped, which keeps the page
+ * author's intent ("this one comes before that one") without fighting the
+ * platform for a slot it doesn't have.
+ *
+ * **Pull-downs are action sheets.** iOS attaches a `UIMenu` to the bar button.
+ * The Android equivalent that can render Material icons next to each row (a
+ * `PopupMenu` hides icons by default) is the bottom sheet the `menu` event
+ * already uses, so overflow menus and in-content action sheets share one
+ * presentation and one row layout. Upstream's own demo MenuComponent makes the
+ * same choice.
+ *
+ * `source` — the trigger's rect, which iOS needs to anchor an iPad popover — is
+ * decoded and ignored: a bottom sheet has nothing to anchor to.
+ */
+class MenuComponent(
+    name: String,
+    private val delegate: BridgeDelegate<HotwireDestination>
+) : BridgeComponent<HotwireDestination>(name, delegate) {
+
+    private val toolbar: Toolbar?
+        get() = delegate.destination.toolbarForNavigation()
+
+    private val context: Context?
+        get() = delegate.destination.fragment.context
+
+    /** Toolbar item id → the page item it mirrors, rebuilt on every `navItems`. */
+    private val navItemsById = mutableMapOf<Int, NavItem>()
+
+    override fun onReceive(message: Message) {
+        when (message.event) {
+            "navItems" -> handleNavItems(message)
+            "menu" -> handleMenu(message)
+            else -> Log.w(TAG, "Unknown event for message: $message")
+        }
+    }
+
+    // MARK: Nav bar items
+
+    private fun handleNavItems(message: Message) {
+        val toolbar = toolbar ?: return
+        val data = message.data<NavItemsData>() ?: return
+
+        // The page owns this screen's items wholesale: a Turbo visit that
+        // renders fewer buttons must not leave the previous page's behind.
+        toolbar.menu.removeGroup(GROUP_ID)
+        navItemsById.clear()
+
+        // "left" first so the page's authored order survives, even though every
+        // item ends up in the toolbar's right-hand cluster.
+        val ordered = data.items.sortedBy { if (it.side == "left") 0 else 1 }
+
+        ordered.forEachIndexed { index, item ->
+            val itemId = ITEM_ID_BASE + index
+            navItemsById[itemId] = item
+
+            val menuItem = toolbar.menu.add(GROUP_ID, itemId, index, item.title)
+            // `kind`, not the child count: a pull-down the page rendered empty
+            // still belongs in the bar as the ⋯ button it was authored as.
+            val drawable = icon(item.image, isOverflow = item.kind == "menu")
+
+            if (drawable != null) {
+                menuItem.icon = drawable
+                menuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM)
+            } else {
+                menuItem.setShowAsAction(
+                    MenuItem.SHOW_AS_ACTION_IF_ROOM or MenuItem.SHOW_AS_ACTION_WITH_TEXT
+                )
+            }
+            menuItem.isEnabled = item.disabled != true
+        }
+
+        // Set unconditionally, not only when we added items: the listener has to
+        // be ours for taps to reach the web, and re-setting it is how a second
+        // navItems message rebinds after a page swap.
+        toolbar.setOnMenuItemClickListener { tapped -> onNavItemTapped(tapped) }
+    }
+
+    private fun onNavItemTapped(tapped: MenuItem): Boolean {
+        val item = navItemsById[tapped.itemId] ?: return false
+        val children = item.children
+
+        if (children.isNullOrEmpty()) {
+            // A plain button: echo its id back so the web half clicks the element.
+            replyTo("navItems", NavReply(action = "tap", id = item.id))
+            return true
+        }
+
+        // A pull-down / overflow menu: each child echoes its own id.
+        showSheet(
+            title = item.title.takeIf { it.isNotEmpty() },
+            message = null,
+            items = children,
+            onSelect = { id -> replyTo("navItems", NavReply(action = "tap", id = id)) },
+            // Dismissing a pull-down is not an answer on iOS either — the web
+            // half's callback simply stays live for the next tap.
+            onCancel = null
+        )
+        return true
+    }
+
+    // MARK: Action sheet
+
+    private fun handleMenu(message: Message) {
+        val data = message.data<MenuData>() ?: return
+
+        showSheet(
+            title = data.title,
+            message = data.message,
+            items = data.items,
+            onSelect = { id -> replyTo("menu", MenuReply(action = "select", id = id)) },
+            onCancel = { replyTo("menu", MenuReply(action = "cancel", id = null)) }
+        )
+    }
+
+    /**
+     * One sheet for both callers. `settled` is what makes the reply one-shot:
+     * choosing a row dismisses the dialog, and the dismiss listener must not
+     * then send a cancel on top of the selection.
+     */
+    private fun showSheet(
+        title: String?,
+        message: String?,
+        items: List<MenuItemData>,
+        onSelect: (String) -> Unit,
+        onCancel: (() -> Unit)?
+    ) {
+        val context = context ?: return
+        val inflater = LayoutInflater.from(context)
+        val root = inflater.inflate(R.layout.bridge_menu_sheet, null) as ViewGroup
+        val dialog = BottomSheetDialog(context)
+        var settled = false
+
+        val titleView = root.findViewById<TextView>(R.id.bridge_menu_title)
+        val messageView = root.findViewById<TextView>(R.id.bridge_menu_message)
+        titleView.text = title.orEmpty()
+        titleView.visibility = if (title.isNullOrEmpty()) View.GONE else View.VISIBLE
+        messageView.text = message.orEmpty()
+        messageView.visibility = if (message.isNullOrEmpty()) View.GONE else View.VISIBLE
+        root.findViewById<View>(R.id.bridge_menu_header).visibility =
+            if (title.isNullOrEmpty() && message.isNullOrEmpty()) View.GONE else View.VISIBLE
+
+        val list = root.findViewById<LinearLayout>(R.id.bridge_menu_items)
+        for (item in items) {
+            val row = inflater.inflate(R.layout.bridge_menu_sheet_item, list, false)
+            val label = row.findViewById<TextView>(R.id.bridge_menu_item_title)
+            val iconView = row.findViewById<ImageView>(R.id.bridge_menu_item_icon)
+
+            label.text = item.title
+            if (item.style == "destructive") {
+                label.setTextColor(themeColor(row.context, ERROR_ATTR, DESTRUCTIVE_FALLBACK))
+            }
+
+            val drawable = icon(item.image, isOverflow = false)
+            if (drawable != null) {
+                iconView.setImageDrawable(drawable)
+                iconView.visibility = View.VISIBLE
+            } else {
+                // Kept in the layout (INVISIBLE, not GONE) so rows with and
+                // without icons still line their titles up.
+                iconView.visibility = if (items.any { it.image != null }) View.INVISIBLE else View.GONE
+            }
+
+            if (item.disabled == true) {
+                row.isEnabled = false
+                row.alpha = DISABLED_ALPHA
+            } else {
+                row.setOnClickListener {
+                    if (settled) return@setOnClickListener
+                    settled = true
+                    dialog.dismiss()
+                    onSelect(item.id)
+                }
+            }
+            list.addView(row)
+        }
+
+        root.findViewById<View>(R.id.bridge_menu_cancel).setOnClickListener { dialog.cancel() }
+
+        // Covers the Cancel row, the back button and a swipe-away alike — all of
+        // them are the same "no" iOS reports from its cancel action.
+        dialog.setOnDismissListener {
+            if (settled) return@setOnDismissListener
+            settled = true
+            onCancel?.invoke()
+        }
+
+        dialog.setContentView(root)
+        dialog.show()
+    }
+
+    // MARK: Icons
+
+    /**
+     * Page-declared Material icon names, drawn by the shell's bundled icon font.
+     * `IconFont` is the only icon path in the shell — tabs resolve names the
+     * same way, and it already understands the `favorite.fill` spelling that
+     * mirrors `icons.ios: heart.fill` — so a name that works on a tab works
+     * here, and the FILL rule lives in exactly one place.
+     *
+     * One translation happens first: bridge.js defaults an overflow menu's icon
+     * to the literal SF Symbol `ellipsis.circle` when the page names no Android
+     * icon. Passed through, that resolves to nothing and IconFont falls back to
+     * a plain circle, so it is mapped to the Material name meaning the same thing.
+     */
+    private fun icon(name: String?, isOverflow: Boolean): Drawable? {
+        val context = context ?: return null
+        val requested = when {
+            !name.isNullOrEmpty() && name != IOS_OVERFLOW_ICON -> name
+            isOverflow -> ANDROID_OVERFLOW_ICON
+            else -> return null
+        }
+
+        val size = TypedValue.applyDimension(
+            TypedValue.COMPLEX_UNIT_DIP, ICON_DP, context.resources.displayMetrics
+        ).toInt()
+
+        return try {
+            // IconFont draws opaque white and leaves colour to the host, so
+            // tinting here is required, not decorative: an untinted icon is an
+            // invisible one in light mode.
+            DrawableCompat.wrap(IconFont.drawable(context, requested, size)).mutate().also {
+                DrawableCompat.setTint(it, themeColor(context, CONTROL_ATTR, ICON_FALLBACK))
+            }
+        } catch (e: Exception) {
+            Log.w(TAG, "could not render icon '$requested'", e)
+            null
+        }
+    }
+
+    private fun themeColor(context: Context, attr: Int, fallback: Int): Int {
+        val value = TypedValue()
+        if (!context.theme.resolveAttribute(attr, value, true)) return fallback
+        return if (value.resourceId != 0) ContextCompat.getColor(context, value.resourceId) else value.data
+    }
+
+    // MARK: Message data
+
+    @Serializable
+    data class NavItemsData(
+        @SerialName("items") val items: List<NavItem>
+    )
+
+    @Serializable
+    data class NavItem(
+        @SerialName("id") val id: String,
+        @SerialName("kind") val kind: String? = null,
+        @SerialName("title") val title: String = "",
+        @SerialName("image") val image: String? = null,
+        @SerialName("side") val side: String? = null,
+        @SerialName("style") val style: String? = null,
+        @SerialName("disabled") val disabled: Boolean? = null,
+        @SerialName("children") val children: List<MenuItemData>? = null
+    )
+
+    @Serializable
+    data class MenuData(
+        @SerialName("title") val title: String? = null,
+        @SerialName("message") val message: String? = null,
+        @SerialName("items") val items: List<MenuItemData> = emptyList(),
+        @SerialName("source") val source: Source? = null
+    )
+
+    @Serializable
+    data class MenuItemData(
+        @SerialName("id") val id: String,
+        @SerialName("title") val title: String = "",
+        @SerialName("image") val image: String? = null,
+        @SerialName("style") val style: String? = null,
+        @SerialName("disabled") val disabled: Boolean? = null
+    )
+
+    /** The trigger's rect in page coordinates. Decoded for parity; unused here. */
+    @Serializable
+    data class Source(
+        @SerialName("x") val x: Double = 0.0,
+        @SerialName("y") val y: Double = 0.0,
+        @SerialName("width") val width: Double = 0.0,
+        @SerialName("height") val height: Double = 0.0
+    )
+
+    @Serializable
+    data class NavReply(
+        @SerialName("action") val action: String,
+        @SerialName("id") val id: String
+    )
+
+    @Serializable
+    data class MenuReply(
+        @SerialName("action") val action: String,
+        @SerialName("id") val id: String? = null
+    )
+
+    private companion object {
+        const val TAG = "EverywhereMenu"
+
+        /** Our own group, so removeGroup() never touches the fragment's own menu. */
+        const val GROUP_ID = 0x45564D55 // "EVMU"
+        const val ITEM_ID_BASE = 0x45560000
+
+        const val ICON_DP = 24f
+        const val DISABLED_ALPHA = 0.38f
+        const val IOS_OVERFLOW_ICON = "ellipsis.circle"
+        const val ANDROID_OVERFLOW_ICON = "more_vert"
+
+        val CONTROL_ATTR = androidx.appcompat.R.attr.colorControlNormal
+        val ERROR_ATTR = com.google.android.material.R.attr.colorError
+
+        const val ICON_FALLBACK = 0xFF444444.toInt()
+        const val DESTRUCTIVE_FALLBACK = 0xFFB3261E.toInt()
+    }
+}

data/support/mobile/android/app/src/main/java/com/rubyeverywhere/shell/bridge/NotificationComponent.kt

@@ -0,0 +1,151 @@
+package com.rubyeverywhere.shell.bridge
+
+import android.app.NotificationChannel
+import android.app.NotificationManager
+import android.content.Context
+import android.os.Build
+import android.util.Log
+import androidx.core.app.NotificationCompat
+import androidx.core.app.NotificationManagerCompat
+import dev.hotwire.core.bridge.BridgeComponent
+import dev.hotwire.core.bridge.BridgeDelegate
+import dev.hotwire.core.bridge.Message
+import dev.hotwire.navigation.destinations.HotwireDestination
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+import java.util.concurrent.atomic.AtomicInteger
+
+/**
+ * Bridge component backing the `everywhere--notification` web component.
+ * Handles `notify` events by requesting permission (if needed) and delivering an
+ * immediate local notification, then replies `{delivered: Boolean}` — the same
+ * event, the same payload keys and the same reply shape as iOS's
+ * NotificationComponent.swift.
+ *
+ * Two Android facts shape the implementation and neither changes the wire:
+ *
+ *  * A notification needs a **channel** on API 26+, so the shell owns one
+ *    ("everywhere_default"), created lazily and idempotently.
+ *  * `POST_NOTIFICATIONS` became a **runtime** permission on API 33. Below that
+ *    there is nothing to ask for and `areNotificationsEnabled()` is the whole
+ *    answer. iOS asks inside notify() rather than making the page ask first, so
+ *    this does too.
+ */
+class NotificationComponent(
+    name: String,
+    private val delegate: BridgeDelegate<HotwireDestination>
+) : BridgeComponent<HotwireDestination>(name, delegate) {
+
+    private val context: Context?
+        get() = delegate.destination.fragment.context
+
+    override fun onReceive(message: Message) {
+        when (message.event) {
+            "notify" -> handleNotify(message)
+            else -> Log.w(TAG, "Unknown event for message: $message")
+        }
+    }
+
+    private fun handleNotify(message: Message) {
+        // A payload that won't decode is the only refusal iOS makes here, and
+        // it makes the same one — an empty title still posts.
+        val data = message.data<MessageData>() ?: return reply(message, delivered = false)
+        val context = context ?: return reply(message, delivered = false)
+
+        // Already allowed (or on an API where there is nothing to allow):
+        // deliver without a detour through the permission machinery.
+        if (NotificationManagerCompat.from(context).areNotificationsEnabled()) {
+            return reply(message, delivered = deliver(context, data))
+        }
+
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) {
+            // Notifications are off in system settings. There is no prompt for
+            // that — only a settings trip the page must offer itself
+            // (Everywhere.permissions.openSettings()).
+            return reply(message, delivered = false)
+        }
+
+        RuntimePermissions.request(delegate.destination.fragment, POST_NOTIFICATIONS) { granted ->
+            reply(message, delivered = granted && deliver(context, data))
+        }
+    }
+
+    private fun deliver(context: Context, data: MessageData): Boolean = try {
+        ensureChannel(context)
+
+        val notification = NotificationCompat.Builder(context, CHANNEL_ID)
+            .setSmallIcon(smallIcon(context))
+            .setContentTitle(data.title)
+            .apply { data.body?.takeIf { it.isNotEmpty() }?.let { setContentText(it) } }
+            .setDefaults(NotificationCompat.DEFAULT_SOUND)
+            .setPriority(NotificationCompat.PRIORITY_DEFAULT)
+            .setAutoCancel(true)
+            .build()
+
+        // notify() throws SecurityException without the permission — which the
+        // check above should have caught, but a permission revoked between the
+        // check and here must fail as `delivered: false`, not as a crash.
+        NotificationManagerCompat.from(context).notify(nextId.incrementAndGet(), notification)
+        true
+    } catch (e: SecurityException) {
+        Log.w(TAG, "notify: not permitted", e)
+        false
+    } catch (e: Exception) {
+        Log.w(TAG, "notify: failed", e)
+        false
+    }
+
+    private fun ensureChannel(context: Context) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) return
+
+        val manager = context.getSystemService(NotificationManager::class.java) ?: return
+        if (manager.getNotificationChannel(CHANNEL_ID) != null) return
+
+        manager.createNotificationChannel(
+            NotificationChannel(CHANNEL_ID, CHANNEL_NAME, NotificationManager.IMPORTANCE_DEFAULT)
+        )
+    }
+
+    /**
+     * A notification's small icon has to be a flat white silhouette — Android
+     * masks it — so the launcher icon reads as a blob. An app that ships a
+     * proper one as `res/drawable/ic_notification` gets it picked up here
+     * without any wiring; everyone else gets the launcher icon, which is at
+     * least recognisable.
+     */
+    private fun smallIcon(context: Context): Int {
+        val named = context.resources.getIdentifier("ic_notification", "drawable", context.packageName)
+        return if (named != 0) named else context.applicationInfo.icon
+    }
+
+    /**
+     * Replies on the exact message that asked. `replyTo(event)` targets only the
+     * last-received message for an event, which is wrong the moment two pages
+     * (or two calls) have notify() in flight — the same reasoning as iOS's
+     * `message.replacing(data:)` replies.
+     */
+    private fun reply(message: Message, delivered: Boolean) {
+        replyWith(message.replacing(event = message.event, data = NotifyReply(delivered = delivered)))
+    }
+
+    @Serializable
+    data class MessageData(
+        @SerialName("title") val title: String,
+        @SerialName("body") val body: String? = null
+    )
+
+    @Serializable
+    data class NotifyReply(
+        @SerialName("delivered") val delivered: Boolean
+    )
+
+    private companion object {
+        const val TAG = "EverywhereNotification"
+        const val CHANNEL_ID = "everywhere_default"
+        const val CHANNEL_NAME = "Notifications"
+        const val POST_NOTIFICATIONS = "android.permission.POST_NOTIFICATIONS"
+
+        /** Distinct ids so a second notify() doesn't silently replace the first. */
+        val nextId = AtomicInteger(1_000)
+    }
+}