feat: Implement circular progress indicator and enhance UI/UX

This commit introduces a circular progress indicator for the timer, refactors UI components, and improves the overall user experience with refined animations and layout adjustments.

Specific changes:
- Added `TimerDisplay.kt` component with a circular progress indicator option.
- Modified `Timer.kt`:
    - Renamed to `Timer.kt` (previously `Timer.kt` under `handlers` package).
    - `isTimerRunning` is now a `mutableStateOf<Boolean>`.
    - Added `timerProgress` to track progress as a float.
    - `formattedTime` is now a `mutableStateOf<String>`.
    - Added `getTimerProgress()` method.
- Updated `PomoDoro.kt`:
    - Renamed from `PomoDoro.kt` (previously `PomoDoro.kt` under `handlers` package).
    - Renamed `routineSettings` to `appSettings`.
    - `PomoDoroSettings` properties are now `mutableStateOf` or `mutableFloatStateOf`.
    - Added `enableProgressIndicator` to `PomoDoroSettings`.
    - `currentTimer` is now `timerInstance`.
    - `workSessionsCompleted` is now a `mutableStateOf<Int>`.
- Updated `TimerScreen.kt`:
    - Renamed from `Timer.kt`.
    - Integrated `TimerDisplay` component.
    - Adjusted spacing based on `enableProgressIndicator`.
    - Display work sessions completed count.
- Updated `SettingsScreen.kt`:
    - Renamed from `Settings.kt`.
    - Added vertical scrollbar.
    - Added a toggle option for `enableProgressIndicator`.
- Updated `App.kt`:
    - Reduced screen transition animation duration from 400ms to 300ms.
- Updated `main.kt`:
    - Adjusted minimum window dimensions.
- Updated `ThemeManager.kt` and theme files:
    - Added `mantle`, `surface`, `surface100`, `surface200` color properties.
    - Renamed `textLight` to `text100` and `textDark` to `text200`.
- Updated `README.md`:
    - Changed main icon from PNG to SVG.
    - Added a GIF showcasing the app.
    - Updated screenshot.
- Updated `index.html` (website):
    - Added app GIF.
    - Updated hero section layout and styling.
    - Updated download links to version `1.1.0`.
- Updated `build.gradle.kts`:
    - Incremented `packageVersion` to `1.1.0`.
- Updated `.github/workflows/build.yml`:
    - Changed release name suffix from Alpha to Beta.
- Added `pomolin.gif` to `docs/static` and `gitAssets`.

Author: lockedmutex

.github/workflows/build.yml

@@ -247,7 +247,7 @@ jobs:
       - name: Create Draft Release
         uses: softprops/action-gh-release@v2
         with:
-          name: Pomolin v${{ steps.get_version.outputs.version }} Alpha
+          name: Pomolin v${{ steps.get_version.outputs.version }} Beta
           draft: true
           tag_name: v${{ steps.get_version.outputs.version }}
           body: |

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="composeApp/src/desktopMain/composeResources/drawable/Pomolin.png" alt="Pomolin app icon" width="200"/>
+  <img src="gitAssets/Pomolin.svg" alt="Pomolin app icon" width="200"/>
 </p>
 
 
@@ -14,7 +14,9 @@
 <h1 align="center">Pomolin</h1>
 
 <p align="center">
-  <img src="gitAssets/pomolin.avif" alt="Pomolin app icon" width="450"/>
+  <img src="gitAssets/pomolin.avif" width="45%" />
+  &nbsp;&nbsp;
+  <img src="gitAssets/pomolin.gif" width="45%" />
 </p>
 
 A simple, beautiful, and minimalist Pomodoro timer for your desktop. Designed to help you stay
@@ -28,8 +30,8 @@ intervals.
 * **Animated Timer:** The timer digits animate smoothly, offering a dynamic and visually
   pleasing experience.
 * **Interactive Controls:**
-	* The Play/Pause button animates to clearly indicate the timer's state.
-	* A satisfying rotation animation plays on the reset button when clicked.
+    * The Play/Pause button animates to clearly indicate the timer's state.
+    * A satisfying rotation animation plays on the reset button when clicked.
 * **Routine Management:** Switch between **Pomodoro (25 min)**, **Short Break (5
   min)**, and **Long Break (20 min)** routines.
 * **Audio Notifications:** The app plays a sound when the timer completes.
@@ -53,7 +55,8 @@ You can download the latest version of Pomolin from the
 1. Download the `.dmg` or `.pkg` file.
 2. Open the file and drag the `Pomolin.app` to your `Applications` folder.
 
-> NOTE: For macOS, it will not allow you to run the .pkg or the app installed using .dmg, to do so you will have to go
+> NOTE: For macOS, it will not allow you to run the .pkg or the app installed using .dmg, to do so
+> you will have to go
 > to privacy and security in settings, and then allow the execution of the app.
 
 ### Linux
