Tracksight refactor 3 (#1333)

### Changelist 
* Added path aliases for lib and ui (i.e to import particular ui
component, import { Sonner } from @ts/ui)
* Restructured to move small ui components into a global package to be
accessed from anywhere
* Added sonner, clsx, cva, tailwindmerge, tailwindanimate, shadcn, etc.
* refactor components to use sonner/toast instead of messageAPI
* Use Next.js built in navigation page structure
* Folders now contain page and associated component (visualize,
dashboard, etc.), as well as any larger, non reusable components
* use ThemeProvider to handle light/dark mode
* update README
* small code style things to make code more readable
### Testing Done
* UI Testing to ensure that functionality remains the same. Only
frontend changes were made; frontend logic/backend is unchaged.
* Only Navbar has changed visually as navigation is now handled properly
by Next.js.

---------

Co-authored-by: Edwin <[email protected]>

software/tracksight/frontend/README.md

@@ -1,28 +1,23 @@
+# Tracksight Frontend
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Getting Started
+## Getting Started (running the dev server)
 
 1. Install Node.js > v18.8.0. `sudo apt install node` on Linux will install an outdated version so you need to manually seek it(should probably use `nvm`).
 2. Install packages with `npm install` inside this directory
 3. Run the development server: `npm run dev`
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## Deployment Server
 
-## Deploy on Vercel
+Please refer to the `frontend` service of `sofware/tracksight/docker-compose.yml` for notes on how to deploy the frontend server.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## TODOs
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- Move shared zoom data to a shared context
+- Migrate all fetch calls to [Tanstack Query](https://tanstack.com/query/latest)
+- Move from src to root directory
+- Better chart library
+- When auto fetch times when zooming

software/tracksight/frontend/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}