202310715297-RAIHAN-ARIQ-MUZAKKI/NotesAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: 202310715297-RAIHAN-ARIQ-MUZAKKI:e541c4e234e3f3b6d25e1023f4be72a38e1493d9
Branches Tags
202310715297-RAIHAN-ARIQ-MUZAKKI:master
202310715297-RAIHAN-ARIQ-MUZAKKI:1.1.0
202310715297-RAIHAN-ARIQ-MUZAKKI:1.0.0
202310715297-RAIHAN-ARIQ-MUZAKKI:buildArchitecture
...
compare: 202310715297-RAIHAN-ARIQ-MUZAKKI:80774b58eaa6e9001c8bd04070cce0877a6e58f9
Branches Tags
202310715297-RAIHAN-ARIQ-MUZAKKI:master
202310715297-RAIHAN-ARIQ-MUZAKKI:1.1.0
202310715297-RAIHAN-ARIQ-MUZAKKI:1.0.0
202310715297-RAIHAN-ARIQ-MUZAKKI:buildArchitecture

2 Commits
e541c4e234 ... 80774b58ea

Author SHA1 Message Date
Raihan Ariq
80774b58ea Mengubah Warna dan menyesuaikan UI/UX Halaman AI Helper 2025-12-13 23:15:24 +07:00
Raihan Ariq
0f0ac6b8f3 Mengubah Warna dan menyesuaikan UI/UX Beranda 2025-12-13 23:14:52 +07:00
14 changed files with 1157 additions and 799 deletions
Show Stats Expand all files Collapse all files

5
app/build.gradle.kts
View File

