feat: show appwrite version

src/lib/layout/footer.svelte

@@ -1,5 +1,6 @@
 <script>
     import { consoleMode, Mode } from '$lib/constants';
+    import { version } from '$routes/console/store';
 
     const currentYear = new Date().getFullYear();
 </script>
@@ -12,6 +13,14 @@
                     {#if consoleMode === Mode.CLOUD}
                         <span class="icon-cloud" />
                     {/if}
+                    {#if $version}
+                        <a
+                            class="text"
+                            href="https://github.com/appwrite/appwrite/blob/master/CHANGES.md"
+                            target="_blank">
+                            Version {$version}
+                        </a>
+                    {/if}
                 </div>
             </li>
             <li class="inline-links-item">
@@ -50,4 +59,8 @@
     .main-footer {
         margin-block-start: auto;
     }
+
+    [class^='icon-']:not(:hover) {
+        color: hsl(var(--color-neutral-50));
+    }
 </style>

src/lib/stores/sdk.ts

@@ -12,7 +12,7 @@ import {
     Users
 } from '@aw-labs/appwrite-console';
 
-const endpoint =
+export const endpoint =
     import.meta.env.VITE_APPWRITE_ENDPOINT?.toString() ?? `${window?.location?.origin}/v1`;
 const clientConsole = new Client();
 clientConsole.setEndpoint(endpoint).setProject('console');

src/routes/console/+layout.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-    import Shell from '$lib/layout/shell.svelte';
-    import SideNavigation from '$lib/layout/navigation.svelte';
-    import Header from '$lib/layout/header.svelte';
-    import { newOrgModal } from '$lib/stores/organization';
-    import Create from './createOrganization.svelte';
-    import { page } from '$app/stores';
     import { beforeNavigate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
+    import { page } from '$app/stores';
+    import { INTERVAL } from '$lib/constants';
     import { Logs } from '$lib/layout';
+    import Footer from '$lib/layout/footer.svelte';
+    import Header from '$lib/layout/header.svelte';
+    import SideNavigation from '$lib/layout/navigation.svelte';
+    import Shell from '$lib/layout/shell.svelte';
+    import { feedback } from '$lib/stores/app';
     import { log } from '$lib/stores/logs';
+    import { newOrgModal } from '$lib/stores/organization';
+    import { wizard } from '$lib/stores/wizard';
     import { onMount } from 'svelte';
     import { loading } from '../store';
-    import { feedback } from '$lib/stores/app';
-    import { INTERVAL } from '$lib/constants';
-    import Footer from '$lib/layout/footer.svelte';
+    import Create from './createOrganization.svelte';
 
     onMount(() => {
         loading.set(false);

src/routes/console/+layout.ts

@@ -0,0 +1,11 @@
+import { endpoint } from '$lib/stores/sdk';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    const response = await fetch(`${endpoint}/health/version`);
+    const data = await response.json();
+
+    return {
+        version: data?.version ?? null
+    };
+};

src/routes/console/store.ts

@@ -0,0 +1,4 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+
+export const version = derived(page, ($page) => $page.data.version as string | null);

svelte.config.js

@@ -10,6 +10,9 @@ const config = {
         accessors: process.env.VITEST
     },
     kit: {
+        alias: {
+            $routes: './src/routes'
+        },
         adapter: adapter({
             fallback: 'index.html'
         }),