feat(scripts): add a quick way to refresh the README graphic

README.md

@@ -12,7 +12,7 @@ Unofficial Android app for read-only access to [lobste.rs](https://lobste.rs), b
 
 <img src="https://github.com/msfjarvis/compose-lobsters/blob/main/.github/readme_feature.webp"
      alt="Side by side screenshots of the app's main page in dark and light UI modes"
-     height="550" />
+     height="540" />
 
 ## Dependency Diagram
 

common/src/main/kotlin/dev/msfjarvis/claw/common/posts/LobstersCard.kt

@@ -46,6 +46,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.font.FontWeight
@@ -173,7 +174,7 @@ private fun SaveButton(
         imageVector = if (saved) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
         tint = MaterialTheme.colorScheme.secondary,
         contentDescription = if (saved) "Remove from saved posts" else "Add to saved posts",
-        modifier = Modifier.align(Alignment.Center),
+        modifier = Modifier.align(Alignment.Center).testTag("save_button"),
       )
     }
   }

maestro/play_store_flow.yml

@@ -2,17 +2,15 @@ appId: dev.msfjarvis.claw.android
 ---
 - launchApp
 - tapOn:
-    text: "Add to saved posts"
+    id: "save_button"
     index: 0
 - tapOn:
-    text: "Add to saved posts"
+    id: "save_button"
     index: 1
 - takeScreenshot: "HottestPosts"
 - tapOn: "Saved"
 - takeScreenshot: "SavedPosts"
 - tapOn: "Hottest"
-- tapOn:
-    text: "Open comments"
-    index: 0
+- tapOn: "Open comments"
 - waitForAnimationToEnd
 - takeScreenshot: "CommentsPage"

scripts/refresh-feature-graphic.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+# Get the absolute path to the script file
+SCRIPT_DIR="$(cd "$(dirname "$(readlink -f "${BASH_SOURCE[0]}")")" && pwd)"
+SCREENSHOT_DIR="${SCRIPT_DIR}"/../screenshots
+
+# Run the Maestro flow to generate the screenshots
+source "${SCRIPT_DIR}"/run-maestro-flows.sh
+
+# Use imagemagick to stitch the screenshots horizontally
+nix-shell -p imagemagick --run "convert +append ${SCREENSHOT_DIR}/HottestPosts.png ${SCREENSHOT_DIR}/CommentsPage.png ${SCREENSHOT_DIR}/SavedPosts.png ${SCRIPT_DIR}/../.github/readme_feature.png"
+
+# Convert the resulting PNG to WebP
+nix-shell -p libwebp --run "cwebp .github/readme_feature.png -o .github/readme_feature.webp"
+
+# Remove the now-useless PNG
+rm ".github/readme_feature.png"