Modularize the manager UI into a shared library

Everything both this manager and a second host would draw -- the module list and rows, the store with
its detail and install flow, the logs screen and reader, the hideable nav shell, the ambience header,
and the appearance and language sheets -- moves into a new manager-ui library under
org.matrix.vector.ui. The app keeps only what is its own and reaches the library through seam
interfaces (LogSource, StoreInstallHost, AppearanceSettings, AmbienceSettings, LocaleController,
FloatingNavSettings), so another manager can supply its own transport without forking the UI. The
manager's split string files move to manager-ui/res, and crowdin.yml and the sync workflow follow.

The live-log tail follows the reader's viewport rather than the loaded window, so scrolling up to read
history pauses it; and ModuleRow gains an optional reachStart slot, a badge left of the reach band and
off by default, for a host that wants a status on that line.

The Japanese and Ukrainian translations from #911 are adapted to this layout, since that sync was
raised against the old one.

Author: JingMatrix

.github/workflows/crowdin.yml

@@ -9,8 +9,13 @@ on:
       # CLI's are defined independently — notably on whether `*` may match nothing — and a
       # trigger that quietly never fires is the worse failure.
       - manager/src/main/res/values/strings.xml
-      - manager/src/main/res/values/strings_logs.xml
-      - manager/src/main/res/values/strings_store.xml
+      - manager-ui/src/main/res/values/strings_appearance.xml
+      - manager-ui/src/main/res/values/strings_language.xml
+      - manager-ui/src/main/res/values/strings_logs.xml
+      - manager-ui/src/main/res/values/strings_modules.xml
+      - manager-ui/src/main/res/values/strings_nav.xml
+      - manager-ui/src/main/res/values/strings_store.xml
+      - manager-ui/src/main/res/values/strings_trace.xml
       - daemon/src/main/res/values/strings.xml
 
 jobs:

crowdin.yml

@@ -32,12 +32,35 @@ files:
         'zh-CN': 'zh-rCN'
         'zh-HK': 'zh-rHK'
         'zh-TW': 'zh-rTW'
-  - source: /manager/src/main/res/values/strings_logs.xml
-    translation: /manager/src/main/res/values-%two_letters_code%/%original_file_name%
+  # The shared manager UI library (manager-ui) owns the strings once split across the manager app;
+  # they were lifted here when the UI was modularised so both the Vector manager and downstream
+  # consumers (LSPatch) render the same, already-translated components.
+  - source: /manager-ui/src/main/res/values/strings_appearance.xml
+    translation: /manager-ui/src/main/res/values-%two_letters_code%/%original_file_name%
     type: android
     languages_mapping: *resource_folders
-  - source: /manager/src/main/res/values/strings_store.xml
-    translation: /manager/src/main/res/values-%two_letters_code%/%original_file_name%
+  - source: /manager-ui/src/main/res/values/strings_language.xml
+    translation: /manager-ui/src/main/res/values-%two_letters_code%/%original_file_name%
+    type: android
+    languages_mapping: *resource_folders
+  - source: /manager-ui/src/main/res/values/strings_logs.xml
+    translation: /manager-ui/src/main/res/values-%two_letters_code%/%original_file_name%
+    type: android
+    languages_mapping: *resource_folders
+  - source: /manager-ui/src/main/res/values/strings_modules.xml
+    translation: /manager-ui/src/main/res/values-%two_letters_code%/%original_file_name%
+    type: android
+    languages_mapping: *resource_folders
+  - source: /manager-ui/src/main/res/values/strings_nav.xml
+    translation: /manager-ui/src/main/res/values-%two_letters_code%/%original_file_name%
+    type: android
+    languages_mapping: *resource_folders
+  - source: /manager-ui/src/main/res/values/strings_store.xml
+    translation: /manager-ui/src/main/res/values-%two_letters_code%/%original_file_name%
+    type: android
+    languages_mapping: *resource_folders
+  - source: /manager-ui/src/main/res/values/strings_trace.xml
+    translation: /manager-ui/src/main/res/values-%two_letters_code%/%original_file_name%
     type: android
     languages_mapping: *resource_folders
   - source: /daemon/src/main/res/values/strings.xml

