add resource search and filter by resource type

Author: invisal

src/app/(outerbase)/auth-provider.tsx

@@ -13,7 +13,7 @@ export default function AuthProvider({ children }: PropsWithChildren) {
     if (isLoading) return;
     if (!session?.session || !session?.user) {
       localStorage.setItem("continue-redirect", pathname);
-      router.push("/signin");
+      router.replace("/signin");
     }
   }, [isLoading, session, pathname, router]);
 

src/app/(outerbase)/nav.tsx

@@ -14,26 +14,36 @@ import {
   SquaresFour,
 } from "@phosphor-icons/react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import NavigationProfile from "./nav-profile";
+import { useSession } from "./session-provider";
 import { useWorkspaces } from "./workspace-provider";
 
 export function NavigationBar() {
   const { currentWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
+  const pathname = usePathname();
+  const { session } = useSession();
 
   return (
     <div className="dark:bg-background relative sticky top-0 z-20 flex h-14 items-center justify-center gap-2 bg-neutral-50 px-2">
       <div className="text-primary absolute left-0 flex h-14 items-center pl-2">
-        <Link href={`/w/${workspaceId}`}>
+        <Link
+          href={
+            pathname !== "/w/local-workspace"
+              ? `/w/${workspaceId}`
+              : "/w/local-workspace"
+          }
+        >
           <OuterbaseIcon className="h-8 w-8" />
         </Link>
 
         <Popover>
           <PopoverTrigger asChild>
             <Button variant="ghost">
-              {currentWorkspace?.name} <CaretUpDown className="ml-2" />
+              {currentWorkspace?.name ?? "Local"}
+              <CaretUpDown className="ml-2" />
             </Button>
           </PopoverTrigger>
           <PopoverContent className="h-[400px] w-[500px] p-0" align="start">
@@ -42,42 +52,51 @@ export function NavigationBar() {
         </Popover>
       </div>
 
-      <div className="flex gap-4 text-base">
-        <Link
-          href={`/w/${workspaceId}`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <GlobeHemisphereEast weight="fill" className="size-5" /> Home
-        </Link>
-        <Link
-          href={`/w/${workspaceId}/settings`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <Gear className="size-5" />
-          Settings
-        </Link>
-        <Link
-          href={`/w/${workspaceId}/billing`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <Gear className="size-5" />
-          Billing
-        </Link>
-      </div>
+      {workspaceId && workspaceId !== "local-workspace" && (
+        <div className="flex gap-4 text-base">
+          <Link
+            href={`/w/${workspaceId}`}
+            className="flex cursor-pointer items-center gap-1"
+          >
+            <GlobeHemisphereEast weight="fill" className="size-5" /> Home
+          </Link>
+          <Link
+            href={`/w/${workspaceId}/settings`}
+            className="flex cursor-pointer items-center gap-1"
+          >
+            <Gear className="size-5" />
+            Settings
+          </Link>
+          <Link
+            href={`/w/${workspaceId}/billing`}
+            className="flex cursor-pointer items-center gap-1"
+          >
+            <Gear className="size-5" />
+            Billing
+          </Link>
+        </div>
+      )}
 
       <div className="absolute right-0 flex gap-2 pr-2">
         <div className="bg-secondary text-secondary-foreground flex h-9 items-center justify-center rounded-lg border px-4 text-base font-semibold">
           Feedback
         </div>
 
         <NavigationProfile />
+
+        {!session && (
+          <Button href="/signin" size="lg" as="link">
+            Sign In
+          </Button>
+        )}
       </div>
     </div>
   );
 }
 
 function WorkspaceSelector() {
   const router = useRouter();
+  const { session } = useSession();
   const { workspaces, currentWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
   const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(workspaceId);
@@ -128,7 +147,7 @@ function WorkspaceSelector() {
           className="p-4 font-normal"
           size="sm"
           as="link"
-          href="/new-workspace"
+          href={session ? "/new-workspace" : "/signin"}
         >
           <SquaresFour size={16} /> New Workspace
         </Button>

src/app/(outerbase)/w/[workspaceId]/page.tsx

@@ -48,7 +48,9 @@ export default function WorkspaceListPageClient() {
   const router = useRouter();
   const { currentWorkspace, refreshWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
-  const [typeFilter, setTypeFilter] = useState("all");
+
+  const [filterType, setFilterType] = useState("all");
+  const [filterName, setFilterName] = useState("");
 
   useRedirectValidWorkspace();
 
@@ -85,37 +87,55 @@ export default function WorkspaceListPageClient() {
         status: `Last updated ${timeSince(new Date(board?.updated_at ?? ""))} ago`,
       }));
 
-    const allResources = [...baseResources, ...boardResources];
+    let allResources = [...baseResources, ...boardResources];
+
+    // Apply filters
+    if (filterName) {
+      allResources = allResources.filter((resource) =>
+        resource.name?.toLowerCase().includes(filterName.toLowerCase())
+      );
+    }
+
+    if (filterType === "base") {
+      allResources = allResources.filter(
+        (resource) => resource.type !== "board"
+      );
+    } else if (filterType === "board") {
+      allResources = allResources.filter(
+        (resource) => resource.type === "board"
+      );
+    }
 
     return allResources.sort((a, b) =>
       (a.name ?? "").localeCompare(b.name ?? "")
     );
-  }, [currentWorkspace, boards]);
+  }, [currentWorkspace, boards, filterName, filterType]);
 
   return (
     <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
       <NavigationBar />
 
       <div className="container mx-auto mt-10 p-4">
-        <div className="mb-12 flex gap-4">
+        <div className="sticky top-14 z-20 mb-12 flex gap-4 bg-neutral-50 pb-2 dark:bg-neutral-950">
           <div className="flex-1">
             <Input
               preText={<MagnifyingGlass size={16} className="mr-2" />}
               size="lg"
               placeholder="Search resources..."
-              onValueChange={() => {}}
+              onValueChange={setFilterName}
+              value={filterName}
             />
           </div>
 
           <MenuBar
             size="lg"
             items={[
               { value: "all", content: "All" },
-              { value: "bases", content: "Bases" },
-              { value: "boards", content: "Boards" },
+              { value: "base", content: "Bases" },
+              { value: "board", content: "Boards" },
             ]}
-            onChange={setTypeFilter}
-            value={typeFilter}
+            onChange={setFilterType}
+            value={filterType}
           />
 
           <MenuBar