refactor(pathing): use path alias to uniformize imports

src/App.tsx

@@ -1,7 +1,7 @@
-import FeedsPanel from "./FeedsPanel";
-import NavigationBar from "./NavigationBar";
-import SettingsPanel from "./SettingsPanel";
-import useNavigation, { routes } from "./hooks/useNavigation";
+import FeedsPanel from "@/components/FeedsPanel";
+import NavigationBar from "@/components/NavigationBar";
+import SettingsPanel from "@/components/SettingsPanel";
+import useNavigation, { routes } from "@/hooks/useNavigation";
 
 export default function App() {
 	const { location } = useNavigation();

src/components/FeedsPanel.tsx

@@ -2,9 +2,9 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Typography from "@mui/material/Typography";
 
-import useRSSFeeds from "./hooks/useRSSFeeds";
-import useSettings from "./hooks/useSettings";
-import sortFeedItemsByDate from "./utils";
+import useRSSFeeds from "@/hooks/useRSSFeeds";
+import useSettings from "@/hooks/useSettings";
+import sortFeedItemsByDate from "@/utils";
 
 interface CardProps {
 	title: string;

src/components/NavigationBar.tsx

@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 
-import useNavigation, { routes } from "./hooks/useNavigation";
+import useNavigation, { routes } from "@/hooks/useNavigation";
 
 const title = {
 	flexGrow: 1,

src/components/SettingsPanel.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 
 import { css } from "@emotion/react";
 
-import useSettings from "./hooks/useSettings";
+import useSettings from "@/hooks/useSettings";
 
 const urlCard = {
 	margin: "5px",

tsconfig.json

@@ -6,7 +6,10 @@
         "moduleResolution": "node",
         "esModuleInterop": true,
         "skipLibCheck": true,
-        "rootDir": "."
+        "rootDir": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        }
     },
     "include": ["src/**/*", "netlify/**/*"]
 }