Index: pages/+Head.tsx
===================================================================
--- pages/+Head.tsx (revision 6196d609d200de0e04c2c142c0150d778cb11ec6)
+++ (revision )
@@ -1,7 +1,0 @@
-// https://vike.dev/Head
-
-import logoUrl from "../assets/logo.svg";
-
-export function Head() {
- return ;
-}
Index: pages/+Layout.telefunc.ts
===================================================================
--- pages/+Layout.telefunc.ts (revision 6196d609d200de0e04c2c142c0150d778cb11ec6)
+++ pages/+Layout.telefunc.ts (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -50,13 +50,4 @@
return approvedBuilds;
-}
-
-export async function onGetHighestRankedBuilds({ limit }
- : { limit?: number }) {
- const context = ctx();
-
- const highestRankedBuilds = await drizzleQueries.getHighestRankedBuilds(context.db, limit);
-
- return highestRankedBuilds;
}
Index: pages/+Layout.tsx
===================================================================
--- pages/+Layout.tsx (revision 6196d609d200de0e04c2c142c0150d778cb11ec6)
+++ pages/+Layout.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -1,74 +1,37 @@
-import "./Layout.css";
+import React from 'react';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+import Box from '@mui/material/Box';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
-import logoUrl from "../assets/logo.svg";
-import { Link } from "../components/Link";
+const theme = createTheme({
+ palette: {
+ mode: 'dark',
+ primary: { main: '#ff8201' },
+ background: { default: '#121212', paper: '#1e1e1e' },
+ },
+});
export default function Layout({ children }: { children: React.ReactNode }) {
- return (
-
-
-
- Welcome
- Todo
- Data Fetching
-
- {children}
-
- );
+ return (
+
+
+
+
+
+ {children}
+
+
+
+
+ );
}
-
-function Sidebar({ children }: { children: React.ReactNode }) {
- return (
-
- );
-}
-
-function Content({ children }: { children: React.ReactNode }) {
- return (
-
- );
-}
-
-function Logo() {
- return (
-
- );
-}
Index: pages/+config.ts
===================================================================
--- pages/+config.ts (revision 6196d609d200de0e04c2c142c0150d778cb11ec6)
+++ pages/+config.ts (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -1,3 +1,3 @@
-import type { Config } from "vike/types";
+import type {Config} from "vike/types";
import vikePhoton from "vike-photon/config";
import vikeReact from "vike-react/config";
@@ -7,14 +7,13 @@
export default {
- // https://vike.dev/head-tags
- title: "My Vike App",
- description: "Demo showcasing Vike",
+ // https://vike.dev/head-tags
+ title: "PC Forge",
+ description: "PC Forge Site",
+ passToClient: ["user"],
+ extends: [vikeReact, vikePhoton],
- passToClient: ["user"],
- extends: [vikeReact, vikePhoton],
-
- // https://vike.dev/vike-photon
- photon: {
- server: "../server/entry.ts",
- },
+ // https://vike.dev/vike-photon
+ photon: {
+ server: "../server/entry.ts",
+ },
} satisfies Config;
Index: pages/Head.tsx
===================================================================
--- pages/Head.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ pages/Head.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,7 @@
+// https://vike.dev/Head
+
+import logoUrl from "../assets/logo.svg";
+
+export function Head() {
+ return ;
+}
Index: pages/Layout.css
===================================================================
--- pages/Layout.css (revision 6196d609d200de0e04c2c142c0150d778cb11ec6)
+++ pages/Layout.css (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -1,29 +1,132 @@
-/* Links */
-a {
- text-decoration: none;
-}
-#sidebar a {
- padding: 2px 10px;
- margin-left: -10px;
-}
-#sidebar a.is-active {
- background-color: #eee;
+html, body {
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+
}
-/* Reset */
body {
- margin: 0;
- font-family: sans-serif;
-}
-* {
- box-sizing: border-box;
+ background: #262636;
}
-/* Page Transition Animation */
+#app-shell {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
#page-content {
- opacity: 1;
- transition: opacity 0.3s ease-in-out;
+ flex: 1;
+ padding: 32px 20px;
+ max-width: 1000px;
+ width: 100%;
+ margin: 0 auto;
}
-body.page-transition #page-content {
- opacity: 0;
+
+.navbar {
+ background: black;
+ color: white;
}
+
+.navbar__logo{
+ height: 32px;
+ width: auto;
+ margin-right: 5px;
+}
+
+.navbar a {
+ color: white;
+ text-decoration: none;
+}
+
+.navbar__inner {
+ width: 100%;
+ margin: 0 auto;
+ padding: 5px 15px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.navbar__top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 15px;
+ min-width: 0;
+}
+
+.navbar__bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ min-width: 0;
+}
+
+.navbar__brand {
+ font-size: 25px;
+ font-weight: 700;
+}
+
+.navbar__auth {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 18px;
+ opacity: 0.95;
+ margin-right: 30px;
+}
+
+.navbar__sep {
+ opacity: 0.5;
+}
+
+.navbar__links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ font-size: 18px;
+}
+
+.navbar__links a {
+ padding: 6px 8px;
+ border-radius: 8px;
+}
+
+.navbar__links a:hover,
+.navbar__auth a:hover {
+ background: rgba(255, 255, 255, 0.18);
+ color: #ff8201;
+}
+
+.navbar__search input {
+ width: 220px;
+ max-width: 45vw;
+ padding: 8px 10px;
+ border-radius: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.15);
+ background: rgba(255, 255, 255, 0.06);
+ color: #eaeaea;
+ outline: none;
+ margin-right: 30px;
+ min-width: 0;
+
+}
+
+.navbar__search input::placeholder {
+ color: rgba(234, 234, 234, 0.6);
+}
+
+.footer {
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ background: black;
+ color: gray;
+}
+
+.footer__inner {
+ width: 100%;
+ margin: 0 auto;
+ padding: 18px 20px;
+ font-size: 14px;
+}
Index: pages/auth/login/+Page.tsx
===================================================================
--- pages/auth/login/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ pages/auth/login/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { Container, Box, Typography, TextField, Button, Paper, Alert } from "@mui/material";
+
+export default function LoginPage() {
+ const [error, setError] = useState(null);
+
+ const handleSubmit = async (event: React.FormEvent) => {
+ event.preventDefault();
+ setError(null);
+
+ const formData = new FormData(event.currentTarget);
+ const username = formData.get("username");
+ const password = formData.get("password");
+
+ const res = await fetch("/api/auth/callback/credentials", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ username,
+ password,
+ csrfToken: await getCsrfToken(),
+ }),
+ });
+
+ if (res.url.includes("error")) {
+ setError("Invalid username or password");
+ } else {
+ window.location.href = "/dashboard/user";
+ }
+ };
+
+ return (
+
+
+
+
+
+ Log in
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+async function getCsrfToken() {
+ const res = await fetch("/api/auth/csrf");
+ const data = await res.json();
+ return data.csrfToken;
+}
Index: pages/auth/register/+Page.tsx
===================================================================
--- pages/auth/register/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ pages/auth/register/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,88 @@
+import React, {useState} from "react";
+import {Container, Box, Typography, TextField, Button, Paper, Alert, AlertColor} from "@mui/material";
+import {registerNewUser} from "./register.telefunc";
+
+export default function RegisterPage() {
+ const [username, setUsername] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [message, setMessage] = useState(null);
+ const [severity, setSeverity] = useState("info");
+
+ async function onSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ setLoading(true);
+ setMessage(null);
+
+ try {
+ const result = await registerNewUser({username, email, password});
+ if (result?.success) {
+ setSeverity("success");
+ setMessage("Registration successful! Redirecting...");
+ window.location.href = "/auth/login";
+ } else {
+ setSeverity("error");
+ setMessage("Registration failed.");
+ }
+ } catch (err) {
+ setSeverity("error");
+ setMessage("An error occurred. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ return (
+
+
+
+
+ Register
+
+
+
+ setUsername(e.target.value)}
+ />
+ setEmail(e.target.value)}
+ />
+ setPassword(e.target.value)}
+ />
+
+
+
+ {message && {message}}
+
+
+
+
+ );
+}
Index: pages/dashboard/user/+Page.tsx
===================================================================
--- pages/dashboard/user/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ pages/dashboard/user/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,225 @@
+import React, {useEffect, useState} from 'react';
+import {
+ Container,
+ Paper,
+ Typography,
+ Box,
+ Avatar,
+ Divider,
+ Button,
+ CircularProgress,
+ Card,
+ CardContent,
+ CardActionArea,
+ IconButton
+} from '@mui/material';
+import Grid from '@mui/material/Grid';
+import {Dialog, DialogTitle, DialogContent, DialogActions} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+import PersonIcon from '@mui/icons-material/Person';
+import ComputerIcon from '@mui/icons-material/Computer';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+
+import {getUserInfoAndData, onDeleteBuild} from "./userDashboard.telefunc";
+
+type DashboardData = {
+ user: { username: string; email?: string; [key: string]: any };
+ userBuilds: any[];
+ favoriteBuilds: any[];
+};
+
+export default function UserDashboard() {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [openMyBuildsDialog, setOpenMyBuildsDialog] = useState(false);
+
+ const loadData = () => {
+ getUserInfoAndData()
+ .then((result) => {
+ setData(result);
+ setLoading(false);
+ })
+ .catch((err) => {
+ console.error(err);
+ setError("Failed to load dashboard. Please log in.");
+ setLoading(false);
+ });
+ };
+
+ useEffect(() => {
+ loadData();
+ }, []);
+
+ const handleDelete = async (buildId: number) => {
+ if (!confirm("Are you sure you want to delete this build?")) return;
+ try {
+ await onDeleteBuild({buildId});
+ loadData();
+ } catch (e) {
+ alert("Failed to delete build");
+ }
+ };
+
+ if (loading) return ;
+ if (error || !data) return {error};
+
+
+ // @ts-ignore
+ return (
+
+
+
+
+
+
+ {data.user.username}
+ {data.user.email}
+
+ {/**/}
+
+
+
+
+
+
+
+
+
+
+ Favorited Builds
+
+
+
+ {data.favoriteBuilds.length === 0 ? (
+ You haven't favorited
+ any builds yet.
+ ) : (
+
+ {data.favoriteBuilds.map((build: any) => (
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+ My Builds
+
+
+ {data.userBuilds.length > 4 && (
+
+ )}
+
+
+
+ {data.userBuilds.length === 0 ? (
+
+ You haven't created any builds
+ yet.
+
+
+ ) : (
+
+ {data.userBuilds.slice(0, 3).map((build: any) => (
+
+ handleDelete(build.id)}
+ isOwner={true}
+ />
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function BuildCard({build, onDelete, isOwner}: { build: any, onDelete?: () => void, isOwner?: boolean }) {
+ return (
+
+
+
+
+ {build.name || `Build #${build.id}`}
+
+
+ Created: {build.createdAt ? new Date(build.createdAt).toLocaleDateString() : 'Unknown'}
+
+
+
+
+ {isOwner && (
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
Index: pages/index/+Page.tsx
===================================================================
--- pages/index/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ pages/index/+Page.tsx (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,255 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Container, Box, Typography, Button, Grid, Card, CardMedia, CardContent,
+ CardActions, Chip, Rating, Dialog, DialogTitle, DialogContent, DialogActions,
+ IconButton, Divider
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+import CommentIcon from '@mui/icons-material/Comment';
+import StarIcon from '@mui/icons-material/Star';
+import HardwareIcon from '@mui/icons-material/Memory';
+import ListIcon from '@mui/icons-material/List'; // Icon for "Show All"
+
+// --- PLACEHOLDER ASSETS ---
+const PLACEHOLDER_IMG = "https://placehold.co/600x400?text=Gaming+PC";
+
+import { onGetHighestRankedBuilds, onCloneBuild } from './buildCards.telefunc';
+import { onGetApprovedBuilds } from '../+Layout.telefunc';
+import {getAuthState} from "../../server/telefunc/ctx"; //
+
+export default function HomePage() {
+ const [data, setData] = useState(null);
+ const [selectedBuild, setSelectedBuild] = useState(null); // For Detail Popup
+ const [openDetailPopup, setOpenDetailPopup] = useState(false);
+
+ // NEW: Popup for "All Top Ranked Builds"
+ const [openRankedPopup, setOpenRankedPopup] = useState(false);
+
+ useEffect(() => {
+ async function loadSite(){
+ try{
+ const [
+ authData, highestRankedBuilds, commnityBuilds
+ ] = await Promise.all([
+ getAuthState(),
+ onGetHighestRankedBuilds({ limit: 3 }),
+ onGetApprovedBuilds({ limit: 12 })
+ ]);
+
+ setData({
+ isLoggedIn: authData.isLoggedIn,
+ userId: authData.userId,
+ prebuilts: highestRankedBuilds,
+ communityBuilds: commnityBuilds
+ });
+ } catch (error) {
+ console.error("Error loading homepage data:", error);
+ }
+ }
+
+ loadSite();
+}, []);
+
+ // Open Build Details
+ const handleCardClick = (build: any) => {
+ setSelectedBuild(build);
+ setOpenDetailPopup(true);
+ };
+
+ const handleClone = async () => {
+ if (!data?.isLoggedIn) return alert("Please login to clone builds!");
+ if (confirm(`Clone "${selectedBuild.name}" to your dashboard?`)) {
+ await onCloneBuild({ buildId: selectedBuild.id });
+ alert("Build cloned! Check your dashboard.");
+ setOpenDetailPopup(false);
+ }
+ };
+
+ if (!data) return Loading Forge...;
+
+ return (
+
+
+
+ Forge Your Ultimate Machine
+
+ Build, share, discuss, and discover custom PC configurations.
+
+
+ Join the community today.
+
+
+ } sx={{ fontSize: '1.2rem', px: 4, py: 1.5 }}>
+ Start Forging
+
+
+
+
+
+
+
+ Hall of Fame
+ The highest rated configurations from across the community.
+
+ }
+ onClick={() => setOpenRankedPopup(true)}
+ >
+ Show All Top Ranked
+
+
+
+
+
+
+ The Elite
+
+ These 3 builds represent the pinnacle of performance and looks as voted by the PC Forge community.
+
+
+
+
+ {data.prebuilts.map((build: any) => (
+
+ handleCardClick(build)} />
+
+ ))}
+
+
+
+
+ {data.communityBuilds.map((build: any) => (
+
+ handleCardClick(build)} />
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function SectionHeader({ title, subtitle }: { title: string, subtitle: string }) {
+ return (
+
+ {title}
+ {subtitle}
+
+ );
+}
+
+function BuildCard({ build, onClick }: { build: any, onClick: () => void }) {
+ return (
+
+
+
+ {build.name}
+
+
+
+
+ {Number(build.avgRating || 0).toFixed(1)}
+
+
+ {build.commentCount || 0} reviews
+
+
+
+
+ );
+}
+
+function ComponentRow({ name, value }: { name: string, value: string }) {
+ return (
+
+ {name}
+ {value}
+
+ );
+}
Index: pages/index/buildCards.telefunc.ts
===================================================================
--- pages/index/buildCards.telefunc.ts (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ pages/index/buildCards.telefunc.ts (revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,25 @@
+import {ctx, requireUser} from "../../server/telefunc/ctx";
+import * as drizzleQueries from "../../database/drizzle/queries";
+import {Abort} from "telefunc";
+
+export async function onGetHighestRankedBuilds({ limit }
+ : { limit?: number }) {
+ const context = ctx();
+
+ const highestRankedBuilds = await drizzleQueries.getHighestRankedBuilds(context.db, limit);
+
+ return highestRankedBuilds;
+}
+
+export async function onCloneBuild({ buildId }
+ : { buildId: number }) {
+ const { c, userId } = requireUser()
+
+ if (!Number.isInteger(buildId) || buildId <= 0) throw Abort();
+
+ const newBuild = await drizzleQueries.cloneBuild(c.db, userId, buildId);
+
+ if (!newBuild) throw Abort();
+
+ return newBuild;
+}