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/composables/useToast.ts

@@ -0,0 +1,36 @@
+export type ToastType = 'success' | 'error' | 'info'
+
+export interface Toast {
+  id: number
+  type: ToastType
+  text: string
+}
+
+const TOAST_STATE_KEY = 'hnh-map-toasts'
+const DEFAULT_DURATION_MS = 4000
+
+let nextId = 0
+
+export function useToast() {
+  const toasts = useState<Toast[]>(TOAST_STATE_KEY, () => [])
+
+  function dismiss(id: number) {
+    toasts.value = toasts.value.filter((t) => t.id !== id)
+  }
+
+  function show(type: ToastType, text: string, durationMs = DEFAULT_DURATION_MS) {
+    const id = ++nextId
+    toasts.value = [...toasts.value, { id, type, text }]
+    if (durationMs > 0 && import.meta.client) {
+      setTimeout(() => dismiss(id), durationMs)
+    }
+  }
+
+  return {
+    toasts: readonly(toasts),
+    success: (text: string, durationMs?: number) => show('success', text, durationMs),
+    error: (text: string, durationMs?: number) => show('error', text, durationMs),
+    info: (text: string, durationMs?: number) => show('info', text, durationMs),
+    dismiss,
+  }
+}