Mike/plant-disease-id
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flag impl fin

Browse Source
This commit is contained in:
Michael Freno
2026-06-06 17:22:31 -04:00
parent db4c656730
commit 96de91e86c
12 changed files with 1025 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/app/api/flag/route.ts
View File

@@ -10,6 +10,7 @@ import { v4 as uuidv4 } from "uuid";
const VALID_CONTENT_TYPES = [
"plant_image",
"disease_image",
"disease_description",
"disease_symptoms",
"disease_causes",
"disease_treatment",

16
apps/web/src/app/browse/[plantId]/DiseaseCards.tsx
View File

@@ -140,9 +140,19 @@ function DiseaseCard({
/>
</div>
<p className="text-sm text-zinc-600 dark:text-zinc-300 leading-relaxed mb-4">
{disease.description}
</p>
<div className="flex items-start justify-between gap-4 mb-4">
<p className="text-sm text-zinc-600 dark:text-zinc-300 leading-relaxed">
{disease.description}
</p>
<FlagButton
contentType="disease_description"
contentId={disease.id}
fieldName="description"
label="description"
small
className="shrink-0 mt-0.5"
/>
</div>
{/* Details grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">

3
apps/web/src/app/browse/[plantId]/page.tsx
View File

@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { getPlantWithDiseases } from "@/lib/api/diseases-db";
import { getPlantDescription } from "@/lib/display-helpers";
import BetaNotice from "@/components/BetaNotice";
import DiseaseCards from "./DiseaseCards";
import PlantViewTracker from "@/components/PlantViewTracker";
import FlagPlantImage from "@/components/FlagPlantImage";
@@ -83,6 +84,8 @@ export default async function PlantDetailPage({ params }: Props) {
</ol>
</nav>
<BetaNotice variant="card" className="mb-6" />
{/* Plant hero */}
<div className="flex flex-col sm:flex-row sm:items-start gap-6 mb-10">
{/* Plant image */}

48
apps/web/src/app/browse/page.tsx
View File

@@ -1,7 +1,8 @@
import React, { Suspense } from "react";
import { Suspense } from "react";
import { getBrowsePlants } from "@/lib/api/browse";
import BrowseContent from "./BrowseContent";
import { PlantCardSkeleton } from "@/components/LoadingSkeleton";
import BetaNotice from "@/components/BetaNotice";
/**
* Browse page — fetches plants with disease counts from the database
@@ -12,27 +13,30 @@ export default async function BrowsePage() {
const allPlants = await getBrowsePlants();
return (
<Suspense
fallback={
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
<div className="mb-8">
<div className="h-9 w-48 animate-pulse rounded bg-zinc-200 dark:bg-zinc-700" />
<div className="mt-2 h-5 w-72 animate-pulse rounded bg-zinc-200 dark:bg-zinc-700" />
<>
<BetaNotice variant="full-width" />
<Suspense
fallback={
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
<div className="mb-8">
<div className="h-9 w-48 animate-pulse rounded bg-zinc-200 dark:bg-zinc-700" />
<div className="mt-2 h-5 w-72 animate-pulse rounded bg-zinc-200 dark:bg-zinc-700" />
</div>
<div className="mb-6 h-12 w-full animate-pulse rounded-xl bg-zinc-200 dark:bg-zinc-700" />
<div className="flex gap-2 mb-8">
{Array.from({ length: 5 }, (_, i) => (
<div
key={i}
className="h-9 w-24 animate-pulse rounded-full bg-zinc-200 dark:bg-zinc-700"
/>
))}
</div>
<PlantCardSkeleton count={8} />
</div>
<div className="mb-6 h-12 w-full animate-pulse rounded-xl bg-zinc-200 dark:bg-zinc-700" />
<div className="flex gap-2 mb-8">
{Array.from({ length: 5 }, (_, i) => (
<div
key={i}
className="h-9 w-24 animate-pulse rounded-full bg-zinc-200 dark:bg-zinc-700"
/>
))}
</div>
<PlantCardSkeleton count={8} />
</div>
}
>
<BrowseContent allPlants={allPlants} />
</Suspense>
}
>
<BrowseContent allPlants={allPlants} />
</Suspense>
</>
);
}