From 06ef12e62bd57f1a6345c35852c617f4494ae1ea Mon Sep 17 00:00:00 2001
From: Harley Turan <harley@cloudflare.com>
Date: Thu, 3 Oct 2024 17:14:40 +0100
Subject: [PATCH 1/3] Implement empty state for model catalog

---
 src/components/ModelCatalog.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/ModelCatalog.jsx b/src/components/ModelCatalog.jsx
index f7541b05ff4a9f..6d59e93be43100 100644
--- a/src/components/ModelCatalog.jsx
+++ b/src/components/ModelCatalog.jsx
@@ -184,6 +184,15 @@ const ModelCatalog = ({ models }) => {
 				</div>
 			</div>
 			<div className="flex md:w-3/4 w-full gap-[1%] items-stretch self-start flex-wrap !mt-0">
+				{modelList.length === 0 && (
+					<div className="border bg-gray-50 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
+						<span className="text-lg !font-bold">No models found</span>
+						<p>
+							Try a different search term, or broaden your search by removing
+							filters.
+						</p>
+					</div>
+				)}
 				{modelList.map((model) => {
 					const isBeta = model.model.properties.find(
 						({ property_id, value }) =>

From 428f3bed6c64515bed5f44010f7b9424fe9f947b Mon Sep 17 00:00:00 2001
From: Harley Turan <harley@cloudflare.com>
Date: Tue, 8 Oct 2024 18:33:52 +0100
Subject: [PATCH 2/3] Clean up model schema design

---
 src/components/models/SchemaRow.astro    | 38 +++++++++++++++---------
 src/components/models/SchemaViewer.astro |  2 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/models/SchemaRow.astro b/src/components/models/SchemaRow.astro
index 9753a640bd51e9..986ae6cc09b966 100644
--- a/src/components/models/SchemaRow.astro
+++ b/src/components/models/SchemaRow.astro
@@ -1,38 +1,48 @@
 ---
-import { Type } from "~/components";
+import { Type, MetaInfo } from "~/components";
 import { type SchemaNode } from "@stoplight/json-schema-tree";
 
-const { node } = Astro.props;
+const { node, root } = Astro.props;
 ---
 
-<li class="my-2 !list-none">
-	<code class="mr-2 font-mono rounded-md bg-gray-100">
-		{node.subpath[node.subpath.length - 1]}
-	</code>
+<li
+	class={`py-2 !my-0 !list-none ${root ? "" : "border-l border-l-gray-200 pl-4"}`}
+>
+	{
+		node.title ? (
+			<span class="mr-2 font-bold">{node.title}</span>
+		) : (
+			<code class="mr-2 !pr-0 font-mono rounded-md bg-gray-100">
+				{node.subpath[node.subpath.length - 1]}
+			</code>
+		)
+	}
+
 	{node.primaryType && <Type text={node.primaryType} />}
+	{node.combiners && node.combiners.includes("oneOf") && <Type text="one of" />}
 
 	{
 		node.annotations.default && (
-			<span class="text-xs mr-2">default {node.annotations.default}</span>
+			<MetaInfo text={`default ${node.annotations.default}`} />
 		)
 	}
 	{
 		(node.validations.minLength !== undefined ||
 			node.validations.minimum !== undefined) && (
-			<span class="text-xs mr-2">
-				min {node.validations.minLength || node.validations.minimum}
-			</span>
+			<MetaInfo
+				text={`min ${node.validations.minLength || node.validations.minimum}`}
+			/>
 		)
 	}
 	{
 		(node.validations.maxLength !== undefined ||
 			node.validations.maximum !== undefined) && (
-			<span class="text-xs">
-				max {node.validations.maxLength || node.validations.maximum}
-			</span>
+			<MetaInfo
+				text={`max ${node.validations.maxLength || node.validations.maximum}`}
+			/>
 		)
 	}
-	<p>{node.annotations.description}</p>
+	<p class="!mb-0">{node.annotations.description}</p>
 
 	{
 		node.children && (
diff --git a/src/components/models/SchemaViewer.astro b/src/components/models/SchemaViewer.astro
index 9bba6ef8c6052d..eec7994f22ee64 100644
--- a/src/components/models/SchemaViewer.astro
+++ b/src/components/models/SchemaViewer.astro
@@ -56,7 +56,7 @@ jsonSchemaTree.populate();
 <ul class="list-none m-0 p-0">
 	{
 		(jsonSchemaTree.root.children[0] as RegularNode).children?.map(
-			(node: SchemaNode) => <SchemaRow node={node} />,
+			(node: SchemaNode) => <SchemaRow node={node} root />,
 		)
 	}
 </ul>

From 1d1c4e1e5997ab4105a5822de8502fb456bb51e5 Mon Sep 17 00:00:00 2001
From: Harley Turan <harley@cloudflare.com>
Date: Fri, 11 Oct 2024 15:17:57 +0100
Subject: [PATCH 3/3] Dark mode fixes for model empty state

---
 src/components/ModelCatalog.jsx       | 2 +-
 src/components/models/SchemaRow.astro | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ModelCatalog.jsx b/src/components/ModelCatalog.jsx
index 6d59e93be43100..6bfcf294a985c0 100644
--- a/src/components/ModelCatalog.jsx
+++ b/src/components/ModelCatalog.jsx
@@ -185,7 +185,7 @@ const ModelCatalog = ({ models }) => {
 			</div>
 			<div className="flex md:w-3/4 w-full gap-[1%] items-stretch self-start flex-wrap !mt-0">
 				{modelList.length === 0 && (
-					<div className="border bg-gray-50 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
+					<div className="border bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
 						<span className="text-lg !font-bold">No models found</span>
 						<p>
 							Try a different search term, or broaden your search by removing
diff --git a/src/components/models/SchemaRow.astro b/src/components/models/SchemaRow.astro
index 986ae6cc09b966..d2e4f64122e85a 100644
--- a/src/components/models/SchemaRow.astro
+++ b/src/components/models/SchemaRow.astro
@@ -6,7 +6,7 @@ const { node, root } = Astro.props;
 ---
 
 <li
-	class={`py-2 !my-0 !list-none ${root ? "" : "border-l border-l-gray-200 pl-4"}`}
+	class={`py-2 !my-0 !list-none ${root ? "" : "border-l border-l-gray-200 dark:border-l-gray-500 pl-4"}`}
 >
 	{
 		node.title ? (