Enhance frontend UI and functionality

- Added page transition effects in app.vue for smoother navigation.
- Updated nuxt.config.ts to include custom font styles and page transitions.
- Improved loading indicators in MapPageWrapper.vue and login.vue for better user experience.
- Enhanced MapView.vue with a collapsible control panel and improved styling.
- Introduced new icons for various components to enhance visual consistency.
- Updated Tailwind CSS configuration to extend font families and improve theme management.
- Refined layout styles in default.vue and admin pages for better responsiveness and aesthetics.
- Implemented error handling and loading states across various forms for improved user feedback.

frontend-nuxt/layouts/default.vue

@@ -1,27 +1,52 @@
 <template>
   <div class="h-screen flex flex-col bg-base-100 overflow-hidden">
-    <header class="navbar bg-base-200/80 backdrop-blur px-4 gap-2 shrink-0">
-      <NuxtLink to="/" class="text-lg font-semibold hover:opacity-80">{{ title }}</NuxtLink>
+    <header class="navbar bg-base-100/80 backdrop-blur-xl border-b border-base-300/50 px-4 gap-2 shrink-0">
+      <NuxtLink to="/" class="text-lg font-semibold hover:opacity-80 transition-all duration-200">{{ title }}</NuxtLink>
       <div class="flex-1" />
-      <NuxtLink v-if="!isLogin" to="/" class="btn btn-ghost btn-sm">Map</NuxtLink>
-      <NuxtLink v-if="!isLogin" to="/profile" class="btn btn-ghost btn-sm">Profile</NuxtLink>
-      <NuxtLink v-if="!isLogin && isAdmin" to="/admin" class="btn btn-ghost btn-sm">Admin</NuxtLink>
+      <NuxtLink
+        v-if="!isLogin"
+        to="/"
+        class="btn btn-ghost btn-sm gap-1.5 transition-all duration-200 hover:scale-105"
+        :class="route.path === '/' ? 'btn-primary' : ''"
+      >
+        <icons-icon-map />
+        Map
+      </NuxtLink>
+      <NuxtLink
+        v-if="!isLogin"
+        to="/profile"
+        class="btn btn-ghost btn-sm gap-1.5 transition-all duration-200 hover:scale-105"
+        :class="route.path === '/profile' ? 'btn-primary' : ''"
+      >
+        <icons-icon-user />
+        Profile
+      </NuxtLink>
+      <NuxtLink
+        v-if="!isLogin && isAdmin"
+        to="/admin"
+        class="btn btn-ghost btn-sm gap-1.5 transition-all duration-200 hover:scale-105"
+        :class="route.path.startsWith('/admin') ? 'btn-primary' : ''"
+      >
+        <icons-icon-shield />
+        Admin
+      </NuxtLink>
       <button
         v-if="!isLogin && me"
         type="button"
-        class="btn btn-ghost btn-sm btn-outline"
+        class="btn btn-ghost btn-sm btn-error btn-outline gap-1.5 transition-all duration-200 hover:scale-105"
         @click="doLogout"
       >
+        <icons-icon-logout />
         Logout
       </button>
-      <label class="swap swap-rotate btn btn-ghost btn-sm">
+      <label class="swap swap-rotate btn btn-ghost btn-sm transition-all duration-200 hover:scale-105">
         <input type="checkbox" v-model="dark" @change="toggleTheme" />
-        <span class="swap-off">☀️</span>
-        <span class="swap-on">🌙</span>
+        <span class="swap-off"><icons-icon-sun /></span>
+        <span class="swap-on"><icons-icon-moon /></span>
       </label>
       <span v-if="live" class="badge badge-success badge-sm">Live</span>
     </header>
-    <main class="flex-1 min-h-0 relative">
+    <main class="flex-1 min-h-0 overflow-y-auto relative">
       <slot />
     </main>
   </div>