Introduce path aliases

web/.eslintrc.json

@@ -7,13 +7,16 @@
         "plugin:v3xlabs/recommended"
     ],
     "ignorePatterns": [
-        "!**/*"
+        "!**/*",
+        "src/**/*.gen.ts"
     ],
     "plugins": [
         "v3xlabs"
     ],
     "env": {
         "browser": true
     },
-    "rules": {}
-}
+    "rules": {
+        "sonarjs/cognitive-complexity": "off"
+    }
+}

web/src/components/ActiveSessionsTable.tsx

@@ -2,10 +2,11 @@ import { clsx } from 'clsx';
 import { FC } from 'react';
 import { UAParser } from 'ua-parser-js';
 
-import { useAuth } from '../api/auth';
-import { useGeoIp } from '../api/geoip';
-import { SessionResponse, useSessions } from '../api/sessions';
-import { getRelativeTimeString } from '../util/date';
+import { useAuth } from '@/api/auth';
+import { useGeoIp } from '@/api/geoip';
+import { SessionResponse, useSessions } from '@/api/sessions';
+import { getRelativeTimeString } from '@/util/date';
+
 import { LeafletPreview } from './LeafletPreview';
 
 const ActiveSession: FC<{ session: SessionResponse }> = ({ session }) => {

web/src/components/Navbar.tsx

@@ -4,8 +4,9 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Link } from '@tanstack/react-router';
 import { FileRoutesByPath } from '@tanstack/react-router';
 
-import { useAuth } from '../api/auth';
-import { useApiMe } from '../api/me';
+import { useAuth } from '@/api/auth';
+import { useApiMe } from '@/api/me';
+
 import { AvatarHolder, getInitials } from './UserProfile';
 
 const LOGIN_URL = 'http://localhost:3000/login';

web/src/components/Unauthorized.tsx

