PR for feature/app-layout

.github/workflows/neon_workflow.yml

@@ -0,0 +1,97 @@
+name: Create/Delete Branch for Pull Request
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  setup:
+    name: Setup
+    outputs:
+      branch: ${{ steps.branch_name.outputs.current_branch }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get branch name
+        id: branch_name
+        uses: tj-actions/branch-names@v8
+
+  create_neon_branch:
+    name: Create Neon Branch
+    outputs:
+      db_url: ${{ steps.create_neon_branch_encode.outputs.db_url }}
+      db_url_with_pooler: ${{ steps.create_neon_branch_encode.outputs.db_url_with_pooler }}
+    needs: setup
+    if: |
+      github.event_name == 'pull_request' && (
+      github.event.action == 'synchronize'
+      || github.event.action == 'opened'
+      || github.event.action == 'reopened')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get branch expiration date as an env variable (2 weeks from now)
+        id: get_expiration_date
+        run: echo "EXPIRES_AT=$(date -u --date '+14 days' +'%Y-%m-%dT%H:%M:%SZ')" >> "$GITHUB_ENV"
+      - name: Create Neon Branch
+        id: create_neon_branch
+        uses: neondatabase/create-branch-action@v6
+        with:
+          project_id: ${{ vars.NEON_PROJECT_ID }}
+          branch_name: preview/pr-${{ github.event.number }}-${{ needs.setup.outputs.branch }}
+          api_key: ${{ secrets.NEON_API_KEY }}
+          expires_at: ${{ env.EXPIRES_AT }}
+
+# The step above creates a new Neon branch.
+# You may want to do something with the new branch, such as run migrations, run tests
+# on it, or send the connection details to a hosting platform environment.
+# The branch DATABASE_URL is available to you via:
+# "${{ steps.create_neon_branch.outputs.db_url_with_pooler }}".
+# It's important you don't log the DATABASE_URL as output as it contains a username and
+# password for your database.
+# For example, you can uncomment the lines below to run a database migration command:
+#      - name: Run Migrations
+#        run: npm run db:migrate
+#        env:
+#          # to use pooled connection
+#          DATABASE_URL: "${{ steps.create_neon_branch.outputs.db_url_with_pooler }}"
+#          # OR to use unpooled connection
+#          # DATABASE_URL: "${{ steps.create_neon_branch.outputs.db_url }}"
+
+# Following the step above, which runs database migrations, you may want to check
+# for schema changes in your database. We recommend using the following action to
+# post a comment to your pull request with the schema diff. For this action to work,
+# you also need to give permissions to the workflow job to be able to post comments
+# and read your repository contents. Add the following permissions to the workflow job:
+#
+# permissions:
+#   contents: read
+#   pull-requests: write
+#
+# You can also check out https://github.com/neondatabase/schema-diff-action for more
+# information on how to use the schema diff action.
+# You can uncomment the lines below to enable the schema diff action.
+#      - name: Post Schema Diff Comment to PR
+#        uses: neondatabase/schema-diff-action@v1
+#        with:
+#          project_id: ${{ vars.NEON_PROJECT_ID }}
+#          compare_branch: preview/pr-${{ github.event.number }}-${{ needs.setup.outputs.branch }}
+#          api_key: ${{ secrets.NEON_API_KEY }}
+
+  delete_neon_branch:
+    name: Delete Neon Branch
+    needs: setup
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Delete Neon Branch
+        uses: neondatabase/delete-branch-action@v3
+        with:
+          project_id: ${{ vars.NEON_PROJECT_ID }}
+          branch: preview/pr-${{ github.event.number }}-${{ needs.setup.outputs.branch }}
+          api_key: ${{ secrets.NEON_API_KEY }}

.gitignore

@@ -39,3 +39,10 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+/lib/generated/prisma
+
+.mcp.json
+.claude
+.cursor
+.vscode

app/event/[id]/page.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TabsContent } from "@radix-ui/react-tabs";
+import { Plus, Redo, Search, Undo } from "lucide-react";
+
+export default function EventPage() {
+  return (
+    <div className="flex flex-col h-full py-2 pr-2">
+      <div className="min-h-12 max-h-12 bg-muted rounded-md px-3 flex items-center">
+        <h1 className="text-xl">Placeholder Event Name</h1>
+        <Button variant="outline" className="ml-auto">
+          <Undo />
+        </Button>
+        <Button variant="outline" className="ml-2">
+          <Redo />
+        </Button>
+      </div>
+      <div className="flex-1 flex flex-col border shadow-md rounded-md p-2 mt-2">
+        <Tabs defaultValue="add-event" className="flex flex-col flex-1">
+          <TabsContent value="location-1" className="flex-1"></TabsContent>
+          <TabsContent value="location-2" className="flex-1"></TabsContent>
+          <TabsContent value="add-event" className="flex-1">
+            <div className="flex p-3 pt-1 items-center">
+              <h1 className="text-lg">Add Location</h1>
+              <div className="relative ml-auto">
+                <Input placeholder="Search location" className="ml-auto max-w-48" />
+                <Search className="absolute right-2 top-1.5 text-muted-foreground" />
+              </div>
+            </div>
+            <div className="w-full h-[calc(100%-3.5rem)] flex flex-wrap gap-2 overflow-y-auto">
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+              <div className="mx-auto w-1/6 h-1/3 bg-slate-800 animate-pulse rounded-md"></div>
+            </div>
+          </TabsContent>
+          <TabsList>
+            <TabsTrigger value="location-1">Location 1</TabsTrigger>
+            <TabsTrigger value="location-2">Location 2</TabsTrigger>
+            <TabsTrigger value="add-event">
+              <Plus />
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -1,26 +1,141 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.15 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+
+  --primary: rgb(0, 55, 100);
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: rgb(115, 179, 230);
+  --secondary-foreground: oklch(0.15 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.55 0 0);
+
+  --accent: rgb(246, 167, 4);
+  --accent-foreground: oklch(0.15 0 0);
+
+  --destructive: oklch(0.65 0.25 27);
+  --border: oklch(0.92 0 0);
+  --input: oklch(0.92 0 0);
+  --ring: oklch(0.7 0 0);
+
+  --chart-1: rgb(0, 55, 100);
+  --chart-2: rgb(115, 179, 230);
+  --chart-3: rgb(246, 167, 4);
+  --chart-4: oklch(0.83 0.18 84);
+  --chart-5: oklch(0.77 0.19 70);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-primary: rgb(0, 55, 100);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: rgb(246, 167, 4);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.92 0 0);
+  --sidebar-ring: oklch(0.7 0 0);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.dark {
+  --background: oklch(0.15 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --card: oklch(0.2 0 0);
+  --card-foreground: oklch(0.985 0 0);
+
+  --popover: oklch(0.2 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  --primary: rgb(115, 179, 230);
+  --primary-foreground: oklch(0.15 0 0);
+
+  --secondary: rgb(0, 55, 100);
+  --secondary-foreground: oklch(0.985 0 0);
+
+  --muted: oklch(0.25 0 0);
+  --muted-foreground: oklch(0.7 0 0);
+
+  --accent: rgb(246, 167, 4);
+  --accent-foreground: oklch(0.15 0 0);
+
+  --destructive: oklch(0.7 0.18 22);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.55 0 0);
+
+  --chart-1: rgb(115, 179, 230);
+  --chart-2: rgb(246, 167, 4);
+  --chart-3: rgb(0, 55, 100);
+  --chart-4: oklch(0.65 0.25 303);
+  --chart-5: oklch(0.64 0.24 16);
+
+  --sidebar: oklch(0.2 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: rgb(115, 179, 230);
+  --sidebar-primary-foreground: oklch(0.15 0 0);
+  --sidebar-accent: rgb(246, 167, 4);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.55 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

app/handler/[...stack]/page.tsx

@@ -0,0 +1,6 @@
+import { StackHandler } from "@stackframe/stack"; 
+import { stackServerApp } from "../../../stack/server"; 
+
+export default function Handler(props: unknown) { 
+   return <StackHandler fullPage app = { stackServerApp } routeProps = { props } />; 
+ } 

app/layout.tsx

@@ -1,20 +1,14 @@
+import { ThemeProvider } from "@/components/theme-provider";
+import { StackProvider, StackTheme } from "@stackframe/stack";
+import { stackClientApp } from "../stack/client";
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import SidebarHelper from "@/components/ui/sidebar-helper";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Pinpoint",
+  description: "Custom map software designed by CSG",
 };
 
 export default function RootLayout({
@@ -23,11 +17,22 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className="antialiased w-screen h-screen overflow-hidden">
+        <Suspense>
+          <StackProvider app={stackClientApp}>
+            <StackTheme>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+              >
+                <SidebarHelper>{children}</SidebarHelper>
+              </ThemeProvider>
+            </StackTheme>
+          </StackProvider>
+        </Suspense>
       </body>
     </html>
   );

app/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <></>;
+}