From 4da613e31d3ca1d37c56554ffeff834ed281946e Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 20:42:25 +0530 Subject: [PATCH 01/10] [ENG-1605] Add /extract-nodes skeleton page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Non-functional skeleton matching the mockup for the extract-nodes tool. Uses (extract) route group with own root layout, two-panel Sidebar + MainContent. All data hardcoded — no wiring or functionality. --- .../extract-nodes/components/MainContent.tsx | 195 ++++++++++++++++++ .../extract-nodes/components/Sidebar.tsx | 140 +++++++++++++ .../app/(extract)/extract-nodes/page.tsx | 13 ++ apps/website/app/(extract)/layout.tsx | 61 ++++++ 4 files changed, 409 insertions(+) create mode 100644 apps/website/app/(extract)/extract-nodes/components/MainContent.tsx create mode 100644 apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx create mode 100644 apps/website/app/(extract)/extract-nodes/page.tsx create mode 100644 apps/website/app/(extract)/layout.tsx diff --git a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx new file mode 100644 index 000000000..83f9a6d6a --- /dev/null +++ b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx @@ -0,0 +1,195 @@ +const SAMPLE_NODES = [ + { + type: "CLM" as const, + label: "CLAIM", + color: "#7DA13E", + confidence: 95, + page: "p.9", + content: + "Basolateral secretion of Wnt5a is essential for establishing apical-basal polarity in epithelial cells.", + }, + { + type: "EVD" as const, + label: "EVIDENCE", + color: "#DB134A", + confidence: 97, + page: "p.3", + content: + "Wnt5a was detected exclusively in the basolateral medium of polarized MDCK cells grown on Transwell filters, with no detectable signal in the apical fraction.", + }, + { + type: "CLM" as const, + label: "CLAIM", + color: "#7DA13E", + confidence: 92, + page: "p.5", + content: + "Loss of Wnt5a function disrupts lumen formation in 3D cyst cultures derived from epithelial cells.", + }, + { + type: "EVD" as const, + label: "EVIDENCE", + color: "#DB134A", + confidence: 96, + page: "p.7", + content: + "shRNA-mediated knockdown of Wnt5a resulted in multi-lumen cysts in 68% of colonies compared to 12% in control conditions.", + }, + { + type: "CLM" as const, + label: "CLAIM", + color: "#7DA13E", + confidence: 90, + page: "p.11", + content: + "Wnt5a signals through the non-canonical planar cell polarity pathway to regulate lumen morphogenesis.", + }, + { + type: "EVD" as const, + label: "EVIDENCE", + color: "#DB134A", + confidence: 94, + page: "p.8", + content: + "Co-immunoprecipitation showed that Wnt5a preferentially binds Ror2 receptor at the basolateral surface.", + }, +] as const; + +const TABS = [ + { id: "all" as const, label: "All", count: 17, color: undefined }, + { id: "CLM" as const, label: "Claim", count: 6, color: "#7DA13E" }, + { id: "EVD" as const, label: "Evidence", count: 11, color: "#DB134A" }, +]; + +// eslint-disable-next-line @typescript-eslint/naming-convention +export const MainContent = () => { + return ( +
+
+
+
+

+ Basolateral secretion of Wnt5a in polarized epithelial cells is + required for apical lumen formation +

+

+ Yamamoto H, Komekado H, Kikuchi A +

