1 files changed, 16 insertions, 7 deletions
diff --git a/apps/web/app/dashboard/tags/[tagName]/page.tsx b/apps/web/app/dashboard/tags/[tagId]/page.tsx
index b8bf351d..f6e02a65 100644
--- a/apps/web/app/dashboard/tags/[tagName]/page.tsx
+++ b/apps/web/app/dashboard/tags/[tagId]/page.tsx
@@ -1,19 +1,20 @@
 import { notFound } from "next/navigation";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import DeleteTagButton from "@/components/dashboard/tags/DeleteTagButton";
+import EditableTagName from "@/components/dashboard/tags/EditableTagName";
+import { TagOptions } from "@/components/dashboard/tags/TagOptions";
+import { Button } from "@/components/ui/button";
 import { api } from "@/server/api/client";
 import { TRPCError } from "@trpc/server";
+import { MoreHorizontal } from "lucide-react";
 
 export default async function TagPage({
   params,
 }: {
-  params: { tagName: string };
+  params: { tagId: string };
 }) {
-  const tagName = decodeURIComponent(params.tagName);
-
   let tag;
   try {
-    tag = await api.tags.get({ tagName });
+    tag = await api.tags.get({ tagId: params.tagId });
   } catch (e) {
     if (e instanceof TRPCError) {
       if (e.code == "NOT_FOUND") {
@@ -27,8 +28,16 @@ export default async function TagPage({
     <Bookmarks
       header={
         <div className="flex justify-between">
-          <span className="text-2xl">{tagName}</span>
-          <DeleteTagButton tagName={tag.name} tagId={tag.id} />
+          <EditableTagName
+            tag={{ id: tag.id, name: tag.name }}
+            className="text-2xl"
+          />
+
+          <TagOptions tag={tag}>
+            <Button variant="ghost">
+              <MoreHorizontal />
+            </Button>
+          </TagOptions>
         </div>
       }
       query={{ tagId: tag.id }}