Restructure project

.github/workflows/ci.yml

@@ -25,9 +25,6 @@ jobs:
       - name: Lint
         run: pnpm lint
 
-      - name: Lint styles
-        run: pnpm lint:css
-
       - name: Typecheck
         run: pnpm typecheck
 

apps/admin/app/globals.css

@@ -1,74 +1,3 @@
-:root {
-  /* Colors */
-  --color-primary: #00796b;
-  --color-text-primary: #0f172a;
-  --color-background: #f8fafc;
-  --color-elevated: #f1f5f9;
-
-  /* Status colors */
-  --color-background-success: #f0fdf4;
-  --color-text-success: #166534;
-  --color-background-error: #fef2f2;
-  --color-text-error: #991b1b;
-  --color-background-warning: #fefce8;
-  --color-text-warning: #854d0e;
-
-  /* Spacings */
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-
-  /* Border radius */
-  --border-radius-rounded: var(--spacing-1);
-
-  /* Shadows */
-  --box-shadow-medium: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
-
-  /* Max widths */
-  --max-width-header: 80rem;
-
-  /* Font sizes */
-  --font-small: 0.875rem;
-  --line-height-small: 1.25rem;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-text-primary: #f8fafc;
-    --color-background: #020617;
-    --color-elevated: #0f172a;
-
-    /* Status colors */
-    --color-background-success: #1e293b;
-    --color-text-success: #4ade80;
-    --color-background-error: #1e293b;
-    --color-text-error: #f87171;
-    --color-background-warning: #1e293b;
-    --color-text-warning: #fde047;
-  }
-}
-
-button,
-input[type="submit"],
-input[type="reset"] {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-
-a {
-  text-decoration: none;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/admin/app/header.tsx

@@ -1,20 +1,40 @@
 "use client";
 import { HEADER_LINKS } from "@lib/navigation";
+import type { Session } from "next-auth";
+import { useSession, signOut } from "next-auth/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import styles from "./header.module.css";
+
+function UserHeader({ session }: { session: Session }) {
+  return (
+    <>
+      <div className="flex gap-3">
+        <div className="hidden flex-col justify-between py-2 sm:flex">
+          <span>{session.user?.name}</span>
+          <span>{session.user?.email}</span>
+        </div>
+        <button
+          className="my-2 rounded bg-primary p-3 text-white"
+          onClick={() => signOut()}
+        >
+          Logga ut
+        </button>
+      </div>
+    </>
+  );
+}
 
 function NavigationLinks() {
   const pathname = usePathname();
 
   return (
-    <ol className={styles["navigation-links-wrapper"]}>
+    <ol className="my-2 flex gap-2">
       {HEADER_LINKS.map(({ href, name }) => (
         <li key={href}>
           <Link
             href={href}
             aria-current={href === pathname ? "page" : "false"}
-            className={styles["navigation-link"]}
+            className="inline-block rounded-lg bg-primary p-2 text-white aria-current-false:opacity-70 aria-current-false:hover:opacity-90"
           >
             {name}
           </Link>
@@ -24,10 +44,17 @@ function NavigationLinks() {
   );
 }
 
-export default function Header() {
+export function Header() {
+  const session = useSession();
+
   return (
-    <nav className={styles["navigation-wrapper"]}>
-      <NavigationLinks />
+    <nav className=" bg-elevated-light shadow-lg dark:bg-elevated-dark">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4">
+        <NavigationLinks />
+        {session.status === "authenticated" && (
+          <UserHeader session={session.data} />
+        )}
+      </div>
     </nav>
   );
 }

apps/admin/app/layout.tsx

@@ -1,29 +1,34 @@
+import type { PropsWithChildren } from "react";
+import { Suspense } from "react";
+import NextAuthProvider from "./(auth)/next-auth-provider";
+import { Header } from "./(header)/header";
 import "./globals.css";
-import Header from "./header";
-import styles from "./layout.module.css";
+import type { Metadata } from "next";
 import { Lato } from "next/font/google";
-import StatusContextProvider from "./status";
+import Loading from "./loading";
+import StatusContextProvider from "./(status)/status-context";
 
 const lato = Lato({
   subsets: ["latin"],
   weight: ["100", "300", "400", "700"],
 });
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Partiguiden Admin",
+  description: "Admin portal for Partiguiden",
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: PropsWithChildren) {
   return (
-    <html lang="en">
-      <body className={`${lato.className} ${styles["body-main"]}`}>
+    <html lang="sv">
+      <body
+        className={`${lato.className} flex min-h-screen flex-col bg-background-light text-foreground-light dark:bg-background-dark dark:text-foreground-dark`}
+      >
         <StatusContextProvider>
-          <Header />
-          {children}
+          <NextAuthProvider>
+            <Header />
+            <Suspense fallback={<Loading />}>{children}</Suspense>
+          </NextAuthProvider>
         </StatusContextProvider>
       </body>
     </html>

apps/admin/app/loading.tsx

@@ -0,0 +1,5 @@
+import LoadingSpinner from "@components/icons/loading-spinner";
+
+export default function Loading() {
+  return <LoadingSpinner className="mx-auto mt-5 h-44 w-44 text-primary" />;
+}

apps/admin/app/page.tsx

@@ -1,7 +1,16 @@
 "use client";
 
-import styles from "./page.module.css";
+import Image from "next/image";
 
 export default function Home() {
-  return <main className={styles["main-container"]}>Admin</main>;
+  return (
+    <main className="mx-3 flex flex-1 flex-col items-center justify-center gap-3">
+      <Image
+        src="/partiguiden_logo_primary.png"
+        alt="Partiguiden logo"
+        width="890"
+        height="140"
+      />
+    </main>
+  );
 }

apps/admin/app/standpoints/actions/create-standpoint.ts

@@ -0,0 +1,24 @@
+"use server";
+import { PAGES } from "@lib/navigation";
+import { revalidatePath } from "next/cache";
+import { zStandpoint } from "../types";
+import prisma from "@lib/prisma";
+import handleServerError from "@lib/handleServerError";
+
+export default async function createStandpoint(formData: FormData) {
+  try {
+    const json = Object.fromEntries(formData.entries());
+    const data = zStandpoint.parse({
+      ...json,
+      content: formData.getAll("content"),
+    });
+
+    await prisma.standpoint.create({
+      data,
+    });
+
+    revalidatePath(PAGES.standpoints.href);
+  } catch (error) {
+    return handleServerError(error);
+  }
+}

apps/admin/app/standpoints/actions/delete-standpoint.ts

@@ -0,0 +1,18 @@
+"use server";
+import handleServerError from "@lib/handleServerError";
+import { PAGES } from "@lib/navigation";
+import prisma from "@lib/prisma";
+import { revalidatePath } from "next/cache";
+
+export default async function deleteStandpoint(link: string) {
+  try {
+    await prisma.standpoint.delete({
+      where: {
+        link,
+      },
+    });
+    revalidatePath(PAGES.standpoints.href);
+  } catch (error) {
+    return handleServerError(error);
+  }
+}

apps/admin/app/standpoints/actions/edit-standpoint.ts

@@ -0,0 +1,30 @@
+"use server";
+import { PAGES } from "@lib/navigation";
+import prisma from "@lib/prisma";
+import { revalidatePath } from "next/cache";
+import { zStandpoint } from "../types";
+import type { Standpoint } from "@prisma/client";
+import handleServerError from "@lib/handleServerError";
+
+export default async function editStandpoint(
+  standpointsPrisma: Standpoint,
+  formData: FormData,
+) {
+  try {
+    const json = Object.fromEntries(formData.entries());
+    const data = zStandpoint.parse({
+      ...json,
+      content: formData.getAll("content"),
+    });
+    await prisma.standpoint.update({
+      where: {
+        link: standpointsPrisma.link,
+      },
+      data,
+    });
+
+    revalidatePath(PAGES.standpoints.href);
+  } catch (error) {
+    return handleServerError(error);
+  }
+}

apps/admin/app/standpoints/actions/update-subject.ts

@@ -0,0 +1,25 @@
+"use server";
+import { PAGES } from "@lib/navigation";
+import prisma from "@lib/prisma";
+import { revalidatePath } from "next/cache";
+import type { Standpoint } from "@prisma/client";
+import handleServerError from "@lib/handleServerError";
+
+export default async function updateSubject(
+  standpointsPrisma: Standpoint,
+  newSubject: string,
+) {
+  try {
+    await prisma.standpoint.update({
+      where: {
+        link: standpointsPrisma.link,
+      },
+      data: {
+        subjectName: newSubject,
+      },
+    });
+    revalidatePath(PAGES.standpoints.href);
+  } catch (error) {
+    return handleServerError(error);
+  }
+}