Skip to content

Implementation of HomeScreen Design #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gregor-Guerrier wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Implementation of HomeScreen Design #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
64b661d
Created Basic Implementation of Home Screen
Mar 18, 2026
a978fa8
Merge branch 'refs/heads/main' into gregor/homescreen
Gregor-Guerrier Apr 8, 2026
b071472
HomeScreen.kt design implemented
Gregor-Guerrier Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ dependencies {
implementation(libs.androidx.compose.ui.graphics)
implementation(libs.androidx.compose.ui.tooling.preview)
implementation(libs.androidx.compose.material3)
implementation(libs.androidx.ui.graphics)
implementation(libs.androidx.room3.runtime)
implementation(libs.androidx.room.ktx)
Comment on lines +50 to +52
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find the version catalog
CATALOG="$(fd -a 'libs.versions.toml' | head -n1)"
echo "Using catalog: ${CATALOG}"

# Show relevant library entries
echo "---- Potentially related entries ----"
rg -n "ui-graphics|room.*runtime|room-ktx|google.*fonts|compose.*ui.*graphics" "$CATALOG"

# Parse TOML and print modules that can conflict
python - <<'PY'
import tomllib, pathlib, re
p = next(pathlib.Path('.').rglob('libs.versions.toml'))
data = tomllib.loads(p.read_text())
libs = data.get("libraries", {})
print("\nResolved library modules containing graphics/room/fonts:")
for name, cfg in libs.items():
    if not isinstance(cfg, dict):
        continue
    module = cfg.get("module", "")
    if any(k in module for k in ["ui-graphics", "androidx.room:", "google.fonts"]):
        print(f"{name} -> {module} | version={cfg.get('version.ref', cfg.get('version'))}")
PY

Repository: cuappdev/chimes-android

Length of output: 762

Remove duplicate graphics dependency and verify nonstandard room group.

Line 50 (libs.androidx.ui.graphics) duplicates an existing graphics dependency—both androidx-compose-ui-graphics and androidx-ui-graphics resolve to the same module androidx.compose.ui:ui-graphics. Remove one or consolidate the imports.

Line 51 uses a nonstandard library group: androidx-room3-runtime maps to androidx.room3:room3-runtime, but the correct androidx.room group is androidx.room, not androidx.room3. Verify this is intentional or correct the version catalog entry.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/build.gradle.kts` around lines 50 - 52, Remove the duplicate graphics
dependency by keeping only one implementation(libs.androidx.ui.graphics) entry
(consolidate/remove the redundant
androidx-compose-ui-graphics/androidx-ui-graphics mapping) and then correct the
Room catalog key/mapping: replace or update
implementation(libs.androidx.room3.runtime) so it uses the standard
androidx.room group (e.g., libs.androidx.room.runtime) or fix the
version-catalog entry that maps androidx.room3:room3-runtime to point to
androidx.room:room-runtime; ensure the build.gradle.kts references the corrected
catalog key.

implementation(libs.androidx.compose.ui.text.google.fonts)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core)
Expand Down
1 change: 1 addition & 0 deletions app/src/main/AndroidManifest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
android:theme="@style/Theme.Chimesandroid">
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.Chimesandroid">
Expand Down
43 changes: 43 additions & 0 deletions app/src/main/java/com/cornellappdev/chimes/ui/components/ChimeCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
package com.cornellappdev.chimes.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun ChimeCard (paddingValues: PaddingValues, modifier: Modifier, children: @Composable () -> Unit){
Column(
modifier = modifier
.shadow(
elevation = 4.dp,
shape = RoundedCornerShape(16.dp),
ambientColor = Color(0x59A86161),
spotColor = Color(0x59A86161)
)
.clip(RoundedCornerShape(16.dp))
.background(brush =
Brush.linearGradient(
colors =
listOf(Color(0xFFFFF5F0), Color(0xFFFFE9E9)),))
.padding(paddingValues),
verticalArrangement = Arrangement.spacedBy(18.dp)
){
children()
}
}
52 changes: 52 additions & 0 deletions app/src/main/java/com/cornellappdev/chimes/ui/components/ChimeKudos.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
package com.cornellappdev.chimes.ui.components

import android.R
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
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.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ChimeKudos(emoji: String) {
Button(modifier = Modifier
.shadow(
elevation = 4.dp,
shape = CircleShape,
ambientColor = Color(0x59A86161),
spotColor = Color(0x59A86161)
)
.clip(CircleShape)
.height(64.dp)
.width(64.dp),
contentPadding = PaddingValues(0.dp),
onClick = {},
colors = ButtonDefaults.buttonColors(
Color(0xFFFEEEEE)),
){
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
){
Text(
text = emoji,
fontSize = 32.sp
)
}
}
}
52 changes: 52 additions & 0 deletions app/src/main/java/com/cornellappdev/chimes/ui/components/ChimePerformanceCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
package com.cornellappdev.chimes.ui.components

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.cornellappdev.chimes.R
import com.cornellappdev.chimes.ui.theme.Montserrat

@Composable
fun ChimePerformanceCard (timePeriod: String, timeRange: String) {
ChimeCard(
paddingValues = PaddingValues(horizontal = 22.dp, vertical = 11.dp),
modifier = Modifier
.width(351.dp)
.height(51.dp)
){
Row (
modifier = Modifier
.fillMaxSize(),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = timePeriod,
fontSize = 18.sp,
fontFamily = Montserrat,
modifier = Modifier.width(75.dp)
)
Spacer(modifier = Modifier.fillMaxHeight().width((1f).dp).border((0.5f).dp, Color(0x4D635858)))
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Spacer with border won't render a visible divider.

Spacer has no intrinsic content, so applying a border modifier to it won't produce a visible line. Use a Box with a background color or Material's VerticalDivider instead.

🐛 Proposed fix using Box 
-            Spacer(modifier = Modifier.fillMaxHeight().width((1f).dp).border((0.5f).dp, Color(0x4D635858)))
+            Box(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .width(1.dp)
+                    .background(Color(0x4D635858))
+            )
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Spacer(modifier = Modifier.fillMaxHeight().width((1f).dp).border((0.5f).dp, Color(0x4D635858)))
Box(
modifier = Modifier
.fillMaxHeight()
.width(1.dp)
.background(Color(0x4D635858))
)
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@app/src/main/java/com/cornellappdev/chimes/ui/components/ChimePerformanceCard.kt`
at line 44, The Spacer with a border in ChimePerformanceCard.kt won't render a
visible divider; replace the Spacer(modifier =
Modifier.fillMaxHeight().width((1f).dp).border((0.5f).dp, Color(0x4D635858)))
with a composable that actually paints pixels (e.g., use Box(modifier =
Modifier.fillMaxHeight().width(0.5.dp).background(Color(0x4D635858))) or
Material's VerticalDivider) so the vertical line is visible; update the modifier
values to use dp (not (1f).dp) and ensure the composable is placed where the
Spacer was to maintain layout.

Text(
text = timeRange,
fontFamily = Montserrat,
fontSize = 18.sp
)
}
}
}
46 changes: 13 additions & 33 deletions app/src/main/java/com/cornellappdev/chimes/ui/components/HeaderButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package com.cornellappdev.chimes.ui.components

