fix: properly handle empty states and invalid characters in fts (#1401)

* feat: add proper empty state for pubs

* fix: don't stale if query is only 1 char, bc we will not search that

* fix: escape the search query a bit more to avoid crashes when eg searching for https://google.com

---------

Co-authored-by: Eric McDaniel <[email protected]>

Author: tefkah

core/app/c/[communitySlug]/pubs/PubClearSearchButton.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { X } from "lucide-react";
+
+import { Button } from "ui/button";
+
+import { usePubSearch } from "./PubSearchProvider";
+
+export const PubClearSearchButton = ({ className }: { className?: string }) => {
+	const { setQuery, setFilters } = usePubSearch();
+	return (
+		<Button
+			variant="ghost"
+			size="sm"
+			className={className}
+			onClick={() => {
+				setQuery("");
+				setFilters((old) => ({
+					...old,
+					pubTypes: [],
+					stages: [],
+					filters: [],
+				}));
+			}}
+		>
+			<X size={16} />
+			Clear filters
+		</Button>
+	);
+};

core/app/c/[communitySlug]/pubs/PubList.tsx

@@ -1,16 +1,30 @@
 import { Suspense } from "react";
+import { BookOpen, Icon, Search } from "lucide-react";
 
 import type { ProcessedPub } from "contracts";
 import type { CommunitiesId, UsersId } from "db/public";
+import type { Button } from "ui/button";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "ui/empty";
 import { PubFieldProvider } from "ui/pubFields";
 import { Skeleton } from "ui/skeleton";
 import { stagesDAO, StagesProvider } from "ui/stages";
 import { cn } from "utils";
 
 import type { AutoReturnType } from "~/lib/types";
+import { CreatePubButton } from "~/app/components/pubs/CreatePubButton";
 import { PubCard } from "~/app/components/pubs/PubCard/PubCard";
+import { SkeletonButton } from "~/app/components/skeletons/SkeletonButton";
 import {
+	getCreatablePubTypes,
 	userCanArchiveAllPubs,
+	userCanCreatePub,
 	userCanEditAllPubs,
 	userCanMoveAllPubs,
 	userCanRunActionsAllPubs,
@@ -20,6 +34,7 @@ import { getPubsCount, getPubsWithRelatedValues, getPubTypesForCommunity } from
 import { getCommunitySlug } from "~/lib/server/cache/getCommunitySlug";
 import { getPubFields } from "~/lib/server/pubFields";
 import { getStages } from "~/lib/server/stages";
+import { PubClearSearchButton } from "./PubClearSearchButton";
 import { getPubFilterParamsFromSearch, pubSearchParamsCache } from "./pubQuery";
 import { PubSearchFooter } from "./PubSearchFooter";
 import { PubSearch } from "./PubSearchInput";
@@ -71,8 +86,41 @@ const PaginatedPubListInner = async (
 		userCanViewAllStages(),
 	]);
 
+	const hasSearch =
+		props.searchParams.query !== "" ||
+		(props.searchParams.pubTypes?.length ?? 0) > 0 ||
+		(props.searchParams.stages?.length ?? 0) > 0;
 	return (
 		<div className="mr-auto flex flex-col gap-3 md:max-w-screen-lg">
+			{pubs.length === 0 && (
+				<Empty className="">
+					<EmptyHeader>
+						<EmptyMedia variant="icon">
+							<BookOpen size={16} />
+						</EmptyMedia>
+						<EmptyTitle>No Pubs Found</EmptyTitle>
+						{hasSearch && (
+							<EmptyDescription>
+								Try adjusting your filters or search query.
+							</EmptyDescription>
+						)}
+					</EmptyHeader>
+					<EmptyContent>
+						{hasSearch ? (
+							<PubClearSearchButton />
+						) : (
+							<Suspense fallback={<SkeletonButton className="w-20" />}>
+								<CreatePubButton
+									communityId={props.communityId}
+									className="bg-emerald-500 text-white hover:bg-emerald-600"
+									text="Create Pub"
+								/>
+							</Suspense>
+						)}
+					</EmptyContent>
+				</Empty>
+			)}
+
 			{pubs.map((pub) => {
 				const stageForPub = stages.find((stage) => stage.id === pub.stage?.id);
 

core/app/c/[communitySlug]/pubs/PubSearchInput.tsx

@@ -1,23 +1,7 @@
 "use client";
 
-import React, {
-	use,
-	useCallback,
-	useDeferredValue,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
+import React, { useRef } from "react";
 import { ArrowUpDownIcon, PlusCircle, Search, SortAsc, SortDesc, X } from "lucide-react";
-import {
-	parseAsArrayOf,
-	parseAsInteger,
-	parseAsString,
-	parseAsStringEnum,
-	useQueryStates,
-} from "nuqs";
-import { useDebouncedCallback } from "use-debounce";
 
 import type { PubTypesId, StagesId } from "db/public";
 import { Button } from "ui/button";
@@ -32,9 +16,7 @@ import { Input } from "ui/input";
 import { MultiSelect } from "ui/multi-select";
 import { cn } from "utils";
 
-import type { PubSearchParams } from "./pubQuery";
 import { entries } from "~/lib/mapping";
-import { pubSearchParsers } from "./pubQuery";
 import { usePubSearch } from "./PubSearchProvider";
 
 export type StageFilters = {
@@ -225,7 +207,13 @@ export const PubSearch = (props: PubSearchProps) => {
 					</DropdownMenuContent>
 				</DropdownMenu>
 			</div>
-			<div className={cn(stale && "opacity-50 transition-opacity duration-200", "m-4 mt-1")}>
+			<div
+				className={cn(
+					stale &&
+						'opacity-50 transition-opacity duration-200 [&_[data-testid*="pub-card"]]:animate-pulse',
+					"m-4 mt-1"
+				)}
+			>
 				{props.children}
 			</div>
 		</div>

core/app/c/[communitySlug]/pubs/PubSearchProvider.tsx

@@ -66,6 +66,10 @@ const PubSearchContext = createContext<PubSearchContextType>({
 const DEBOUNCE_TIME = 300;
 
 const isStale = (query: PubSearchParams, inputValues: PubSearchParams) => {
+	if (inputValues.query.length === 1) {
+		return false;
+	}
+
 	if (query.query !== inputValues.query) {
 		return true;
 	}

core/app/components/pubs/CreatePubButton.tsx

@@ -104,6 +104,10 @@ export const CreatePubButton = async (props: Props) => {
 
 	const pubTypes = await getCreatablePubTypes(user.id, community.id);
 
+	if (pubTypes.length === 0) {
+		return null;
+	}
+
 	const stageId = "stageId" in props ? props.stageId : undefined;
 
 	return (

core/lib/server/pub.ts

@@ -2173,7 +2173,7 @@ export const createTsQuery = (query: string, config: SearchConfig = {}) => {
 
 	const { prefixSearch = true, minLength = 2 } = options;
 
-	const cleanQuery = query.trim();
+	const cleanQuery = query.trim().replace(/[:@]/g, "");
 	if (cleanQuery.length < minLength) {
 		return null;
 	}

packages/ui/package.json

@@ -12,6 +12,7 @@
 		"./alert": "./dist/ui-alert.js",
 		"./badge": "./dist/ui-badge.js",
 		"./color": "./dist/ui-color.js",
+		"./empty": "./dist/ui-empty.js",
 		"./field": "./dist/ui-field.js",
 		"./input": "./dist/ui-input.js",
 		"./label": "./dist/ui-label.js",
@@ -270,6 +271,7 @@
 			"dialog.tsx",
 			"dropdown-menu.tsx",
 			"editors/index.tsx",
+			"empty.tsx",
 			"field.tsx",
 			"form.tsx",
 			"hover-card.tsx",

packages/ui/src/empty.tsx

@@ -0,0 +1,97 @@
+import type { VariantProps } from "class-variance-authority";
+
+import * as React from "react";
+import { cva } from "class-variance-authority";
+
+import { cn } from "utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty"
+			className={cn(
+				"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-header"
+			className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+			{...props}
+		/>
+	);
+}
+
+const emptyMediaVariants = cva(
+	"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+
+function EmptyMedia({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+	return (
+		<div
+			data-slot="empty-icon"
+			data-variant={variant}
+			className={cn(emptyMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-title"
+			className={cn("text-lg font-medium tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<div
+			data-slot="empty-description"
+			className={cn(
+				"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-content"
+			className={cn(
+				"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };