rename to /<handle>/bookmarks, created TagPill, update styles

package.json

···
 		"@atproto/oauth-client-node": "^0.3.8",
 		"@oslojs/encoding": "^1.1.0",
 		"@tailwindcss/vite": "^4.1.13",
-		"@tanstack/svelte-query": "^5.90.2",
 		"drizzle-orm": "^0.44.5",
 		"postgres": "^3.4.7",
 		"valibot": "^1.1.0"

src/app.css

···
   --font-neco: "Neco";
   --font-comico: "Comico";
 }
+
+@utility border-groove {
+  border-style: groove;
+}

src/lib/components/BookmarkCard.svelte

···
 <script lang="ts">
+  import TagPill from "./TagPill.svelte";
   import type { LexiconCommunityBookmark } from "$lib/utils";
 
   type BookmarkCardProps = {
-    isOwner: boolean;
+    isOwner?: boolean;
     bookmark: LexiconCommunityBookmark;
     onTagClick: (tag: string) => void;
     onTagDeleteClick?: (tag: string) => void;
   };
 
-  let { isOwner, bookmark, onTagClick, onTagDeleteClick }: BookmarkCardProps = $props();
+  let { isOwner = false, bookmark, onTagClick, onTagDeleteClick }: BookmarkCardProps = $props();
 </script>
 
 <article class="flex flex-col gap-4 border border-dashed hover:border-solid hover:shadow-lg px-4 py-3 w-fit">