+
+ +
+
+ {TABS.map((tab) => ( +
+ {tab.color && ( + + )} + + {tab.label} {tab.count} + +
+ ))} +
+
+ +
+
+ {SAMPLE_NODES.map((node, index) => ( +
+
+
+ + + +
+
+
+ + {node.label} + + + {node.confidence}% + + + {node.page} + +
+

+ {node.content} +

+ +
+
+
+ ))} +
+
+ +
+
+ + Deselect All + + + 17 of 17 selected + +
+ +
+ + + + Copy to Clipboard +
+
+
+
+ ); +}; diff --git a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx new file mode 100644 index 000000000..03c763546 --- /dev/null +++ b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx @@ -0,0 +1,140 @@ +const NODE_TYPES = [ + { id: "CLM", label: "Claim", color: "#7DA13E" }, + { id: "QUE", label: "Question", color: "#99890E" }, + { id: "EVD", label: "Evidence", color: "#DB134A" }, + { id: "SRC", label: "Source", color: "#9E9E9E" }, + { id: "ISS", label: "Issue", color: "#F56C6C" }, + { id: "RES", label: "Result", color: "#E6A23C" }, + { id: "EXP", label: "Experiment", color: "#4A90D9" }, + { id: "THR", label: "Theory", color: "#8B5CF6" }, + { id: "ART", label: "Artifact", color: "#67C23A" }, +] as const; + +const CHECKED_TYPES = new Set(["CLM", "EVD"]); + +const sectionLabelClass = + "mb-3 block px-1 text-[18px] font-semibold tracking-[-0.016em] text-slate-800"; + +// eslint-disable-next-line @typescript-eslint/naming-convention +export const Sidebar = () => { + return ( + + ); +}; diff --git a/apps/website/app/(extract)/extract-nodes/page.tsx b/apps/website/app/(extract)/extract-nodes/page.tsx new file mode 100644 index 000000000..afd043d31 --- /dev/null +++ b/apps/website/app/(extract)/extract-nodes/page.tsx @@ -0,0 +1,13 @@ +import { MainContent } from "./components/MainContent"; +import { Sidebar } from "./components/Sidebar"; + +const ExtractNodesPage = () => { + return ( +
+ + +
+ ); +}; + +export default ExtractNodesPage; diff --git a/apps/website/app/(extract)/layout.tsx b/apps/website/app/(extract)/layout.tsx new file mode 100644 index 000000000..f1a3f428e --- /dev/null +++ b/apps/website/app/(extract)/layout.tsx @@ -0,0 +1,61 @@ +import type { Metadata } from "next"; +import "~/globals.css"; +import "@repo/ui/globals.css"; +import Image from "next/image"; +import Link from "next/link"; +import { Inter } from "next/font/google"; + +export const metadata: Metadata = { + title: "Extract Nodes | Discourse Graphs", + description: + "Extract structured discourse graph nodes from academic papers using AI.", +}; + +const inter = Inter({ + subsets: ["latin"], + display: "swap", +}); + +type ExtractLayoutProps = { + children: React.ReactNode; +}; + +const ExtractLayout = ({ children }: ExtractLayoutProps) => { + return ( + + +
+
+
+ + Discourse Graphs Logo + + Discourse Graphs + + + Extract + + + + + Back to site + +
+
+ +
{children}
+
+ + + ); +}; + +export default ExtractLayout; From 91d55600ef970d03cffbe706a045b5109c3c7005 Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 20:48:51 +0530 Subject: [PATCH 02/10] Remove @repo/ui/globals.css import from extract layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The border-border class from shadcn globals.css is not defined in the extract layout's Tailwind context. The (home) layout doesn't import it either — not needed for this skeleton. --- apps/website/app/(extract)/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/website/app/(extract)/layout.tsx b/apps/website/app/(extract)/layout.tsx index f1a3f428e..2c017ab44 100644 --- a/apps/website/app/(extract)/layout.tsx +++ b/apps/website/app/(extract)/layout.tsx @@ -1,6 +1,5 @@ import type { Metadata } from "next"; import "~/globals.css"; -import "@repo/ui/globals.css"; import Image from "next/image"; import Link from "next/link"; import { Inter } from "next/font/google"; From 07e6c206a1139c557d5aaf18f2ee1cdf98fa2114 Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 21:00:50 +0530 Subject: [PATCH 03/10] Address review: remove nested html/body, align tab counts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove and from (extract) layout — root layout already provides these. Matches (home) layout pattern. - Align TABS counts and footer text with actual SAMPLE_NODES data (6 items: 3 CLM + 3 EVD). --- .../extract-nodes/components/MainContent.tsx | 8 +-- apps/website/app/(extract)/layout.tsx | 60 +++++++++---------- 2 files changed, 33 insertions(+), 35 deletions(-) diff --git a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx index 83f9a6d6a..468bb4fe0 100644 --- a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx @@ -56,9 +56,9 @@ const SAMPLE_NODES = [ ] as const; const TABS = [ - { id: "all" as const, label: "All", count: 17, color: undefined }, - { id: "CLM" as const, label: "Claim", count: 6, color: "#7DA13E" }, - { id: "EVD" as const, label: "Evidence", count: 11, color: "#DB134A" }, + { id: "all" as const, label: "All", count: 6, color: undefined }, + { id: "CLM" as const, label: "Claim", count: 3, color: "#7DA13E" }, + { id: "EVD" as const, label: "Evidence", count: 3, color: "#DB134A" }, ]; // eslint-disable-next-line @typescript-eslint/naming-convention @@ -168,7 +168,7 @@ export const MainContent = () => { Deselect All - 17 of 17 selected + 6 of 6 selected diff --git a/apps/website/app/(extract)/layout.tsx b/apps/website/app/(extract)/layout.tsx index 2c017ab44..2a837484c 100644 --- a/apps/website/app/(extract)/layout.tsx +++ b/apps/website/app/(extract)/layout.tsx @@ -21,39 +21,37 @@ type ExtractLayoutProps = { const ExtractLayout = ({ children }: ExtractLayoutProps) => { return ( - - -
-
-
- - Discourse Graphs Logo - - Discourse Graphs - - - Extract - - +
+
+
+ + Discourse Graphs Logo + + Discourse Graphs + + + Extract + + - - Back to site - -
-
- -
{children}
+ + Back to site +
- - +
+ +
{children}
+
); }; From f9e449331bb10da71bf76473b78a17d8243e5e3f Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 21:11:15 +0530 Subject: [PATCH 04/10] Rename sectionLabelClass to SECTION_LABEL_CLASS --- .../app/(extract)/extract-nodes/components/Sidebar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx index 03c763546..a0ee24a97 100644 --- a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx @@ -12,7 +12,7 @@ const NODE_TYPES = [ const CHECKED_TYPES = new Set(["CLM", "EVD"]); -const sectionLabelClass = +const SECTION_LABEL_CLASS = "mb-3 block px-1 text-[18px] font-semibold tracking-[-0.016em] text-slate-800"; // eslint-disable-next-line @typescript-eslint/naming-convention @@ -21,7 +21,7 @@ export const Sidebar = () => { ); diff --git a/packages/ui/package.json b/packages/ui/package.json index b37816389..c6c0816c4 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -32,14 +32,16 @@ "typescript": "5.5.4" }, "dependencies": { + "@radix-ui/react-checkbox": "^1.3.3", + "@radix-ui/react-slot": "^1.2.4", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.468.0", "react": "^19", "react-dom": "^19", "shadcn": "2.10.0", - "tailwindcss": "^3.1.0", "tailwind-merge": "^3.3.1", + "tailwindcss": "^3.1.0", "tailwindcss-animate": "^1.0.7", "tw-animate-css": "^1.3.4" } diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx new file mode 100644 index 000000000..35d80ad57 --- /dev/null +++ b/packages/ui/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@repo/ui/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx new file mode 100644 index 000000000..b2f343dac --- /dev/null +++ b/packages/ui/src/components/ui/button.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@repo/ui/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx new file mode 100644 index 000000000..fc576994b --- /dev/null +++ b/packages/ui/src/components/ui/checkbox.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { Check } from "lucide-react" + +import { cn } from "@repo/ui/lib/utils" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4afa7c66f..f4aba20dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -673,6 +673,12 @@ importers: packages/ui: dependencies: + '@radix-ui/react-checkbox': + specifier: ^1.3.3 + version: 1.3.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@radix-ui/react-slot': + specifier: ^1.2.4 + version: 1.2.4(@types/react@19.1.12)(react@19.1.1) class-variance-authority: specifier: ^0.7.1 version: 0.7.1 @@ -3605,6 +3611,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-slot@1.2.4': + resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-switch@1.2.6': resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==} peerDependencies: @@ -5255,6 +5270,7 @@ packages: '@xmldom/xmldom@0.9.8': resolution: {integrity: sha512-p96FSY54r+WJ50FIOsCOjyj/wavs8921hG5+kVMmZgKcvIKxMXHTrjNJvRgWa/zuX3B6t2lijLNFaOyuxUH+2A==} engines: {node: '>=14.6'} + deprecated: this version has critical issues, please update to the latest version '@yarnpkg/lockfile@1.1.0': resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==} @@ -13699,6 +13715,22 @@ snapshots: '@types/react': 19.1.12 '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + react-dom: 19.1.1(react@19.1.1) + optionalDependencies: + '@types/react': 19.1.12 + '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@radix-ui/primitive': 1.1.3 @@ -13771,6 +13803,12 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.12)(react@19.1.1)': + dependencies: + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-context-menu@2.2.16(@types/react-dom@18.2.17)(@types/react@18.2.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@radix-ui/primitive': 1.1.3 @@ -13818,6 +13856,12 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-context@1.1.2(@types/react@19.1.12)(react@19.1.1)': + dependencies: + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.2.17)(@types/react@18.2.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@radix-ui/primitive': 1.1.3 @@ -14345,6 +14389,16 @@ snapshots: '@types/react': 19.1.12 '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + react-dom: 19.1.1(react@19.1.1) + optionalDependencies: + '@types/react': 19.1.12 + '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.17)(@types/react@18.2.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.28.3 @@ -14373,6 +14427,15 @@ snapshots: '@types/react': 19.1.12 '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': + dependencies: + '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + react-dom: 19.1.1(react@19.1.1) + optionalDependencies: + '@types/react': 19.1.12 + '@types/react-dom': 19.1.9(@types/react@19.1.12) + '@radix-ui/react-progress@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.0.0) @@ -14580,6 +14643,20 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.1.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + + '@radix-ui/react-slot@1.2.4(@types/react@19.1.12)(react@19.1.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-switch@1.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@radix-ui/primitive': 1.1.3 @@ -14755,6 +14832,14 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.12)(react@19.1.1)': + dependencies: + '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.2.21)(react@18.2.0)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.21)(react@18.2.0) @@ -14769,6 +14854,13 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.12)(react@19.1.1)': + dependencies: + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.21)(react@18.2.0)': dependencies: '@babel/runtime': 7.28.3 @@ -14817,6 +14909,12 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.12)(react@19.1.1)': + dependencies: + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.21)(react@18.2.0)': dependencies: '@babel/runtime': 7.28.3 @@ -14836,6 +14934,12 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.12)(react@19.1.1)': + dependencies: + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.21)(react@18.2.0)': dependencies: '@babel/runtime': 7.28.3 @@ -14880,6 +14984,13 @@ snapshots: optionalDependencies: '@types/react': 19.1.12 + '@radix-ui/react-use-size@1.1.1(@types/react@19.1.12)(react@19.1.1)': + dependencies: + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1) + react: 19.1.1 + optionalDependencies: + '@types/react': 19.1.12 + '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.17)(@types/react@18.2.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.28.3 From ede441f37795940fc0b50cdaab547025c4ba67f1 Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 21:57:32 +0530 Subject: [PATCH 06/10] Fix eslint and prettier for shadcn components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Align shadcn-generated code with repo conventions: interface → type, function → arrow, prettier formatting. --- packages/ui/src/components/ui/badge.tsx | 24 +++++++-------- packages/ui/src/components/ui/button.tsx | 35 +++++++++++----------- packages/ui/src/components/ui/checkbox.tsx | 20 ++++++------- 3 files changed, 40 insertions(+), 39 deletions(-) diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx index 35d80ad57..eb6f1e057 100644 --- a/packages/ui/src/components/ui/badge.tsx +++ b/packages/ui/src/components/ui/badge.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@repo/ui/lib/utils" +import { cn } from "@repo/ui/lib/utils"; const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", @@ -20,17 +20,17 @@ const badgeVariants = cva( defaultVariants: { variant: "default", }, - } -) + }, +); -export interface BadgeProps - extends React.HTMLAttributes, - VariantProps {} +type BadgeProps = React.HTMLAttributes & + VariantProps; -function Badge({ className, variant, ...props }: BadgeProps) { +// eslint-disable-next-line @typescript-eslint/naming-convention +const Badge = ({ className, variant, ...props }: BadgeProps) => { return (
- ) -} + ); +}; -export { Badge, badgeVariants } +export { Badge, badgeVariants }; diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx index b2f343dac..1b624b5a1 100644 --- a/packages/ui/src/components/ui/button.tsx +++ b/packages/ui/src/components/ui/button.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@repo/ui/lib/utils" +import { cn } from "@repo/ui/lib/utils"; const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", @@ -30,27 +30,28 @@ const buttonVariants = cva( variant: "default", size: "default", }, - } -) + }, +); -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean -} +type ButtonProps = React.ButtonHTMLAttributes & + VariantProps & { + asChild?: boolean; + }; +// eslint-disable-next-line @typescript-eslint/naming-convention const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" + // eslint-disable-next-line @typescript-eslint/naming-convention + const Comp = asChild ? Slot : "button"; return ( - ) - } -) -Button.displayName = "Button" + ); + }, +); +Button.displayName = "Button"; -export { Button, buttonVariants } +export { Button, buttonVariants }; diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx index fc576994b..5111f1092 100644 --- a/packages/ui/src/components/ui/checkbox.tsx +++ b/packages/ui/src/components/ui/checkbox.tsx @@ -1,10 +1,10 @@ -"use client" +"use client"; -import * as React from "react" -import * as CheckboxPrimitive from "@radix-ui/react-checkbox" -import { Check } from "lucide-react" +import * as React from "react"; +import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; +import { Check } from "lucide-react"; -import { cn } from "@repo/ui/lib/utils" +import { cn } from "@repo/ui/lib/utils"; const Checkbox = React.forwardRef< React.ElementRef, @@ -13,8 +13,8 @@ const Checkbox = React.forwardRef< @@ -24,7 +24,7 @@ const Checkbox = React.forwardRef< -)) -Checkbox.displayName = CheckboxPrimitive.Root.displayName +)); +Checkbox.displayName = CheckboxPrimitive.Root.displayName; -export { Checkbox } +export { Checkbox }; From c092e41dc8d74e8211f4023672c486144cb1ec94 Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 22:14:15 +0530 Subject: [PATCH 07/10] Colocate data in components, use full contract shapes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sidebar: NODE_TYPES with all ENG-1603 fields (label, description, candidateTag, color) colocated in component. MainContent: SAMPLE_NODES with all ENG-1601 fields (nodeType, content, supportSnippet, sourceSection) colocated in component. supportSnippet shown inline. Colors looked up from nodeType. Removed sampleData.ts — shared types will be a Zod schema later. --- .../extract-nodes/components/MainContent.tsx | 182 +++++++++++------- .../extract-nodes/components/Sidebar.tsx | 106 ++++++++-- 2 files changed, 205 insertions(+), 83 deletions(-) diff --git a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx index 6adf8f96c..2d489c9c7 100644 --- a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx @@ -1,63 +1,80 @@ -import { Badge } from "@repo/ui/components/ui/badge"; import { Button } from "@repo/ui/components/ui/button"; -import { Checkbox } from "@repo/ui/components/ui/checkbox"; import { Copy } from "lucide-react"; +const NODE_TYPE_COLORS: Record = { + claim: "#7DA13E", + evidence: "#dc0c4a", + question: "#99890E", + hypothesis: "#7C4DFF", + result: "#E6A23C", + source: "#9E9E9E", + theory: "#8B5CF6", +}; + const SAMPLE_NODES = [ { - label: "Claim", - candidateTag: "#clm-candidate", - confidence: 95, - page: "p.9", + nodeType: "claim", content: "Basolateral secretion of Wnt5a is essential for establishing apical-basal polarity in epithelial cells.", + supportSnippet: + '"Wnt5a secreted from the basolateral surface was both necessary and sufficient for the establishment of apical-basal polarity" (p.9)', + sourceSection: "Discussion", }, { - label: "Evidence", - candidateTag: "#evd-candidate", - confidence: 97, - page: "p.3", + nodeType: "evidence", content: "Wnt5a was detected exclusively in the basolateral medium of polarized MDCK cells grown on Transwell filters, with no detectable signal in the apical fraction.", + supportSnippet: + '"Western blot analysis of conditioned media showed Wnt5a protein exclusively in the basolateral fraction (Fig. 2A, lanes 3-4)"', + sourceSection: "Results", }, { - label: "Claim", - candidateTag: "#clm-candidate", - confidence: 92, - page: "p.5", + nodeType: "claim", content: "Loss of Wnt5a function disrupts lumen formation in 3D cyst cultures derived from epithelial cells.", + supportSnippet: + '"These data demonstrate that Wnt5a is required for proper lumen formation in three-dimensional culture systems"', + sourceSection: "Discussion", }, { - label: "Evidence", - candidateTag: "#evd-candidate", - confidence: 96, - page: "p.7", + nodeType: "evidence", content: "shRNA-mediated knockdown of Wnt5a resulted in multi-lumen cysts in 68% of colonies compared to 12% in control conditions.", + supportSnippet: + '"Quantification of cyst morphology revealed 68 ± 4% multi-lumen cysts in Wnt5a-KD versus 12 ± 3% in controls (Fig. 4B, p < 0.001)"', + sourceSection: "Results", }, { - label: "Claim", - candidateTag: "#clm-candidate", - confidence: 90, - page: "p.11", + nodeType: "claim", content: "Wnt5a signals through the non-canonical planar cell polarity pathway to regulate lumen morphogenesis.", + supportSnippet: + '"Our findings place Wnt5a upstream of the PCP pathway in the regulation of epithelial lumen morphogenesis"', + sourceSection: "Discussion", }, { - label: "Evidence", - candidateTag: "#evd-candidate", - confidence: 94, - page: "p.8", + nodeType: "evidence", content: "Co-immunoprecipitation showed that Wnt5a preferentially binds Ror2 receptor at the basolateral surface.", + supportSnippet: + '"IP-Western analysis demonstrated direct Wnt5a-Ror2 interaction in basolateral but not apical membrane fractions (Fig. 5C)"', + sourceSection: "Results", }, -] as const; +]; + +const typeCounts = SAMPLE_NODES.reduce>((acc, node) => { + acc[node.nodeType] = (acc[node.nodeType] ?? 0) + 1; + return acc; +}, {}); const TABS = [ - { id: "all", label: "All", count: 6 }, - { id: "clm", label: "Claim", count: 3 }, - { id: "evd", label: "Evidence", count: 3 }, + { id: "all", label: "All", count: SAMPLE_NODES.length, color: undefined }, + ...Object.entries(typeCounts).map(([nodeType, count]) => ({ + id: nodeType, + label: nodeType.charAt(0).toUpperCase() + nodeType.slice(1), + count, + color: NODE_TYPE_COLORS[nodeType], + })), ]; // eslint-disable-next-line @typescript-eslint/naming-convention @@ -79,51 +96,86 @@ export const MainContent = () => {
{TABS.map((tab) => ( - - {tab.label} {tab.count} - + {tab.color && ( + + )} + + {tab.label} {tab.count} + +
))}
- {SAMPLE_NODES.map((node, index) => ( -
-
- -
-
- - {node.label} - - - {node.confidence}% - - - {node.page} - -
-

- {node.content} -

- + + + +
+
+
+ + {node.nodeType} + + {node.sourceSection && ( + + {node.sourceSection} + + )} +
+

+ {node.content} +

+
+

+ {node.supportSnippet} +

+
+
-
- ))} + ); + })}
@@ -133,7 +185,7 @@ export const MainContent = () => { Deselect All - 6 of 6 selected + {SAMPLE_NODES.length} of {SAMPLE_NODES.length} selected diff --git a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx index 4f5408daf..19cff85e6 100644 --- a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx @@ -1,18 +1,57 @@ import { Button } from "@repo/ui/components/ui/button"; -import { Checkbox } from "@repo/ui/components/ui/checkbox"; import { ChevronDown } from "lucide-react"; const NODE_TYPES = [ - { label: "Claim", candidateTag: "#clm-candidate" }, - { label: "Question", candidateTag: "#que-candidate" }, - { label: "Hypothesis", candidateTag: "#hyp-candidate" }, - { label: "Evidence", candidateTag: "#evd-candidate" }, - { label: "Result", candidateTag: "#res-candidate" }, - { label: "Source", candidateTag: "#src-candidate" }, - { label: "Theory", candidateTag: "#the-candidate" }, -] as const; + { + label: "Claim", + description: + "An assertion about how something works or should work. Usually a single declarative sentence.", + candidateTag: "#clm-candidate", + color: "#7DA13E", + }, + { + label: "Question", + description: + "An unknown being explored through research. Framed as a question that can be investigated.", + candidateTag: "#que-candidate", + color: "#99890E", + }, + { + label: "Hypothesis", + description: + "A proposed answer to a question. Collects evidence for or against.", + candidateTag: "#hyp-candidate", + color: "#7C4DFF", + }, + { + label: "Evidence", + description: + "A discrete observation from a published dataset or experiment. Usually in past tense with observable, model system, and method.", + candidateTag: "#evd-candidate", + color: "#dc0c4a", + }, + { + label: "Result", + description: + "A discrete observation from ongoing research, in past tense. Includes source context.", + candidateTag: "#res-candidate", + color: "#E6A23C", + }, + { + label: "Source", + description: "A referenced publication or external resource.", + candidateTag: "#src-candidate", + color: "#9E9E9E", + }, + { + label: "Theory", + description: "A theoretical framework or model that explains phenomena.", + candidateTag: "#the-candidate", + color: "#8B5CF6", + }, +]; -const CHECKED_TYPES = new Set(["#clm-candidate", "#evd-candidate"]); +const CHECKED_TAGS = new Set(["#clm-candidate", "#evd-candidate"]); const SECTION_LABEL_CLASS = "mb-3 block px-1 text-[18px] font-semibold tracking-[-0.016em] text-slate-800"; @@ -68,28 +107,59 @@ export const Sidebar = () => { Node Types - {CHECKED_TYPES.size}/{NODE_TYPES.length} + {CHECKED_TAGS.size}/{NODE_TYPES.length}
{NODE_TYPES.map((type) => { - const isChecked = CHECKED_TYPES.has(type.candidateTag); + const isChecked = CHECKED_TAGS.has(type.candidateTag); return ( - +
); })} From 624b3fd1139239b477d2eb11dd7b9a4ad70f0c86 Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 22:25:49 +0530 Subject: [PATCH 08/10] All types checked, sample for each type, 2 cards expanded - All 7 node types checked in sidebar - Sample extracted nodes for every type (claim, evidence, question, hypothesis, result, source, theory) - First 2 cards show expanded supportSnippet, rest collapsed - Buttons use explicit dark gradient instead of shadcn theme --- .../extract-nodes/components/MainContent.tsx | 84 ++++++++++++---- .../extract-nodes/components/Sidebar.tsx | 99 ++++++++----------- 2 files changed, 109 insertions(+), 74 deletions(-) diff --git a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx index 2d489c9c7..36958fd07 100644 --- a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx @@ -1,11 +1,10 @@ -import { Button } from "@repo/ui/components/ui/button"; import { Copy } from "lucide-react"; const NODE_TYPE_COLORS: Record = { claim: "#7DA13E", - evidence: "#dc0c4a", question: "#99890E", hypothesis: "#7C4DFF", + evidence: "#dc0c4a", result: "#E6A23C", source: "#9E9E9E", theory: "#8B5CF6", @@ -29,15 +28,23 @@ const SAMPLE_NODES = [ sourceSection: "Results", }, { - nodeType: "claim", + nodeType: "question", content: - "Loss of Wnt5a function disrupts lumen formation in 3D cyst cultures derived from epithelial cells.", + "What is the mechanism by which Wnt5a polarized secretion is directed to the basolateral membrane?", supportSnippet: - '"These data demonstrate that Wnt5a is required for proper lumen formation in three-dimensional culture systems"', + '"The mechanism that directs Wnt5a specifically to the basolateral surface remains an open question" (p.11)', sourceSection: "Discussion", }, { - nodeType: "evidence", + nodeType: "hypothesis", + content: + "Ror2 receptor activation at the basolateral surface mediates Wnt5a-dependent lumen positioning.", + supportSnippet: + '"We hypothesize that Ror2, as the primary receptor for Wnt5a at the basolateral membrane, transduces the polarity signal required for single-lumen formation"', + sourceSection: "Discussion", + }, + { + nodeType: "result", content: "shRNA-mediated knockdown of Wnt5a resulted in multi-lumen cysts in 68% of colonies compared to 12% in control conditions.", supportSnippet: @@ -45,11 +52,18 @@ const SAMPLE_NODES = [ sourceSection: "Results", }, { - nodeType: "claim", + nodeType: "source", + content: "Yamamoto et al. (2015) Nature Cell Biology 17(8):1024-1035", + supportSnippet: + "Primary research article on Wnt5a basolateral secretion and lumen formation in polarized epithelia.", + sourceSection: "References", + }, + { + nodeType: "theory", content: - "Wnt5a signals through the non-canonical planar cell polarity pathway to regulate lumen morphogenesis.", + "Non-canonical Wnt signaling through the planar cell polarity pathway is a conserved mechanism for epithelial lumen morphogenesis.", supportSnippet: - '"Our findings place Wnt5a upstream of the PCP pathway in the regulation of epithelial lumen morphogenesis"', + '"Our findings place Wnt5a upstream of the PCP pathway in the regulation of epithelial lumen morphogenesis, consistent with the broader role of non-canonical Wnt signaling in tissue polarity"', sourceSection: "Discussion", }, { @@ -60,8 +74,18 @@ const SAMPLE_NODES = [ '"IP-Western analysis demonstrated direct Wnt5a-Ror2 interaction in basolateral but not apical membrane fractions (Fig. 5C)"', sourceSection: "Results", }, + { + nodeType: "claim", + content: + "Loss of Wnt5a function disrupts lumen formation in 3D cyst cultures derived from epithelial cells.", + supportSnippet: + '"These data demonstrate that Wnt5a is required for proper lumen formation in three-dimensional culture systems"', + sourceSection: "Discussion", + }, ]; +const EXPANDED_INDICES = new Set([0, 1]); + const typeCounts = SAMPLE_NODES.reduce>((acc, node) => { acc[node.nodeType] = (acc[node.nodeType] ?? 0) + 1; return acc; @@ -122,6 +146,7 @@ export const MainContent = () => {
{SAMPLE_NODES.map((node, index) => { const color = NODE_TYPE_COLORS[node.nodeType] ?? "#64748b"; + const isExpanded = EXPANDED_INDICES.has(index); return (
{

{node.content}

-
-

- {node.supportSnippet} -

-
+ {isExpanded ? ( + <> +
+

+ {node.supportSnippet} +

+
+ + + ) : ( + + )}
@@ -181,18 +223,24 @@ export const MainContent = () => {
- + {SAMPLE_NODES.length} of {SAMPLE_NODES.length} selected
- +
diff --git a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx index 19cff85e6..cd60618fc 100644 --- a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx @@ -1,4 +1,3 @@ -import { Button } from "@repo/ui/components/ui/button"; import { ChevronDown } from "lucide-react"; const NODE_TYPES = [ @@ -51,8 +50,6 @@ const NODE_TYPES = [ }, ]; -const CHECKED_TAGS = new Set(["#clm-candidate", "#evd-candidate"]); - const SECTION_LABEL_CLASS = "mb-3 block px-1 text-[18px] font-semibold tracking-[-0.016em] text-slate-800"; @@ -83,13 +80,13 @@ export const Sidebar = () => {

Model

- +
@@ -107,61 +104,48 @@ export const Sidebar = () => { Node Types - {CHECKED_TAGS.size}/{NODE_TYPES.length} + {NODE_TYPES.length}/{NODE_TYPES.length}
- {NODE_TYPES.map((type) => { - const isChecked = CHECKED_TAGS.has(type.candidateTag); - return ( + {NODE_TYPES.map((type) => ( +
-
- {isChecked && ( - - - - )} -
-
- - {type.label} - -

- {type.description} -

-
- - {type.candidateTag} - + + +
+
+ {type.label} +

+ {type.description} +

- ); - })} + + {type.candidateTag} + +
+ ))}
@@ -170,9 +154,12 @@ export const Sidebar = () => {

Ready to run extraction.

- + ); From 1fde9aeeba1a795592e94dbfd29bf2d02878f3a3 Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 22:27:29 +0530 Subject: [PATCH 09/10] Restore shadcn Button with custom color overrides Use Button from @repo/ui with className overrides for slate-900 dark theme instead of raw HTML buttons. --- .../extract-nodes/components/MainContent.tsx | 17 ++++++++--------- .../extract-nodes/components/Sidebar.tsx | 16 +++++++--------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx index 36958fd07..b27defbec 100644 --- a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx @@ -1,3 +1,4 @@ +import { Button } from "@repo/ui/components/ui/button"; import { Copy } from "lucide-react"; const NODE_TYPE_COLORS: Record = { @@ -223,24 +224,22 @@ export const MainContent = () => {
- + {SAMPLE_NODES.length} of {SAMPLE_NODES.length} selected
- +
diff --git a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx index cd60618fc..571f47a06 100644 --- a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx @@ -1,3 +1,4 @@ +import { Button } from "@repo/ui/components/ui/button"; import { ChevronDown } from "lucide-react"; const NODE_TYPES = [ @@ -80,13 +81,13 @@ export const Sidebar = () => {

Model

- +
@@ -154,12 +155,9 @@ export const Sidebar = () => {

Ready to run extraction.

- + ); From c6b8f64252df2301f733916282698adaf8c0e9d1 Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 1 Apr 2026 23:58:01 +0530 Subject: [PATCH 10/10] Use shadcn everywhere, colored pills only on result cards Sidebar: shadcn Checkbox replaces custom colored checkboxes. MainContent: Card+CardContent for result cards, Badge for filter tabs, Checkbox for selection, Button variant=ghost for show/hide details. Colored inline style only on the nodeType pill in each result card. --- .../extract-nodes/components/MainContent.tsx | 131 ++++++++---------- .../extract-nodes/components/Sidebar.tsx | 29 +--- 2 files changed, 62 insertions(+), 98 deletions(-) diff --git a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx index b27defbec..09b13c6e8 100644 --- a/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/MainContent.tsx @@ -1,4 +1,7 @@ +import { Badge } from "@repo/ui/components/ui/badge"; import { Button } from "@repo/ui/components/ui/button"; +import { Card, CardContent } from "@repo/ui/components/ui/card"; +import { Checkbox } from "@repo/ui/components/ui/checkbox"; import { Copy } from "lucide-react"; const NODE_TYPE_COLORS: Record = { @@ -121,24 +124,23 @@ export const MainContent = () => {
{TABS.map((tab) => ( -
{tab.color && ( )} - - {tab.label} {tab.count} - -
+ {tab.label} {tab.count} + ))}
@@ -149,74 +151,55 @@ export const MainContent = () => { const color = NODE_TYPE_COLORS[node.nodeType] ?? "#64748b"; const isExpanded = EXPANDED_INDICES.has(index); return ( -
-
-
- - - -
-
-
- - {node.nodeType} - - {node.sourceSection && ( - - {node.sourceSection} + + +
+ +
+
+ + {node.nodeType} + {node.sourceSection && ( + + {node.sourceSection} + + )} +
+

+ {node.content} +

+ {isExpanded ? ( + <> +
+

+ {node.supportSnippet} +

+
+ + + ) : ( + )}
-

- {node.content} -

- {isExpanded ? ( - <> -
-

- {node.supportSnippet} -

-
- - - ) : ( - - )}
-
-
+ + ); })}
diff --git a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx index 571f47a06..f915efd17 100644 --- a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx +++ b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx @@ -1,4 +1,5 @@ import { Button } from "@repo/ui/components/ui/button"; +import { Checkbox } from "@repo/ui/components/ui/checkbox"; import { ChevronDown } from "lucide-react"; const NODE_TYPES = [ @@ -111,31 +112,11 @@ export const Sidebar = () => {
{NODE_TYPES.map((type) => ( -
-
- - - -
+
{type.label}

@@ -145,7 +126,7 @@ export const Sidebar = () => { {type.candidateTag} -

+ ))}