Improve JanusLoader and match colors everywhere

Author: menny

AGENTS.md

@@ -53,6 +53,6 @@
 
 # Documentation
 - **Design & Branding**: [docs/DESIGN.md](docs/DESIGN.md) - UI/UX strategy, branding, typography, and themes.
-- **Initial Design**: [docs/INITIAL-DESIGN.md](docs/INITIAL-DESIGN.md) - Technical design document and architecture.
+- **Initial Design**: [docs/INITIAL-DESIGN.md](docs/INITIAL-DESIGN.md) - Original design manifest.
 - **Translation Flow**: [docs/TRANSLATION_FLOW.md](docs/TRANSLATION_FLOW.md) - Technical flow of translation features.
 - **F-Droid Submission**: [docs/FDROID_SUBMISSION.md](docs/FDROID_SUBMISSION.md) - Guide for submitting to F-Droid.

app/src/main/java/com/anysoftkeyboard/janus/app/ui/components/JanusLoader.kt

@@ -11,24 +11,23 @@ import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.unit.dp
 import androidx.core.graphics.PathParser
 import com.anysoftkeyboard.janus.app.R
 
 // The path data from docs/loader_path.svg
 private const val LOADER_PATH_DATA =
     "M 218.00,126.00 C 218.00,126.00 231.33,130.00 231.33,130.00 231.33,130.00 243.33,138.67 243.33,138.67 243.33,138.67 251.33,148.00 251.33,148.00 251.33,148.00 254.67,161.33 254.67,161.33 254.67,161.33 253.33,178.67 253.33,178.67 253.33,178.67 252.00,192.00 252.00,192.00 252.00,192.00 247.33,206.00 247.33,206.00 247.33,206.00 243.33,217.33 243.33,217.33 243.33,217.33 239.33,226.67 239.33,226.67 239.33,226.67 234.67,235.33 234.67,235.33 234.67,235.33 225.33,246.67 225.33,246.67 225.33,246.67 204.00,274.00 204.00,274.00 204.00,274.00 197.33,280.00 197.33,280.00 197.33,280.00 187.33,286.00 187.33,286.00 187.33,286.00 174.67,290.67 174.67,290.67 174.67,290.67 160.67,291.33 160.67,291.33 160.67,291.33 148.00,288.67 148.00,288.67 148.00,288.67 137.33,280.00 137.33,280.00 137.33,280.00 128.67,269.33 128.67,269.33 128.67,269.33 124.00,255.33 124.00,255.33 124.00,255.33 124.00,240.67 124.00,240.67 124.00,240.67 129.33,230.67 129.33,230.67 129.33,230.67 140.00,223.33 140.00,223.33 140.00,223.33 151.33,216.67 151.33,216.67 151.33,216.67 164.00,211.33 164.00,211.33 164.00,211.33 176.67,206.00 176.67,206.00 176.67,206.00 190.00,203.33 190.00,203.33 190.00,203.33 203.33,200.67 203.33,200.67 203.33,200.67 216.00,199.33 216.00,199.33 216.00,199.33 231.33,200.00 231.33,200.00 231.33,200.00 265.33,207.33 265.33,207.33 265.33,207.33 276.67,212.00 276.67,212.00 276.67,212.00 286.67,218.00 286.67,218.00 286.67,218.00 296.00,226.67 296.00,226.67 296.00,226.67 302.67,235.33 302.67,235.33 302.67,235.33 306.67,246.67 306.67,246.67 306.67,246.67 305.33,262.00 305.33,262.00 305.33,262.00 300.00,272.00 300.00,272.00 300.00,272.00 291.33,284.67 291.33,284.67 291.33,284.67 280.67,288.00 280.67,288.00 280.67,288.00 266.00,290.00 266.00,290.00 266.00,290.00 252.67,290.00 252.67,290.00 252.67,290.00 238.67,284.00 238.67,284.00 238.67,284.00 230.00,274.67 230.00,274.67 230.00,274.67 223.33,267.33 223.33,267.33 223.33,267.33 211.33,255.33 211.33,255.33 211.33,255.33 204.67,246.67 204.67,246.67 204.67,246.67 198.00,235.33 198.00,235.33 198.00,235.33 190.00,220.00 190.00,220.00 190.00,220.00 178.00,186.00 178.00,186.00 178.00,186.00 177.33,172.67 177.33,172.67 177.33,172.67 178.00,158.67 178.00,158.67 178.00,158.67 180.67,146.00 180.67,146.00 180.67,146.00 188.67,138.00 188.67,138.00 188.67,138.00 202.00,130.00 202.00,130.00"
 