@@ -1,4 +1,4 @@
-import { SCPage } from '../layouts/SimpleCenterPage';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const UnauthorizedResourceModal = () => {
     return (

web/src/components/UserProfile.tsx

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { FC } from 'react';
 import { match } from 'ts-pattern';
 
-import { ApiMeResponse, useApiMe } from '../api/me';
-import { useApiUserById } from '../api/user';
+import { ApiMeResponse, useApiMe } from '@/api/me';
+import { useApiUserById } from '@/api/user';
 
 type Properties = {
     user_id: string;

web/src/components/input/NewItemIdInput.tsx

@@ -2,7 +2,8 @@ import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { FiRefreshCcw } from 'react-icons/fi';
 
-import { BASE_URL } from '../../api/core';
+import { BASE_URL } from '@/api/core';
+
 import { BaseInput, BaseInputProperties } from './BaseInput';
 
 const placeholderValues = ['000001', '123456', 'AA17C', 'ABCDEF', '000013'];

web/src/components/item/ItemPreview.tsx

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { FC } from 'react';
 import { match } from 'ts-pattern';
 
-import { formatId, useInstanceSettings } from '../../api/instance_settings';
-import { ApiItemResponse, useApiItemById } from '../../api/item';
+import { formatId, useInstanceSettings } from '@/api/instance_settings';
+import { ApiItemResponse, useApiItemById } from '@/api/item';
 
 type Properties = {
     item_id: string;

web/src/components/media/MediaPreview.tsx

@@ -1,9 +1,9 @@
 import { FC, Suspense, useState } from 'react';
 import { match } from 'ts-pattern';
 
-import { useMedia } from '../../api/media';
-import { ErrorBoundary } from '../ErrorBoundary';
-import { StlPreviewWindow } from '../stl_preview/StlPreview';
+import { useMedia } from '@/api/media';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { StlPreviewWindow } from '@/components/stl_preview/StlPreview';
 
 export const MediaPreview: FC<{ media_id: number }> = ({ media_id }) => {
     const { data: media } = useMedia(media_id);

web/src/components/owned_elements.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router';
 
-import { useApiOwnedItems } from '../api/item';
+import { useApiOwnedItems } from '@/api/item';
 
 export const AllOwnedItems = () => {
     const { data } = useApiOwnedItems();

web/src/components/search/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { BaseInput } from '../input/BaseInput';
+import { BaseInput } from '@/components/input/BaseInput';
 
 export const SearchInput = () => {
     return (

web/src/components/search_tasks/SearchTaskTable.tsx

@@ -5,9 +5,9 @@ import en from 'javascript-time-ago/locale/en';
 import { useEffect } from 'react';
 import { FiLoader } from 'react-icons/fi';
 
-import { useAuth } from '../../api/auth';
-import { BASE_URL } from '../../api/core';
-import { SearchTask, useTasks } from '../../api/searchtasks';
+import { useAuth } from '@/api/auth';
+import { BASE_URL } from '@/api/core';
+import { SearchTask, useTasks } from '@/api/searchtasks';
 
 TimeAgo.addDefaultLocale(en);
 const timeAgo = new TimeAgo('en-US');

web/src/index.tsx

@@ -5,10 +5,10 @@ import { createRouter, RouterProvider } from '@tanstack/react-router';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { preflightAuth } from './api/auth';
+import { preflightAuth } from '@/api/auth';
 // Import the generated route tree
-import { routeTree } from './routeTree.gen';
-import { queryClient } from './util/query';
+import { routeTree } from '@/routeTree.gen';
+import { queryClient } from '@/util/query';
 
 // Create a new router instance
 const router = createRouter({ routeTree });

web/src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import { createRootRoute, Outlet } from '@tanstack/react-router';
 
-import { Navbar } from '../components/Navbar';
+import { Navbar } from '@/components/Navbar';
 
 export const Route = createRootRoute({
     component: () => (

web/src/routes/create.lazy.tsx

@@ -2,11 +2,11 @@ import { useForm } from '@tanstack/react-form';
 import { createLazyFileRoute, useNavigate } from '@tanstack/react-router';
 import { FiArrowRight } from 'react-icons/fi';
 
-import { isValidId } from '../api/generate_id';
-import { formatId, useInstanceSettings } from '../api/instance_settings';
-import { useApiCreateItem } from '../api/item';
-import { NewItemIdInput } from '../components/input/NewItemIdInput';
-import { SCPage } from '../layouts/SimpleCenterPage';
+import { isValidId } from '@/api/generate_id';
+import { formatId, useInstanceSettings } from '@/api/instance_settings';
+import { useApiCreateItem } from '@/api/item';
+import { NewItemIdInput } from '@/components/input/NewItemIdInput';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 const component = () => {
     const { data: instanceSettings } = useInstanceSettings();

web/src/routes/index.lazy.tsx

@@ -1,9 +1,9 @@
 import { createLazyFileRoute } from '@tanstack/react-router';
 
-import { ItemPreview } from '../components/item/ItemPreview';
-import { SearchTaskTable } from '../components/search_tasks/SearchTaskTable';
-import { UserProfile } from '../components/UserProfile';
-import { SCPage } from '../layouts/SimpleCenterPage';
+import { ItemPreview } from '@/components/item/ItemPreview';
+import { SearchTaskTable } from '@/components/search_tasks/SearchTaskTable';
+import { UserProfile } from '@/components/UserProfile';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 const component = () => {
     return (

web/src/routes/item/$itemId/edit.tsx

@@ -7,8 +7,8 @@ import {
 } from '@tanstack/react-router';
 import { FC } from 'react';
 
-import { useApiDeleteItem } from '../../../api/item';
-import { SCPage } from '../../../layouts/SimpleCenterPage';
+import { useApiDeleteItem } from '@/api/item';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const DeleteItemModal: FC<{ itemId: string }> = ({ itemId }) => {
     const { mutate: deleteItem } = useApiDeleteItem();

web/src/routes/item/$itemId/index.tsx

@@ -5,13 +5,13 @@ import {
     useParams,
 } from '@tanstack/react-router';
 
-import { formatId, getInstanceSettings } from '../../../api/instance_settings';
-import { useApiItemById } from '../../../api/item';
-import { MediaGallery } from '../../../components/media/MediaGallery';
-import { UnauthorizedResourceModal } from '../../../components/Unauthorized';
-import { UserProfile } from '../../../components/UserProfile';
-import { SCPage } from '../../../layouts/SimpleCenterPage';
-import { queryClient } from '../../../util/query';
+import { formatId, getInstanceSettings } from '@/api/instance_settings';
+import { useApiItemById } from '@/api/item';
+import { MediaGallery } from '@/components/media/MediaGallery';
+import { UnauthorizedResourceModal } from '@/components/Unauthorized';
+import { UserProfile } from '@/components/UserProfile';
+import { SCPage } from '@/layouts/SimpleCenterPage';
+import { queryClient } from '@/util/query';
 
 export const Route = createFileRoute('/item/$itemId/')({
     // if item_id is not formatId(item_id, instanceSettings), redirect to the formatted item_id

web/src/routes/items/index.lazy.tsx

@@ -1,7 +1,7 @@
 import { createLazyFileRoute } from '@tanstack/react-router';
 
-import { AllOwnedItems } from '../../components/owned_elements';
-import { SCPage } from '../../layouts/SimpleCenterPage';
+import { AllOwnedItems } from '@/components/owned_elements';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const Route = createLazyFileRoute('/items/')({
     component: () => (

web/src/routes/logs/index.lazy.tsx

@@ -1,6 +1,6 @@
 import { createLazyFileRoute } from '@tanstack/react-router';
 
-import { SCPage } from '../../layouts/SimpleCenterPage';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const Route = createLazyFileRoute('/logs/')({
     component: () => (

web/src/routes/products/index.lazy.tsx

@@ -1,6 +1,6 @@
 import { createLazyFileRoute } from '@tanstack/react-router';
 
-import { SCPage } from '../../layouts/SimpleCenterPage';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const Route = createLazyFileRoute('/products/')({
     component: () => (

web/src/routes/search/index.lazy.tsx

@@ -1,7 +1,7 @@
 import { createLazyFileRoute, Link } from '@tanstack/react-router';
 
-import { SearchInput } from '../../components/search/SearchInput';
-import { SCPage } from '../../layouts/SimpleCenterPage';
+import { SearchInput } from '@/components/search/SearchInput';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const Route = createLazyFileRoute('/search/')({
     component: () => (

web/src/routes/sessions.tsx

@@ -1,9 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { FC } from 'react';
 
-import { useAuth } from '../api/auth';
-import { ActiveSessionsTable } from '../components/ActiveSessionsTable';
-import { SCPage } from '../layouts/SimpleCenterPage';
+import { useAuth } from '@/api/auth';
+import { ActiveSessionsTable } from '@/components/ActiveSessionsTable';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 const component: FC = () => {
     return (

web/src/routes/settings/index.lazy.tsx

@@ -1,6 +1,6 @@
 import { createLazyFileRoute } from '@tanstack/react-router';
 
-import { SCPage } from '../../layouts/SimpleCenterPage';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const Route = createLazyFileRoute('/settings/')({
     component: () => (

web/src/routes/user/$userId.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, useParams } from '@tanstack/react-router';
 
-import { useApiUserById } from '../../api/user';
-import { SCPage } from '../../layouts/SimpleCenterPage';
+import { useApiUserById } from '@/api/user';
+import { SCPage } from '@/layouts/SimpleCenterPage';
 
 export const Route = createFileRoute('/user/$userId')({
     component: () => {

web/tsconfig.json

@@ -103,6 +103,11 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true,                                /* Skip type checking all .d.ts files. */
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   }
 }

web/vite.config.ts

@@ -1,8 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [TanStackRouterVite(), react()],
+    resolve: {
+        alias: {
+            '@': new URL('src', import.meta.url).pathname,
+        },
+    },
 });