client initial commit

client/src/App.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {RouterView} from 'vue-router'
+import NavBar from '@components/Navbar.vue'
+import {onMounted, onUnmounted, ref, watch} from 'vue'
+import {updateIsMobile, routerTransitioning} from "@/globals.ts";
+
+let resizeObserver: ResizeObserver | null = null;
+
+const isFooterFixed = ref(document.documentElement.scrollHeight <= window.innerHeight);
+
+watch(() => document.documentElement.scrollHeight, () => {
+    console.debug('Document height changed, updating footer position');
+    updateFooterPosition();
+});
+
+const updateFooterPosition = () => {
+    isFooterFixed.value = document.documentElement.scrollHeight <= window.innerHeight;
+};
+
+onMounted(() => {
+    resizeObserver = new ResizeObserver(() => updateFooterPosition());
+    resizeObserver.observe(document.documentElement)
+    window.addEventListener("resize", updateIsMobile)
+});
+onUnmounted(() => {
+    window.removeEventListener("resize", updateIsMobile)
+    if (resizeObserver) resizeObserver.disconnect();
+});
+</script>
+
+<template>
+    <NavBar/>
+    <div class="router-view">
+        <RouterView v-slot="{Component}">
+            <template v-if="Component">
+                <transition name="fade-tabs" mode="out-in" appear @before-enter="routerTransitioning=true"
+                            @after-enter="routerTransitioning = false">
+                    <component :is="Component"/>
+                </transition>
+            </template>
+            <template v-else>
+                Loading...
+            </template>
+        </RouterView>
+    </div>
+    <div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
+        <div class="footer-content">
+            <p style="text-align: center; margin-top: 1rem">&copy;2025 <a href="https://github.com/L10nhunter">L10nhunter</a>.
+                All rights reserved.</p>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.footer-fixed {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+</style>