-// The Gold Color requested
-private val GoldColor = Color(0xFFFFD700)
+private const val viewPortSize = 432f
+private const val dotRadiusFactor = 0.03f
 
 private val NormalizedPathPoints: List<Offset> by lazy {
   val path = PathParser.createPathFromPathData(LOADER_PATH_DATA)
@@ -41,15 +40,21 @@ private val NormalizedPathPoints: List<Offset> by lazy {
   for (i in 0 until pointsCount) {
     val distance = (i.toFloat() / pointsCount) * length
     pathMeasure.getPosTan(distance, pos, tan)
-    // Normalize by viewport size 432x432
-    points.add(Offset(pos[0] / 432f, pos[1] / 432f))
+    // Normalize by viewport size
+    points.add(Offset(pos[0] / viewPortSize, pos[1] / viewPortSize))
   }
   points
 }
 
 @Composable
-fun JanusLoader(modifier: Modifier = Modifier, durationMillis: Int = 1000) {
-  // 1. Define the Animation
+fun JanusLoader(
+    modifier: Modifier = Modifier,
+    durationMillis: Int = 2000,
+    tint: Color = MaterialTheme.colorScheme.primary,
+    dotColor: Color = MaterialTheme.colorScheme.onPrimary,
+    dotColorFill: Color = MaterialTheme.colorScheme.secondary
+) {
+  // Define the Animation
   val infiniteTransition = rememberInfiniteTransition(label = "JanusLoaderAnimation")
   val progress by
       infiniteTransition.animateFloat(
@@ -61,29 +66,56 @@ fun JanusLoader(modifier: Modifier = Modifier, durationMillis: Int = 1000) {
                   repeatMode = RepeatMode.Restart),
           label = "Progress")
 
-  // 2. Density for converting dp to px
-  val density = LocalDensity.current
-  val dotRadiusPx = with(density) { 4.dp.toPx() }
-
   Box(modifier = modifier) {
     // Background Image
     Image(
         painter = painterResource(id = R.mipmap.ic_launcher_foreground),
         contentDescription = null,
         modifier = Modifier.fillMaxSize(),
-        contentScale = ContentScale.Fit)
-
-    // 3. Draw Content
+        contentScale = ContentScale.Fit,
+        colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(tint))
+    // Traveling dots
     Canvas(modifier = Modifier.fillMaxSize()) {
       val points = NormalizedPathPoints
-      val index = (progress * (points.size - 1)).toInt().coerceIn(0, points.size - 1)
-      val normalizedPoint = points[index]
+      fun drawTravelingDot(index: Int, dotRadiusPx: Float) {
+        val normalizedPoint = points[index]
+        val dotPosition =
+            Offset(x = normalizedPoint.x * size.width, y = normalizedPoint.y * size.height)
+        drawCircle(color = dotColor, radius = dotRadiusPx, center = dotPosition)
+        drawCircle(color = dotColorFill, radius = dotRadiusPx - 2, center = dotPosition)
+      }
 
-      val dotPosition =
-          Offset(x = normalizedPoint.x * size.width, y = normalizedPoint.y * size.height)
+      val baseDotRadiusPx = size.width * dotRadiusFactor
+      val pointsCount = points.size
 
-      // Draw the Traveling Dot
-      drawCircle(color = GoldColor, radius = dotRadiusPx, center = dotPosition)
+      val dots =
+          List(4) { level ->
+            TravelingDot(
+                pointsCount = pointsCount,
+                durationMillis = durationMillis,
+                baseDotRadiusPx = baseDotRadiusPx,
+                delayLevel = level,
+                drawTravelingDot = ::drawTravelingDot)
+          }
+
+      dots.forEach { it.draw(progress) }
     }
   }
 }
+
+private class TravelingDot(
+    private val pointsCount: Int,
+    private val durationMillis: Int,
+    private val baseDotRadiusPx: Float,
+    private val delayLevel: Int,
+    private val drawTravelingDot: (Int, Float) -> Unit
+) {
+  private val delay = delayLevel * 70f
+  private val radius = baseDotRadiusPx / (1 + delayLevel)
+
+  fun draw(progress: Float) {
+    val delayedProgress = (progress - (delay / durationMillis)).let { if (it < 0) it + 1f else it }
+    val index = (delayedProgress * (pointsCount - 1)).toInt().coerceIn(0, pointsCount - 1)
+    drawTravelingDot(index, radius)
+  }
+}

app/src/main/java/com/anysoftkeyboard/janus/app/ui/items/SearchResultItem.kt

@@ -79,9 +79,6 @@ fun SearchResultItem(
 
       // Content area: loading, error, available languages, or snippet
       when {
-        isLoading -> {
-          JanusLoader(modifier = Modifier.size(24.dp))
-        }
         errorMessage != null -> {
           ErrorContent(errorMessage)
         }
@@ -97,6 +94,17 @@ fun SearchResultItem(
       }
     }
   }
+
+  if (isLoading) {
+    Spacer(modifier = Modifier.height(4.dp))
+    Row(verticalAlignment = Alignment.CenterVertically) {
+      JanusLoader(modifier = Modifier.size(48.dp))
+      Text(
+          text = stringResource(R.string.loading_translation_for_item, result.title),
+          style = MaterialTheme.typography.bodySmall,
+          color = MaterialTheme.colorScheme.onSurfaceVariant)
+    }
+  }
 }
 
 /** Displays error state within the search result item. */