@ -7,7 +7,7 @@ plugins {
android { android {
namespace = "com.example.notesai" namespace = "com.example.notesai"
compileSdk = 34 compileSdk = 35
defaultConfig { defaultConfig {
applicationId = "com.example.notesai" applicationId = "com.example.notesai"
@ -64,6 +64,9 @@ dependencies {
implementation("androidx.datastore:datastore-preferences:1.0.0") implementation("androidx.datastore:datastore-preferences:1.0.0")
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0") implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0")
implementation("com.google.ai.client.generativeai:generativeai:0.9.0") implementation("com.google.ai.client.generativeai:generativeai:0.9.0")
implementation(libs.androidx.ui.text)
implementation(libs.androidx.material3)
implementation(libs.androidx.animation.core)
// Untuk integrasi Gemini AI (optional - uncomment jika sudah ada API key) // Untuk integrasi Gemini AI (optional - uncomment jika sudah ada API key)
// implementation("com.google.ai.client.generativeai:generativeai:0.1.2") // implementation("com.google.ai.client.generativeai:generativeai:0.1.2")

84
app/src/main/java/com/example/notesai/MainActivity.kt
View File

@ -1,10 +1,11 @@
package com.example.notesai package com.example.notesai
import android.os.Bundle import android.os.Bundle
import androidx.activity.ComponentActivity import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent import androidx.activity.compose.setContent
import androidx.compose.animation.* import androidx.compose.animation.*
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
@ -19,6 +20,8 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import java.util.UUID import java.util.UUID
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex import androidx.compose.ui.zIndex
import com.example.notesai.data.local.DataStoreManager import com.example.notesai.data.local.DataStoreManager
import com.example.notesai.presentation.components.DrawerMenu import com.example.notesai.presentation.components.DrawerMenu
@ -37,20 +40,64 @@ import com.example.notesai.data.model.Category
import com.example.notesai.util.updateWhere import com.example.notesai.util.updateWhere
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
// File: MainActivity.kt (Bagian Theme Setup)
// Ganti MaterialTheme di setContent dengan ini:
import com.example.notesai.util.Constants
class MainActivity : ComponentActivity() { class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
setContent { setContent {
MaterialTheme( MaterialTheme(
colorScheme = darkColorScheme( colorScheme = darkColorScheme(
primary = Color(0xFF6366F1), // Primary colors
secondary = Color(0xFFA855F7), primary = Constants.AppColors.Primary,
background = Color(0xFF0F172A),
surface = Color(0xFF1E293B),
onPrimary = Color.White, onPrimary = Color.White,
primaryContainer = Constants.AppColors.PrimaryContainer,
onPrimaryContainer = Color.White,
// Secondary colors
secondary = Constants.AppColors.Secondary,
onSecondary = Color.White, onSecondary = Color.White,
onBackground = Color(0xFFE2E8F0), secondaryContainer = Constants.AppColors.SecondaryVariant,
onSurface = Color(0xFFE2E8F0) onSecondaryContainer = Color.White,
// Background colors
background = Constants.AppColors.Background,
onBackground = Constants.AppColors.OnBackground,
// Surface colors
surface = Constants.AppColors.Surface,
onSurface = Constants.AppColors.OnSurface,
surfaceVariant = Constants.AppColors.SurfaceVariant,
onSurfaceVariant = Constants.AppColors.OnSurfaceVariant,
// Error colors
error = Constants.AppColors.Error,
onError = Color.White,
// Other
outline = Constants.AppColors.Border,
outlineVariant = Constants.AppColors.Divider
),
typography = Typography(
// Improve typography for better readability
displayLarge = MaterialTheme.typography.displayLarge.copy(
fontWeight = FontWeight.Bold
),
headlineLarge = MaterialTheme.typography.headlineLarge.copy(
fontWeight = FontWeight.Bold
),
titleLarge = MaterialTheme.typography.titleLarge.copy(
fontWeight = FontWeight.SemiBold
),
bodyLarge = MaterialTheme.typography.bodyLarge.copy(
lineHeight = 24.sp
),
bodyMedium = MaterialTheme.typography.bodyMedium.copy(
lineHeight = 20.sp
)
) )
) { ) {
Surface( Surface(
@ -161,7 +208,12 @@ fun NotesApp() {
floatingActionButton = { floatingActionButton = {
AnimatedVisibility( AnimatedVisibility(
visible = currentScreen == "main" && !showFullScreenNote, visible = currentScreen == "main" && !showFullScreenNote,
enter = scaleIn() + fadeIn(), enter = scaleIn(
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
)
) + fadeIn(),
exit = scaleOut() + fadeOut() exit = scaleOut() + fadeOut()
) { ) {
FloatingActionButton( FloatingActionButton(
@ -173,20 +225,18 @@ fun NotesApp() {
showCategoryDialog = true showCategoryDialog = true
} }
}, },
containerColor = Color.Transparent, containerColor = Constants.AppColors.Primary,
modifier = Modifier contentColor = Color.White,
.shadow(8.dp, CircleShape) elevation = FloatingActionButtonDefaults.elevation(
.background( defaultElevation = 8.dp,
brush = Brush.linearGradient( pressedElevation = 12.dp
colors = listOf(Color(0xFF6366F1), Color(0xFFA855F7))
), ),
shape = CircleShape modifier = Modifier.size(64.dp)
)
) { ) {
Icon( Icon(
Icons.Default.Add, Icons.Default.Add,
contentDescription = if (selectedCategory != null) "Tambah Catatan" else "Tambah Kategori", contentDescription = if (selectedCategory != null) "Tambah Catatan" else "Tambah Kategori",
tint = Color.White modifier = Modifier.size(28.dp)
) )
} }
} }

278
app/src/main/java/com/example/notesai/presentation/components/DrawerMenu.kt
View File

@ -1,43 +1,29 @@
package com.example.notesai.presentation.components package com.example.notesai.presentation.components
import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.layout.Column
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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Archive import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.filled.Create import androidx.compose.material.icons.outlined.*
import androidx.compose.material.icons.filled.Delete import androidx.compose.material3.*
import androidx.compose.material.icons.filled.Home import androidx.compose.runtime.*
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Divider
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.notesai.util.Constants
@Composable @Composable
fun DrawerMenu( fun DrawerMenu(
@ -45,133 +31,233 @@ fun DrawerMenu(
onDismiss: () -> Unit, onDismiss: () -> Unit,
onItemClick: (String) -> Unit onItemClick: (String) -> Unit
) { ) {
// Backdrop with blur effect
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.statusBarsPadding() // Padding untuk status bar .background(Constants.AppColors.Overlay)
.background(Color.Black.copy(alpha = 0.5f))
.clickable( .clickable(
onClick = onDismiss, onClick = onDismiss,
indication = null, indication = null,
interactionSource = remember { MutableInteractionSource() } interactionSource = remember { MutableInteractionSource() }
) )
) { ) {
Card( // Drawer Content
Surface(
modifier = Modifier modifier = Modifier
.fillMaxHeight() .fillMaxHeight()
.width(250.dp) .width(280.dp)
.align(Alignment.CenterStart) .align(Alignment.CenterStart)
.clickable( .clickable(
onClick = {}, onClick = {},
indication = null, indication = null,
interactionSource = remember { MutableInteractionSource() } interactionSource = remember { MutableInteractionSource() }
), ),
shape = RoundedCornerShape(topEnd = 0.dp, bottomEnd = 0.dp), color = Constants.AppColors.Surface,
colors = CardDefaults.cardColors( shadowElevation = Constants.Elevation.ExtraLarge.dp
containerColor = Color(0xFF1E293B)
),
elevation = CardDefaults.cardElevation(defaultElevation = 16.dp)
) { ) {
Column(modifier = Modifier.fillMaxSize()) { Column(
// Header Drawer dengan tombol close modifier = Modifier.fillMaxSize()
) {
// Header - Minimalist
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.background( .background(
brush = Brush.verticalGradient( brush = Brush.verticalGradient(
colors = listOf(Color(0xFF6366F1), Color(0xFFA855F7)) colors = listOf(
Constants.AppColors.Primary.copy(alpha = 0.15f),
Color.Transparent
) )
) )
.padding(24.dp) )
) { .padding(Constants.Spacing.ExtraLarge.dp)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) { ) {
Column { Column {
// App Icon with subtle background
Box(
modifier = Modifier
.size(56.dp)
.background(
color = Constants.AppColors.Primary.copy(alpha = 0.2f),
shape = RoundedCornerShape(Constants.Radius.Medium.dp)
),
contentAlignment = Alignment.Center
) {
Icon( Icon(
Icons.Default.Create, Icons.Default.Create,
contentDescription = null, contentDescription = null,
tint = Color.White, tint = Constants.AppColors.Primary,
modifier = Modifier.size(36.dp) modifier = Modifier.size(32.dp)
) )
Spacer(modifier = Modifier.height(12.dp)) }
Spacer(modifier = Modifier.height(Constants.Spacing.Medium.dp))
Text( Text(
"AI Notes", Constants.APP_NAME,
style = MaterialTheme.typography.headlineMedium, style = MaterialTheme.typography.headlineMedium,
color = Color.White, color = Constants.AppColors.OnBackground,
fontWeight = FontWeight.Bold fontWeight = FontWeight.Bold,
fontSize = 24.sp
) )
Spacer(modifier = Modifier.height(Constants.Spacing.ExtraSmall.dp))
Text( Text(
"Smart & Modern", "Smart Note Taking",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
color = Color.White.copy(0.8f) color = Constants.AppColors.OnSurfaceVariant,
fontSize = 14.sp
) )
} }
// // Tombol Close
// IconButton(
// onClick = onDismiss,
// modifier = Modifier
// .size(40.dp)
// .background(
// Color.White.copy(alpha = 0.2f),
// shape = CircleShape
// )
// ) {
// Icon(
// Icons.Default.Close,
// contentDescription = "Tutup Menu",
// tint = Color.White,
// modifier = Modifier.size(24.dp)
// )
// }
}
} }
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(Constants.Spacing.Large.dp))
// Menu Items // Menu Items
MenuItem( DrawerMenuItem(
icon = Icons.Default.Home, icon = if (currentScreen == "main") Icons.Filled.Home else Icons.Outlined.Home,
text = "Beranda", text = "Beranda",
isSelected = currentScreen == "main" isSelected = currentScreen == "main",
) { onItemClick("main") } onClick = { onItemClick("main") }
)
MenuItem( DrawerMenuItem(
icon = Icons.Default.Star, icon = if (currentScreen == "starred") Icons.Filled.Star else Icons.Outlined.StarBorder,
text = "Berbintang", text = "Berbintang",
isSelected = currentScreen == "starred" isSelected = currentScreen == "starred",
) { onItemClick("starred") } onClick = { onItemClick("starred") }
)
MenuItem( DrawerMenuItem(
icon = Icons.Default.Archive, icon = if (currentScreen == "archive") Icons.Filled.Archive else Icons.Outlined.Archive,
text = "Arsip", text = "Arsip",
isSelected = currentScreen == "archive" isSelected = currentScreen == "archive",
) { onItemClick("archive") } onClick = { onItemClick("archive") }
)
MenuItem( DrawerMenuItem(
icon = Icons.Default.Delete, icon = if (currentScreen == "trash") Icons.Filled.Delete else Icons.Outlined.Delete,
text = "Sampah", text = "Sampah",
isSelected = currentScreen == "trash" isSelected = currentScreen == "trash",
) { onItemClick("trash") } onClick = { onItemClick("trash") }
)
Spacer(modifier = Modifier.weight(1f)) Spacer(modifier = Modifier.weight(1f))
// Footer // Footer - Version info
Divider( HorizontalDivider(
color = Color.White.copy(alpha = 0.1f), color = Constants.AppColors.Divider,
modifier = Modifier.padding(horizontal = 16.dp) modifier = Modifier.padding(horizontal = Constants.Spacing.Medium.dp)
) )
Row(
modifier = Modifier
.fillMaxWidth()
.padding(Constants.Spacing.Medium.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text( Text(
text = "Version 1.0.0", "Version ${Constants.APP_VERSION}",
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
color = Color.White.copy(alpha = 0.5f), color = Constants.AppColors.OnSurfaceTertiary,
modifier = Modifier.padding(16.dp) fontSize = 12.sp
)
// Powered by badge
Surface(
color = Constants.AppColors.Primary.copy(alpha = 0.1f),
shape = RoundedCornerShape(Constants.Radius.Small.dp)
) {
Row(
modifier = Modifier.padding(horizontal = Constants.Spacing.Small.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(4.dp)
) {
Icon(
Icons.Default.AutoAwesome,
contentDescription = null,
tint = Constants.AppColors.Primary,
modifier = Modifier.size(12.dp)
)
Text(
"AI",
color = Constants.AppColors.Primary,
fontSize = 11.sp,
fontWeight = FontWeight.Bold
) )
} }
} }
} }
} }
}
}
}
@Composable
private fun DrawerMenuItem(
icon: ImageVector,
text: String,
isSelected: Boolean,
onClick: () -> Unit
) {
// Scale animation
val scale by animateFloatAsState(
targetValue = if (isSelected) 1.02f else 1f,
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessMedium
),
label = "scale"
)
Row(
modifier = Modifier
.fillMaxWidth()
.scale(scale)
.clip(RoundedCornerShape(Constants.Radius.Medium.dp))
.clickable(onClick = onClick)
.background(
color = if (isSelected)
Constants.AppColors.Primary.copy(alpha = 0.1f)
else
Color.Transparent
)
.padding(horizontal = Constants.Spacing.Medium.dp, vertical = Constants.Spacing.Medium.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Icon with background
Box(
modifier = Modifier
.size(40.dp)
.background(
color = if (isSelected)
Constants.AppColors.Primary.copy(alpha = 0.2f)
else
Constants.AppColors.SurfaceVariant,
shape = CircleShape
),
contentAlignment = Alignment.Center
) {
Icon(
icon,
contentDescription = null,
tint = if (isSelected) Constants.AppColors.Primary else Constants.AppColors.OnSurfaceVariant,
modifier = Modifier.size(20.dp)
)
}
Spacer(modifier = Modifier.width(Constants.Spacing.Medium.dp))
// Text
Text(
text,
style = MaterialTheme.typography.bodyLarge,
color = if (isSelected) Constants.AppColors.Primary else Constants.AppColors.OnSurface,
fontWeight = if (isSelected) FontWeight.SemiBold else FontWeight.Normal,
fontSize = 15.sp
)
}
}

164
app/src/main/java/com/example/notesai/presentation/components/ModernBottomBar.kt
View File

@ -1,31 +1,32 @@
package com.example.notesai.presentation.components package com.example.notesai.presentation.components
import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.layout.Spacer
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.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AutoAwesome
import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.BottomAppBar import androidx.compose.material.icons.outlined.AutoAwesome
import androidx.compose.material3.Icon import androidx.compose.material.icons.outlined.Home
import androidx.compose.material3.MaterialTheme import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Text import androidx.compose.material3.*
import androidx.compose.runtime.Composable import androidx.compose.runtime.*
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.draw.shadow import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.notesai.util.Constants
@Composable @Composable
fun ModernBottomBar( fun ModernBottomBar(
@ -33,70 +34,125 @@ fun ModernBottomBar(
onHomeClick: () -> Unit, onHomeClick: () -> Unit,
onAIClick: () -> Unit onAIClick: () -> Unit
) { ) {
BottomAppBar( // Floating Bottom Bar with Glassmorphism
containerColor = Color.Transparent, Box(
modifier = Modifier modifier = Modifier
.shadow(8.dp, RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp)) .fillMaxWidth()
.background( .padding(horizontal = 16.dp)
brush = Brush.verticalGradient( ) {
colors = listOf( Surface(
Color(0xFF1E293B).copy(0.95f), modifier = Modifier
Color(0xFF334155).copy(0.95f) .fillMaxWidth()
) .shadow(
elevation = Constants.Elevation.Large.dp,
shape = RoundedCornerShape(Constants.Radius.ExtraLarge.dp)
), ),
shape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp) color = Constants.AppColors.SurfaceElevated,
) shape = RoundedCornerShape(Constants.Radius.ExtraLarge.dp)
) { ) {
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 16.dp), .padding(vertical = 8.dp, horizontal = 24.dp),
horizontalArrangement = Arrangement.SpaceEvenly, horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
Column( // Home Button
horizontalAlignment = Alignment.CenterHorizontally, BottomBarItem(
modifier = Modifier selected = currentScreen == "main",
.weight(1f) onClick = onHomeClick,
.clickable(onClick = onHomeClick) icon = if (currentScreen == "main") Icons.Filled.Home else Icons.Outlined.Home,
.padding(vertical = 8.dp) label = "Beranda"
) {
Icon(
Icons.Default.Home,
contentDescription = "Home",
tint = if (currentScreen == "main") Color(0xFF6366F1) else Color(0xFF94A3B8),
modifier = Modifier.size(24.dp)
) )
Spacer(modifier = Modifier.height(4.dp))
Text( // AI Button
"Home", BottomBarItem(
color = if (currentScreen == "main") Color(0xFF6366F1) else Color(0xFF94A3B8), selected = currentScreen == "ai",
style = MaterialTheme.typography.bodySmall, onClick = onAIClick,
fontWeight = if (currentScreen == "main") FontWeight.Bold else FontWeight.Normal icon = if (currentScreen == "ai") Icons.Filled.AutoAwesome else Icons.Outlined.AutoAwesome,
label = "AI Helper"
) )
} }
}
}
}
@Composable
private fun BottomBarItem(
selected: Boolean,
onClick: () -> Unit,
icon: androidx.compose.ui.graphics.vector.ImageVector,
label: String
) {
// Scale animation
val scale by animateFloatAsState(
targetValue = if (selected) 1.1f else 1f,
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
),
label = "scale"
)
// Color animation
val iconColor by animateColorAsState(
targetValue = if (selected) Constants.AppColors.Primary else Constants.AppColors.OnSurfaceVariant,
animationSpec = tween(Constants.ANIMATION_DURATION_MEDIUM),
label = "color"
)
Column( Column(
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier modifier = Modifier
.weight(1f) .clip(RoundedCornerShape(12.dp))
.clickable(onClick = onAIClick) .clickable(
.padding(vertical = 8.dp) onClick = onClick,
indication = null,
interactionSource = remember { MutableInteractionSource() }
)
.padding(horizontal = 24.dp, vertical = 8.dp)
) { ) {
// Icon with background indicator
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(48.dp)
.scale(scale)
) {
// Background indicator
if (selected) {
Box(
modifier = Modifier
.size(40.dp)
.background(
color = Constants.AppColors.Primary.copy(alpha = 0.15f),
shape = CircleShape
)
)
}
Icon( Icon(
Icons.Default.Star, icon,
contentDescription = "AI Helper", contentDescription = label,
tint = if (currentScreen == "ai") Color(0xFFFBBF24) else Color(0xFF94A3B8), tint = iconColor,
modifier = Modifier.size(24.dp) modifier = Modifier.size(24.dp)
) )
}
// Label with fade animation
AnimatedVisibility(
visible = selected,
enter = fadeIn() + expandVertically(),
exit = fadeOut() + shrinkVertically()
) {
Spacer(modifier = Modifier.height(4.dp)) Spacer(modifier = Modifier.height(4.dp))
Text( Text(
"AI Helper", label,
color = if (currentScreen == "ai") Color(0xFFFBBF24) else Color(0xFF94A3B8), color = Constants.AppColors.Primary,
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
fontWeight = if (currentScreen == "ai") FontWeight.Bold else FontWeight.Normal fontWeight = FontWeight.Bold,
fontSize = 12.sp
) )
} }
} }
} }
}

153
app/src/main/java/com/example/notesai/presentation/components/ModernTopBar.kt
View File

@ -1,42 +1,25 @@
package com.example.notesai.presentation.components package com.example.notesai.presentation.components
import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
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.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Search import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Star import androidx.compose.material3.*
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import com.example.notesai.util.Constants
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
@ -50,58 +33,116 @@ fun ModernTopBar(
onSearchQueryChange: (String) -> Unit, onSearchQueryChange: (String) -> Unit,
showSearch: Boolean showSearch: Boolean
) { ) {
TopAppBar( // Smooth transition for search bar
title = { AnimatedContent(
if (showSearch) { targetState = showSearch,
transitionSpec = {
fadeIn(animationSpec = tween(Constants.ANIMATION_DURATION_MEDIUM)) togetherWith
fadeOut(animationSpec = tween(Constants.ANIMATION_DURATION_MEDIUM))
},
label = "topbar"
) { isSearching ->
if (isSearching) {
// Search Mode - Minimalist
Surface(
modifier = Modifier
.fillMaxWidth()
.shadow(Constants.Elevation.Small.dp),
color = Constants.AppColors.Surface
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = Constants.Spacing.Medium.dp, vertical = Constants.Spacing.Small.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Search TextField
TextField( TextField(
value = searchQuery, value = searchQuery,
onValueChange = onSearchQueryChange, onValueChange = onSearchQueryChange,
placeholder = { Text("Cari catatan...", color = Color.White.copy(0.6f)) }, placeholder = {
Text(
"Cari catatan atau kategori...",
color = Constants.AppColors.OnSurfaceVariant,
fontSize = 15.sp
)
},
colors = TextFieldDefaults.colors( colors = TextFieldDefaults.colors(
focusedContainerColor = Color.Transparent, focusedContainerColor = Constants.AppColors.SurfaceVariant,
unfocusedContainerColor = Color.Transparent, unfocusedContainerColor = Constants.AppColors.SurfaceVariant,
focusedTextColor = Color.White, focusedTextColor = Constants.AppColors.OnBackground,
unfocusedTextColor = Color.White, unfocusedTextColor = Constants.AppColors.OnSurface,
cursorColor = Color.White, cursorColor = Constants.AppColors.Primary,
focusedIndicatorColor = Color.Transparent, focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent unfocusedIndicatorColor = Color.Transparent
), ),
modifier = Modifier.fillMaxWidth() modifier = Modifier
.weight(1f)
.heightIn(min = 48.dp),
shape = RoundedCornerShape(Constants.Radius.Medium.dp),
singleLine = true,
textStyle = LocalTextStyle.current.copy(fontSize = 15.sp)
) )
} else {
Text( Spacer(modifier = Modifier.width(Constants.Spacing.Small.dp))
title,
fontWeight = FontWeight.Bold, // Close Search Button
fontSize = 22.sp IconButton(
onClick = {
onSearchQueryChange("")
onSearchClick()
}
) {
Icon(
Icons.Default.Close,
contentDescription = "Close Search",
tint = Constants.AppColors.OnSurfaceVariant
) )
} }
}, }
navigationIcon = { }
} else {
// Normal Mode - Minimalist
Surface(
modifier = Modifier
.fillMaxWidth()
.shadow(Constants.Elevation.Small.dp),
color = Constants.AppColors.Surface
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = Constants.Spacing.Small.dp, vertical = Constants.Spacing.Small.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Back/Menu Button
IconButton(onClick = if (showBackButton) onBackClick else onMenuClick) { IconButton(onClick = if (showBackButton) onBackClick else onMenuClick) {
Icon( Icon(
if (showBackButton) Icons.AutoMirrored.Filled.ArrowBack else Icons.Default.Menu, if (showBackButton) Icons.AutoMirrored.Filled.ArrowBack else Icons.Default.Menu,
contentDescription = null, contentDescription = if (showBackButton) "Back" else "Menu",
tint = Color.White tint = Constants.AppColors.OnSurface
) )
} }
},
actions = { // Title
Text(
title,
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
color = Constants.AppColors.OnBackground,
modifier = Modifier.weight(1f)
)
// Search Button
IconButton(onClick = onSearchClick) { IconButton(onClick = onSearchClick) {
Icon( Icon(
if (showSearch) Icons.Default.Close else Icons.Default.Search, Icons.Default.Search,
contentDescription = "Search", contentDescription = "Search",
tint = Color.White tint = Constants.AppColors.OnSurfaceVariant
) )
} }
}, }
colors = TopAppBarDefaults.topAppBarColors( }
containerColor = Color.Transparent }
), }
modifier = Modifier
.background(
brush = Brush.horizontalGradient(
colors = listOf(Color(0xFF6366F1), Color(0xFFA855F7))
)
)
)
} }

