feat: refined new cache status view

Signed-off-by: Matt Gleich <git@mattglei.ch>

Author: gleich

src/lib/time.ts

@@ -6,7 +6,7 @@ import advancedFormat from 'dayjs/plugin/advancedFormat';
 dayjs.extend(duration);
 dayjs.extend(advancedFormat);
 
-export function renderDate(date: Dayjs, now: Dayjs): string {
+export function renderDate(date: Dayjs, now: Dayjs, lowercaseDayOfWeek: boolean = false): string {
 	const dayjsDate = dayjs(date);
 	const yesterday = now.subtract(1, 'day');
 	const tomorrow = now.add(1, 'day');
@@ -34,7 +34,9 @@ export function renderDate(date: Dayjs, now: Dayjs): string {
 		dayOfWeek = dayjsDate.format('dddd, MMM Do');
 	}
 
-	return dayjsDate.format(`[${dayOfWeek}] [at] h:mm A`);
+	return dayjsDate.format(
+		`[${lowercaseDayOfWeek ? dayOfWeek.toLowerCase() : dayOfWeek}] [at] h:mm A`
+	);
 }
 
 export function fromNow(date: Dayjs, currentTime: Dayjs): string {

src/lib/time/formatted-date.svelte

@@ -23,8 +23,4 @@
 	});
 </script>
 
-{#if lowercase}
-	{renderDate(dayjsTime, now).toLowerCase()} [{fromNow(dayjsTime, now).toLowerCase()}]
-{:else}
-	{renderDate(dayjsTime, now)} [{fromNow(dayjsTime, now)}]
-{/if}
+{renderDate(dayjsTime, now, lowercase)} [{fromNow(dayjsTime, now)}]

src/routes/writing/lcp/cache-status.svelte

@@ -64,9 +64,10 @@
 		display: flex;
 		align-items: center;
 		padding: 4px 10px;
+		height: fit-content;
 		border-top: 0 !important;
 		border-right: 0 !important;
-		font-size: 14px;
+		font-size: 13px;
 		border-bottom-left-radius: var(--border-radius);
 	}
 
@@ -84,6 +85,7 @@
 
 	.refresh {
 		padding: 20px 10px;
+		padding-bottom: 15px;
 		display: flex;
 		gap: 10px;
 		align-items: center;
@@ -101,7 +103,6 @@
 
 	.updated {
 		color: grey;
-		border-top: 1px solid var(--border);
 		padding: 5px;
 		display: flex;
 		align-items: center;