app/src/main/java/com/anysoftkeyboard/janus/app/ui/states/EmptyState.kt

@@ -40,7 +40,7 @@ import com.anysoftkeyboard.janus.app.viewmodels.TranslateViewState
 private fun EmptyStateMessage(
     title: String,
     message: String,
-    iconTint: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    iconTint: Color = MaterialTheme.colorScheme.primary,
     iconContent: @Composable () -> Unit
 ) {
   Column(
@@ -55,7 +55,7 @@ private fun EmptyStateMessage(
           Text(
               text = message,
               style = MaterialTheme.typography.bodyMedium,
-              color = MaterialTheme.colorScheme.onSurfaceVariant)
+              color = MaterialTheme.colorScheme.secondary)
         }
       }
 }
@@ -64,7 +64,7 @@ private fun EmptyStateMessage(
 private fun EmptyStateMessageWithPainter(
     title: String,
     message: String,
-    iconTint: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    iconTint: Color = MaterialTheme.colorScheme.primary,
     painter: Painter
 ) {
   EmptyStateMessage(title, message, iconTint) {

app/src/main/java/com/anysoftkeyboard/janus/app/ui/states/SearchResultsView.kt

@@ -23,6 +23,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.anysoftkeyboard.janus.app.R
@@ -81,11 +82,11 @@ fun SearchResultsView(
 
   LazyColumn {
     item {
-      androidx.compose.foundation.layout.Row(
+      Row(
           modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 8.dp),
           verticalAlignment = Alignment.CenterVertically) {
             Icon(
-                painter = androidx.compose.ui.res.painterResource(R.mipmap.ic_launcher_foreground),
+                painter = painterResource(R.mipmap.ic_launcher_foreground),
                 contentDescription = null,
                 modifier = Modifier.size(32.dp),
                 tint = MaterialTheme.colorScheme.primary)

app/src/main/java/com/anysoftkeyboard/janus/app/ui/theme/Color.kt

@@ -8,6 +8,8 @@ val Charcoal = Color(0xFF242426)
 val IlluminatedGold = Color(0xFFFFD54F)
 val DarkTextOnGold = Color(0xFF1C1C1E)
 val OffWhiteText = Color(0xFFE6E1E5)
+val Patina = Color(0xFF85D3CB) // Pale Aqua-Grey (Glowing Oxidation)
+val DarkTextOnPatina = Color(0xFF003734)
 
 // Light Theme Colors
 val WarmAlabaster = Color(0xFFF9F6F2)
@@ -16,3 +18,4 @@ val AntiqueBronze = Color(0xFF785A00)
 val WhiteTextOnBronze = Color(0xFFFFFFFF)
 val DeepInk = Color(0xFF1C1C1E)
 val BeigeTan = Color(0xFFE8E0D5)
+val Verdigris = Color(0xFF2E6B64) // Deep Muted Teal (Oxidized Bronze)

app/src/main/java/com/anysoftkeyboard/janus/app/ui/theme/JanusTheme.kt

@@ -22,7 +22,8 @@ private val DarkColorScheme =
         background = DeepSlate,
         surface = Charcoal,
         onSurface = OffWhiteText,
-    )
+        secondary = Patina,
+        onSecondary = DarkTextOnPatina)
 
 private val LightColorScheme =
     lightColorScheme(
@@ -32,7 +33,8 @@ private val LightColorScheme =
         surface = PureWhite,
         onSurface = DeepInk,
         secondaryContainer = BeigeTan,
-    )
+        secondary = Verdigris,
+        onSecondary = PureWhite)
 
 @Composable
 fun JanusTheme(

app/src/main/res/values/strings.xml

@@ -69,6 +69,7 @@
     <string name="error_unknown">Unknown error occurred</string>
     <string name="no_translations_available">No translations available</string>
     <string name="available_in_languages">Available in: %1$s</string>
+    <string name="loading_translation_for_item">Fetching translation for %1$s...</string>
 
     <!-- Repository errors -->
     <string name="error_page_not_found">Page not found</string>