feat: Implement session management and routing for general creation

- Added session initialization in main.ts to manage user sessions.
- Updated router to include a new route for joining or creating a general.
- Enhanced session store with methods for managing session tokens and user profiles.
- Introduced new components for displaying city, general, nation, and command information.
- Implemented loading states and error handling in the main view.
- Created a skeleton loader component for better user experience during data fetching.
- Updated TypeScript definitions for route metadata to include new authentication requirements.

app/game-frontend/src/components/ui/PanelCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+interface Props {
+    title: string;
+    subtitle?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <section class="panel-card">
+        <header class="panel-header">
+            <div>
+                <h2 class="panel-title">{{ title }}</h2>
+                <p v-if="subtitle" class="panel-subtitle">{{ subtitle }}</p>
+            </div>
+            <div class="panel-actions">
+                <slot name="actions" />
+            </div>
+        </header>
+        <div class="panel-body">
+            <slot />
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.panel-card {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    background: rgba(12, 12, 12, 0.8);
+    padding: 12px;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    border-bottom: 1px solid rgba(201, 164, 90, 0.3);
+    padding-bottom: 8px;
+    margin-bottom: 10px;
+}
+
+.panel-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #e8ddc4;
+    letter-spacing: 0.02em;
+}
+
+.panel-subtitle {
+    margin-top: 4px;
+    font-size: 0.75rem;
+    color: rgba(232, 221, 196, 0.7);
+}
+
+.panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.panel-body {
+    font-size: 0.9rem;
+    color: rgba(232, 221, 196, 0.9);
+}
+</style>

app/game-frontend/src/components/ui/SkeletonLines.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        lines?: number;
+    }>(),
+    {
+        lines: 3,
+    }
+);
+</script>
+
+<template>
+    <div class="skeleton-lines">
+        <div v-for="line in props.lines" :key="line" class="skeleton-line" />
+    </div>
+</template>
+
+<style scoped>
+.skeleton-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.skeleton-line {
+    height: 10px;
+    border-radius: 2px;
+    background: linear-gradient(90deg, rgba(201, 164, 90, 0.15), rgba(201, 164, 90, 0.3), rgba(201, 164, 90, 0.15));
+    background-size: 180% 100%;
+    animation: shimmer 1.4s infinite ease-in-out;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 0% 0;
+    }
+    100% {
+        background-position: -180% 0;
+    }
+}
+</style>