370
app/src/main/java/com/example/notesai/presentation/screens/ai/AIHelperScreen.kt
View File

@ -1,71 +1,41 @@
package com.example.notesai.presentation.screens.ai package com.example.notesai.presentation.screens.ai
import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.filled.Folder import androidx.compose.material3.*
import androidx.compose.material.icons.filled.Send import androidx.compose.runtime.*
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.filled.Warning
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Divider
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalClipboardManager import androidx.compose.ui.platform.LocalClipboardManager
import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.example.notesai.data.model.Note import androidx.compose.ui.unit.sp
import com.example.notesai.data.model.ChatMessage
import com.example.notesai.data.model.Category import com.example.notesai.data.model.Category
import com.example.notesai.config.APIKey import com.example.notesai.data.model.ChatMessage
import com.example.notesai.presentation.screens.ai.components.ChatBubble import com.example.notesai.data.model.Note
import com.example.notesai.presentation.screens.ai.components.CompactStatItem import com.example.notesai.util.Constants
import com.example.notesai.presentation.screens.ai.components.SuggestionChip
import com.example.notesai.util.Constants.AppColors.Divider
import com.google.ai.client.generativeai.GenerativeModel import com.google.ai.client.generativeai.GenerativeModel
import com.google.ai.client.generativeai.type.generationConfig import com.google.ai.client.generativeai.type.generationConfig
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import kotlin.collections.plus import java.text.SimpleDateFormat
import java.util.*
import com.example.notesai.presentation.screens.ai.components.ChatBubble
import com.example.notesai.presentation.screens.ai.components.CompactStatItem
import com.example.notesai.presentation.screens.ai.components.SuggestionChip
import com.example.notesai.presentation.screens.ai.components.StatItem
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
@ -89,8 +59,8 @@ fun AIHelperScreen(
// Inisialisasi Gemini Model // Inisialisasi Gemini Model
val generativeModel = remember { val generativeModel = remember {
GenerativeModel( GenerativeModel(
modelName = "gemini-2.5-flash", modelName = "gemini-2.0-flash-exp",
apiKey = APIKey.GEMINI_API_KEY, apiKey = com.example.notesai.config.APIKey.GEMINI_API_KEY,
generationConfig = generationConfig { generationConfig = generationConfig {
temperature = 0.8f temperature = 0.8f
topK = 40 topK = 40
@ -110,94 +80,58 @@ fun AIHelperScreen(
} }
Column( Column(
modifier = Modifier.Companion modifier = Modifier
.fillMaxSize() .fillMaxSize()
.background(MaterialTheme.colorScheme.background) .background(Constants.AppColors.Background)
) { ) {
// Header // Category Selector & Stats - Compact
Card( Surface(
modifier = Modifier.Companion.fillMaxWidth(), color = Constants.AppColors.Surface,
colors = CardDefaults.cardColors(containerColor = Color.Companion.Transparent), shadowElevation = 2.dp
shape = RoundedCornerShape(0.dp)
) { ) {
Box(
modifier = Modifier.Companion
.fillMaxWidth()
.background(
brush = Brush.Companion.linearGradient(
colors = listOf(Color(0xFF6366F1), Color(0xFFA855F7))
)
)
.padding(20.dp)
) {
Column {
Row(verticalAlignment = Alignment.Companion.CenterVertically) {
Icon(
Icons.Default.Star,
contentDescription = null,
tint = Color(0xFFFBBF24),
modifier = Modifier.Companion.size(28.dp)
)
Spacer(modifier = Modifier.Companion.width(12.dp))
Column {
Text(
"AI Helper",
style = MaterialTheme.typography.titleLarge,
color = Color.Companion.White,
fontWeight = FontWeight.Companion.Bold
)
Text(
"Powered by Gemini AI",
style = MaterialTheme.typography.bodySmall,
color = Color.Companion.White.copy(0.8f)
)
}
}
}
}
}
// Category Selector & Stats - Compact Version
Column( Column(
modifier = Modifier.Companion modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.background(MaterialTheme.colorScheme.background)
.padding(16.dp) .padding(16.dp)
) { ) {
// Category Selector // Category Selector
Box { Box {
Card( Card(
modifier = Modifier.Companion onClick = { showCategoryDropdown = !showCategoryDropdown },
.fillMaxWidth() modifier = Modifier.fillMaxWidth(),
.clickable { showCategoryDropdown = !showCategoryDropdown }, colors = CardDefaults.cardColors(
colors = CardDefaults.cardColors(containerColor = Color(0xFF1E293B)), containerColor = Constants.AppColors.SurfaceVariant
shape = androidx.compose.foundation.shape.RoundedCornerShape(12.dp) ),
shape = RoundedCornerShape(12.dp)
) { ) {
Row( Row(
modifier = Modifier.Companion modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(12.dp), .padding(12.dp),
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.Companion.CenterVertically verticalAlignment = Alignment.CenterVertically
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { ) {
Row(verticalAlignment = Alignment.Companion.CenterVertically) {
Icon( Icon(
Icons.Default.Folder, Icons.Default.Folder,
contentDescription = null, contentDescription = null,
tint = Color(0xFF6366F1), tint = Constants.AppColors.Primary,
modifier = Modifier.Companion.size(20.dp) modifier = Modifier.size(20.dp)
) )
Spacer(modifier = Modifier.Companion.width(8.dp))
Text( Text(
selectedCategory?.name ?: "Semua Kategori", selectedCategory?.name ?: "Semua Kategori",
color = Color.Companion.White, color = Constants.AppColors.OnSurface,
style = MaterialTheme.typography.bodyMedium style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Medium
) )
} }
Icon( Icon(
Icons.Default.ArrowDropDown, Icons.Default.ArrowDropDown,
contentDescription = null, contentDescription = null,
tint = Color(0xFF94A3B8) tint = Constants.AppColors.OnSurfaceVariant
) )
} }
} }
@ -205,12 +139,12 @@ fun AIHelperScreen(
DropdownMenu( DropdownMenu(
expanded = showCategoryDropdown, expanded = showCategoryDropdown,
onDismissRequest = { showCategoryDropdown = false }, onDismissRequest = { showCategoryDropdown = false },
modifier = Modifier.Companion modifier = Modifier
.fillMaxWidth() .fillMaxWidth(0.9f)
.background(Color(0xFF1E293B)) .background(Constants.AppColors.SurfaceElevated)
) { ) {
DropdownMenuItem( DropdownMenuItem(
text = { Text("Semua Kategori", color = Color.Companion.White) }, text = { Text("Semua Kategori", color = Constants.AppColors.OnSurface) },
onClick = { onClick = {
selectedCategory = null selectedCategory = null
showCategoryDropdown = false showCategoryDropdown = false
@ -218,7 +152,7 @@ fun AIHelperScreen(
) )
categories.forEach { category -> categories.forEach { category ->
DropdownMenuItem( DropdownMenuItem(
text = { Text(category.name, color = Color.Companion.White) }, text = { Text(category.name, color = Constants.AppColors.OnSurface) },
onClick = { onClick = {
selectedCategory = category selectedCategory = category
showCategoryDropdown = false showCategoryDropdown = false
@ -228,8 +162,9 @@ fun AIHelperScreen(
} }
} }
Spacer(modifier = Modifier.height(12.dp))
// Stats - Compact // Stats - Compact
Spacer(modifier = Modifier.Companion.height(12.dp))
val filteredNotes = if (selectedCategory != null) { val filteredNotes = if (selectedCategory != null) {
notes.filter { it.categoryId == selectedCategory!!.id && !it.isArchived } notes.filter { it.categoryId == selectedCategory!!.id && !it.isArchived }
} else { } else {
@ -237,90 +172,105 @@ fun AIHelperScreen(
} }
Row( Row(
modifier = Modifier.Companion.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly horizontalArrangement = Arrangement.SpaceEvenly
) { ) {
CompactStatItem( CompactStatItem(
label = "Total", icon = Icons.Default.Description,
value = filteredNotes.size.toString(), value = filteredNotes.size.toString(),
color = Color(0xFF6366F1) label = "Catatan"
) )
CompactStatItem( CompactStatItem(
label = "Dipasang", icon = Icons.Default.Star,
value = filteredNotes.count { it.isPinned }.toString(), value = filteredNotes.count { it.isPinned }.toString(),
color = Color(0xFFFBBF24) label = "Dipasang"
) )
CompactStatItem( CompactStatItem(
label = "Kategori", icon = Icons.Default.Folder,
value = categories.size.toString(), value = categories.size.toString(),
color = Color(0xFFA855F7) label = "Kategori"
) )
} }
} }
}
Divider(color = Color(0xFF334155), thickness = 1.dp) HorizontalDivider(color = Constants.AppColors.Divider)
// Chat Area // Chat Area
Column( Box(
modifier = Modifier.Companion modifier = Modifier
.weight(1f) .weight(1f)
.fillMaxWidth() .fillMaxWidth()
) { ) {
if (chatMessages.isEmpty()) { if (chatMessages.isEmpty()) {
// Welcome State // Welcome State
Column( Column(
modifier = Modifier.Companion modifier = Modifier
.fillMaxSize() .fillMaxSize()
.padding(32.dp), .padding(32.dp),
horizontalAlignment = Alignment.Companion.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center verticalArrangement = Arrangement.Center
) {
Box(
modifier = Modifier
.size(80.dp)
.background(
color = Constants.AppColors.Primary.copy(alpha = 0.1f),
shape = CircleShape
),
contentAlignment = Alignment.Center
) { ) {
Icon( Icon(
Icons.Default.Star, Icons.Default.AutoAwesome,
contentDescription = null, contentDescription = null,
modifier = Modifier.Companion.size(64.dp), modifier = Modifier.size(40.dp),
tint = Color(0xFF6366F1).copy(0.5f) tint = Constants.AppColors.Primary
) )
Spacer(modifier = Modifier.Companion.height(16.dp)) }
Spacer(modifier = Modifier.height(24.dp))
Text( Text(
"Mulai Percakapan", "AI Assistant",
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.headlineMedium,
color = Color.Companion.White, color = Constants.AppColors.OnBackground,
fontWeight = FontWeight.Companion.Bold fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.Companion.height(8.dp))
Text(
"Tanyakan apa saja tentang catatan Anda",
style = MaterialTheme.typography.bodyMedium,
color = Color(0xFF94A3B8),
textAlign = TextAlign.Companion.Center
) )
Spacer(modifier = Modifier.Companion.height(24.dp)) Spacer(modifier = Modifier.height(8.dp))
Text(
"Tanyakan apa saja tentang catatan Anda",
style = MaterialTheme.typography.bodyLarge,
color = Constants.AppColors.OnSurfaceVariant,
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.height(32.dp))
// Suggestion Chips // Suggestion Chips
Column( Column(
horizontalAlignment = Alignment.Companion.Start, horizontalAlignment = Alignment.Start,
modifier = Modifier.Companion.fillMaxWidth(0.8f) verticalArrangement = Arrangement.spacedBy(8.dp),
modifier = Modifier.fillMaxWidth(0.85f)
) { ) {
Text( Text(
"Contoh pertanyaan:", "Contoh pertanyaan:",
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.labelMedium,
color = Color(0xFF64748B), color = Constants.AppColors.OnSurfaceTertiary
modifier = Modifier.Companion.padding(bottom = 8.dp)
) )
SuggestionChip("Analisis catatan saya", onSelect = { prompt = it }) SuggestionChip("Analisis catatan saya") { prompt = it }
SuggestionChip("Buat ringkasan", onSelect = { prompt = it }) SuggestionChip("Buat ringkasan") { prompt = it }
SuggestionChip("Berikan saran organisasi", onSelect = { prompt = it }) SuggestionChip("Berikan saran organisasi") { prompt = it }
} }
} }
} else { } else {
// Chat Messages // Chat Messages
Column( Column(
modifier = Modifier.Companion modifier = Modifier
.fillMaxSize() .fillMaxSize()
.verticalScroll(scrollState) .verticalScroll(scrollState)
.padding(16.dp) .padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 100.dp)
) { ) {
chatMessages.forEach { message -> chatMessages.forEach { message ->
ChatBubble( ChatBubble(
@ -336,36 +286,34 @@ fun AIHelperScreen(
}, },
showCopied = showCopiedMessage && copiedMessageId == message.id showCopied = showCopiedMessage && copiedMessageId == message.id
) )
Spacer(modifier = Modifier.Companion.height(12.dp)) Spacer(modifier = Modifier.height(12.dp))
} }
// Loading Indicator // Loading Indicator
if (isLoading) { if (isLoading) {
Row( Row(
modifier = Modifier.Companion modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(vertical = 8.dp), .padding(vertical = 8.dp),
horizontalArrangement = Arrangement.Start horizontalArrangement = Arrangement.Start
) { ) {
Card( Surface(
colors = CardDefaults.cardColors( color = Constants.AppColors.SurfaceVariant,
containerColor = Color(0xFF1E293B) shape = RoundedCornerShape(16.dp)
),
shape = androidx.compose.foundation.shape.RoundedCornerShape(16.dp)
) { ) {
Row( Row(
modifier = Modifier.Companion.padding(16.dp), modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.Companion.CenterVertically verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { ) {
CircularProgressIndicator( CircularProgressIndicator(
modifier = Modifier.Companion.size(20.dp), modifier = Modifier.size(20.dp),
color = Color(0xFF6366F1), color = Constants.AppColors.Primary,
strokeWidth = 2.dp strokeWidth = 2.dp
) )
Spacer(modifier = Modifier.Companion.width(12.dp))
Text( Text(
"AI sedang berpikir...", "AI sedang berpikir...",
color = Color(0xFF94A3B8), color = Constants.AppColors.OnSurfaceVariant,
style = MaterialTheme.typography.bodyMedium style = MaterialTheme.typography.bodyMedium
) )
} }
@ -375,52 +323,46 @@ fun AIHelperScreen(
// Error Message // Error Message
if (errorMessage.isNotEmpty()) { if (errorMessage.isNotEmpty()) {
Card( Surface(
modifier = Modifier.Companion.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors( color = Constants.AppColors.Error.copy(alpha = 0.1f),
containerColor = Color(0xFFEF4444).copy(0.2f) shape = RoundedCornerShape(12.dp)
),
shape = androidx.compose.foundation.shape.RoundedCornerShape(12.dp)
) { ) {
Row( Row(
modifier = Modifier.Companion.padding(12.dp), modifier = Modifier.padding(12.dp),
verticalAlignment = Alignment.Companion.CenterVertically verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { ) {
Icon( Icon(
Icons.Default.Warning, Icons.Default.Warning,
contentDescription = null, contentDescription = null,
tint = Color(0xFFEF4444), tint = Constants.AppColors.Error,
modifier = Modifier.Companion.size(20.dp) modifier = Modifier.size(20.dp)
) )
Spacer(modifier = Modifier.Companion.width(8.dp))
Text( Text(
errorMessage, errorMessage,
color = Color(0xFFEF4444), color = Constants.AppColors.Error,
style = MaterialTheme.typography.bodySmall style = MaterialTheme.typography.bodySmall
) )
} }
} }
} }
Spacer(modifier = Modifier.Companion.height(80.dp))
} }
} }
} }
// Input Area // Input Area - Minimalist
Card( Surface(
modifier = Modifier.Companion.fillMaxWidth(), color = Constants.AppColors.Surface,
colors = CardDefaults.cardColors( shadowElevation = 8.dp,
containerColor = Color(0xFF1E293B) shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)
),
shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
) { ) {
Row( Row(
modifier = Modifier.Companion modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(16.dp), .padding(16.dp),
verticalAlignment = Alignment.Companion.Bottom verticalAlignment = Alignment.Bottom,
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { ) {
OutlinedTextField( OutlinedTextField(
value = prompt, value = prompt,
@ -428,33 +370,30 @@ fun AIHelperScreen(
placeholder = { placeholder = {
Text( Text(
"Ketik pesan...", "Ketik pesan...",
color = Color(0xFF64748B) color = Constants.AppColors.OnSurfaceTertiary
) )
}, },
modifier = Modifier.Companion modifier = Modifier
.weight(1f) .weight(1f)
.heightIn(min = 48.dp, max = 120.dp), .heightIn(min = 48.dp, max = 120.dp),
colors = TextFieldDefaults.colors( colors = OutlinedTextFieldDefaults.colors(
focusedTextColor = Color.Companion.White, focusedTextColor = Constants.AppColors.OnBackground,
unfocusedTextColor = Color.Companion.White, unfocusedTextColor = Constants.AppColors.OnSurface,
focusedContainerColor = Color(0xFF334155), focusedContainerColor = Constants.AppColors.SurfaceVariant,
unfocusedContainerColor = Color(0xFF334155), unfocusedContainerColor = Constants.AppColors.SurfaceVariant,
cursorColor = Color(0xFFA855F7), cursorColor = Constants.AppColors.Primary,
focusedIndicatorColor = Color(0xFF6366F1), focusedBorderColor = Constants.AppColors.Primary,
unfocusedIndicatorColor = Color(0xFF475569) unfocusedBorderColor = Color.Transparent
), ),
shape = androidx.compose.foundation.shape.RoundedCornerShape(24.dp), shape = RoundedCornerShape(24.dp),
maxLines = 4 maxLines = 4
) )
Spacer(modifier = Modifier.Companion.width(12.dp))
// Send Button // Send Button
FloatingActionButton( FloatingActionButton(
onClick = { onClick = {
if (prompt.isNotBlank() && !isLoading) { if (prompt.isNotBlank() && !isLoading) {
scope.launch { scope.launch {
// Add user message
chatMessages = chatMessages + ChatMessage( chatMessages = chatMessages + ChatMessage(
message = prompt, message = prompt,
isUser = true isUser = true
@ -485,18 +424,14 @@ fun AIHelperScreen(
} }
} }
val fullPrompt = val fullPrompt = "$notesContext\n\nPertanyaan: $userPrompt\n\nBerikan jawaban dalam bahasa Indonesia yang natural dan membantu."
"$notesContext\n\nPertanyaan: $userPrompt\n\nBerikan jawaban dalam bahasa Indonesia yang natural dan membantu."
val result = generativeModel.generateContent(fullPrompt) val result = generativeModel.generateContent(fullPrompt)
val response = result.text ?: "Tidak ada respons dari AI" val response = result.text ?: "Tidak ada respons dari AI"
// Add AI response
chatMessages = chatMessages + ChatMessage( chatMessages = chatMessages + ChatMessage(
message = response, message = response,
isUser = false isUser = false
) )
} catch (e: Exception) { } catch (e: Exception) {
errorMessage = "Error: ${e.message}" errorMessage = "Error: ${e.message}"
} finally { } finally {
@ -505,21 +440,14 @@ fun AIHelperScreen(
} }
} }
}, },
containerColor = Color.Companion.Transparent, containerColor = Constants.AppColors.Primary,
modifier = Modifier.Companion modifier = Modifier.size(48.dp)
.size(48.dp)
.background(
brush = Brush.Companion.linearGradient(
colors = listOf(Color(0xFF6366F1), Color(0xFFA855F7))
),
shape = CircleShape
)
) { ) {
Icon( Icon(
Icons.Default.Send, Icons.Default.Send,
contentDescription = "Send", contentDescription = "Send",
tint = Color.Companion.White, tint = Color.White,
modifier = Modifier.Companion.size(24.dp) modifier = Modifier.size(20.dp)
) )
} }
} }

54
app/src/main/java/com/example/notesai/presentation/screens/ai/components/ChatBubble.kt
View File

@ -1,11 +1,16 @@
package com.example.notesai.presentation.screens.ai.components package com.example.notesai.presentation.screens.ai.components
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AutoAwesome import androidx.compose.material.icons.filled.AutoAwesome
@ -15,6 +20,7 @@ import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
@ -24,6 +30,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import com.example.notesai.data.model.ChatMessage import com.example.notesai.data.model.ChatMessage
import com.example.notesai.util.Constants
import java.text.SimpleDateFormat import java.text.SimpleDateFormat
import java.util.Date import java.util.Date
import java.util.Locale import java.util.Locale
@ -41,28 +48,34 @@ fun ChatBubble(
horizontalArrangement = if (message.isUser) Arrangement.End else Arrangement.Start horizontalArrangement = if (message.isUser) Arrangement.End else Arrangement.Start
) { ) {
if (!message.isUser) { if (!message.isUser) {
// Ganti ikon bintang dengan ikon robot/sparkles Box(
Icon(
Icons.Default.AutoAwesome, // Atau bisa diganti dengan ikon lain seperti AutoAwesome
contentDescription = null,
tint = Color(0xFF6366F1), // Warna ungu/biru untuk AI
modifier = Modifier modifier = Modifier
.size(32.dp) .size(32.dp)
.padding(end = 8.dp) .background(
color = Constants.AppColors.Primary.copy(alpha = 0.1f),
shape = CircleShape
),
contentAlignment = Alignment.Center
) {
Icon(
Icons.Default.AutoAwesome,
contentDescription = null,
tint = Constants.AppColors.Primary,
modifier = Modifier.size(16.dp)
) )
} }
Spacer(modifier = Modifier.width(8.dp))
}
Column( Column(
modifier = Modifier.fillMaxWidth(0.85f), modifier = Modifier.fillMaxWidth(0.85f),
horizontalAlignment = if (message.isUser) Alignment.End else Alignment.Start horizontalAlignment = if (message.isUser) Alignment.End else Alignment.Start
) { ) {
Card( Surface(
colors = CardDefaults.cardColors( color = if (message.isUser)
containerColor = if (message.isUser) Constants.AppColors.Primary
Color(0xFF6366F1)
else else
Color(0xFF1E293B) Constants.AppColors.SurfaceVariant,
),
shape = RoundedCornerShape( shape = RoundedCornerShape(
topStart = 16.dp, topStart = 16.dp,
topEnd = 16.dp, topEnd = 16.dp,
@ -73,7 +86,7 @@ fun ChatBubble(
Column(modifier = Modifier.padding(12.dp)) { Column(modifier = Modifier.padding(12.dp)) {
Text( Text(
message.message, message.message,
color = Color.White, color = if (message.isUser) Color.White else Constants.AppColors.OnSurface,
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
lineHeight = 20.sp lineHeight = 20.sp
) )
@ -85,21 +98,25 @@ fun ChatBubble(
) { ) {
Text( Text(
dateFormat.format(Date(message.timestamp)), dateFormat.format(Date(message.timestamp)),
color = Color.White.copy(0.6f), color = if (message.isUser)
Color.White.copy(0.7f)
else
Constants.AppColors.OnSurfaceTertiary,
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
fontSize = 11.sp,
modifier = Modifier.padding(top = 4.dp) modifier = Modifier.padding(top = 4.dp)
) )
if (!message.isUser) { if (!message.isUser) {
IconButton( IconButton(
onClick = onCopy, onClick = onCopy,
modifier = Modifier.size(32.dp) modifier = Modifier.size(28.dp)
) { ) {
Icon( Icon(
Icons.Default.ContentCopy, Icons.Default.ContentCopy,
contentDescription = "Copy", contentDescription = "Copy",
tint = Color.White.copy(0.7f), tint = Constants.AppColors.OnSurfaceVariant,
modifier = Modifier.size(16.dp) modifier = Modifier.size(14.dp)
) )
} }
} }
@ -110,8 +127,9 @@ fun ChatBubble(
if (showCopied && !message.isUser) { if (showCopied && !message.isUser) {
Text( Text(
"✓ Disalin", "✓ Disalin",
color = Color(0xFF10B981), color = Constants.AppColors.Success,
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
fontSize = 11.sp,
modifier = Modifier.padding(top = 4.dp, start = 8.dp) modifier = Modifier.padding(top = 4.dp, start = 8.dp)
) )
} }

32
app/src/main/java/com/example/notesai/presentation/screens/ai/components/CompactStatItem.kt
View File

@ -1,11 +1,15 @@
package com.example.notesai.presentation.screens.ai.components package com.example.notesai.presentation.screens.ai.components
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -14,29 +18,45 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.notesai.util.Constants
@Composable @Composable
fun CompactStatItem(label: String, value: String, color: Color) { fun CompactStatItem(
icon: androidx.compose.ui.graphics.vector.ImageVector,
value: String,
label: String
) {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(6.dp),
modifier = Modifier modifier = Modifier
.background( .background(
color = Color(0xFF1E293B), color = Constants.AppColors.SurfaceVariant,
shape = RoundedCornerShape(8.dp) shape = RoundedCornerShape(8.dp)
) )
.padding(horizontal = 12.dp, vertical = 8.dp) .padding(horizontal = 12.dp, vertical = 8.dp)
) { ) {
Icon(
icon,
contentDescription = null,
tint = Constants.AppColors.Primary,
modifier = Modifier.size(16.dp)
)
Column {
Text( Text(
value, value,
style = MaterialTheme.typography.titleMedium, style = MaterialTheme.typography.titleMedium,
color = color, color = Constants.AppColors.OnBackground,
fontWeight = FontWeight.Bold fontWeight = FontWeight.Bold,
fontSize = 16.sp
) )
Spacer(modifier = Modifier.width(4.dp))
Text( Text(
label, label,
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
color = Color(0xFF94A3B8) color = Constants.AppColors.OnSurfaceTertiary,
fontSize = 11.sp
) )
} }
} }
}

33
app/src/main/java/com/example/notesai/presentation/screens/ai/components/SuggestionChip.kt
View File

@ -1,6 +1,7 @@
package com.example.notesai.presentation.screens.ai.components package com.example.notesai.presentation.screens.ai.components
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -8,44 +9,48 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lightbulb
import androidx.compose.material.icons.filled.Star import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Card import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.notesai.util.Constants
@Composable @Composable
fun SuggestionChip(text: String, onSelect: (String) -> Unit) { fun SuggestionChip(
Card( text: String,
modifier = Modifier onSelect: (String) -> Unit
.padding(vertical = 4.dp) ) {
.clickable { onSelect(text) }, Surface(
colors = CardDefaults.cardColors( onClick = { onSelect(text) },
containerColor = Color(0xFF1E293B) color = Constants.AppColors.SurfaceVariant,
),
shape = RoundedCornerShape(12.dp) shape = RoundedCornerShape(12.dp)
) { ) {
Row( Row(
modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp), modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { ) {
Icon( Icon(
Icons.Default.Star, Icons.Default.Lightbulb,
contentDescription = null, contentDescription = null,
tint = Color(0xFF6366F1), tint = Constants.AppColors.Primary,
modifier = Modifier.size(16.dp) modifier = Modifier.size(16.dp)
) )
Spacer(modifier = Modifier.width(8.dp))
Text( Text(
text, text,
color = Color.White, color = Constants.AppColors.OnSurface,
style = MaterialTheme.typography.bodyMedium style = MaterialTheme.typography.bodyMedium,
fontSize = 14.sp
) )
} }
} }

17
app/src/main/java/com/example/notesai/presentation/screens/main/MainScreen.kt
View File

@ -1,4 +1,3 @@
// File: presentation/screens/main/MainScreen.kt
package com.example.notesai.presentation.screens.main package com.example.notesai.presentation.screens.main
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
@ -28,7 +27,7 @@ fun MainScreen(
onNoteClick: (Note) -> Unit, onNoteClick: (Note) -> Unit,
onPinToggle: (Note) -> Unit, onPinToggle: (Note) -> Unit,
onCategoryDelete: (Category) -> Unit, onCategoryDelete: (Category) -> Unit,
onCategoryEdit: (Category, String, Long, Long) -> Unit // Parameter baru onCategoryEdit: (Category, String, Long, Long) -> Unit
) { ) {
Column(modifier = Modifier.fillMaxSize()) { Column(modifier = Modifier.fillMaxSize()) {
if (selectedCategory == null) { if (selectedCategory == null) {
@ -58,7 +57,12 @@ fun MainScreen(
} else { } else {
LazyVerticalStaggeredGrid( LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(2), columns = StaggeredGridCells.Fixed(2),
contentPadding = PaddingValues(16.dp), contentPadding = PaddingValues(
start = 16.dp,
end = 16.dp,
top = 16.dp,
bottom = 100.dp // Extra space untuk floating bottom bar
),
horizontalArrangement = Arrangement.spacedBy(12.dp), horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalItemSpacing = 12.dp, verticalItemSpacing = 12.dp,
modifier = Modifier.fillMaxSize() modifier = Modifier.fillMaxSize()
@ -102,7 +106,12 @@ fun MainScreen(
} else { } else {
LazyVerticalStaggeredGrid( LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(2), columns = StaggeredGridCells.Fixed(2),
contentPadding = PaddingValues(16.dp), contentPadding = PaddingValues(
start = 16.dp,
end = 16.dp,
top = 16.dp,
bottom = 100.dp // Extra space untuk floating bottom bar
),
horizontalArrangement = Arrangement.spacedBy(12.dp), horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalItemSpacing = 12.dp, verticalItemSpacing = 12.dp,
modifier = Modifier.fillMaxSize() modifier = Modifier.fillMaxSize()

255
app/src/main/java/com/example/notesai/presentation/screens/main/components/CategoryCard.kt
View File

@ -1,21 +1,28 @@
// File: presentation/screens/main/components/CategoryCard.kt
package com.example.notesai.presentation.screens.main.components package com.example.notesai.presentation.screens.main.components
import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.* import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.outlined.FolderOpen
import androidx.compose.material3.* import androidx.compose.material3.*
import androidx.compose.runtime.* import androidx.compose.runtime.*
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.notesai.data.model.Category import com.example.notesai.data.model.Category
import com.example.notesai.util.Constants
@Composable @Composable
fun CategoryCard( fun CategoryCard(
@ -28,16 +35,33 @@ fun CategoryCard(
var showDeleteConfirm by remember { mutableStateOf(false) } var showDeleteConfirm by remember { mutableStateOf(false) }
var showEditDialog by remember { mutableStateOf(false) } var showEditDialog by remember { mutableStateOf(false) }
var showMenu by remember { mutableStateOf(false) } var showMenu by remember { mutableStateOf(false) }
var isPressed by remember { mutableStateOf(false) }
// Smooth scale animation
val scale by animateFloatAsState(
targetValue = if (isPressed) 0.95f else 1f,
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
),
label = "scale"
)
// Delete Confirmation Dialog // Delete Confirmation Dialog
if (showDeleteConfirm) { if (showDeleteConfirm) {
AlertDialog( AlertDialog(
onDismissRequest = { showDeleteConfirm = false }, onDismissRequest = { showDeleteConfirm = false },
title = { Text("Pindahkan ke Sampah?", color = Color.White) }, title = {
Text(
"Pindahkan ke Sampah?",
color = Constants.AppColors.OnBackground,
fontWeight = FontWeight.Bold
)
},
text = { text = {
Text( Text(
"Kategori '${category.name}' dan semua catatan di dalamnya akan dipindahkan ke sampah.", "Kategori '${category.name}' dan $noteCount catatan di dalamnya akan dipindahkan ke sampah.",
color = Color.White color = Constants.AppColors.OnSurfaceVariant
) )
}, },
confirmButton = { confirmButton = {
@ -47,23 +71,19 @@ fun CategoryCard(
showDeleteConfirm = false showDeleteConfirm = false
}, },
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFFEF4444) containerColor = Constants.AppColors.Error
) )
) { ) {
Text("Hapus", color = Color.White) Text("Hapus", color = Color.White)
} }
}, },
dismissButton = { dismissButton = {
Button( TextButton(onClick = { showDeleteConfirm = false }) {
onClick = { showDeleteConfirm = false }, Text("Batal", color = Constants.AppColors.OnSurfaceVariant)
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF64748B)
)
) {
Text("Batal", color = Color.White)
} }
}, },
containerColor = Color(0xFF1E293B) containerColor = Constants.AppColors.Surface,
shape = RoundedCornerShape(Constants.Radius.Large.dp)
) )
} }
@ -79,13 +99,19 @@ fun CategoryCard(
) )
} }
// Main Card - Minimalist Design
Card( Card(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.scale(scale)
.clickable(onClick = onClick), .clickable(onClick = onClick),
shape = RoundedCornerShape(20.dp), shape = RoundedCornerShape(Constants.Radius.Large.dp),
colors = CardDefaults.cardColors(containerColor = Color.Transparent), colors = CardDefaults.cardColors(
elevation = CardDefaults.cardElevation(defaultElevation = 0.dp) containerColor = Constants.AppColors.Surface
),
elevation = CardDefaults.cardElevation(
defaultElevation = Constants.Elevation.Small.dp
)
) { ) {
Box( Box(
modifier = Modifier modifier = Modifier
@ -93,67 +119,81 @@ fun CategoryCard(
.background( .background(
brush = Brush.linearGradient( brush = Brush.linearGradient(
colors = listOf( colors = listOf(
Color(category.gradientStart), Color(category.gradientStart).copy(alpha = 0.1f),
Color(category.gradientEnd) Color(category.gradientEnd).copy(alpha = 0.05f)
) )
) )
) )
.padding(20.dp)
) { ) {
Column { Column(
modifier = Modifier
.fillMaxWidth()
.padding(Constants.Spacing.Large.dp)
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.Top
) {
// Icon dengan gradient accent
Box(
modifier = Modifier
.size(48.dp)
.clip(RoundedCornerShape(Constants.Radius.Medium.dp))
.background(
brush = Brush.linearGradient(
colors = listOf(
Color(category.gradientStart).copy(alpha = 0.2f),
Color(category.gradientEnd).copy(alpha = 0.1f)
)
)
),
contentAlignment = Alignment.Center
) {
Icon( Icon(
Icons.Default.Folder, Icons.Outlined.FolderOpen,
contentDescription = null, contentDescription = null,
tint = Color.White.copy(0.9f), tint = Color(category.gradientStart),
modifier = Modifier.size(32.dp) modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.height(12.dp))
Text(
category.name,
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
color = Color.White
)
Spacer(modifier = Modifier.height(4.dp))
Text(
"$noteCount catatan",
style = MaterialTheme.typography.bodySmall,
color = Color.White.copy(0.8f)
) )
} }
// Menu Button (Titik Tiga) // Menu Button
Box( Box {
modifier = Modifier.align(Alignment.TopEnd)
) {
IconButton( IconButton(
onClick = { showMenu = true } onClick = { showMenu = true },
modifier = Modifier.size(32.dp)
) { ) {
Icon( Icon(
Icons.Default.MoreVert, Icons.Default.MoreVert,
contentDescription = "Menu", contentDescription = "Menu",
tint = Color.White.copy(0.9f) tint = Constants.AppColors.OnSurfaceVariant,
modifier = Modifier.size(20.dp)
) )
} }
DropdownMenu( DropdownMenu(
expanded = showMenu, expanded = showMenu,
onDismissRequest = { showMenu = false }, onDismissRequest = { showMenu = false },
modifier = Modifier.background(Color(0xFF1E293B)) modifier = Modifier.background(Constants.AppColors.SurfaceElevated)
) { ) {
DropdownMenuItem( DropdownMenuItem(
text = { text = {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp) horizontalArrangement = Arrangement.spacedBy(Constants.Spacing.Small.dp)
) { ) {
Icon( Icon(
Icons.Default.Edit, Icons.Default.Edit,
contentDescription = null, contentDescription = null,
tint = Color(0xFF6366F1), tint = Constants.AppColors.Primary,
modifier = Modifier.size(20.dp) modifier = Modifier.size(18.dp)
)
Text(
"Edit Kategori",
color = Constants.AppColors.OnSurface,
fontSize = 14.sp
) )
Text("Edit Kategori", color = Color.White)
} }
}, },
onClick = { onClick = {
@ -166,15 +206,19 @@ fun CategoryCard(
text = { text = {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp) horizontalArrangement = Arrangement.spacedBy(Constants.Spacing.Small.dp)
) { ) {
Icon( Icon(
Icons.Default.Delete, Icons.Default.Delete,
contentDescription = null, contentDescription = null,
tint = Color(0xFFEF4444), tint = Constants.AppColors.Error,
modifier = Modifier.size(20.dp) modifier = Modifier.size(18.dp)
)
Text(
"Pindah ke Sampah",
color = Constants.AppColors.OnSurface,
fontSize = 14.sp
) )
Text("Pindah ke Sampah", color = Color.White)
} }
}, },
onClick = { onClick = {
@ -185,6 +229,40 @@ fun CategoryCard(
} }
} }
} }
Spacer(modifier = Modifier.height(Constants.Spacing.Medium.dp))
// Category Name
Text(
category.name,
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold,
color = Constants.AppColors.OnBackground,
fontSize = 18.sp
)
Spacer(modifier = Modifier.height(Constants.Spacing.ExtraSmall.dp))
// Note Count dengan subtle styling
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(4.dp)
) {
Icon(
Icons.Default.Description,
contentDescription = null,
tint = Constants.AppColors.OnSurfaceTertiary,
modifier = Modifier.size(14.dp)
)
Text(
"$noteCount catatan",
style = MaterialTheme.typography.bodySmall,
color = Constants.AppColors.OnSurfaceTertiary,
fontSize = 13.sp
)
}
}
}
} }
} }
@ -194,31 +272,23 @@ fun EditCategoryDialog(
onDismiss: () -> Unit, onDismiss: () -> Unit,
onSave: (String, Long, Long) -> Unit onSave: (String, Long, Long) -> Unit
) { ) {
val gradients = listOf(
Pair(0xFF6366F1L, 0xFFA855F7L),
Pair(0xFFEC4899L, 0xFFF59E0BL),
Pair(0xFF8B5CF6L, 0xFFEC4899L),
Pair(0xFF06B6D4L, 0xFF3B82F6L),
Pair(0xFF10B981L, 0xFF059669L),
Pair(0xFFF59E0BL, 0xFFEF4444L),
Pair(0xFF6366F1L, 0xFF8B5CF6L),
Pair(0xFFEF4444L, 0xFFDC2626L)
)
var name by remember { mutableStateOf(category.name) } var name by remember { mutableStateOf(category.name) }
var selectedGradient by remember { var selectedGradient by remember {
mutableStateOf( mutableStateOf(
gradients.indexOfFirst { Constants.AppColors.CategoryColors.indexOfFirst {
it.first == category.gradientStart && it.second == category.gradientEnd it.first == category.gradientStart && it.second == category.gradientEnd
}.takeIf { it >= 0 } ?: 0 }.takeIf { it >= 0 } ?: 0
) )
} }
AlertDialog( AlertDialog(
onDismissRequest = onDismiss, onDismissRequest = onDismiss,
containerColor = Color(0xFF1E293B), containerColor = Constants.AppColors.Surface,
shape = RoundedCornerShape(Constants.Radius.Large.dp),
title = { title = {
Text( Text(
"Edit Kategori", "Edit Kategori",
color = Color.White, color = Constants.AppColors.OnBackground,
fontWeight = FontWeight.Bold fontWeight = FontWeight.Bold
) )
}, },
@ -227,42 +297,51 @@ fun EditCategoryDialog(
OutlinedTextField( OutlinedTextField(
value = name, value = name,
onValueChange = { name = it }, onValueChange = { name = it },
label = { Text("Nama Kategori", color = Color(0xFF94A3B8)) }, label = {
Text(
"Nama Kategori",
color = Constants.AppColors.OnSurfaceVariant
)
},
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
colors = TextFieldDefaults.colors( colors = OutlinedTextFieldDefaults.colors(
focusedTextColor = Color.White, focusedTextColor = Constants.AppColors.OnBackground,
unfocusedTextColor = Color.White, unfocusedTextColor = Constants.AppColors.OnSurface,
focusedContainerColor = Color(0xFF334155), focusedContainerColor = Constants.AppColors.SurfaceVariant,
unfocusedContainerColor = Color(0xFF334155), unfocusedContainerColor = Constants.AppColors.SurfaceVariant,
cursorColor = Color(0xFFA855F7), cursorColor = Constants.AppColors.Primary,
focusedIndicatorColor = Color(0xFFA855F7), focusedBorderColor = Constants.AppColors.Primary,
unfocusedIndicatorColor = Color(0xFF64748B) unfocusedBorderColor = Constants.AppColors.Border
), ),
shape = RoundedCornerShape(12.dp) shape = RoundedCornerShape(Constants.Radius.Medium.dp)
) )
Spacer(modifier = Modifier.height(20.dp)) Spacer(modifier = Modifier.height(20.dp))
Text( Text(
"Pilih Gradient:", "Pilih Warna:",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
color = Color.White, color = Constants.AppColors.OnSurface,
fontWeight = FontWeight.SemiBold fontWeight = FontWeight.SemiBold,
fontSize = 14.sp
) )
Spacer(modifier = Modifier.height(12.dp)) Spacer(modifier = Modifier.height(12.dp))
gradients.chunked(4).forEach { row -> Constants.AppColors.CategoryColors.chunked(4).forEach { row ->
Row( Row(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp) horizontalArrangement = Arrangement.spacedBy(8.dp)
) { ) {
row.forEachIndexed { _, gradient -> row.forEachIndexed { _, gradient ->
val globalIndex = gradients.indexOf(gradient) val globalIndex = Constants.AppColors.CategoryColors.indexOf(gradient)
val isSelected = selectedGradient == globalIndex
Box( Box(
modifier = Modifier modifier = Modifier
.weight(1f) .weight(1f)
.aspectRatio(1f) .aspectRatio(1f)
.clip(RoundedCornerShape(12.dp)) .clip(RoundedCornerShape(Constants.Radius.Medium.dp))
.background( .background(
brush = Brush.linearGradient( brush = Brush.linearGradient(
colors = listOf( colors = listOf(
@ -274,7 +353,11 @@ fun EditCategoryDialog(
.clickable { selectedGradient = globalIndex }, .clickable { selectedGradient = globalIndex },
contentAlignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
if (selectedGradient == globalIndex) { this@Row.AnimatedVisibility(
visible = isSelected,
enter = scaleIn() + fadeIn(),
exit = scaleOut() + fadeOut()
) {
Icon( Icon(
Icons.Default.Check, Icons.Default.Check,
contentDescription = null, contentDescription = null,
@ -293,19 +376,13 @@ fun EditCategoryDialog(
Button( Button(
onClick = { onClick = {
if (name.isNotBlank()) { if (name.isNotBlank()) {
val gradient = gradients[selectedGradient] val gradient = Constants.AppColors.CategoryColors[selectedGradient]
onSave(name, gradient.first, gradient.second) onSave(name, gradient.first, gradient.second)
} }
}, },
enabled = name.isNotBlank(), enabled = name.isNotBlank(),
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent containerColor = Constants.AppColors.Primary
),
modifier = Modifier.background(
brush = Brush.linearGradient(
colors = listOf(Color(0xFF6366F1), Color(0xFFA855F7))
),
shape = RoundedCornerShape(8.dp)
) )
) { ) {
Text("Simpan", color = Color.White, fontWeight = FontWeight.Bold) Text("Simpan", color = Color.White, fontWeight = FontWeight.Bold)
@ -313,7 +390,7 @@ fun EditCategoryDialog(
}, },
dismissButton = { dismissButton = {
TextButton(onClick = onDismiss) { TextButton(onClick = onDismiss) {
Text("Batal", color = Color(0xFF94A3B8)) Text("Batal", color = Constants.AppColors.OnSurfaceVariant)
} }
} }
) )

95
app/src/main/java/com/example/notesai/presentation/screens/main/components/NoteCard.kt
View File

@ -1,38 +1,28 @@
// File: presentation/screens/main/components/NoteCard.kt
package com.example.notesai.presentation.screens.main.components package com.example.notesai.presentation.screens.main.components
import androidx.compose.animation.core.*
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
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.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.StarBorder import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Card import androidx.compose.material3.*
import androidx.compose.material3.CardDefaults import androidx.compose.runtime.*
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import com.example.notesai.data.model.Note import com.example.notesai.data.model.Note
import com.example.notesai.util.Constants
import java.text.SimpleDateFormat import java.text.SimpleDateFormat
import java.util.Date import java.util.*
import java.util.Locale
@OptIn(ExperimentalFoundationApi::class) @OptIn(ExperimentalFoundationApi::class)
@Composable @Composable
@ -43,86 +33,105 @@ fun NoteCard(
) { ) {
val dateFormat = SimpleDateFormat("dd MMM, HH:mm", Locale("id", "ID")) val dateFormat = SimpleDateFormat("dd MMM, HH:mm", Locale("id", "ID"))
// Scale animation on press
var isPressed by remember { mutableStateOf(false) }
val scale by animateFloatAsState(
targetValue = if (isPressed) 0.95f else 1f,
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
),
label = "scale"
)
Card( Card(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.combinedClickable( .scale(scale)
onClick = onClick, .combinedClickable(onClick = onClick),
),
shape = RoundedCornerShape(16.dp), shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors( colors = CardDefaults.cardColors(
containerColor = Color(0xFF1E293B) containerColor = Constants.AppColors.SurfaceVariant // Lebih terang dari Surface
), ),
elevation = CardDefaults.cardElevation(defaultElevation = 4.dp) elevation = CardDefaults.cardElevation(
defaultElevation = 2.dp
)
) { ) {
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(16.dp) .padding(16.dp)
) { ) {
// Header: Title + Pin
Row( Row(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.Top verticalAlignment = Alignment.Top
) { ) {
// Judul // Title
Text( Text(
note.title, note.title,
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
color = Color.White, color = Constants.AppColors.OnBackground,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
maxLines = 2, maxLines = 2,
overflow = TextOverflow.Ellipsis overflow = TextOverflow.Ellipsis,
fontSize = 18.sp
) )
// Pin Button
IconButton( IconButton(
onClick = onPinClick, onClick = onPinClick,
modifier = Modifier.size(24.dp) modifier = Modifier.size(32.dp)
) { ) {
Icon( Icon(
if (note.isPinned) Icons.Filled.Star else Icons.Outlined.StarBorder, if (note.isPinned) Icons.Filled.Star else Icons.Outlined.StarBorder,
contentDescription = "Pin", contentDescription = "Pin",
tint = if (note.isPinned) Color(0xFFFBBF24) else Color.Gray, tint = if (note.isPinned) Constants.AppColors.Warning else Constants.AppColors.OnSurfaceVariant,
modifier = Modifier.size(18.dp) modifier = Modifier.size(18.dp)
) )
} }
} }
// Deskripsi // Content Preview
if (note.content.isNotEmpty()) { if (note.content.isNotEmpty()) {
Spacer(modifier = Modifier.height(12.dp)) Spacer(modifier = Modifier.height(12.dp))
Text(
text = "Deskripsi",
style = MaterialTheme.typography.labelSmall,
color = Color(0xFF94A3B8),
fontWeight = FontWeight.SemiBold
)
Spacer(modifier = Modifier.height(4.dp))
Text( Text(
note.content, note.content,
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
maxLines = 4, maxLines = 4,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
color = Color(0xFFCBD5E1), color = Constants.AppColors.OnSurfaceVariant,
lineHeight = 20.sp lineHeight = 20.sp,
fontSize = 14.sp
) )
} }
Spacer(modifier = Modifier.height(12.dp)) Spacer(modifier = Modifier.height(16.dp))
// Divider
HorizontalDivider( HorizontalDivider(
color = Color(0xFF334155), color = Constants.AppColors.Divider,
thickness = 1.dp thickness = 1.dp
) )
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(12.dp))
// Timestamp // Footer: Timestamp
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text( Text(
dateFormat.format(Date(note.timestamp)), dateFormat.format(Date(note.timestamp)),
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
color = Color(0xFF64748B) color = Constants.AppColors.OnSurfaceTertiary,
fontSize = 12.sp
) )
} }
} }
} }
}

110
app/src/main/java/com/example/notesai/util/Constants.kt
View File

@ -1,11 +1,10 @@
// File: util/Constants.kt
package com.example.notesai.util package com.example.notesai.util
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
object Constants { object Constants {
// App Info // App Info
const val APP_NAME = "AI Notes" const val APP_NAME = "NotesAI"
const val APP_VERSION = "1.0.0" const val APP_VERSION = "1.0.0"
// DataStore // DataStore
@ -17,37 +16,88 @@ object Constants {
const val MAX_CHAT_PREVIEW_LINES = 2 const val MAX_CHAT_PREVIEW_LINES = 2
const val GRID_COLUMNS = 2 const val GRID_COLUMNS = 2
// Gradients // NEW MINIMALIST COLOR PALETTE
val GRADIENT_PRESETS = listOf(
Pair(0xFF6366F1L, 0xFFA855F7L),
Pair(0xFFEC4899L, 0xFFF59E0BL),
Pair(0xFF8B5CF6L, 0xFFEC4899L),
Pair(0xFF06B6D4L, 0xFF3B82F6L),
Pair(0xFF10B981L, 0xFF059669L),
Pair(0xFFF59E0BL, 0xFFEF4444L),
Pair(0xFF6366F1L, 0xFF8B5CF6L),
Pair(0xFFEF4444L, 0xFFDC2626L)
)
// Colors
object AppColors { object AppColors {
val Primary = Color(0xFF6366F1) // Backgrounds - Neutral Dark
val Secondary = Color(0xFFA855F7) val Background = Color(0xFF0A0A0A) // Almost black
val Background = Color(0xFF0F172A) val Surface = Color(0xFF141414) // Dark gray
val Surface = Color(0xFF1E293B) val SurfaceVariant = Color(0xFF1E1E1E) // Lighter dark gray
val SurfaceVariant = Color(0xFF334155) val SurfaceElevated = Color(0xFF252525) // Elevated surface
val OnBackground = Color(0xFFE2E8F0)
val OnSurface = Color(0xFFE2E8F0) // Primary Accent - Subtle Blue (minimalist)
val Success = Color(0xFF10B981) val Primary = Color(0xFF3B82F6) // Modern blue
val Error = Color(0xFFEF4444) val PrimaryVariant = Color(0xFF60A5FA) // Light blue
val Warning = Color(0xFFFBBF24) val PrimaryContainer = Color(0xFF1E3A8A) // Dark blue container
val TextSecondary = Color(0xFF94A3B8)
val TextTertiary = Color(0xFF64748B) // Secondary Accent - Minimal use
val Divider = Color(0xFF334155) val Secondary = Color(0xFF8B5CF6) // Subtle purple
val SecondaryVariant = Color(0xFFA78BFA) // Light purple
// Text Colors - High contrast for readability
val OnBackground = Color(0xFFFFFFFF) // Pure white
val OnSurface = Color(0xFFE5E5E5) // Off white
val OnSurfaceVariant = Color(0xFF9CA3AF) // Gray text
val OnSurfaceTertiary = Color(0xFF6B7280) // Muted gray
// Functional Colors
val Success = Color(0xFF10B981) // Green
val Error = Color(0xFFEF4444) // Red
val Warning = Color(0xFFFBBF24) // Amber
val Info = Color(0xFF3B82F6) // Blue
// Border & Dividers - Subtle
val Border = Color(0xFF2A2A2A) // Subtle border
val Divider = Color(0xFF1F1F1F) // Very subtle divider
// Overlay & Shadows
val Overlay = Color(0xFF000000).copy(alpha = 0.5f)
val Shadow = Color(0xFF000000).copy(alpha = 0.3f)
// Category Colors - Minimalist Palette (subtle & muted)
val CategoryColors = listOf(
Pair(0xFF3B82F6L, 0xFF60A5FAL), // Blue gradient
Pair(0xFF8B5CF6L, 0xFFA78BFAL), // Purple gradient
Pair(0xFF10B981L, 0xFF34D399L), // Green gradient
Pair(0xFFF59E0BL, 0xFFFBBF24L), // Amber gradient
Pair(0xFFEF4444L, 0xFFF87171L), // Red gradient
Pair(0xFF06B6D4L, 0xFF22D3EEL), // Cyan gradient
Pair(0xFFEC4899L, 0xFFF472B6L), // Pink gradient
Pair(0xFF6366F1L, 0xFF818CF8L) // Indigo gradient
)
} }
// Animation // Animation Durations
const val ANIMATION_DURATION = 300 const val ANIMATION_DURATION_SHORT = 150
const val ANIMATION_DURATION_MEDIUM = 300
const val ANIMATION_DURATION_LONG = 500
const val FADE_IN_DURATION = 200 const val FADE_IN_DURATION = 200
const val FADE_OUT_DURATION = 200 const val FADE_OUT_DURATION = 200
// Spacing System (8dp grid)
object Spacing {
const val ExtraSmall = 4
const val Small = 8
const val Medium = 16
const val Large = 24
const val ExtraLarge = 32
const val XXLarge = 48
}
// Corner Radius
object Radius {
const val Small = 8
const val Medium = 12
const val Large = 16
const val ExtraLarge = 20
const val Round = 999
}
// Elevation
object Elevation {
const val None = 0
const val Small = 2
const val Medium = 4
const val Large = 8
const val ExtraLarge = 16
}
} }

6
gradle/libs.versions.toml
View File

@ -9,6 +9,9 @@ appcompat = "1.6.1"
material = "1.10.0" material = "1.10.0"
activity = "1.8.0" activity = "1.8.0"
constraintlayout = "2.1.4" constraintlayout = "2.1.4"
uiText = "1.10.0"
material3 = "1.4.0"
animationCore = "1.10.0"
[libraries] [libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" } androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@ -19,6 +22,9 @@ androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version
material = { group = "com.google.android.material", name = "material", version.ref = "material" } material = { group = "com.google.android.material", name = "material", version.ref = "material" }
androidx-activity = { group = "androidx.activity", name = "activity", version.ref = "activity" } androidx-activity = { group = "androidx.activity", name = "activity", version.ref = "activity" }
androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "constraintlayout" } androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "constraintlayout" }
androidx-ui-text = { group = "androidx.compose.ui", name = "ui-text", version.ref = "uiText" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }
androidx-animation-core = { group = "androidx.compose.animation", name = "animation-core", version.ref = "animationCore" }
[plugins] [plugins]
android-application = { id = "com.android.application", version.ref = "agp" } android-application = { id = "com.android.application", version.ref = "agp" }