fix: prevent action issues caused by a element wrapping post compon…

…ent (#76)

Co-authored-by: moonlitgrace <[email protected]>

frontend/src/lib/components/modals/auth/forms/login.svelte

@@ -9,7 +9,7 @@
 
 	let { on_submit, goto_form }: FormProps = $props();
 
-	let errors = $state<Record<string, any> | undefined>();
+	let errors = $state<Record<string, string> | undefined>();
 	let pending = $state(false);
 
 	async function handle_submit(e: SubmitEvent) {

frontend/src/lib/components/modals/auth/forms/profile_create.svelte

@@ -8,7 +8,7 @@
 
 	let { goto_form }: FormProps = $props();
 
-	let errors = $state<Record<string, any> | undefined>();
+	let errors = $state<Record<string, string> | undefined>();
 	let pending = $state(false);
 
 	async function handle_submit(e: SubmitEvent) {

frontend/src/lib/components/modals/auth/forms/profile_select.svelte

@@ -10,7 +10,7 @@
 	import type { SubmitFunction } from '@sveltejs/kit';
 	import { close_modal } from '$lib/stores/modals.svelte';
 	import { invalidateAll } from '$app/navigation';
-	// @ts-ignore
+	// @ts-expect-error: too lazy to copy paste it
 	import daisyuiColorNames from 'daisyui/src/theming/colorNames';
 
 	let { forms_state, goto_form }: FormProps = $props();

frontend/src/lib/components/modals/auth/types.ts

@@ -4,7 +4,7 @@ export type FormSubmitData = Record<string, string | number | undefined>;
 
 export type Forms = keyof typeof forms;
 
-export type FormsState = { [K in Forms]: {} };
+export type FormsState = { [K in Forms]: object };
 
 export type FormProps = {
 	forms_state: FormsState;

frontend/src/lib/components/pages/home/post.svelte

@@ -21,41 +21,51 @@
 	let props: Props = $props();
 </script>
 
-<a
-	href="/q/{props.community.name}/posts/{props.slug}"
-	class="flex flex-col gap-2 rounded-2xl border border-neutral bg-base-300 p-4 transition-colors hover:bg-base-200"
+<div
+	class="relative flex flex-col gap-2 rounded-2xl border border-neutral bg-base-300 p-4 transition-colors hover:bg-base-200"
 >
+	<a
+		href="/q/{props.community.name}/posts/{props.slug}"
+		class="absolute inset-0"
+		aria-label={props.title}
+	></a>
 	<div class="flex items-center gap-2">
-		<Avatar src={props.community.avatar} alt={props.community.name} />
-		<h3 class="text-xs font-bold">q/{props.community.name}</h3>
+		<a href="/q/{props.community.name}" class="relative flex items-center gap-2">
+			<Avatar src={props.community.avatar} alt={props.community.name} />
+			<h3 class="text-xs font-bold">q/{props.community.name}</h3>
+		</a>
 		<coreicons-shape-circle variant="filled" class="size-0.5 text-base-content/75"
 		></coreicons-shape-circle>
 		<span class="text-xs font-medium text-base-content/75">{props.created_at}</span>
 	</div>
+
 	<h2 class="text-xl font-extrabold text-white">{props.title}</h2>
+
 	<p class="line-clamp-3 text-sm font-normal text-base-content" class:hidden={props.cover}>
 		{props.content}
 	</p>
+
 	<img class="rounded-xl" src={props.cover} alt="" />
-	<div class="mt-2 flex gap-4">
-		<div class="flex items-center gap-2">
+
+	<div class="relative mt-2 flex gap-4">
+		<button class="flex items-center gap-2">
 			<coreicons-shape-thumbs variant="up" class="size-4"></coreicons-shape-thumbs>
 			<span class="text-sm font-semibold">{readable(props.likes)}</span>
-		</div>
-		<div class="flex items-center gap-2">
+		</button>
+		<button class="flex items-center gap-2">
 			<coreicons-shape-thumbs variant="down" class="size-4"></coreicons-shape-thumbs>
 			<span class="text-sm font-semibold">{readable(props.dislikes)}</span>
-		</div>
-		<div class="flex items-center gap-2">
+		</button>
+		<button class="flex items-center gap-2">
 			<coreicons-shape-forum class="size-4"></coreicons-shape-forum>
 			<span class="text-sm font-semibold">{readable(props.comments)} Quibble(s)</span>
-		</div>
-		<div class="flex items-center gap-2">
+		</button>
+		<button class="flex items-center gap-2">
 			<coreicons-shape-share class="size-4"></coreicons-shape-share>
 			<span class="text-sm font-semibold">Share</span>
-		</div>
-		<div class="ml-auto flex items-center gap-2" aria-label="more">
+		</button>
+		<button class="ml-auto flex items-center gap-2" aria-label="more">
 			<coreicons-shape-more class="size-4 rotate-90"></coreicons-shape-more>
-		</div>
+		</button>
 	</div>
-</a>
+</div>

frontend/src/lib/functions/event_modifiers.ts

@@ -0,0 +1,6 @@
+export function stopPropagation<T>(func: (this: T, e: Event) => void) {
+	return function (this: T, e: Event) {
+		e.stopPropagation();
+		func.call(this, e);
+	};
+}

frontend/src/lib/stores/auth.svelte.ts

@@ -1,7 +1,7 @@
 import type { Nullable } from '$lib/types/shared';
 import type { Profile } from '$lib/types/user';
 
-let auth_state = $state<{
+const auth_state = $state<{
 	is_authenticated: boolean;
 	profile: Nullable<Profile>;
 }>({

frontend/src/lib/stores/modals.svelte.ts

@@ -3,17 +3,17 @@ import { SvelteMap } from 'svelte/reactivity';
 const modals = ['auth'] as const;
 type IModals = (typeof modals)[number];
 
-let modals_state = $state(new SvelteMap<IModals, boolean>(modals.map((item) => [item, false])));
+const modals_state = $state(new SvelteMap<IModals, boolean>(modals.map((item) => [item, false])));
 
 export function get_modals_state() {
 	return modals_state;
 }
 
 export function open_modal(modal: IModals) {
 	// close all modals first
-	for (let key of modals_state.keys()) {
+	modals_state.keys().forEach((key) => {
 		modals_state.set(key, false);
-	}
+	});
 	modals_state.set(modal, true);
 }