Improve the design for created/updated at

Author: AmrDeveloper

app/src/main/java/com/amrdeveloper/linkhub/ui/link/LinkScreen.kt

@@ -3,9 +3,12 @@ package com.amrdeveloper.linkhub.ui.link
 import android.webkit.URLUtil
 import androidx.activity.compose.BackHandler
 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.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
@@ -18,6 +21,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
@@ -90,7 +94,8 @@ fun LinkScreen(
 
     BackHandler(enabled = true) {
         if (uiPreferences.isAutoSavingEnabled()
-            && linkTitleErrorMessage.isEmpty() && linkUrlErrorMessage.isEmpty()) {
+            && linkTitleErrorMessage.isEmpty() && linkUrlErrorMessage.isEmpty()
+        ) {
             createOrUpdateLink()
             return@BackHandler
         }
@@ -178,20 +183,25 @@ fun LinkScreen(
             if (selectedFolderDry) {
                 if (uiPreferences.isDefaultFolderEnabled()) {
                     val defFolderId = uiPreferences.getDefaultFolderId()
-                    selectedFolder = folders.find { it.id == defFolderId } ?: folders.find { it.id == link.folderId } ?: folders[0]
+                    selectedFolder = folders.find { it.id == defFolderId }
+                        ?: folders.find { it.id == link.folderId } ?: folders[0]
                 } else {
                     selectedFolder = folders.find { it.id == link.folderId } ?: folders[0]
                 }
             }
 
             // Check if user created a new folder for this link and suggest it as the current link folder
             val newFolderCreatedName =
-                navController.currentBackStackEntry?.savedStateHandle?.get<String>(CREATED_FOLDER_NAME_KEY)
+                navController.currentBackStackEntry?.savedStateHandle?.get<String>(
+                    CREATED_FOLDER_NAME_KEY
+                )
             if (newFolderCreatedName != null) {
                 selectedFolder =
                     folders.find { it.name == newFolderCreatedName } ?: selectedFolder
                 link.folderId = selectedFolder.id
-                navController.currentBackStackEntry?.savedStateHandle?.remove<String>(CREATED_FOLDER_NAME_KEY)
+                navController.currentBackStackEntry?.savedStateHandle?.remove<String>(
+                    CREATED_FOLDER_NAME_KEY
+                )
             }
 
             FolderSelector(selectedFolder = selectedFolder, folders = folders) {
@@ -210,26 +220,7 @@ fun LinkScreen(
             }
 
             // Link metadata
-            if (currentLink != null) {
-                val dateFormatter = DateFormat.getDateTimeInstance()
-                Text(
-                    text = "Created at ${dateFormatter.format(currentLink.createdTime)}",
-                    textAlign = TextAlign.Center,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(4.dp)
-                )
-
-                if (currentLink.isUpdated) {
-                    Text(
-                        text = "Updated at ${dateFormatter.format(currentLink.lastUpdatedTime)}",
-                        textAlign = TextAlign.Center,
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(4.dp)
-                    )
-                }
-            }
+            currentLink?.let { LinkCreatedAndUpdatedTime(it) }
 
             when (taskState) {
                 TaskState.Success -> {
@@ -255,7 +246,7 @@ private fun isValidURI(url: String) =
     URLUtil.isValidUrl(url) && runCatching { URI(url) }.isSuccess
 
 @Composable
-fun LinkHeaderIcon() {
+private fun LinkHeaderIcon() {
     Icon(
         painter = painterResource(R.drawable.ic_link),
         contentDescription = "Link Icon",
@@ -267,7 +258,7 @@ fun LinkHeaderIcon() {
 }
 
 @Composable
-fun LinkInputField(
+private fun LinkInputField(
     label: String,
     value: String,
     errorMessage: String,
@@ -304,4 +295,63 @@ fun LinkInputField(
                 Text(text = errorMessage)
             }
         })
-}
+}
+
+@Composable
+private fun LinkCreatedAndUpdatedTime(link: Link) {
+    val dateFormatter = DateFormat.getDateTimeInstance()
+
+    Row(
+        modifier = Modifier.padding(8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_clock),
+            contentDescription = "Time Icon",
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .size(20.dp)
+                .padding(4.dp)
+        )
+
+        Text(
+            text = "Created at: ",
+            textAlign = TextAlign.Center,
+        )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Text(
+            text = "${dateFormatter.format(link.createdTime)}",
+            textAlign = TextAlign.Center,
+        )
+    }
+
+    if (link.lastUpdatedTime == -1L) return
+
+    Row(
+        modifier = Modifier.padding(8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_clock),
+            contentDescription = "Time Icon",
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .size(20.dp)
+                .padding(4.dp)
+        )
+
+        Text(
+            text = "Updated at: ",
+            textAlign = TextAlign.Center,
+        )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Text(
+            text = "${dateFormatter.format(link.lastUpdatedTime)}",
+            textAlign = TextAlign.Center,
+        )
+    }
+}

app/src/main/res/drawable/ic_clock.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="25dp" android:viewportHeight="1111" android:viewportWidth="1111" android:width="25dp">
+      
+    <path android:fillColor="#0C92F2" android:pathData="M972.8,592.1c0,-222.4 -179.9,-402.3 -402.3,-402.3s-402.3,179.9 -402.3,402.3 179.9,402.3 402.3,402.3 402.3,-179.9 402.3,-402.3zM256,592.1c0,-173.3 141.2,-314.5 314.5,-314.5s314.5,141.2 314.5,314.5 -141.2,314.5 -314.5,314.5 -314.5,-141.2 -314.5,-314.5z"/>
+      
+    <path android:fillColor="#0C92F2" android:pathData="M526.6,255.6h87.8v117h-87.8zM526.6,811.5h87.8v117h-87.8zM424.2,145.9c-32.9,-32.2 -77.5,-49.7 -125.1,-49 -97.3,1.5 -174.1,81.9 -172.6,178.5 0.7,46.8 20.5,91.4 53.4,122.9 8,8 17.6,15.4 27.1,21.2l47.5,-73.9c-5.1,-2.9 -9.5,-6.6 -13.2,-11 -16.8,-16.1 -26.3,-38 -27.1,-61.4 -0.7,-48.3 38,-88.5 86.3,-89.2 23.4,-0.7 46.1,8.8 62.2,24.9 8,8 14.6,17.6 19.7,27.8l87.8,-35.1c-8.8,-20.5 -29.3,-39.5 -46.1,-55.6zM943.5,416.5c9.5,-6.6 18.3,-13.9 26.3,-21.9 32.2,-32.9 49.7,-77.5 49,-125.1 -1.5,-97.3 -81.9,-174.1 -178.5,-172.6 -46.8,0.7 -91.4,20.5 -122.9,53.4 -10.2,10.2 -31.5,43.9 -37.3,57.8l81.9,32.2c0.7,-0.7 1.5,-2.2 2.2,-3.7 2.2,-2.9 4.4,-7.3 7.3,-11 2.9,-4.4 5.1,-8 7.3,-11 0.7,-1.5 2.2,-2.9 2.2,-3.7 16.1,-16.1 38,-26.3 61.4,-26.3 48.3,-0.7 88.5,38 89.2,86.3 0.7,23.4 -8.8,46.1 -24.9,62.2 -3.7,4.4 -8,8 -13.2,11 -2.2,1.5 -5.1,2.9 -7.3,4.4l42.4,76.8c5.1,-2.2 10.2,-5.1 14.6,-8.8z"/>
+      
+    <path android:fillColor="#a0caca" android:pathData="M570.5,592.1m-131.7,0a131.7,131.7 0,1 0,263.3 0,131.7 131.7,0 1,0 -263.3,0Z"/>
+      
+    <path android:fillColor="#61B6F2" android:pathData="M457.9,524c-1.5,2.2 -7.3,13.2 -8.8,17.6 -6.6,15.4 -10.2,32.2 -10.2,50.5 0,72.4 59.2,131.7 131.7,131.7v-131.7"/>
+      
+    <path android:fillColor="#ff2a2a" android:pathData="M570.5,723.7c73.1,0 131.7,-59.2 131.7,-131.7 0,-17.6 -13.2,-58.5 -15.4,-62.2 -0.7,-2.2 -2.2,-3.7 -2.9,-5.9 -0.7,-1.5 -112.6,68 -112.6,68l-0.7,131.7z"/>
+      
+    <path android:fillColor="#0C92F2" android:pathData="M310.9,774.9l62.2,62.2s0,4.4 -135.3,135.3c-54.9,51.9 -113.4,-11 -113.4,-11l186.5,-186.5zM782.6,852.5l62.2,-62.2 171.9,171.9s-45.3,52.7 -113.4,11c-120.7,-118.5 -120.7,-120.7 -120.7,-120.7zM241.4,548.2h109.7v87.8h-109.7zM789.9,548.2h117v87.8h-117z"/>
+    
+</vector>