aadd (#79)

Author: baseplate-admin

src/frontend/src/lib/logos/github.svelte

@@ -0,0 +1,10 @@
+<svg
+	role="img"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	class="text-black dark:text-white"
+	fill="currentColor"
+	><title>GitHub</title><path
+		d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+	/></svg
+>

src/frontend/src/routes/(needs_onboarding)/(navbar_and_footer)/(fancy_grid)/+page.svelte

@@ -486,7 +486,7 @@
 					</svg>
 					<Skeleton class="mb-6 h-16 w-16 rounded-full" />
 					<Skeleton class="mb-2 h-7 w-48" />
-					<Skeleton class="mx-auto mb-8 h-6 w-103.5 md:mb-4 md:h-5" />
+					<Skeleton class="mx-auto mb-8 h-6 w-full md:mb-4 md:h-5" />
 					<Skeleton class="h-19 w-64 rounded-md md:h-14 md:w-56" />
 				</div>
 			{:else if isUploadComplete}

src/frontend/src/routes/(needs_onboarding)/(navbar_and_footer)/+layout.svelte

@@ -11,7 +11,7 @@
 	import { kebab_to_initials } from '$lib/functions/string-conversion';
 	import { make_libravatar_url } from '$lib/functions/libravatar';
 	import { page } from '$app/state';
-
+	import GithubIcon from '$lib/logos/github.svelte';
 	const { isAuthenticated, user: userData } = useAuth();
 
 	let { children } = $props();
@@ -42,6 +42,13 @@
 			icon: Link
 		}
 	];
+	const footerLinks = [
+		{
+			href: 'https://github.com/chithi-dev/chithi',
+			name: 'Source',
+			icon: GithubIcon
+		}
+	];
 </script>
 
 <div class="flex min-h-screen min-w-screen flex-col bg-background text-foreground">
@@ -132,25 +139,21 @@
 
 	<!-- Footer -->
 	<footer class="border-t border-border p-4">
-		<div class="mx-auto w-full max-w-6xl">
+		<div class="mx-auto w-full">
 			<nav
 				class="flex flex-row flex-wrap items-center justify-end gap-2 text-sm text-muted-foreground md:gap-6"
 			>
-				<!-- <a
-					href="/donate"
-					class="font-medium whitespace-nowrap transition-colors hover:text-foreground">Donate</a
-				>
-				<a href="/cli" class="font-medium whitespace-nowrap transition-colors hover:text-foreground"
-					>CLI</a
-				> 
-				<a
-					href="/dmca"
-					class="font-medium whitespace-nowrap transition-colors hover:text-foreground">DMCA</a
-				> -->
-				<a
-					href="https://github.com/chithi-dev/chithi"
-					class="font-medium whitespace-nowrap transition-colors hover:text-foreground">Source</a
-				>
+				{#each footerLinks as footer_item}
+					<Button
+						variant="ghost"
+						size="icon"
+						aria-label={footer_item.name}
+						class="transition-colors hover:text-foreground"
+						href={footer_item.href}
+					>
+						<footer_item.icon />
+					</Button>
+				{/each}
 			</nav>
 		</div>
 	</footer>

src/frontend/src/routes/+layout.svelte

@@ -5,10 +5,7 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
-	import { page } from '$app/state';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
-	import { goto } from '$app/navigation';
-	import { useOnboarding } from '$lib/queries/onboarding';
 
 	let { children } = $props();
 
@@ -30,7 +27,7 @@
 
 <ModeWatcher />
 <QueryClientProvider client={queryClient}>
-	<SvelteQueryDevtools />
+	<SvelteQueryDevtools buttonPosition="top-left" />
 
 	{@render children()}
 </QueryClientProvider>