@@ -63,7 +66,8 @@ You can download the latest version of Pomolin from the
    ```bash
    sudo apt install ./pomolin_1.0.2_amd64.deb
    ```
-   or Install `AppImage` using `AppImageLauncher` or equivalent. You can run the AppImage just by double-clicking on it
+   or Install `AppImage` using `AppImageLauncher` or equivalent. You can run the AppImage just by
+   double-clicking on it
    too, no need to install it.
 
    > NOTE: AppImage is the preferred way to run the app on Linux-based distributions.
@@ -93,18 +97,18 @@ To build Pomolin from the source code, you'll need to have **JDK** and **Git** i
 
 2. **Build the application using Gradle:**
 
-	* On **Linux**:
-	    ```bash
-		./gradlew packageReleaseDeb
-		```
-	* On **macOS**:
-	    ```bash
-		./gradlew packageReleaseDmg
-		```
-	* On **Windows**:
-	    ```bash
-		.\gradlew.bat packageReleaseMsi
-		```
+    * On **Linux**:
+        ```bash
+        ./gradlew packageReleaseDeb
+        ```
+    * On **macOS**:
+        ```bash
+        ./gradlew packageReleaseDmg
+        ```
+    * On **Windows**:
+        ```bash
+        .\gradlew.bat packageReleaseMsi
+        ```
 
 3. The compiled application will be available in the `composeApp/build/compose/binaries/` directory.
 

composeApp/build.gradle.kts

@@ -49,7 +49,7 @@ compose.desktop {
 				TargetFormat.Rpm
 			)
 			packageName = "pomolin"
-			packageVersion = "1.0.4"
+			packageVersion = "1.1.0"
 			description = "A simple Pomodoro App written in Kotlin. Focus on what matters! "
 			vendor = "RedddFoxxyy"
 			licenseFile.set(project.file("../LICENSE"))

composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/App.kt

@@ -9,9 +9,13 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.safeContentPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import com.redddfoxxyy.pomolin.handlers.PomoDoro
+import com.redddfoxxyy.pomolin.data.PomoDoro
 import com.redddfoxxyy.pomolin.ui.screens.SettingsScreen
 import com.redddfoxxyy.pomolin.ui.screens.TimerScreen
 import org.jetbrains.compose.ui.tooling.preview.Preview
