add url import bar in lieu of full-text search

src/components/Import.tsx

···
+import { AtUri } from "@atproto/api";
+import { useNavigate, type UseNavigateResult } from "@tanstack/react-router";
+import { useState } from "react";
+
+/**
+ * Basically the best equivalent to Search that i can do
+ */
+export function Import() {
+  const [textInput, setTextInput] = useState<string | undefined>();
+  const navigate = useNavigate();
+
+  const handleEnter = () => {
+    if (!textInput) return;
+    handleImport({
+      text: textInput,
+      navigate,
+    });
+  };
+
+  return (
+    <div className="w-full relative">
+      <IconMaterialSymbolsSearch className="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+
+      <input
+        type="text"
+        placeholder="Import..."
+        value={textInput}
+        onChange={(e) => setTextInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") handleEnter();
+        }}
+        className="w-full h-12 pl-12 pr-4 rounded-full  bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 box-border transition"
+      />
+    </div>
+  );
+}
+
+function handleImport({
+  text,
+  navigate,
+}: {
+  text: string;
+  navigate: UseNavigateResult<string>;
+}) {
+  const trimmed = text.trim();
+  // parse text
+  /**
+   * text might be
+   * 1. bsky dot app url (deer.social, reddwarf.whey.party, main.bsky.dev, catskys.social) (reddwarf link segments might be uri encoded,)
+   * 2. aturi
+   * 3. plain handle
+   * 4. plain did
+   */
+
+  // 1. Check if it’s a URL
+  try {
+    const url = new URL(text);
+    const knownHosts = [
+      "bsky.app",
+      "social.daniela.lol",
+      "deer.social",
+      "reddwarf.whey.party",
+      "main.bsky.dev",
+      "catsky.social",
+      "blacksky.community",
+      "red-dwarf-social-app.whey.party",
+      "zeppelin.social",
+    ];
+    if (knownHosts.includes(url.hostname)) {
+      // parse path to get URI or handle
+      const path = decodeURIComponent(url.pathname.slice(1)); // remove leading /
+      console.log("BSky URL path:", path);
+      navigate({
+        to: `/${path}`,
+      });
+      return;
+    }
+  } catch {
+    // not a URL, continue
+  }
+
+  // 2. Check if text looks like an at-uri
+  try {
+    if (text.startsWith("at://")) {
+      console.log("AT URI detected:", text);
+      const aturi = new AtUri(text);
+      switch (aturi.collection) {
+        case "app.bsky.feed.post": {
+          navigate({
+            to: "/profile/$did/post/$rkey",
+            params: {
+              did: aturi.host,
+              rkey: aturi.rkey,
+            },
+          });
+          return;
+        }
+        case "app.bsky.actor.profile": {
+          navigate({
+            to: "/profile/$did",
+            params: {
+              did: aturi.host,
+            },
+          });
+          return;
+        }
+        // todo add more handlers as more routes are added. like feeds, lists, etc etc thanks!
+        default: {
+          // continue
+        }
+      }
+    }
+  } catch {
+    // continue
+  }
+
+  // 3. Plain handle (starts with @)
+  try {
+    if (text.startsWith("@")) {
+      const handle = text.slice(1);
+      console.log("Handle detected:", handle);
+      navigate({ to: "/profile/$did", params: { did: handle } });
+      return;
+    }
+  } catch {
+    // continue
+  }
+
+  // 4. Plain DID (starts with did:)
+  try {
+    if (text.startsWith("did:")) {
+      console.log("did detected:", text);
+      navigate({ to: "/profile/$did", params: { did: text } });
+      return;
+    }
+  } catch {
+    // continue
+  }
+
+  // if all else fails
+
+  // try {
+  //   // probably a user?
+  //   navigate({ to: "/profile/$did", params: { did: text } });
+  //   return;
+  // } catch {
+  //   // continue
+  // }
+}

src/components/Login.tsx

···
         className={
           compact
             ? "flex items-center justify-center p-1"
-            : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4 flex justify-center items-center h-[280px]"
+            : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-4 mx-4 flex justify-center items-center h-[280px]"
         }
       >
         <span