-  <a href={bookmark.subject} class="hover:cursor-pointer text-xl visited:text-violet-600">{bookmark.subject}</a>
+  <a href={bookmark.subject} class="hover:underline hover:cursor-pointer hover:text-shadow-md text-xl visited:text-violet-600">{bookmark.subject}</a>
   {#if bookmark.tags && bookmark.tags.length > 0}
-    <div class="flex gap-5">
+    <div class="flex gap-5 flex-wrap">
       {#each bookmark.tags as tag}
-        <div class="relative group"> 
-          {#if isOwner}
-            <button 
-              onclick={() => onTagDeleteClick?.(tag)}
-              class="absolute -right-3 -top-3 group-hover:block hover:cursor-pointer hidden border bg-red-500 text-white text-xs px-1"
-            >
-               🗑️
-            </button>
-          {/if}
-          <button 
-            onclick={() => onTagClick(tag)}
-            class="bg-gray-200 w-fit px-2 py-1 hover:cursor-pointer font-comico text-sm"
-          >
-            {tag}
-          </button>
-        </div>
+        <TagPill {tag} showDeleteButton={isOwner} {onTagClick} {onTagDeleteClick} />
       {/each}
     </div>
   {:else}

src/lib/components/TagPill.svelte

···
+<script lang="ts">
+  type TagPillProps = {
+    tag: string;
+    variant?: "menu";
+    showDeleteButton?: boolean;
+    onTagClick?: (tag: string) => void;
+    onTagDeleteClick?: (tag: string) => void;
+  }
+
+  let { tag, variant, showDeleteButton, onTagClick, onTagDeleteClick }: TagPillProps = $props();
+</script>
+
+<div class="relative group flex"> 
+  {#if showDeleteButton && variant !== "menu"}
+    <button 
+      onclick={() => onTagDeleteClick?.(tag)}
+      class="absolute -right-3 -top-3 lg:group-hover:block hover:cursor-pointer hidden bg-white hover:bg-red-500/20 text-white text-xs px-1 py-0.5"
+    >
+       ❌
+    </button>
+  {/if}
+  <button 
+    onclick={() => onTagClick?.(tag)}
+    class={[
+      variant === "menu" && "hover:bg-red-300",
+      "bg-gray-200 w-fit px-2 py-1 hover:cursor-pointer font-comico text-sm"
+    ]}
+  >
+    {tag}
+  </button>
+  {#if showDeleteButton}
+    <button 
+      onclick={() => onTagDeleteClick?.(tag)}
+      class="lg:hidden text-xs px-1.5 py-0.5 border-2 border-gray-200"
+    >
+       ❌
+    </button>
+  {/if}
+</div>

src/lib/server/api.ts

···
-import { dev } from "$app/environment";
 import { SLICES_NETWORK_ACCESS_TOKEN } from "$env/static/private";
 import type { LexiconCommunityBookmark, SliceItem, SliceList } from "$lib/utils";
 

src/routes/+layout.svelte

···
 <script lang="ts">
 	import { page } from '$app/state';
-import '../app.css';
+  import '../app.css';
 
 	let { data, children } = $props();
   const user = $derived(data.user);
 </script>
 
 <div class="flex flex-col gap-8 w-screen h-full min-h-screen font-neco">
-  <header class="flex items-center w-full gap-4 px-8 py-4 justify-between">
-    <nav class="text-lg flex gap-4 items-center">
-      <a href="/" class="font-comico text-2xl hover:text-shadow-md">potatonet.app</a>
-      <a href="https://tangled.sh/@zeu.dev/potatonet-app" class="hover:text-shadow-lg">🧶</a>
-      <a href="https://bsky.app/profile/zeu.dev" class="hover:text-shadow-lg">🦋</a>
-    </nav>
+  <header class="flex flex-col lg:flex-row lg:items-center w-full gap-4 px-8 py-4 border-b lg:border-none justify-between">
+    <a href="/" class="font-comico text-2xl hover:text-shadow-md">potatonet.app</a>
 
-    <div class="flex gap-4 items-center text-lg">
+    <div class="flex gap-4 items-center text-lg flex-wrap">
+      <nav class="text-lg flex gap-4 flex-wrap items-center border-3 border-groove px-3 py-1.5">
+        <a href="/" class="hover:text-shadow-lg hover:underline" title="explore" aria-label="explore">🛰️ explore</a>
+        <a href="https://tangled.sh/@zeu.dev/potatonet-app" class="hover:text-shadow-lg" title="source code" aria-label="source code">🧶 source code</a>
+        <a href="https://bsky.app/profile/zeu.dev" class="hover:text-shadow-lg" title="maker's bluesky" aria-label="maker's bluesky">🦋 maker's bluesky</a>
+        {#if user}
+          <a href={`/${user.handle}/bookmarks`} class="hover:text-shadow-lg" aria-label="logged in user's bookmarks">🔖 your bookmarks</a>
+        {/if}
+      </nav>
       {#if user}
-        <a href={`/${user.handle}/home`} class="hover:text-shadow-lg">🏡</a>
         <form action="/?/logout" method="POST">
           <button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
             Logout
          </button>
         </form>
       {:else}
-        <form action="/?/login" method="POST" class="flex gap-4">
+        <form action="/?/login" method="POST" class="flex gap-4 lg:basis-0">
           <input 
             name="handle" 
             type="text" 
             placeholder="Handle (eg: zeu.dev)" 
-            class="border border-black border-dashed px-3 py-2 hover:shadow-lg focus:shadow-lg" 
+            class="border border-black border-dashed text-sm px-3 py-2 hover:shadow-lg focus:shadow-lg" 
           />
-          <button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
+          <button type="submit" class="font-comico bg-amber-400 text-black hover:cursor-pointer hover:bg-amber-500 hover:text-white px-4 py-2">
             Login
           </button>
         </form>
···
   </header>
   
   {#key page.url.pathname}
-  <main class="flex flex-col gap-4 p-8">
-    <svelte:boundary>
-      {@render children()}
-      
-      {#snippet pending()}
-        <p>Page loading...</p> 
-      {/snippet}
-    </svelte:boundary>
-  </main>
+    <main class="flex flex-col gap-4 p-8 pt-0 lg:pt-8">
+      <svelte:boundary>
+        {@render children()}
+        
+        {#snippet pending()}
+          <p>Loading...</p> 
+        {/snippet}
+      </svelte:boundary>
+    </main>
   {/key}
 </div>
 

src/routes/+page.svelte

···
 <script lang="ts">
   import BookmarkCard from "$lib/components/BookmarkCard.svelte";
+    import TagPill from "$lib/components/TagPill.svelte";
   import { getAllBookmarks } from "./api/bookmarks/data.remote";
 
   let { data } = $props();
   let cursor = $state("");
   const userBookmarksQuery = $derived(getAllBookmarks({ cursor }));
+  const queryData = $derived(userBookmarksQuery.current);
 
   let query = $state("");
   let filterTags = $state<string[]>([]);
···
   }
 </script>
 
-<h1 class="text-3xl font-bold font-comico">explore</h1> 
+<div class="flex gap-4 items-center">
+  <h1 class="text-2xl lg:text-3xl font-comico">Explore</h1>
+  <h2 class="text-lg italic">recent 50</h2>
+</div>
+
+<menu class="flex flex-col lg:flex-row w-full gap-4">
+  <label class="flex items-center gap-2">
+    Search URLs:
+    <input type="text" bind:value={query} class="border border-black border-dashed text-sm px-3 py-2 hover:shadow-lg focus:shadow-lg" placeholder="recipe" />
+  </label>
+
+  <label class="flex items-center gap-2">
+    Tags:
+    {#if filterTags.length === 0}
+      <TagPill tag="all" />
+    {:else}
+      {#each filterTags as filtered}
+        <TagPill showDeleteButton tag={filtered} {onTagClick} onTagDeleteClick={onTagClick} variant="menu" /> 
+      {/each}
+    {/if}
+  </label>
+  <button
+    onclick={() => userBookmarksQuery.refresh()}
+    class="font-comico bg-amber-400 text-black hover:cursor-pointer hover:bg-amber-500 hover:text-white px-4 py-2"
+  >
+    Refresh
+  </button>
+  {#if data.user}
+    <button class="justify-self-end font-comico bg-amber-400 text-black hover:cursor-pointer hover:bg-amber-500 hover:text-white px-4 py-2">
+      🔖 New Bookmark
+    </button>
+  {/if}
+
+</menu>
+<hr />
 
 {#if userBookmarksQuery.loading}
   <p>Loading...</p>
 {:else if userBookmarksQuery.error}
   <p>Error</p>
-{:else}
-  {@const { cursor: returnedCursor, bookmarks } = userBookmarksQuery.current || { cursor: "", bookmarks: []}}
-
-  <div class="sticky top-0 flex flex-col gap-4 pt-4 bg-white z-50">
-    <menu class="flex justify-between font-comico">
-      <div class="flex gap-4">
-        <label class="flex items-center gap-2">
-          Search term:
-          <input type="text" bind:value={query} class="font-neco border px-2 py-1" placeholder="recipe" />
-        </label>
-
-        <label class="flex items-center gap-2">
-          Tags:
-          {#each filterTags as filtered}
-            <button onclick={() => onTagClick(filtered)}>{filtered}</button>
-          {/each}
-        </label>
-        <button onclick={() => userBookmarksQuery.refresh()}>Refresh</button>
-      </div>
-    </menu>
-    <hr />
-  </div>
-
+{:else if queryData}
   <div class="flex flex-wrap gap-4">
-    {#each bookmarks as bookmark}
+    {#each queryData.bookmarks as bookmark}
       {#if bookmark.subject.includes(query) && (bookmark.tags?.some(t => filterTags.length > 0 ? filterTags.includes(t) : true))} 
-        <BookmarkCard isOwner={false} {bookmark} {onTagClick} {onTagDeleteClick} />
+        <BookmarkCard {bookmark} {onTagClick} {onTagDeleteClick} />
       {/if}
     {/each}
   </div>

src/routes/[handle]/bookmarks/+page.svelte

···
+<script lang="ts">
+  import { page } from "$app/state";
+  import BookmarkCard from "$lib/components/BookmarkCard.svelte";
+  import TagPill from "$lib/components/TagPill.svelte";
+  import { getUserBookmarks } from "../../api/bookmarks/data.remote";
+
+  let { data } = $props(); 
+  const { handle } = page.params;
+  let isOwner = $derived(data.user?.handle === handle);
+  let cursor = $state("");
+  const userBookmarksQuery = $derived(getUserBookmarks({ handle: handle as string, cursor }));
+
+  let query = $state("");
+  let filterTags = $state<string[]>([]);
+
+  function onTagClick(tag: string) {
+    const index = filterTags.findIndex((t) => t === tag);
+    if (index >= 0) { filterTags.splice(index, 1); }
+    else {
+      filterTags.push(tag);
+    }
+  }
+
+  function onTagDeleteClick(tag: string) {
+    console.log("DELETE", tag);
+  }
+</script>
+
+<h1 class="text-2xl lg:text-3xl font-comico">Bookmarks by @{handle}</h1>
+
+<menu class="flex flex-col lg:flex-row w-full gap-4">
+  <label class="flex items-center gap-2">
+    Search URLs:
+    <input type="text" bind:value={query} class="border border-black border-dashed text-sm px-3 py-2 hover:shadow-lg focus:shadow-lg" placeholder="recipe" />
+  </label>
+
+  <label class="flex items-center gap-2">
+    Tags:
+    {#if filterTags.length === 0}
+      <TagPill tag="all" />
+    {:else}
+      {#each filterTags as filtered}
+        <TagPill showDeleteButton tag={filtered} {onTagClick} onTagDeleteClick={onTagClick} variant="menu" /> 
+      {/each}
+    {/if}
+  </label>
+  <button
+    onclick={() => userBookmarksQuery.refresh()}
+    class="font-comico bg-amber-400 text-black hover:cursor-pointer hover:bg-amber-500 hover:text-white px-4 py-2"
+  >
+    Refresh
+  </button>
+  {#if isOwner}
+    <button class="justify-self-end font-comico bg-amber-400 text-black hover:cursor-pointer hover:bg-amber-500 hover:text-white px-4 py-2">
+      🔖 New Bookmark
+    </button>
+  {/if}
+
+</menu>
+<hr />
+
+{#if userBookmarksQuery.loading}
+  <p>Loading...</p>
+{:else if userBookmarksQuery.error}
+  <p>Error</p>
+{:else}
+  {@const { cursor: returnedCursor, bookmarks } = userBookmarksQuery.current || { cursor: "", bookmarks: []}}
+  <div class="flex flex-wrap gap-4">
+    {#each bookmarks as bookmark}
+      {#if bookmark.subject.includes(query) && (bookmark.tags?.every(t => filterTags.length > 0 ? filterTags.includes(t) : true))} 
+        <BookmarkCard {isOwner} {bookmark} {onTagClick} {onTagDeleteClick} />
+      {/if}
+    {/each}
+  </div>
+{/if}

src/routes/[handle]/home/+page.svelte

···
-<script lang="ts">
-  import { page } from "$app/state";
-  import BookmarkCard from "$lib/components/BookmarkCard.svelte";
-  import { getUserBookmarks } from "../../api/bookmarks/data.remote";
-
-  let { data } = $props(); 
-  const { handle } = page.params;
-  let isOwner = $derived(data.user?.handle === handle);
-  let cursor = $state("");
-  const userBookmarksQuery = $derived(getUserBookmarks({ handle: handle as string, cursor }));
-
-  let query = $state("");
-  let filterTags = $state<string[]>([]);
-
-  function onTagClick(tag: string) {
-    const index = filterTags.findIndex((t) => t === tag);
-    if (index >= 0) { filterTags.splice(index, 1); }
-    else {
-      filterTags.push(tag);
-    }
-  }
-
-  function onTagDeleteClick(tag: string) {
-    console.log("DELETE", tag);
-  }
-</script>
-
-<h1 class="text-3xl font-comico">Bookmarks by @{handle}</h1>
-
-{#if userBookmarksQuery.loading}
-  <p>Loading...</p>
-{:else if userBookmarksQuery.error}
-  <p>Error</p>
-{:else}
-  {@const { cursor: returnedCursor, bookmarks } = userBookmarksQuery.current || { cursor: "", bookmarks: []}}
-  <menu class="flex justify-between">
-    <div class="flex gap-4">
-      <label class="flex items-center gap-2">
-        Search term:
-        <input type="text" bind:value={query} class="border px-2 py-1" placeholder="recipe" />
-      </label>
-
-      <label class="flex items-center gap-2">
-        Tags:
-        {#each filterTags as filtered}
-          <button onclick={() => onTagClick(filtered)}>{filtered}</button>
-        {/each}
-      </label>
-      <button onclick={() => userBookmarksQuery.refresh()}>Refresh</button>
-    </div>
-
-    {#if isOwner}
-      <button class="font-comico bg-amber-400 text-black hover:cursor-pointer hover:bg-amber-500 hover:text-white px-4 py-2">
-        🔖 New Bookmark
-      </button>
-    {/if}
-  </menu>
-  <hr />
-
-  <div class="flex flex-wrap gap-4">
-    {#each bookmarks as bookmark}
-      {#if bookmark.subject.includes(query) && (bookmark.tags?.some(t => filterTags.length > 0 ? filterTags.includes(t) : true))} 
-        <BookmarkCard {isOwner} {bookmark} {onTagClick} {onTagDeleteClick} />
-      {/if}
-    {/each}
-  </div>
-{/if}