daemon/src/main/res/values-ja/strings.xml

@@ -5,16 +5,16 @@
     <string name="module_is_not_activated_yet_main_user_detailed">%1$s はインストールされましたが､ 有効化されていません</string>
     <string name="module_is_not_activated_yet_multi_user_detailed">%1$s はユーザー %2$s にインストールされましたが､ 有効化されていません</string>
     <string name="xposed_module_updated_notification_title">モジュールが更新されました</string>
-    <string name="xposed_module_updated_notification_content">%s が更新されました。スコープ内のアプリを強制停止してから再起動してください</string>
+    <string name="xposed_module_updated_notification_content">%s が更新されました。適用範囲内のアプリを強制停止してから再起動してください</string>
     <string name="xposed_module_updated_notification_title_system">モジュールが更新されました。システムの再起動が必要です</string>
-    <string name="xposed_module_updated_notification_content_system">%s が更新されました。スコープにシステムフレームワークが含まれているため、変更を適用するには再起動が必要です</string>
+    <string name="xposed_module_updated_notification_content_system">%s が更新されました。適用範囲内にシステムフレームワークが含まれているため、変更を適用するには再起動が必要です</string>
     <string name="module_updated_channel_name">モジュールの更新完了通知</string>
     <string name="status_channel_name">Vector のステータス通知</string>
     <string name="vector_running_notification_title">Vector の読み込み完了通知</string>
     <string name="vector_running_notification_content">通知をタップしてマネージャーを開きます</string>
-    <string name="xposed_module_request_scope_title">スコープのリクエスト</string>
-    <string name="xposed_module_request_scope_content">ユーザー %2$s の %1$s が %3$s をそのスコープに追加するようリクエストしています。</string>
-    <string name="scope_channel_name">スコープのリクエスト</string>
+    <string name="xposed_module_request_scope_title">適用範囲のリクエスト</string>
+    <string name="xposed_module_request_scope_content">ユーザー %2$s の %1$s が %3$s をその適用範囲に追加するようリクエストしています。</string>
+    <string name="scope_channel_name">適用範囲のリクエスト</string>
     <string name="scope_approve">許可</string>
     <string name="scope_deny">拒否</string>
     <string name="never_ask_again">再度表示しない</string>

daemon/src/main/res/values-pl/strings.xml

@@ -10,7 +10,7 @@
     <string name="xposed_module_updated_notification_content_system">%s został zaktualizowany, ponieważ zakres zawiera systemowy framework, wymagany jest restart w celu zastosowania zmian</string>
     <string name="module_updated_channel_name">Aktualizacja modułu zakończona</string>
     <string name="status_channel_name">Stan Vector</string>
-    <string name="vector_running_notification_title">Vector załadowany</string>
+    <string name="vector_running_notification_title">Vector jest załadowany</string>
     <string name="vector_running_notification_content">Naciśnij powiadomienie, by włączyć menedżer</string>
     <string name="xposed_module_request_scope_title">Żądanie zakresu</string>
     <string name="xposed_module_request_scope_content">%1$s dla użytkownika %2$s żąda dodania %3$s do jego zakresu.</string>

manager-ui/build.gradle.kts

@@ -0,0 +1,36 @@
+// Shared manager UI, consumed by both Vector's manager app and LSPatch's manager (via the
+// composite-build substitution vector:manager-ui). Holds the reusable, backend-agnostic Compose:
+// the panel header, search field, ambience, theme seed, and the store HTML renderer.
+plugins {
+    alias(libs.plugins.agp.lib)
+    alias(libs.plugins.kotlin.compose)
+}
+
+kotlin {
+    compilerOptions {
+        optIn.addAll(
+            "androidx.compose.material3.ExperimentalMaterial3Api",
+            "androidx.compose.material3.ExperimentalMaterial3ExpressiveApi",
+            "androidx.compose.foundation.layout.ExperimentalLayoutApi",
+        )
+    }
+}
+
+android {
+    namespace = "org.matrix.vector.ui"
+    buildFeatures { compose = true }
+}
+
+dependencies {
+    implementation(libs.gson)
+    implementation(libs.androidx.core.ktx)
+    implementation(platform(libs.androidx.compose.bom))
+    implementation(libs.androidx.compose.ui)
+    implementation(libs.androidx.compose.ui.graphics)
+    implementation(libs.androidx.compose.material3)
+    implementation(libs.androidx.compose.material3.adaptive.navigation.suite)
+    implementation(libs.androidx.compose.material.icons.extended)
+    implementation(libs.androidx.lifecycle.viewmodel.compose)
+    implementation(libs.androidx.activity.compose)
+    implementation(libs.androidx.webkit)
+}

