From 44f60270eb3b56e145e10a381bb74c824f6ce10c Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 6 Jul 2025 23:21:27 +0200
Subject: [PATCH] Refactor imports and paths: implement base URL aliasing with
 `@`, adjust TypeScript configuration, and update all relevant imports.

---
 package-lock.json                             |  16 +++
 package.json                                  |   1 +
 src/App.tsx                                   |  20 +--
 src/main.tsx                                  |  10 +-
 src/modules/header/components/Header.tsx      |   6 +-
 .../header/components/ImportButton/index.tsx  |  42 +++---
 src/modules/main/components/Main.tsx          |   6 +-
 src/modules/main/components/Tabs.tsx          |  18 +--
 .../sheetHeader/components/SheetHeader.tsx    |  37 +++---
 .../main/modules/skills/components/Skills.tsx |  82 ++++++------
 src/utils/loaders.ts                          | 124 +++++++++---------
 tsconfig.app.json                             |  20 ++-
 vite.config.ts                                |   8 +-
 13 files changed, 212 insertions(+), 178 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a025127..8236fd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.11",
+        "@types/node": "^24.0.10",
         "js-yaml": "^4.1.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -1637,6 +1638,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.10.tgz",
+      "integrity": "sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.8.0"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
@@ -3899,6 +3909,12 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+      "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
+      "license": "MIT"
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
diff --git a/package.json b/package.json
index 1b6494a..65da555 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "@types/node": "^24.0.10",
     "js-yaml": "^4.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/src/App.tsx b/src/App.tsx
index 7718bd7..91ebb00 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,9 @@
-import './App.css'
-import Main from "./modules/main/components/Main.tsx";
-import Footer from "./modules/footer/components/Footer.tsx";
+import '@/App.css'
 import {useState} from "react";