import android.os.Build
import androidx.annotation.RequiresApi
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.size
Expand All @@ -12,6 +13,7 @@ import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.ClipOp
import androidx.compose.ui.graphics.Color
Expand All @@ -30,44 +32,22 @@ import androidx.compose.ui.unit.dp
fun HeaderButton (iconId: Int, onClick: () -> Unit) {
Button(
modifier = Modifier
.size(50.dp)
.drawWithCache() {
val path = Path().apply {
addOutline(CircleShape.createOutline(size, layoutDirection, this@drawWithCache))
}

onDrawBehind {
clipPath(path, clipOp = ClipOp.Difference) {
drawIntoCanvas { canvas ->
val paint = android.graphics.Paint().apply {
color = android.graphics.Color.TRANSPARENT
setShadowLayer(
4.dp.toPx(),
0.dp.toPx(),
4.dp.toPx(),
Color.Black.copy(alpha = 0.11f).toArgb()
)
}
canvas.nativeCanvas.drawPath(path.asAndroidPath(), paint)
}
}
}
}
.border(
width = 1.dp,
brush =
Brush.linearGradient(listOf(Color(0xFFDEEAFA), Color(0xFFF7FAFF))),
shape = CircleShape
),
onClick = { onClick() },
colors = ButtonDefaults.buttonColors(
Color(0x33BFCFE4),
.shadow(
elevation = 4.dp,
shape = CircleShape,
ambientColor = Color(0x59A86161),
spotColor = Color(0x59A86161)
)
.size(50.dp),
onClick = { onClick() },
colors = ButtonDefaults.buttonColors(
Color.White,
),
contentPadding = PaddingValues(0.dp)
) {
Icon(
painter = painterResource(id = iconId),
contentDescription = "hell",
contentDescription = "header icon",
tint = Color(0xFF757575)
)
}
Expand Down
85 changes: 85 additions & 0 deletions app/src/main/java/com/cornellappdev/chimes/ui/components/Slope.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
package com.cornellappdev.chimes.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.cornellappdev.chimes.R

@Composable
fun Slope() {
Box(
modifier = Modifier.fillMaxSize()
){
Box(
modifier = Modifier
.height(411.dp)
.fillMaxWidth()
.background(brush =
Brush.linearGradient(colors =
listOf(Color(0xFFD3EEFF), Color(0xFFF6FAFF))))
)
Image(
painter = painterResource(R.drawable.ic_music_notes),
contentDescription = "",
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Mark decorative images as non-accessibility elements.

At Lines 42/47/53/75/81, use contentDescription = null instead of "" so screen readers skip purely decorative assets cleanly.

Suggested patch 
-            contentDescription = "",
+            contentDescription = null,

Also applies to: 47-47, 53-53, 75-75, 81-81

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/src/main/java/com/cornellappdev/chimes/ui/components/Slope.kt` at line
42, Replace empty-string content descriptions with null for decorative images in
the Slope composable so screen readers skip them; locate the Image/ImageVector
usages within the Slope composable (the parameters currently using
contentDescription = "") and change those properties to contentDescription =
null for each decorative asset (the occurrences around the Image calls in
Slope.kt).

modifier = Modifier.offset(x = 32.dp, y = 181.dp)
)
Image(
painter = painterResource(R.drawable.ic_trees_back),
contentDescription = "",
modifier = Modifier.
offset(y = 346.dp)
)
Image(
painter = painterResource(R.drawable.ic_slope),
contentDescription = "",
contentScale = ContentScale.FillBounds,
modifier = Modifier
.fillMaxWidth()
.padding(0.dp)
.offset(y = 289.dp)
.graphicsLayer(alpha = 0.99f)
.drawWithCache {
onDrawWithContent {
drawContent()
drawRect(
brush = Brush.linearGradient(
colors = listOf(Color(0xFFF2B5B5), Color(0xFFFBD3D3)),
start = Offset(0f, 0f),
end = Offset(0f, size.height)),
blendMode = BlendMode.SrcAtop
)
}
},
)
Image(
painter = painterResource(R.drawable.ic_trees_front),
contentDescription = "",
modifier = Modifier.
offset(y = 324.dp)
)
Image(
painter = painterResource(R.drawable.ic_clocktower_day),
contentDescription = "",
modifier = Modifier.offset(x = 200.dp, y = 165.dp).height(224.dp).width(164.dp),
)
}
}
Loading