Enhance frontend components and introduce new features

- Added a custom light theme in app.css to match the dark theme's palette.
- Introduced AdminBreadcrumbs component for improved navigation in admin pages.
- Implemented Skeleton component for loading states in various views.
- Added ToastContainer for displaying notifications and alerts.
- Enhanced MapView with loading indicators and improved marker handling.
- Updated MapCoordsDisplay to allow copying of shareable links.
- Refactored MapControls and MapContextMenu for better usability.
- Improved user experience in profile and admin pages with loading states and search functionality.

frontend-nuxt/components/ToastContainer.vue

@@ -0,0 +1,54 @@
+<template>
+  <Teleport to="body">
+    <div
+      class="fixed bottom-4 right-4 z-[9998] flex flex-col gap-2 max-w-sm w-full pointer-events-none"
+      aria-live="polite"
+      aria-label="Notifications"
+    >
+      <TransitionGroup name="toast">
+        <div
+          v-for="t in toasts"
+          :key="t.id"
+          class="pointer-events-auto rounded-lg px-4 py-3 shadow-lg border backdrop-blur-sm flex items-center gap-2 min-w-0"
+          :class="
+            t.type === 'error'
+              ? 'bg-error/95 text-error-content border-error/30'
+              : t.type === 'info'
+                ? 'bg-info/95 text-info-content border-info/30'
+                : 'bg-success/95 text-success-content border-success/30'
+          "
+          role="alert"
+        >
+          <span class="flex-1 text-sm font-medium truncate">{{ t.text }}</span>
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-circle shrink-0 opacity-70 hover:opacity-100"
+            aria-label="Dismiss"
+            @click="dismiss(t.id)"
+          >
+            <span class="text-lg leading-none font-light" aria-hidden="true">×</span>
+          </button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const { toasts, dismiss } = useToast()
+</script>
+
+<style scoped>
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.2s ease;
+}
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(1rem);
+}
+.toast-move {
+  transition: transform 0.2s ease;
+}
+</style>