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.
This commit is contained in:
2026-01-16 15:57:56 +00:00
parent 15625f2c28
commit f8159728ca
20 changed files with 1342 additions and 18 deletions
@@ -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>