···
     // Large view
     if (!compact) {
       return (
-        <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl  border-gray-200 dark:border-gray-800 mt-6 mx-4">
+        <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl  border-gray-200 dark:border-gray-800 mt-4 mx-4">
           <div className="flex flex-col items-center justify-center text-center">
             <p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
               You are logged in!
···
   if (!compact) {
     // Large view renders the form directly in the card
     return (
-      <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl  border-gray-200 dark:border-gray-800 mt-6 mx-4">
+      <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl  border-gray-200 dark:border-gray-800 mt-4 mx-4">
         <UnifiedLoginForm />
       </div>
     );

src/routes/__root.tsx

···
 
 import { Composer } from "~/components/Composer";
 import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
+import { Import } from "~/components/Import";
 import Login from "~/components/Login";
 import { NotFound } from "~/components/NotFound";
 import { FluentEmojiHighContrastGlowingStar } from "~/components/Star";
···
           />
 
           <MaterialNavItem
+            InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+            ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+            active={locationEnum === "search"}
+            onClickCallbback={() =>
+              navigate({
+                to: "/search",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Explore"
+          />
+          <MaterialNavItem
             InactiveIcon={
               <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
             }
···
               })
             }
             text="Feeds"
-          />
-          <MaterialNavItem
-            InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
-            ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
-            active={locationEnum === "search"}
-            onClickCallbback={() =>
-              navigate({
-                to: "/search",
-                //params: { did: agent.assertDid },
-              })
-            }
-            text="Search"
           />
           <MaterialNavItem
             InactiveIcon={
···
 
           <MaterialNavItem
             small
+            InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+            ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+            active={locationEnum === "search"}
+            onClickCallbback={() =>
+              navigate({
+                to: "/search",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Explore"
+          />
+          <MaterialNavItem
+            small
             InactiveIcon={
               <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
             }
···
           />
           <MaterialNavItem
             small
-            InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
-            ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
-            active={locationEnum === "search"}
-            onClickCallbback={() =>
-              navigate({
-                to: "/search",
-                //params: { did: agent.assertDid },
-              })
-            }
-            text="Search"
-          />
-          <MaterialNavItem
-            small
             InactiveIcon={
               <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" />
             }
···
         </main>
 
         <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col">
+          <div className="px-4 pt-4"><Import /></div>
           <Login />
 
           <div className="flex-1"></div>
···
                   //params: { did: agent.assertDid },
                 })
               }
-              text="Search"
+              text="Explore"
             />
             {/* <Link
               to="/search"

src/routes/search.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
 
+import { Header } from "~/components/Header";
+import { Import } from "~/components/Import";
+
 export const Route = createFileRoute("/search")({
   component: Search,
 });
 
 export function Search() {
-  return <div className="p-6">Search page (coming soon)</div>;
+  return (
+    <>
+      <Header
+        title="Explore"
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+      <div className=" flex flex-col items-center mt-4 mx-4 gap-4">
+        <Import />
+        <div className="flex flex-col">
+          <p className="text-gray-600 dark:text-gray-400">
+            Sorry we dont have search. But instead, you can load some of these
+            types of content into Red Dwarf:
+          </p>
+          <ul className="list-disc list-inside mt-2 text-gray-600 dark:text-gray-400">
+            <li>
+              Bluesky URLs from supported clients (like{" "}
+              <code className="text-sm">bsky.app</code> or{" "}
+              <code className="text-sm">deer.social</code>).
+            </li>
+            <li>
+              AT-URIs (e.g.,{" "}
+              <code className="text-sm">at://did:example/collection/item</code>
+              ).
+            </li>
+            <li>
+              Plain handles (like{" "}
+              <code className="text-sm">@username.bsky.social</code>).
+            </li>
+            <li>
+              Direct DIDs (Decentralized Identifiers, starting with{" "}
+              <code className="text-sm">did:</code>).
+            </li>
+          </ul>
+          <p className="mt-2 text-gray-600 dark:text-gray-400">
+            Simply paste one of these into the import field above and press
+            Enter to load the content.
+          </p>
+        </div>
+      </div>
+    </>
+  );
 }