@axium/calendar 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/calendar",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {

package/routes/calendar/+page.svelte

@@ -13,8 +13,9 @@
 
 	const { user } = data.session;
 
-	const today = new Date();
-	today.setHours(0, 0, 0, 0);
+	const now = new SvelteDate();
+	setInterval(() => now.setTime(Date.now()), 60_000);
+	const today = $derived(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0));
 
 	let start = new SvelteDate(data.filter.start);
 	let end = new SvelteDate(data.filter.end);
@@ -61,7 +62,6 @@
 	<button class="event-init icon-text" command="show-modal" commandfor="event-init"><Icon i="plus" /> New Event</button>
 	<div class="bar">
 		<button onclick={() => start.setTime(today.getTime())}>Today</button>
-		<span class="label">{weekDays[0].toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
 		<button
 			style:display="contents"
 			onclick={() => {
@@ -76,6 +76,7 @@
 				end.setDate(end.getDate() + spanDays);
 			}}><Icon i="chevron-right" /></button
 		>
+		<span class="label">{weekDays[0].toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
 	</div>
 	<div id="cal-list">
 		<Calendar.Select bind:start bind:end />
@@ -190,7 +191,7 @@
 											class="reset"
 											onclick={() => (eventEditId = event.id)}
 											command="show-modal"
-											commandfor="event-delete"><Icon i="trash" /></button
+											commandfor="event-delete"><Icon i="trash-can" /></button
 										>
 										<button class="reset" command="hide-popover" commandfor="event-popover:{event.id}"
 											><Icon i="xmark" /></button
@@ -249,6 +250,10 @@
 									{/if}
 								</Popover>
 							{/each}
+
+							{#if today.getTime() == day.getTime()}
+								<div class="now" style:top="{(now.getHours() * 60 + now.getMinutes()) / 14.4}%"></div>
+							{/if}
 						</div>
 					</div>
 				{/each}
@@ -567,10 +572,29 @@
 			.day-content {
 				flex-grow: 1;
 				position: relative;
+
+				.now {
+					position: absolute;
+					width: 100%;
+					border-bottom: 1px solid hsl(0 33 var(--fg-light));
+					z-index: 9;
+					pointer-events: none;
+
+					&::before {
+						content: '';
+						position: absolute;
+						left: -0.25em;
+						top: -0.25em;
+						width: 0.5em;
+						height: 0.5em;
+						border-radius: 50%;
+						background-color: hsl(0 33 var(--fg-light));
+					}
+				}
 			}
 
 			.event {
-				width: 100%;
+				width: calc(100% - 0.5em);
 				position: absolute;
 				border-radius: 0.5em;
 				padding: 0.25em;