-import type {CharacterData} from "./types/CharacterJson.ts";
-import Header from "./modules/header/components/Header.tsx";
+import type {CharacterData} from "@/types/CharacterJson.ts";
+import Header from "@/modules/header/components/Header.tsx";
+import Footer from "@/modules/footer/components/Footer.tsx";
+import Main from "@/modules/main/components/Main.tsx";
 
 function App() {
   const [jsonData, setJsonData] = useState<CharacterData | null>(null);
@@ -36,11 +36,11 @@ function App() {
   // if (loading) return <div>Loading...</div>;
   
   if (!jsonData) return (
-    <>
-      <Header onFileLoad={handleFileLoad}/>
-      
-      <Footer/>
-    </>
+      <>
+        <Header onFileLoad={handleFileLoad}/>
+        
+        <Footer/>
+      </>
   );
   
   
diff --git a/src/main.tsx b/src/main.tsx
index ddf3596..2313588 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import App from '@/App'
+import '@/index.css'
 
 // Ensure root element exists
 const rootElement = document.getElementById('root');
@@ -11,7 +11,7 @@ if (!rootElement) {
 
 // Create root and render app
 ReactDOM.createRoot(rootElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <React.StrictMode>
+      <App/>
+    </React.StrictMode>,
 );
diff --git a/src/modules/header/components/Header.tsx b/src/modules/header/components/Header.tsx
index 1fdf302..aa2a47f 100644
--- a/src/modules/header/components/Header.tsx
+++ b/src/modules/header/components/Header.tsx
@@ -1,11 +1,11 @@
-import ImportButton from "./ImportButton";
-import type { CharacterData } from '../../../types/CharacterJson.ts';
+import type {CharacterData} from '@/types/CharacterJson.ts';
+import ImportButton from "@/modules/header/components/ImportButton";
 
 interface HeaderProps {
   onFileLoad: (data: CharacterData) => void;
 }
 
-export default function Header({ onFileLoad }: HeaderProps) {
+export default function Header({onFileLoad}: HeaderProps) {
   return (
       <header className="bg-gray-800">
         <nav className="container mx-auto flex justify-between items-center py-6 px-6">
diff --git a/src/modules/header/components/ImportButton/index.tsx b/src/modules/header/components/ImportButton/index.tsx
index 7f2f29c..d919650 100644
--- a/src/modules/header/components/ImportButton/index.tsx
+++ b/src/modules/header/components/ImportButton/index.tsx
@@ -1,13 +1,13 @@
-import { useRef } from 'react';
-import type { CharacterData } from '../../../../types/CharacterJson.ts';
+import {useRef} from 'react';
+import type {CharacterData} from '@/types/CharacterJson.ts';
 
 interface ImportButtonProps {
   onFileLoad: (data: CharacterData) => void;
 }
 
-export default function ImportButton({ onFileLoad }: ImportButtonProps) {
+export default function ImportButton({onFileLoad}: ImportButtonProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
-
+  
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     
@@ -38,23 +38,23 @@ export default function ImportButton({ onFileLoad }: ImportButtonProps) {
       fileInputRef.current.value = '';
     }
   };
-
+  
   return (
-    <div className="relative">
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept=".json"
-        onChange={handleFileChange}
-        className="hidden"
-        id="character-import"
-      />
-      <label
-        htmlFor="character-import"
-        className="cursor-pointer bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
-      >
-        Charakter laden
-      </label>
-    </div>
+      <div className="relative">
+        <input
+            ref={fileInputRef}
+            type="file"
+            accept=".json"
+            onChange={handleFileChange}
+            className="hidden"
+            id="character-import"
+        />
+        <label
+            htmlFor="character-import"
+            className="cursor-pointer bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
+        >
+          Charakter laden
+        </label>
+      </div>
   );
 }
diff --git a/src/modules/main/components/Main.tsx b/src/modules/main/components/Main.tsx
index 207fb6b..17c7143 100644
--- a/src/modules/main/components/Main.tsx
+++ b/src/modules/main/components/Main.tsx
@@ -1,6 +1,6 @@
-import Tabs from "./Tabs";
-import SheetHeader from "../modules/sheetHeader/components/SheetHeader.tsx";
-import type {CharacterData} from "../../../types/CharacterJson.ts";
+import type {CharacterData} from "@/types/CharacterJson.ts";
+import SheetHeader from "@/modules/main/modules/sheetHeader/components/SheetHeader.tsx";
+import Tabs from "@/modules/main/components/Tabs.tsx";
 
 export default function Main({jsonData}: { jsonData: CharacterData }) {
   return (
diff --git a/src/modules/main/components/Tabs.tsx b/src/modules/main/components/Tabs.tsx
index d02d562..0b4e8d5 100644
--- a/src/modules/main/components/Tabs.tsx
+++ b/src/modules/main/components/Tabs.tsx
@@ -1,13 +1,13 @@
 import {useState} from "react";
-import Skills from "../modules/skills/components/Skills.tsx";
-import Combat from "../modules/combat/components/Combat.tsx";
-import Equipment from "../modules/equipment/components/Equipment.tsx";
-import Attributes from "../modules/attributes/components/Attributes.tsx";
-import State from "../modules/state/components/State.tsx";
-import Magic from "../modules/magic/components/Magic.tsx";
-import Religion from "../modules/religion/components/Religion.tsx";
-import Notes from "../modules/notes/components/Notes.tsx";
-import type {CharacterData} from "../../../types/CharacterJson.ts";
+import Skills from "@/modules/main/modules/skills/components/Skills.tsx";
+import Combat from "@/modules/main/modules/combat/components/Combat.tsx";
+import Attributes from "@/modules/main/modules/attributes/components/Attributes.tsx";
+import Equipment from "@/modules/main/modules/equipment/components/Equipment.tsx";
+import State from "@/modules/main/modules/state/components/State.tsx";
+import Magic from "@/modules/main/modules/magic/components/Magic.tsx";
+import Religion from "@/modules/main/modules/religion/components/Religion.tsx";
+import Notes from "@/modules/main/modules/notes/components/Notes.tsx";
+import type {CharacterData} from "@/types/CharacterJson.ts";
 
 export default function Tabs({jsonData}: { jsonData: CharacterData }) {
   const [activeTab, setActiveTab] = useState("skills");
diff --git a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx b/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
index fbe25b2..b4a3f5c 100644
--- a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
+++ b/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
@@ -1,11 +1,11 @@
-import type {CharacterData} from "../../../../../types/CharacterJson.ts";
+import type {CharacterData} from "@/types/CharacterJson.ts";
 import {
   type AttributeWithValue,
   loadAttributesWithValues,
   loadProfession,
   loadRace,
   loadRaceVariant
-} from "../../../../../utils/loaders";
+} from "@/utils/loaders";
 import {useEffect, useState} from 'react';
 
 export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
@@ -13,10 +13,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
   const [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
   const [professionName, setProfessionName] = useState<string>(jsonData.p);
   const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);
-
+  
   useEffect(() => {
     let isMounted = true;
-
+    
     const loadData = async () => {
       try {
         // Load race and profession using the new loader functions
@@ -25,10 +25,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
           loadRaceVariant(jsonData.rv || ''),
           loadProfession(jsonData.p)
         ]);
-
+        
         // Process attributes using the new loadAttributesWithValues function
         const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values);
-
+        
         if (isMounted) {
           setRaceName(race?.name || jsonData.r);
           setRaceVariantName(raceVariant?.name || '');
@@ -49,19 +49,19 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
         }
       }
     };
-
+    
     loadData();
-
+    
     return () => {
       isMounted = false;
     };
   }, [jsonData.r, jsonData.rv, jsonData.p, jsonData.attr]);
-
+  
   console.log(jsonData)
-
+  
   return (
       <>
-        <div className="flex justify-between items-center py-5 px-5">
+        <div className="flex justify-between items-end py-5 px-5">
           <div className="w-[30%]">
             <p className="border-b border-gray-500 font-semibold">
               {jsonData.name}
@@ -81,19 +81,20 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
             <small>Profession</small>
           </div>
         </div>
-
+        
         <div className="flex justify-between items-center py-3 px-10">
           <div className="w-[20%] h-[20%] rounded-full overflow-hidden">
             <img src="#" alt="char bild"/>
           </div>
-
+          
           <div className="flex flex-col gap-2 w-[80%]">
             <div className="flex justify-between">
               {attributes.map(attr => (
                   <div key={attr.id} className="w-[10%] text-center">
                     <div className="relative group cursor-help">
                       <div className="font-bold">{attr.short}</div>
-                      <span className="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                      <span
+                          className="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                         {attr.name}
                       </span>
                     </div>
@@ -101,7 +102,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                   </div>
               ))}
             </div>
-
+            
             <div className="w-[100%] flex pt-2">
               <span className="relative group cursor-help">
                 LP
@@ -115,7 +116,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                 15 / 15
               </div>
             </div>
-
+            
             <div className="w-[100%] flex pt-2">
               <span className="relative group cursor-help">
                 AP
@@ -129,7 +130,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                 16 / 16
               </div>
             </div>
-
+            
             <div className="w-[100%] flex pt-2">
               <span className="relative group cursor-help">
                 KP
@@ -143,7 +144,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                 16 / 16
               </div>
             </div>
-
+            
             <div className="w-[100%] flex pt-2">
               <span className="w-[10%] relative group cursor-help">
                 SP
diff --git a/src/modules/main/modules/skills/components/Skills.tsx b/src/modules/main/modules/skills/components/Skills.tsx
index 0fa4114..253bba8 100644
--- a/src/modules/main/modules/skills/components/Skills.tsx
+++ b/src/modules/main/modules/skills/components/Skills.tsx
@@ -1,21 +1,21 @@
-import { useState, useEffect } from 'react';
-import type { CharacterData } from '../../../../../types/CharacterJson';
-import { loadSkillsWithValues, type SkillWithValue } from '../../../../../utils/loaders';
+import {useEffect, useState} from 'react';
+import type {CharacterData} from '@/types/CharacterJson.ts';
+import {loadSkillsWithValues, type SkillWithValue} from '@/utils/loaders.ts';
 
-export default function Skills({ jsonData }: { jsonData: CharacterData }) {
+export default function Skills({jsonData}: { jsonData: CharacterData }) {
   const [skills, setSkills] = useState<SkillWithValue[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-
+  
   useEffect(() => {
     let isMounted = true;
-
+    
     const loadData = async () => {
       try {
         setLoading(true);
         // Load skills with their values using the new loader function
         const loadedSkills = await loadSkillsWithValues(jsonData.talents);
-
+        
         if (isMounted) {
           setSkills(loadedSkills);
           setLoading(false);
@@ -28,57 +28,57 @@ export default function Skills({ jsonData }: { jsonData: CharacterData }) {
         }
       }
     };
-
+    
     loadData();
-
+    
     return () => {
       isMounted = false;
     };
   }, [jsonData.talents]);
-
+  
   if (loading) {
     return <div>Loading skills...</div>;
   }
-
+  
   if (error) {
     return <div className="text-red-500">{error}</div>;
   }
-
+  
   if (skills.length === 0) {
     return <div>No skills found.</div>;
   }
-
+  
   return (
-    <div className="p-4">
-      <h1 className="text-2xl font-bold mb-4">Skills</h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {skills.map(skill => (
-          <div key={skill.id} className="border p-3 rounded shadow">
-            <div className="flex justify-between items-center">
-              <h2 className="text-lg font-semibold">{skill.name}</h2>
-              <span className="bg-blue-100 text-blue-800 font-bold px-2 py-1 rounded">
+      <div className="p-4">
+        <h1 className="text-2xl font-bold mb-4">Skills</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {skills.map(skill => (
+              <div key={skill.id} className="border p-3 rounded shadow">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-lg font-semibold">{skill.name}</h2>
+                  <span className="bg-blue-100 text-blue-800 font-bold px-2 py-1 rounded">
                 {skill.value}
               </span>
-            </div>
-            {/*{skill.applications && skill.applications.length > 0 && (*/}
-            {/*  <div className="mt-2">*/}
-            {/*    <h3 className="font-medium">Applications:</h3>*/}
-            {/*    <ul className="list-disc list-inside">*/}
-            {/*      {skill.applications.map((app: any, index: number) => (*/}
-            {/*        <li key={index}>{app.name}</li>*/}
-            {/*      ))}*/}
-            {/*    </ul>*/}
-            {/*  </div>*/}
-            {/*)}*/}
-            {/*{skill.tools && (*/}
-            {/*  <div className="mt-2">*/}
-            {/*    <h3 className="font-medium">Tools:</h3>*/}
-            {/*    <p className="text-sm">{skill.tools}</p>*/}
-            {/*  </div>*/}
-            {/*)}*/}
-          </div>
-        ))}
+                </div>
+                {/*{skill.applications && skill.applications.length > 0 && (*/}
+                {/*  <div className="mt-2">*/}
+                {/*    <h3 className="font-medium">Applications:</h3>*/}
+                {/*    <ul className="list-disc list-inside">*/}
+                {/*      {skill.applications.map((app: any, index: number) => (*/}
+                {/*        <li key={index}>{app.name}</li>*/}
+                {/*      ))}*/}
+                {/*    </ul>*/}
+                {/*  </div>*/}
+                {/*)}*/}
+                {/*{skill.tools && (*/}
+                {/*  <div className="mt-2">*/}
+                {/*    <h3 className="font-medium">Tools:</h3>*/}
+                {/*    <p className="text-sm">{skill.tools}</p>*/}
+                {/*  </div>*/}
+                {/*)}*/}
+              </div>
+          ))}
+        </div>
       </div>
-    </div>
   );
 }
diff --git a/src/utils/loaders.ts b/src/utils/loaders.ts
index 203d61b..1d5a897 100644
--- a/src/utils/loaders.ts
+++ b/src/utils/loaders.ts
@@ -1,65 +1,65 @@
-import type {Race} from '../types/Race';
-import type {Profession} from '../types/Profession';
-import type {Attribute} from '../types/Attribute';
-import type {AttributeValue} from '../types/CharacterJson';
-import type {Advantage} from '../types/Advantage';
-import type {AnimistForce} from '../types/AnimistForce';
-// import type { ArcaneBardTradition } from '../types/ArcaneBardTradition';
-// import type { ArcaneDancerTradition } from '../types/ArcaneDancerTradition';
-// import type { ArmorType } from '../types/ArmorType';
-// import type { Aspect } from '../types/Aspect';
-// import type { BlessedTradition } from '../types/BlessedTradition';
-// import type { Blessing } from '../types/Blessing';
-// import type { Book } from '../types/Book';
-// import type { Brew } from '../types/Brew';
-// import type { Cantrip } from '../types/Cantrip';
-// import type { CombatSpecialAbilityGroup } from '../types/CombatSpecialAbilityGroup';
-// import type { CombatTechniqueGroup } from '../types/CombatTechniqueGroup';
-// import type { CombatTechnique } from '../types/CombatTechnique';
-// import type { Condition } from '../types/Condition';
-// import type { Culture } from '../types/Culture';
-// import type { Curse } from '../types/Curse';
-// import type { DerivedCharacteristic } from '../types/DerivedCharacteristic';
-// import type { Disadvantage } from '../types/Disadvantage';
-// import type { DominationRitual } from '../types/DominationRitual';
-// import type { Element } from '../types/Element';
-// import type { ElvenMagicalSong } from '../types/ElvenMagicalSong';
-// import type { EquipmentGroup } from '../types/EquipmentGroup';
-// import type { EquipmentPackage } from '../types/EquipmentPackage';
-// import type { Equipment } from '../types/Equipment';
-// import type { ExperienceLevel } from '../types/ExperienceLevel';
-// import type { EyeColor } from '../types/EyeColor';
-// import type { FocusRule } from '../types/FocusRule';
-// import type { GeodeRitual } from '../types/GeodeRitual';
-// import type { HairColor } from '../types/HairColor';
-// import type { LiturgicalChantEnhancement } from '../types/LiturgicalChantEnhancement';
-// import type { LiturgicalChantGroup } from '../types/LiturgicalChantGroup';
-// import type { LiturgicalChant } from '../types/LiturgicalChant';
-// import type { MagicalDance } from '../types/MagicalDance';
-// import type { MagicalMelodie } from '../types/MagicalMelodie';
-// import type { MagicalTradition } from '../types/MagicalTradition';
-// import type { OptionalRule } from '../types/OptionalRule';
-// import type { Pact } from '../types/Pact';
-// import type { PatronCategorie } from '../types/PatronCategorie';
-// import type { Patron } from '../types/Patron';
-// import type { ProfessionVariant } from '../types/ProfessionVariant';
-// import type { Propertie } from '../types/Propertie';
-// import type { RaceVariant } from '../types/RaceVariant';
-// import type { Reache } from '../types/Reache';
-// import type { RogueSpell } from '../types/RogueSpell';
-// import type { SkillGroup } from '../types/SkillGroup';
-import type {Skill} from '../types/Skill';
-import type {RaceVariant} from "../types/RaceVariant.ts";
-// import type { SocialStatuse } from '../types/SocialStatuse';
-// import type { SpecialAbilitie } from '../types/SpecialAbilitie';
-// import type { SpecialAbilityGroup } from '../types/SpecialAbilityGroup';
-// import type { SpellEnhancement } from '../types/SpellEnhancement';
-// import type { SpellGroup } from '../types/SpellGroup';
-// import type { Spell } from '../types/Spell';
-// import type { State } from '../types/State';
-// import type { Subject } from '../types/Subject';
-// import type { Tribe } from '../types/Tribe';
-// import type { ZibiljaRitual } from '../types/ZibiljaRitual';
+import type {Race} from '@/types/Race';
+import type {Profession} from '@/types/Profession';
+import type {Attribute} from '@/types/Attribute';
+import type {AttributeValue} from '@/types/CharacterJson';
+import type {Advantage} from '@/types/Advantage';
+import type {AnimistForce} from '@/types/AnimistForce';
+// import type { ArcaneBardTradition } from '@/types/ArcaneBardTradition';
+// import type { ArcaneDancerTradition } from '@/types/ArcaneDancerTradition';
+// import type { ArmorType } from '@/types/ArmorType';
+// import type { Aspect } from '@/types/Aspect';
+// import type { BlessedTradition } from '@/types/BlessedTradition';
+// import type { Blessing } from '@/types/Blessing';
+// import type { Book } from '@/types/Book';
+// import type { Brew } from '@/types/Brew';
+// import type { Cantrip } from '@/types/Cantrip';
+// import type { CombatSpecialAbilityGroup } from '@/types/CombatSpecialAbilityGroup';
+// import type { CombatTechniqueGroup } from '@/types/CombatTechniqueGroup';
+// import type { CombatTechnique } from '@/types/CombatTechnique';
+// import type { Condition } from '@/types/Condition';
+// import type { Culture } from '@/types/Culture';
+// import type { Curse } from '@/types/Curse';
+// import type { DerivedCharacteristic } from '@/types/DerivedCharacteristic';
+// import type { Disadvantage } from '@/types/Disadvantage';
+// import type { DominationRitual } from '@/types/DominationRitual';
+// import type { Element } from '@/types/Element';
+// import type { ElvenMagicalSong } from '@/types/ElvenMagicalSong';
+// import type { EquipmentGroup } from '@/types/EquipmentGroup';
+// import type { EquipmentPackage } from '@/types/EquipmentPackage';
+// import type { Equipment } from '@/types/Equipment';
+// import type { ExperienceLevel } from '@/types/ExperienceLevel';
+// import type { EyeColor } from '@/types/EyeColor';
+// import type { FocusRule } from '@/types/FocusRule';
+// import type { GeodeRitual } from '@/types/GeodeRitual';
+// import type { HairColor } from '@/types/HairColor';
+// import type { LiturgicalChantEnhancement } from '@/types/LiturgicalChantEnhancement';
+// import type { LiturgicalChantGroup } from '@/types/LiturgicalChantGroup';
+// import type { LiturgicalChant } from '@/types/LiturgicalChant';
+// import type { MagicalDance } from '@/types/MagicalDance';
+// import type { MagicalMelodie } from '@/types/MagicalMelodie';
+// import type { MagicalTradition } from '@/types/MagicalTradition';
+// import type { OptionalRule } from '@/types/OptionalRule';
+// import type { Pact } from '@/types/Pact';
+// import type { PatronCategorie } from '@/types/PatronCategorie';
+// import type { Patron } from '@/types/Patron';
+// import type { ProfessionVariant } from '@/types/ProfessionVariant';
+// import type { Propertie } from '@/types/Propertie';
+// import type { RaceVariant } from '@/types/RaceVariant';
+// import type { Reache } from '@/types/Reache';
+// import type { RogueSpell } from '@/types/RogueSpell';
+// import type { SkillGroup } from '@/types/SkillGroup';
+import type {Skill} from '@/types/Skill';
+import type {RaceVariant} from "@/types/RaceVariant.ts";
+// import type { SocialStatuse } from '@/types/SocialStatuse';
+// import type { SpecialAbilitie } from '@/types/SpecialAbilitie';
+// import type { SpecialAbilityGroup } from '@/types/SpecialAbilityGroup';
+// import type { SpellEnhancement } from '@/types/SpellEnhancement';
+// import type { SpellGroup } from '@/types/SpellGroup';
+// import type { Spell } from '@/types/Spell';
+// import type { State } from '@/types/State';
+// import type { Subject } from '@/types/Subject';
+// import type { Tribe } from '@/types/Tribe';
+// import type { ZibiljaRitual } from '@/types/ZibiljaRitual';
 
 /**
  * Generic function to load data from a JSON file
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 227a6c6..50de077 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,10 +3,13 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2022",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -14,14 +17,21 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   },
-  "include": ["src"]
+  "include": [
+    "src"
+  ]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 96394de..33144d7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,7 @@ import {defineConfig} from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from "@tailwindcss/vite";
 import {viteStaticCopy} from "vite-plugin-static-copy";
+import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -12,9 +13,14 @@ export default defineConfig({
       targets: [
         {src: 'src/assets/database/*.json', dest: 'database'},
       ],
-    })
+    }),
   ],
   base: './',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    }
+  },
   build: {
     minify: 'esbuild', // ← Statt terser
     rollupOptions: {