feat: scaffolding for package detail

.github/workflows/frontend-build-and-test.yml

@@ -21,3 +21,7 @@ jobs:
         run: |
           cd app && npm ci && npm run build
           cp -r build ../build
+
+      - name: Format check
+        run: cd app && npm run format-check
+

app/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

app/.prettierrc

@@ -0,0 +1 @@
+{}

app/package.json

@@ -18,6 +18,7 @@
     "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^10.0.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-use-cookie": "^1.5.0",
@@ -30,7 +31,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "npx prettier . --write",
+    "format-check": "npx prettier ."
   },
   "eslintConfig": {
     "extends": [
@@ -49,5 +52,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.0.2",
+    "prettier": "3.5.3",
+    "typescript-eslint": "^8.26.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

app/src/App.css

@@ -1,38 +1,73 @@
-.App {
+/* Dark Mode Theme for Main App Container */
+.app-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
   text-align: center;
+  background-color: #1e1e1e;
+  height: 100vh;
+  color: #e0e0e0;
+  overflow: hidden;
+}
+
+.app-toolbar {
+  background-color: #181818 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.app-logo {
+  flex-grow: 1;
+  display: block;
+  color: #00f58c;
+  font-size: 24px;
+  font-family: monospace;
+  cursor: pointer;
+  font-weight: bold;
+  transition: color 0.2s ease;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.app-logo:hover {
+  color: #2dffa0;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.app-content {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
-  color: #61dafb;
+/* Global Dark Mode styles */
+body {
+  background-color: #1e1e1e;
+  color: #e0e0e0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Button overrides */
+.MuiButton-containedPrimary {
+  background-color: #0d47a1 !important;
+  color: #ffffff !important;
+}
+
+.MuiButton-containedPrimary:hover {
+  background-color: #1565c0 !important;
+}
+
+.MuiButton-containedSecondary {
+  background-color: #00f58c !important;
+  color: #111111 !important;
+}
+
+.MuiButton-containedSecondary:hover {
+  background-color: #2dffa0 !important;
+}
+
+.MuiButton-containedWarning {
+  background-color: #bf360c !important;
+  color: #ffffff !important;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.MuiButton-containedWarning:hover {
+  background-color: #e64a19 !important;
 }

app/src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

app/src/App.tsx

@@ -1,42 +1,27 @@
-import React, { ReactNode } from 'react';
-import AppBar from '@mui/material/AppBar/AppBar';
-import Toolbar from '@mui/material/Toolbar/Toolbar';
-import { useNavigate } from 'react-router-dom';
-import UserButton from './features/toolbar/components/UserButton';
-import { useIsMobile } from './features/toolbar/hooks/useIsMobile';
-import SearchBar from './features/toolbar/components/SearchBar';
+import React, { ReactNode } from "react";
+import AppBar from "@mui/material/AppBar/AppBar";
+import Toolbar from "@mui/material/Toolbar/Toolbar";
+import { useNavigate } from "react-router-dom";
+import UserButton from "./features/toolbar/components/UserButton";
+import { useIsMobile } from "./features/toolbar/hooks/useIsMobile";
+import SearchBar from "./features/toolbar/components/SearchBar";
+import "./App.css";
 
-export const FUEL_GREEN = '#00f58c';
+export const FUEL_GREEN = "#00f58c";
 
 interface AppProps {
   children?: ReactNode;
 }
 
-function App({children}: AppProps) {
+function App({ children }: AppProps) {
   const navigate = useNavigate();
   const isMobile = useIsMobile();
 
   return (
-    <div
-      style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        textAlign: 'center',
-        backgroundColor: 'lightGrey',
-        height: '100vh',
-      }}>
-      <AppBar position='static'>
-        <Toolbar style={{ backgroundColor: '#181818' }}>
-          <div
-            style={{
-              flexGrow: 1,
-              display: 'block',
-              color: FUEL_GREEN,
-              fontSize: '24px',
-              fontFamily: 'monospace',
-              cursor: 'pointer'
-            }} onClick={()=>navigate('/')}>
+    <div className="app-container">
+      <AppBar position="static">
+        <Toolbar className="app-toolbar">
+          <div className="app-logo" onClick={() => navigate("/")}>
             forc.pub
           </div>
 
@@ -45,7 +30,7 @@ function App({children}: AppProps) {
         </Toolbar>
         {isMobile && <SearchBar />}
       </AppBar>
-      {children}
+      <div className="app-content">{children}</div>
     </div>
   );
 }

app/src/constants.ts

@@ -1,2 +1,4 @@
-export const SERVER_URI = process.env.REACT_APP_SERVER_URI ?? "http://localhost:8080";
-export const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI ?? "http://localhost:3000";
+export const SERVER_URI =
+  process.env.REACT_APP_SERVER_URI ?? "http://localhost:8080";
+export const REDIRECT_URI =
+  process.env.REACT_APP_REDIRECT_URI ?? "http://localhost:3000";

app/src/features/dahboard/components/PackageDashboard.css

@@ -0,0 +1,58 @@
+/* Dark mode styling for Package Dashboard */
+.dashboard-container {
+  margin-top: 24px;
+}
+
+.section-title {
+  border-bottom: 2px solid #90caf9 !important;
+  padding-bottom: 8px !important;
+  color: #ffffff !important;
+  font-weight: 500 !important;
+}
+
+.package-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    background-color 0.2s;
+  background-color: #2a2a2a !important;
+  border: 1px solid #333 !important;
+}
+
+.package-card-hover {
+  background-color: #383838 !important;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: transparent !important;
+}
+
+.package-name {
+  color: #90caf9 !important;
+  margin-bottom: 8px !important;
+}
+
+.package-timestamp {
+  color: #b0b0b0 !important;
+  font-size: 0.85rem !important;
+}
+
+.package-description {
+  color: #e0e0e0 !important;
+  margin-top: 8px !important;
+}
+
+.arrow-icon {
+  color: #90caf9 !important;
+  margin-left: 16px;
+  align-self: center;
+  font-size: 1.2rem !important;
+}