restructure: use app route group and replace relative imports with @ imports

src/app/(app)/layout.tsx

@@ -1,9 +1,9 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import Header from "../components/Header";
-import { ConfigProvider } from "../components/ConfigContext";
-import { QueryProvider } from "../components/QueryProvider";
+import Header from "@/components/Header";
+import { ConfigProvider } from "@/components/ConfigContext";
+import { QueryProvider } from "@/components/QueryProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

src/app/(app)/page.tsx

@@ -1,4 +1,4 @@
-import MapWithChatClient from "../components/MapWithChatClient";
+import MapWithChatClient from "@/components/MapWithChatClient";
 
 export default function Home() {
   return <MapWithChatClient />;

src/components/ChatBox.tsx

@@ -2,14 +2,14 @@
 import { useState } from "react";
 import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { useConfig } from "./ConfigContext";
-import { getChannelIdFromKey } from "../lib/meshcore";
+import { getChannelIdFromKey } from "@/lib/meshcore";
 import ChatMessageItem from "./ChatMessageItem";
 import RefreshButton from "./RefreshButton";
 import RegionSelector from "./RegionSelector";
-import { getRegionConfig } from "../lib/regions";
-import { useChatMessages } from "../hooks/useChatMessages";
-import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
-import { useQueryParams } from "../hooks/useQueryParams";
+import { getRegionConfig } from "@/lib/regions";
+import { useChatMessages } from "@/hooks/useChatMessages";
+import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
+import { useQueryParams } from "@/hooks/useQueryParams";
 
 
 interface ChatBoxProps {

src/components/ChatMessageItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useMemo } from "react";
 import { useConfig } from "./ConfigContext";
-import { useMessageDecryption } from "../hooks/useMessageDecryption";
+import { useMessageDecryption } from "@/hooks/useMessageDecryption";
 import PathVisualization, { PathData } from "./PathVisualization";
 import NodeLinkWithHover from "./NodeLinkWithHover";
 

src/components/ConfigContext.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { createContext, useContext, useState, useEffect, useRef, useLayoutEffect, ReactNode } from "react";
-import { getChannelIdFromKey } from "../lib/meshcore";
-import { getRegionFriendlyNames } from "../lib/regions";
+import { getChannelIdFromKey } from "@/lib/meshcore";
+import { getRegionFriendlyNames } from "@/lib/regions";
 import Modal from "./Modal";
 
 // Config shape

src/components/Header.tsx

@@ -4,7 +4,7 @@ import { Cog6ToothIcon, InformationCircleIcon, ChevronDownIcon } from "@heroicon
 import { useConfig } from "./ConfigContext";
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import InfoModal from "./InfoModal";
-import { getAppName } from "../lib/api";
+import { getAppName } from "@/lib/api";
 
 interface HeaderProps {
   configButtonRef?: React.Ref<HTMLButtonElement>;

src/components/InfoModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { getAppName } from "../lib/api";
+import { getAppName } from "@/lib/api";
 import Modal from "./Modal";
 
 interface InfoModalProps {

src/components/MapIcons.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import moment from "moment";
-import { formatPublicKey } from '../lib/meshcore';
-import { getNameIconLabel } from '../lib/meshcore-map-nodeutils';
-import { NodePosition } from '../types/map';
+import { formatPublicKey } from '@/lib/meshcore';
+import { getNameIconLabel } from '@/lib/meshcore-map-nodeutils';
+import { NodePosition } from '@/types/map';
 
 interface NodeMarkerProps {
   node: NodePosition;

src/components/MapView.tsx

@@ -11,10 +11,10 @@ import { useConfig } from "./ConfigContext";
 import RefreshButton from "@/components/RefreshButton";
 import { NodeMarker, ClusterMarker, PopupContent } from "./MapIcons";
 import { renderToString } from "react-dom/server";
-import { buildApiUrl } from "../lib/api";
-import { NodePosition } from "../types/map";
-import { useNeighbors, type Neighbor } from "../hooks/useNeighbors";
-import { useQueryParams } from "../hooks/useQueryParams";
+import { buildApiUrl } from "@/lib/api";
+import { NodePosition } from "@/types/map";
+import { useNeighbors, type Neighbor } from "@/hooks/useNeighbors";
+import { useQueryParams } from "@/hooks/useQueryParams";
 
 const DEFAULT = {
   lat: 46.56, // Center between Seattle and Portland

src/components/PathVisualization.tsx

@@ -6,8 +6,8 @@ import Link from "next/link";
 import Tree from 'react-d3-tree';
 import { ArrowsPointingOutIcon, ArrowsPointingInIcon } from "@heroicons/react/24/outline";
 import PathDisplay from "./PathDisplay";
-import { useMeshcoreSearches } from "../hooks/useMeshcoreSearch";
-import type { MeshcoreSearchResult } from "../hooks/useMeshcoreSearch";
+import { useMeshcoreSearches } from "@/hooks/useMeshcoreSearch";
+import type { MeshcoreSearchResult } from "@/hooks/useMeshcoreSearch";
 import { useConfig } from "./ConfigContext";
 
 export interface PathData {

src/components/RegionSelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useConfig } from "./ConfigContext";
-import { getRegionFriendlyNames } from "../lib/regions";
+import { getRegionFriendlyNames } from "@/lib/regions";
 
 interface RegionSelectorProps {
   onRegionSelected?: () => void;

src/hooks/useChatMessages.ts

@@ -2,8 +2,8 @@
 
 import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useMemo } from 'react';
-import { buildApiUrl } from '../lib/api';
-import { ChatMessage } from '../components/ChatMessageItem';
+import { buildApiUrl } from '@/lib/api';
+import { ChatMessage } from '@/components/ChatMessageItem';
 
 interface ChatMessagesParams {
   channelId?: string;

src/hooks/useMeshcoreSearch.ts

@@ -1,6 +1,6 @@
 import { useQuery, useQueries } from '@tanstack/react-query';
 import { create, windowScheduler, indexedResolver } from '@yornaath/batshit';
-import { buildApiUrl } from '../lib/api';
+import { buildApiUrl } from '@/lib/api';
 import { useMemo } from 'react';
 
 export interface MeshcoreSearchResult {

src/hooks/useMessageDecryption.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { decryptMeshcoreGroupMessage } from '../lib/meshcore';
+import { decryptMeshcoreGroupMessage } from '@/lib/meshcore';
 import { useMemo } from 'react';
 
 export interface MessageDecryptionParams {

src/hooks/useNeighbors.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { buildApiUrl } from '../lib/api';
+import { buildApiUrl } from '@/lib/api';
 
 export interface Neighbor {
   public_key: string;

src/hooks/useNodeData.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { buildApiUrl } from '../lib/api';
+import { buildApiUrl } from '@/lib/api';
 
 export interface NodeInfo {
   public_key: string;

src/lib/clickhouse/actions.ts

@@ -1,6 +1,6 @@
 "use server";
 import { clickhouse } from "./clickhouse";
-import { generateRegionWhereClauseFromArray, generateRegionWhereClause } from "../regionFilters";
+import { generateRegionWhereClauseFromArray, generateRegionWhereClause } from "@/lib/regionFilters";
 
 export async function getNodePositions({ minLat, maxLat, minLng, maxLng, nodeTypes, lastSeen }: { minLat?: string | null, maxLat?: string | null, minLng?: string | null, maxLng?: string | null, nodeTypes?: string[], lastSeen?: string | null } = {}) {
   try {

src/lib/regionFilters.ts

@@ -1,4 +1,4 @@
-import { getRegionConfig } from "./regions";
+import { getRegionConfig } from "@/lib/regions";
 
 /**
  * Generates a ClickHouse WHERE clause for filtering by region using broker and topic fields