feat: complete UI

apps/web/app/page.tsx

@@ -16,6 +16,7 @@ import { MapCursor } from "@/components/MapCursor";
 import { TargetLine } from "@/components/TargetLine";
 import { Polyline } from "@/components/Polyline";
 import { Polygon } from "@/components/Polygon";
+import { Sidebar } from "@/components/Sidebar";
 import { JEEPNEY_ROUTES, CAMPUS_ZONES, ZONE_CATEGORIES } from "@/data/map-layers";
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { useTheme } from "@/lib/ThemeContext";
@@ -69,6 +70,9 @@ export default function Home() {
         });
     }, []);
 
+	const mockUserLocation = { lat: 14.6549, lng: 121.0645 };
+	const mockHeading = 45;
+
 	const { theme } = useTheme();
 
 	const [pendingPinCoords, setPendingPinCoords] = useState<{
@@ -102,9 +106,6 @@ export default function Home() {
 		return () => window.removeEventListener("mousemove", handleMouseMove);
 	}, [isAddingPin]);
 
-	const mockUserLocation = { lat: 14.6549, lng: 121.0645 };
-	const mockHeading = 45;
-
 	return (
 		<APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY || ""}>
 			<main
@@ -237,6 +238,8 @@ export default function Home() {
                     onToggleRoute={handleToggleRoute}
                     activeZoneCategories={activeZoneCategories}
                     onToggleZoneCategory={handleToggleZoneCategory}
+                    userLocation={mockUserLocation}
+					hideControls={!!selectedPinId}
                 />
 
 				{/* TARGETING CROSSHAIR (Only visible when armed) */}
@@ -290,6 +293,11 @@ export default function Home() {
 					}}
 				/>
 
+				<Sidebar 
+                    isOpen={mode === "MENU"} 
+                    onClose={toggleMenu} 
+                />
+
 				{pendingPinCoords && (
 					<AddPinModal
 						coords={pendingPinCoords}

apps/web/components/AddPinModal.tsx

@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
 import z from "zod";
 import { fileSchema } from "@repo/api/schemas";
+import { getPinColor } from "@/data/pin-categories";
 
 type Pin = Omit<PinRouterInputs["userCreate"], "ownerId">;
 
@@ -129,29 +130,40 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
 					</div>
 
 					<div className="input-group">
-						<span>PIN TYPES (select all that apply)</span>
-						<div className="type-selector">
-							{tagsData?.map((t) => (
-								<button
-									key={t.id}
-									type="button"
-									className={`type-btn ${tags.includes(t.id) ? "active" : ""}`}
-									onClick={() => {
-										if (tags.includes(t.id)) {
-											formMethods.setValue(
-												"tags",
-												tags.filter((tag) => tag !== t.id),
-											);
-										} else {
-											formMethods.setValue("tags", [...tags, t.id]);
-										}
-									}}
-								>
-									{t.title.toUpperCase()}
-								</button>
-							))}
-						</div>
-					</div>
+                        <span>PIN TYPES (select all that apply)</span>
+                        <div className="type-selector">
+                            {tagsData?.map((t) => {
+                                const isActive = tags.includes(t.id);
+                                const tagColor = getPinColor(t.title);
+
+                                return (
+                                    <button
+                                        key={t.id}
+                                        type="button"
+                                        className="type-btn"
+                                        onClick={() => {
+                                            if (isActive) {
+                                                formMethods.setValue(
+                                                    "tags",
+                                                    tags.filter((tag) => tag !== t.id),
+                                                );
+                                            } else {
+                                                formMethods.setValue("tags", [...tags, t.id]);
+                                            }
+                                        }}
+                                        style={isActive ? {
+                                            backgroundColor: `color-mix(in srgb, ${tagColor} 25%, transparent)`, 
+                                            borderColor: tagColor,
+                                            color: tagColor,
+                                            boxShadow: `inset 0 0 10px color-mix(in srgb, ${tagColor} 40%, transparent)`
+                                        } : {}}
+                                    >
+                                        {t.title.toUpperCase()}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
 
 					<input
 						type="file"
@@ -269,13 +281,6 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
           color: var(--text-primary);
         }
 
-        .type-btn.active {
-          background: rgba(0, 229, 255, 0.15);
-          border-color: var(--neon-blue, #00E5FF);
-          color: var(--neon-blue, #00E5FF);
-          box-shadow: inset 0 0 8px var(--shadow-glow);
-        }
-
         .action-row {
           display: flex;
           gap: 12px;