manager-ui/src/main/kotlin/org/matrix/vector/ui/ActionDrawer.kt

@@ -0,0 +1,162 @@
+package org.matrix.vector.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+
+/**
+ * The header at the top of a package action drawer: the package's icon, its label, its package
+ * name, and an optional slot for extra facts (a description, an API level).
+ *
+ * Mirrors the row it was opened from, so the reader can see which package the actions below act on.
+ * The icon is a slot rather than a bitmap so each host draws it however it already draws app icons.
+ */
+@Composable
+fun ActionDrawerHeader(
+    label: String,
+    packageName: String,
+    modifier: Modifier = Modifier,
+    icon: (@Composable () -> Unit)? = null,
+    extraContent: (@Composable ColumnScope.() -> Unit)? = null,
+) {
+    Row(
+        modifier = modifier.fillMaxWidth().padding(start = 24.dp, end = 24.dp, bottom = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        icon?.invoke()
+        Column(Modifier.weight(1f)) {
+            Text(
+                text = label,
+                style = MaterialTheme.typography.titleMedium,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Text(
+                text = packageName,
+                fontFamily = FontFamily.Monospace,
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+            extraContent?.invoke(this)
+        }
+    }
+}
+
+/**
+ * One full-width action inside a package action drawer: its glyph in a tinted disc, the action's
+ * title, and — when it has one — the line under it saying what the action does.
+ *
+ * The disc is what lets a destructive action look destructive: an error-red glyph on a bare row is
+ * easy to miss, the same glyph on a red disc is not. Once one row carries it they all have to, or
+ * the bare one reads as a different kind of thing sitting in the same list. The measurements keep a
+ * single column running down the whole drawer: 24dp of margin, a 40dp disc and 20dp of gap put
+ * every title where [ActionDrawerHeader] puts the package's name.
+ *
+ * [tint] colours a destructive or emphasised action; a title inherits it only when it is the error
+ * colour, so a merely emphasised row keeps a readable heading. [trailing] is for a row that carries
+ * state as well as an action — a switch, a badge. [onClick] is nullable because a row can be a
+ * statement rather than an action ("not in the store"), and a caller that needs a non-button role
+ * (a toggle announced as a switch) supplies its own behaviour through [modifier] and leaves this
+ * null.
+ */
+@Composable
+fun ActionDrawerItem(
+    icon: ImageVector,
+    title: String,
+    subtitle: String? = null,
+    modifier: Modifier = Modifier,
+    tint: Color? = null,
+    trailing: (@Composable () -> Unit)? = null,
+    onClick: (() -> Unit)? = null,
+) {
+    val colors = MaterialTheme.colorScheme
+    val accent = tint ?: colors.onSurfaceVariant
+    Row(
+        modifier =
+            Modifier.fillMaxWidth()
+                .then(if (onClick != null) Modifier.clickable(onClick = onClick) else Modifier)
+                .then(modifier)
+                .padding(horizontal = 24.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier =
+                Modifier.size(40.dp).clip(CircleShape).background(accent.copy(alpha = 0.12f)),
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(icon, contentDescription = null, tint = accent, modifier = Modifier.size(22.dp))
+        }
+        Spacer(Modifier.width(20.dp))
+        Column(Modifier.weight(1f)) {
+            Text(
+                text = title,
+                style = MaterialTheme.typography.bodyLarge,
+                color = if (tint == colors.error) colors.error else colors.onSurface,
+            )
+            if (subtitle != null) {
+                Text(
+                    text = subtitle,
+                    style = MaterialTheme.typography.bodySmall,
+                    color = colors.onSurfaceVariant,
+                )
+            }
+        }
+        if (trailing != null) {
+            Spacer(Modifier.width(12.dp))
+            trailing()
+        }
+    }
+}
+
+/**
+ * The centred icon-and-line a list panel shows when it has nothing to list — a still-loading set, a
+ * genuinely empty one, or a search that matched nothing. The same shape on every panel, so an empty
+ * screen always reads as an empty screen rather than as something broken.
+ */
+@Composable
+fun PanelEmptyState(icon: ImageVector, text: String, modifier: Modifier = Modifier) {
+    Box(modifier.fillMaxSize().padding(32.dp), contentAlignment = Alignment.Center) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Icon(
+                icon,
+                contentDescription = null,
+                modifier = Modifier.size(40.dp),
+                tint = MaterialTheme.colorScheme.outline,
+            )
+            Spacer(Modifier.height(12.dp))
+            Text(
+                text = text,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = TextAlign.Center,
+            )
+        }
+    }
+}

manager-ui/src/main/kotlin/org/matrix/vector/ui/ApiBadge.kt

@@ -0,0 +1,40 @@
+package org.matrix.vector.ui
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+/**
+ * `API 101` / `Xposed 93`, with the scale name small and quiet and the number carrying the colour.
+ *
+ * The scale name is context that rarely changes and repeats down every row; the number is the fact
+ * being checked, so it is the only part given weight and colour. A caller with no value to show
+ * passes `"?"` for [value] and `incompatible = true`, which keeps the badge the same shape while the
+ * missing number reads as missing rather than as a different kind of thing.
+ *
+ * Model-agnostic on purpose: Vector maps a module's declared API into ([label], [value]); LSPatch
+ * passes its own text. Both get one badge instead of two that drift apart.
+ */
+@Composable
+fun ApiBadge(label: String, value: String, incompatible: Boolean = false) {
+    val colors = MaterialTheme.colorScheme
+    Row(verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.spacedBy(3.dp)) {
+        Text(
+            text = label,
+            style = MaterialTheme.typography.labelSmall.copy(fontSize = 8.sp),
+            color = colors.onSurfaceVariant.copy(alpha = 0.7f),
+        )
+        Text(
+            text = value,
+            style = MaterialTheme.typography.labelMedium,
+            fontWeight = FontWeight.SemiBold,
+            color = if (incompatible) colors.error else colors.primary,
+        )
+    }
+}

manager-ui/src/main/kotlin/org/matrix/vector/ui/Clipboard.kt

@@ -0,0 +1,18 @@
+package org.matrix.vector.ui
+
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
+
+/**
+ * Puts text on the clipboard, or does nothing.
+ *
+ * Shared by the reusable screens — every one of them copies for the same reason, the text is on its
+ * way into a bug report, so they want the same silence when there is no clipboard service to hand.
+ * There may not be: a host may be running inside `com.android.shell`, and a failure to copy is not
+ * worth a crash on a screen someone opened *because* something had already gone wrong.
+ */
+fun copyToClipboard(context: Context, text: String) {
+    val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as? ClipboardManager
+    clipboard?.setPrimaryClip(ClipData.newPlainText(context.packageName, text))
+}

…ctor/manager/ui/components/ColorWheel.kt …otlin/org/matrix/vector/ui/ColorWheel.ktmanager/src/main/kotlin/org/matrix/vector/manager/ui/components/ColorWheel.kt renamed to manager-ui/src/main/kotlin/org/matrix/vector/ui/ColorWheel.kt manager/src/main/kotlin/org/matrix/vector/manager/ui/components/ColorWheel.kt renamed to manager-ui/src/main/kotlin/org/matrix/vector/ui/ColorWheel.kt

@@ -1,4 +1,4 @@
-package org.matrix.vector.manager.ui.components
+package org.matrix.vector.ui
 
 import android.graphics.Bitmap
 import androidx.compose.foundation.Canvas
@@ -31,7 +31,7 @@ import kotlin.math.hypot
 import kotlin.math.roundToInt
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
-import org.matrix.vector.manager.ui.theme.SeedScheme
+import org.matrix.vector.ui.theme.SeedScheme
 
 /** The chroma the rim of the wheel represents. Past this, almost nothing is in gamut anyway. */
 private const val MAX_CHROMA = 110f