@@ -33,21 +37,20 @@ fun App() {
 				transitionSpec = {
 					if (targetState == Screen.Settings) {
 						slideInHorizontally(
-							animationSpec = tween(400),
+							animationSpec = tween(300),
 							initialOffsetX = { fullWidth -> -fullWidth }
 						) togetherWith
-
 								slideOutHorizontally(
-									animationSpec = tween(400),
+									animationSpec = tween(300),
 									targetOffsetX = { fullWidth -> fullWidth }
 								)
 					} else {
 						slideInHorizontally(
-							animationSpec = tween(400),
+							animationSpec = tween(300),
 							initialOffsetX = { fullWidth -> fullWidth }
 						) togetherWith
 								slideOutHorizontally(
-									animationSpec = tween(400),
+									animationSpec = tween(300),
 									targetOffsetX = { fullWidth -> -fullWidth }
 								)
 					}

…om/redddfoxxyy/pomolin/handlers/Audio.kt …in/com/redddfoxxyy/pomolin/data/Audio.ktcomposeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/handlers/Audio.kt renamed to composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/data/Audio.kt composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/handlers/Audio.kt renamed to composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/data/Audio.kt

@@ -1,4 +1,4 @@
-package com.redddfoxxyy.pomolin.handlers
+package com.redddfoxxyy.pomolin.data
 
 import javazoom.jlgui.basicplayer.BasicPlayer
 import pomolin.composeapp.generated.resources.Res

…redddfoxxyy/pomolin/handlers/PomoDoro.kt …com/redddfoxxyy/pomolin/data/PomoDoro.ktcomposeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/handlers/PomoDoro.kt renamed to composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/data/PomoDoro.kt composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/handlers/PomoDoro.kt renamed to composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/data/PomoDoro.kt

@@ -1,6 +1,7 @@
-package com.redddfoxxyy.pomolin.handlers
+package com.redddfoxxyy.pomolin.data
 
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 
@@ -10,74 +11,75 @@ enum class PomoDoroRoutines(val displayName: String) {
 	LongBreak("Long Break")
 }
 
-internal data class PomoDoroSettings(
-	var workingDuration: Float = 25f,
-	var shortBreakDuration: Float = 5f,
-	var longBreakDuration: Float = 20f,
-	var workSessionDuration: Int = 2
-)
+internal class PomoDoroSettings {
+	var workingDuration by mutableFloatStateOf(25f)
+	var shortBreakDuration by mutableFloatStateOf(5f)
+	var longBreakDuration by mutableFloatStateOf(20f)
+	var workSessionDuration by mutableStateOf(4)
+	var enableProgressIndicator by mutableStateOf(true)
+}
 
 
 internal class PomoDoro {
 	internal val appAudioManager = Audio()
-	internal val currentTimer by mutableStateOf(Timer(25f, appAudioManager, ::progressToNextRoutine))
+	internal val timerInstance = Timer(25f, appAudioManager, ::progressToNextRoutine)
 
 	internal val routineList = PomoDoroRoutines.entries.toList()
-	internal var routineSettings by mutableStateOf(PomoDoroSettings())
+	internal var appSettings = PomoDoroSettings()
 	internal var currentRoutine by mutableStateOf(PomoDoroRoutines.Working)
-	private var workSessionsCompleted = 0
+	internal var workSessionsCompleted by mutableStateOf(0)
 
-	internal fun startTimer() = currentTimer.startTimer()
-	internal fun pauseTimer() = currentTimer.pause()
+	internal fun startTimer() = timerInstance.startTimer()
+	internal fun pauseTimer() = timerInstance.pause()
 	internal fun resetTimer() {
-		currentTimer.reset()
+		timerInstance.reset()
 	}
 
 	private fun getDurationFor(routine: PomoDoroRoutines): Float = when (routine) {
-		PomoDoroRoutines.Working -> routineSettings.workingDuration
-		PomoDoroRoutines.ShortBreak -> routineSettings.shortBreakDuration
-		PomoDoroRoutines.LongBreak -> routineSettings.longBreakDuration
+		PomoDoroRoutines.Working -> appSettings.workingDuration
+		PomoDoroRoutines.ShortBreak -> appSettings.shortBreakDuration
+		PomoDoroRoutines.LongBreak -> appSettings.longBreakDuration
 	}
 
 	internal fun setRoutine(routine: PomoDoroRoutines) {
-		currentTimer.updateDuration(getDurationFor(routine))
+		timerInstance.updateDuration(getDurationFor(routine))
 		currentRoutine = routine
 	}
 
 	internal fun changeWorkingDuration(duration: Float) {
 		val durationStepped = duration.toInt().toFloat()
-		routineSettings = routineSettings.copy(workingDuration = durationStepped)
+		appSettings.workingDuration = durationStepped
 		if (currentRoutine == PomoDoroRoutines.Working) {
-			currentTimer.updateDuration(durationStepped)
+			timerInstance.updateDuration(durationStepped)
 		}
 	}
 
 	internal fun changeShortBreakDuration(duration: Float) {
 		val durationStepped = duration.toInt().toFloat()
-		routineSettings = routineSettings.copy(shortBreakDuration = durationStepped)
+		appSettings.shortBreakDuration = durationStepped
 		if (currentRoutine == PomoDoroRoutines.ShortBreak) {
-			currentTimer.updateDuration(durationStepped)
+			timerInstance.updateDuration(durationStepped)
 		}
 	}
 
 	internal fun changeLongBreakDuration(duration: Float) {
 		val durationStepped = duration.toInt().toFloat()
-		routineSettings = routineSettings.copy(longBreakDuration = durationStepped)
+		appSettings.longBreakDuration = durationStepped
 		if (currentRoutine == PomoDoroRoutines.LongBreak) {
-			currentTimer.updateDuration(durationStepped)
+			timerInstance.updateDuration(durationStepped)
 		}
 	}
 
 	internal fun changeWorkSessionDuration(duration: Float) {
 		val durationStepped = duration.toInt()
-		routineSettings = routineSettings.copy(workSessionDuration = durationStepped)
+		appSettings.workSessionDuration = durationStepped
 	}
 
 	private fun progressToNextRoutine() {
 		when (currentRoutine) {
 			PomoDoroRoutines.Working -> {
 				workSessionsCompleted++
-				if (workSessionsCompleted >= routineSettings.workSessionDuration) {
+				if (workSessionsCompleted >= appSettings.workSessionDuration) {
 					setRoutine(PomoDoroRoutines.LongBreak)
 					workSessionsCompleted = 0
 				} else {

…om/redddfoxxyy/pomolin/handlers/Timer.kt …in/com/redddfoxxyy/pomolin/data/Timer.ktcomposeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/handlers/Timer.kt renamed to composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/data/Timer.kt composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/handlers/Timer.kt renamed to composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/data/Timer.kt

@@ -1,32 +1,40 @@
-package com.redddfoxxyy.pomolin.handlers
+package com.redddfoxxyy.pomolin.data
 
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import kotlinx.coroutines.*
-import kotlinx.coroutines.flow.MutableStateFlow
+import androidx.compose.runtime.setValue
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 
 internal class Timer(durationMinutes: Float, val audio: Audio, private val onFinished: () -> Unit) {
-	private var coroutineScope = CoroutineScope(Dispatchers.Main)
 
-	// Timer Handlers
+	internal var isTimerRunning by mutableStateOf(false)
 	private var initialTimeMillis = (durationMinutes * 60 * 1000L).toLong()
 	private var remainingTimeMillis = initialTimeMillis
-	internal val formatedTime = mutableStateOf(formatTime(initialTimeMillis))
+	private var timerProgress = 1.0f
+	internal var formatedTime by mutableStateOf(formatTime(initialTimeMillis))
 	private var lastUpdateTime = 0L
-	internal val isTimerRunning = MutableStateFlow(false)
+
+	private var coroutineScope = CoroutineScope(Dispatchers.Main)
+
 	private var completionAudioPlayed = false
 
 	internal fun startTimer() {
-		if (isTimerRunning.value || remainingTimeMillis <= 0L) return
+		if (isTimerRunning || remainingTimeMillis <= 0L) return
 
 		coroutineScope.launch {
 			lastUpdateTime = System.currentTimeMillis()
-			isTimerRunning.value = true
+			isTimerRunning = true
 
-			while (isTimerRunning.value && remainingTimeMillis > 0) {
+			while (isTimerRunning && remainingTimeMillis > 0) {
 				delay(50L)
 				val elapsed = System.currentTimeMillis() - lastUpdateTime
 				remainingTimeMillis -= elapsed
 				lastUpdateTime = System.currentTimeMillis()
+				timerProgress = remainingTimeMillis.toFloat() / initialTimeMillis.toFloat()
 
 				if (remainingTimeMillis < 0L) {
 					remainingTimeMillis = 0L
@@ -37,26 +45,26 @@ internal class Timer(durationMinutes: Float, val audio: Audio, private val onFin
 					completionAudioPlayed = true
 				}
 
-				formatedTime.value = formatTime(remainingTimeMillis)
+				formatedTime = formatTime(remainingTimeMillis)
 			}
 
 			if (remainingTimeMillis <= 0L) {
-				isTimerRunning.value = false
+				isTimerRunning = false
 				completionAudioPlayed = false
 				onFinished()
 			}
 		}
 	}
 
 	internal fun pause() {
-		isTimerRunning.value = false
+		isTimerRunning = false
 	}
 
 	internal fun reset() {
-		isTimerRunning.value = false
+		isTimerRunning = false
 		remainingTimeMillis = initialTimeMillis
 		lastUpdateTime = 0L
-		formatedTime.value = formatTime(initialTimeMillis)
+		formatedTime = formatTime(initialTimeMillis)
 		completionAudioPlayed = false
 		coroutineScope.cancel()
 		coroutineScope = CoroutineScope(Dispatchers.Main)
@@ -66,7 +74,11 @@ internal class Timer(durationMinutes: Float, val audio: Audio, private val onFin
 		reset()
 		initialTimeMillis = (durationMinutes * 60 * 1000L).toLong()
 		remainingTimeMillis = initialTimeMillis
-		formatedTime.value = formatTime(initialTimeMillis)
+		formatedTime = formatTime(initialTimeMillis)
+	}
+
+	internal fun getTimerProgress(): Float {
+		return timerProgress
 	}
 
 	private fun formatTime(millis: Long): String {

composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/main.kt

@@ -12,7 +12,7 @@ import javax.swing.SwingUtilities
 
 fun main() = application {
 	val icon = painterResource(Res.drawable.Pomolin)
-	val minWindowDimensions = Pair(400, 570)
+	val minWindowDimensions = Pair(380, 530)
 	Window(
 		onCloseRequest = ::exitApplication,
 		title = "Pomolin",
@@ -28,7 +28,7 @@ fun main() = application {
 			minimumSize = Dimension(minWindowDimensions.first, minWindowDimensions.second)
 		}
 //		WindowDraggableArea {
-//			Box(Modifier.fillMaxWidth().height(20.dp).background(Color.DarkGray))
+//			Box(Modifier.fillMaxWidth().height(50.dp).background(Color.White))
 //		}
 		App()
 	}

composeApp/src/desktopMain/kotlin/com/redddfoxxyy/pomolin/ui/ThemeManager.kt

@@ -31,11 +31,16 @@ interface Theme {
 }
 
 interface ThemeColors {
-	val base: Color
+
 	val crust: Color
+	val mantle: Color
+	val base: Color
+	val surface: Color
+	val surface100: Color
+	val surface200: Color
 	val text: Color
-	val textLight: Color
-	val textDark: Color
+	val text100: Color
+	val text200: Color
 	val green: Color
 	val red: Color
 	val blue: Color