Merge pull request #11 from aritra1999/feature/messages

fix: message form and minor ui updates
aritra1999 · Dec 10, 2024 · c768ce4 · c768ce4
2 parents 0369330 + 1c520d9
commit c768ce4
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 19 deletions.
diff --git a/src/lib/api/messages/messages.service.ts b/src/lib/api/messages/messages.service.ts
@@ -31,6 +31,7 @@ export const getMessage = async (
 		.select({
 			id: messages.id,
 			title: messages.title,
+			websiteId: messages.websiteId,
 			content: messages.content,
 			startTime: messages.startTime
 		})
@@ -103,6 +104,7 @@ export const createMessage = async (
 		.returning({
 			id: messages.id,
 			title: messages.title,
+			websiteId: messages.websiteId,
 			content: messages.content,
 			startTime: messages.startTime
 		})
@@ -141,6 +143,7 @@ export const updateMessage = async (
 		.returning({
 			id: messages.id,
 			title: messages.title,
+			websiteId: messages.websiteId,
 			content: messages.content,
 			startTime: messages.startTime
 		})

diff --git a/src/lib/components/ui/app-sidebar/nav-user.svelte b/src/lib/components/ui/app-sidebar/nav-user.svelte
@@ -48,7 +48,7 @@
 						<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 							<Avatar.Root class="h-8 w-8 rounded-lg">
 								<Avatar.Image src={user.image} alt={user.name} />
-								<Avatar.Fallback class="rounded-lg">CN</Avatar.Fallback>
+								<Avatar.Fallback class="rounded-lg">{user.name[0]}</Avatar.Fallback>
 							</Avatar.Root>
 							<div class="grid flex-1 text-left text-sm leading-tight">
 								<span class="truncate font-semibold">{user.name}</span>

diff --git a/src/lib/components/ui/status/status-chart.svelte b/src/lib/components/ui/status/status-chart.svelte
@@ -72,11 +72,6 @@
 	{#if statuses.length > 0}
 		<div class="flex w-full items-center justify-between text-xs">
 			<div>{prettifyDate(new Date(statuses[0].createdAt))}</div>
-			{#if statuses.length > 2}
-				<div>
-					{prettifyDate(new Date(statuses[Math.floor((statuses.length - 1) / 2)].createdAt))}
-				</div>
-			{/if}
 			<div>{prettifyDate(new Date(statuses[statuses.length - 1].createdAt))}</div>
 		</div>
 	{:else}

diff --git a/src/lib/components/ui/status/status-page-chart.svelte b/src/lib/components/ui/status/status-page-chart.svelte
@@ -10,13 +10,8 @@
 <div>
 	<div class="mb-2 flex w-full items-center justify-between">
 		{#if statuses.length > 0}
-			<div class="flex w-full items-center justify-between text-sm text-muted-foreground">
+			<div class="flex w-full items-center justify-between text-xs text-muted-foreground">
 				<div>{prettifyDate(new Date(statuses[0].createdAt))}</div>
-				{#if statuses.length > 2}
-					<div>
-						{prettifyDate(new Date(statuses[Math.floor((statuses.length - 1) / 2)].createdAt))}
-					</div>
-				{/if}
 				<div>{prettifyDate(new Date(statuses[statuses.length - 1].createdAt))}</div>
 			</div>
 		{:else}

diff --git a/src/lib/components/ui/theme/theme-switcher.svelte b/src/lib/components/ui/theme/theme-switcher.svelte
@@ -6,7 +6,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 </script>
 
-<Button onclick={toggleMode} variant="outline" class="justify-between">
+<Button onclick={toggleMode} variant="outline" class="justify-between border border-border">
 	{#if $mode === 'light'}
 		Light
 		<Sun class="h-[1.2rem] w-[1.2rem]" />

diff --git a/src/lib/db/schema.ts b/src/lib/db/schema.ts
@@ -201,7 +201,10 @@ export type SelectPartialStatus = Pick<
 	SelectStatus,
 	'status' | 'responseTime' | 'statusCode' | 'createdAt'
 >;
-export type SelectMessagePartial = Pick<SelectMessage, 'id' | 'title' | 'content' | 'startTime'>;
+export type SelectMessagePartial = Pick<
+	SelectMessage,
+	'id' | 'title' | 'content' | 'startTime' | 'websiteId'
+>;
 
 // Zod Schemas
 export const InsertProjectSchema = createInsertSchema(projects);

diff --git a/src/routes/(gaurded)/messages/+page.svelte b/src/routes/(gaurded)/messages/+page.svelte
@@ -8,8 +8,6 @@
 	import MessageDelete from '$lib/components/ui/messages/message-delete.svelte';
 	import { messageStore, selectedMessageStore } from '$lib/store/message.store';
 	import { prettifyDate } from '$lib/utils.js';
-	import Pencil from 'lucide-svelte/icons/pencil';
-	import Trash2 from 'lucide-svelte/icons/trash-2';
 	import X from 'lucide-svelte/icons/x';
 	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
 
@@ -26,11 +24,11 @@
 <section class="flex items-center justify-between">
 	<div class="flex items-center space-x-4">
 		<Header title="Messages" />
-		{#if data.selectedWebsite}
+		{#if data.websites && data.selectedWebsite}
 			<div class="flex items-center rounded-lg bg-sidebar py-2 pl-4 text-xs">
 				<div class="pb-0.5">
 					<span class="text-muted-foreground">Selected website: </span>
-					{data.websites.find((website) => website.id === data.selectedWebsite).name}
+					{data.websites.find((website) => website.id === data.selectedWebsite)?.name}
 				</div>
 				<Button variant="link" href="/messages" class="h-4">
 					<X class="size-2 " />
@@ -71,7 +69,7 @@
 					{#if message}
 						<Table.Row>
 							<Table.Cell class="w-52">
-								{data.websites.find((website) => website.id === message.websiteId).name}
+								{data.websites.find((website) => website.id === message.websiteId)?.name}
 							</Table.Cell>
 							<Table.Cell class="w-52">{message.title}</Table.Cell>
 							<Table.Cell>{message.content}</Table.Cell>