feat: implement rename tag

api/v2/tag_service.go

@@ -11,6 +11,10 @@ import (
 	"google.golang.org/grpc/codes"
 	"google.golang.org/grpc/status"
 
+	"github.com/usememos/memos/plugin/gomark/ast"
+	"github.com/usememos/memos/plugin/gomark/parser"
+	"github.com/usememos/memos/plugin/gomark/parser/tokenizer"
+	"github.com/usememos/memos/plugin/gomark/restore"
 	apiv2pb "github.com/usememos/memos/proto/gen/api/v2"
 	"github.com/usememos/memos/store"
 )
@@ -70,6 +74,71 @@ func (s *APIV2Service) ListTags(ctx context.Context, request *apiv2pb.ListTagsRe
 	return response, nil
 }
 
+func (s *APIV2Service) RenameTag(ctx context.Context, request *apiv2pb.RenameTagRequest) (*apiv2pb.RenameTagResponse, error) {
+	username, err := ExtractUsernameFromName(request.User)
+	if err != nil {
+		return nil, status.Errorf(codes.InvalidArgument, "invalid username: %v", err)
+	}
+	user, err := s.Store.GetUser(ctx, &store.FindUser{
+		Username: &username,
+	})
+	if err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to get user: %v", err)
+	}
+	if user == nil {
+		return nil, status.Errorf(codes.NotFound, "user not found")
+	}
+
+	// Find all related memos.
+	memos, err := s.Store.ListMemos(ctx, &store.FindMemo{
+		CreatorID:     &user.ID,
+		ContentSearch: []string{fmt.Sprintf("#%s", request.OldName)},
+	})
+	if err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to list memos: %v", err)
+	}
+	// Replace tag name in memo content.
+	for _, memo := range memos {
+		nodes, err := parser.Parse(tokenizer.Tokenize(memo.Content))
+		if err != nil {
+			return nil, status.Errorf(codes.Internal, "failed to parse memo: %v", err)
+		}
+		traverseASTNodes(nodes, func(node ast.Node) {
+			if tag, ok := node.(*ast.Tag); ok {
+				tag.Content = request.NewName
+			}
+		})
+		content := restore.Restore(nodes)
+		if err := s.Store.UpdateMemo(ctx, &store.UpdateMemo{
+			ID:      memo.ID,
+			Content: &content,
+		}); err != nil {
+			return nil, status.Errorf(codes.Internal, "failed to update memo: %v", err)
+		}
+	}
+
+	// Delete old tag and create new tag.
+	if err := s.Store.DeleteTag(ctx, &store.DeleteTag{
+		CreatorID: user.ID,
+		Name:      request.OldName,
+	}); err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to delete tag: %v", err)
+	}
+	tag, err := s.Store.UpsertTag(ctx, &store.Tag{
+		CreatorID: user.ID,
+		Name:      request.NewName,
+	})
+	if err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to upsert tag: %v", err)
+	}
+
+	tagMessage, err := s.convertTagFromStore(ctx, tag)
+	if err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to convert tag: %v", err)
+	}
+	return &apiv2pb.RenameTagResponse{Tag: tagMessage}, nil
+}
+
 func (s *APIV2Service) DeleteTag(ctx context.Context, request *apiv2pb.DeleteTagRequest) (*apiv2pb.DeleteTagResponse, error) {
 	username, err := ExtractUsernameFromName(request.Tag.Creator)
 	if err != nil {

proto/api/v2/tag_service.proto

@@ -13,6 +13,9 @@ service TagService {
   rpc ListTags(ListTagsRequest) returns (ListTagsResponse) {
     option (google.api.http) = {get: "/api/v2/tags"};
   }
+  rpc RenameTag(RenameTagRequest) returns (RenameTagResponse) {
+    option (google.api.http) = {patch: "/api/v2/tags:rename"};
+  }
   rpc DeleteTag(DeleteTagRequest) returns (DeleteTagResponse) {
     option (google.api.http) = {delete: "/api/v2/tags"};
   }
@@ -46,6 +49,18 @@ message ListTagsResponse {
   repeated Tag tags = 1;
 }
 
+message RenameTagRequest {
+  // The creator of tags.
+  // Format: users/{username}
+  string user = 1;
+  string old_name = 2;
+  string new_name = 3;
+}
+
+message RenameTagResponse {
+  Tag tag = 1;
+}
+
 message DeleteTagRequest {
   Tag tag = 1;
 }

proto/gen/api/v2/README.md

@@ -175,6 +175,8 @@
     - [GetTagSuggestionsResponse](#memos-api-v2-GetTagSuggestionsResponse)
     - [ListTagsRequest](#memos-api-v2-ListTagsRequest)
     - [ListTagsResponse](#memos-api-v2-ListTagsResponse)
+    - [RenameTagRequest](#memos-api-v2-RenameTagRequest)
+    - [RenameTagResponse](#memos-api-v2-RenameTagResponse)
     - [Tag](#memos-api-v2-Tag)
     - [UpsertTagRequest](#memos-api-v2-UpsertTagRequest)
     - [UpsertTagResponse](#memos-api-v2-UpsertTagResponse)
@@ -2503,6 +2505,38 @@
 
 
 
+<a name="memos-api-v2-RenameTagRequest"></a>
+
+### RenameTagRequest
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| user | [string](#string) |  | The creator of tags. Format: users/{username} |
+| old_name | [string](#string) |  |  |
+| new_name | [string](#string) |  |  |
+
+
+
+
+
+
+<a name="memos-api-v2-RenameTagResponse"></a>
+
+### RenameTagResponse
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| tag | [Tag](#memos-api-v2-Tag) |  |  |
+
+
+
+
+
+
 <a name="memos-api-v2-Tag"></a>
 
 ### Tag
@@ -2564,6 +2598,7 @@
 | ----------- | ------------ | ------------- | ------------|
 | UpsertTag | [UpsertTagRequest](#memos-api-v2-UpsertTagRequest) | [UpsertTagResponse](#memos-api-v2-UpsertTagResponse) |  |
 | ListTags | [ListTagsRequest](#memos-api-v2-ListTagsRequest) | [ListTagsResponse](#memos-api-v2-ListTagsResponse) |  |
+| RenameTag | [RenameTagRequest](#memos-api-v2-RenameTagRequest) | [RenameTagResponse](#memos-api-v2-RenameTagResponse) |  |
 | DeleteTag | [DeleteTagRequest](#memos-api-v2-DeleteTagRequest) | [DeleteTagResponse](#memos-api-v2-DeleteTagResponse) |  |
 | GetTagSuggestions | [GetTagSuggestionsRequest](#memos-api-v2-GetTagSuggestionsRequest) | [GetTagSuggestionsResponse](#memos-api-v2-GetTagSuggestionsResponse) |  |
 

proto/gen/api/v2/tag_service.pb.gw.go

@@ -103,6 +103,42 @@ func local_request_TagService_ListTags_0(ctx context.Context, marshaler runtime.
 
 }
 
+var (
+	filter_TagService_RenameTag_0 = &utilities.DoubleArray{Encoding: map[string]int{}, Base: []int(nil), Check: []int(nil)}
+)
+
+func request_TagService_RenameTag_0(ctx context.Context, marshaler runtime.Marshaler, client TagServiceClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
+	var protoReq RenameTagRequest
+	var metadata runtime.ServerMetadata
+
+	if err := req.ParseForm(); err != nil {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "%v", err)
+	}
+	if err := runtime.PopulateQueryParameters(&protoReq, req.Form, filter_TagService_RenameTag_0); err != nil {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "%v", err)
+	}
+
+	msg, err := client.RenameTag(ctx, &protoReq, grpc.Header(&metadata.HeaderMD), grpc.Trailer(&metadata.TrailerMD))
+	return msg, metadata, err
+
+}
+
+func local_request_TagService_RenameTag_0(ctx context.Context, marshaler runtime.Marshaler, server TagServiceServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
+	var protoReq RenameTagRequest
+	var metadata runtime.ServerMetadata
+
+	if err := req.ParseForm(); err != nil {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "%v", err)
+	}
+	if err := runtime.PopulateQueryParameters(&protoReq, req.Form, filter_TagService_RenameTag_0); err != nil {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "%v", err)
+	}
+
+	msg, err := server.RenameTag(ctx, &protoReq)
+	return msg, metadata, err
+
+}
+
 var (
 	filter_TagService_DeleteTag_0 = &utilities.DoubleArray{Encoding: map[string]int{}, Base: []int(nil), Check: []int(nil)}
 )
@@ -231,6 +267,31 @@ func RegisterTagServiceHandlerServer(ctx context.Context, mux *runtime.ServeMux,
 
 	})
 
+	mux.Handle("PATCH", pattern_TagService_RenameTag_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
+		ctx, cancel := context.WithCancel(req.Context())
+		defer cancel()
+		var stream runtime.ServerTransportStream
+		ctx = grpc.NewContextWithServerTransportStream(ctx, &stream)
+		inboundMarshaler, outboundMarshaler := runtime.MarshalerForRequest(mux, req)
+		var err error
+		var annotatedContext context.Context
+		annotatedContext, err = runtime.AnnotateIncomingContext(ctx, mux, req, "/memos.api.v2.TagService/RenameTag", runtime.WithHTTPPathPattern("/api/v2/tags:rename"))
+		if err != nil {
+			runtime.HTTPError(ctx, mux, outboundMarshaler, w, req, err)
+			return
+		}
+		resp, md, err := local_request_TagService_RenameTag_0(annotatedContext, inboundMarshaler, server, req, pathParams)
+		md.HeaderMD, md.TrailerMD = metadata.Join(md.HeaderMD, stream.Header()), metadata.Join(md.TrailerMD, stream.Trailer())
+		annotatedContext = runtime.NewServerMetadataContext(annotatedContext, md)
+		if err != nil {
+			runtime.HTTPError(annotatedContext, mux, outboundMarshaler, w, req, err)
+			return
+		}
+
+		forward_TagService_RenameTag_0(annotatedContext, mux, outboundMarshaler, w, req, resp, mux.GetForwardResponseOptions()...)
+
+	})
+
 	mux.Handle("DELETE", pattern_TagService_DeleteTag_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
 		ctx, cancel := context.WithCancel(req.Context())
 		defer cancel()
@@ -366,6 +427,28 @@ func RegisterTagServiceHandlerClient(ctx context.Context, mux *runtime.ServeMux,
 
 	})
 
+	mux.Handle("PATCH", pattern_TagService_RenameTag_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
+		ctx, cancel := context.WithCancel(req.Context())
+		defer cancel()
+		inboundMarshaler, outboundMarshaler := runtime.MarshalerForRequest(mux, req)
+		var err error
+		var annotatedContext context.Context
+		annotatedContext, err = runtime.AnnotateContext(ctx, mux, req, "/memos.api.v2.TagService/RenameTag", runtime.WithHTTPPathPattern("/api/v2/tags:rename"))
+		if err != nil {
+			runtime.HTTPError(ctx, mux, outboundMarshaler, w, req, err)
+			return
+		}
+		resp, md, err := request_TagService_RenameTag_0(annotatedContext, inboundMarshaler, client, req, pathParams)
+		annotatedContext = runtime.NewServerMetadataContext(annotatedContext, md)
+		if err != nil {
+			runtime.HTTPError(annotatedContext, mux, outboundMarshaler, w, req, err)
+			return
+		}
+
+		forward_TagService_RenameTag_0(annotatedContext, mux, outboundMarshaler, w, req, resp, mux.GetForwardResponseOptions()...)
+
+	})
+
 	mux.Handle("DELETE", pattern_TagService_DeleteTag_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
 		ctx, cancel := context.WithCancel(req.Context())
 		defer cancel()
@@ -418,6 +501,8 @@ var (
 
 	pattern_TagService_ListTags_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2}, []string{"api", "v2", "tags"}, ""))
 
+	pattern_TagService_RenameTag_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2}, []string{"api", "v2", "tags"}, "rename"))
+
 	pattern_TagService_DeleteTag_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2}, []string{"api", "v2", "tags"}, ""))
 
 	pattern_TagService_GetTagSuggestions_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2, 2, 3}, []string{"api", "v2", "tags", "suggestion"}, ""))
@@ -428,6 +513,8 @@ var (
 
 	forward_TagService_ListTags_0 = runtime.ForwardResponseMessage
 
+	forward_TagService_RenameTag_0 = runtime.ForwardResponseMessage
+
 	forward_TagService_DeleteTag_0 = runtime.ForwardResponseMessage
 
 	forward_TagService_GetTagSuggestions_0 = runtime.ForwardResponseMessage

proto/gen/api/v2/tag_service_grpc.pb.go

@@ -21,6 +21,7 @@ const _ = grpc.SupportPackageIsVersion7
 const (
 	TagService_UpsertTag_FullMethodName         = "/memos.api.v2.TagService/UpsertTag"
 	TagService_ListTags_FullMethodName          = "/memos.api.v2.TagService/ListTags"
+	TagService_RenameTag_FullMethodName         = "/memos.api.v2.TagService/RenameTag"
 	TagService_DeleteTag_FullMethodName         = "/memos.api.v2.TagService/DeleteTag"
 	TagService_GetTagSuggestions_FullMethodName = "/memos.api.v2.TagService/GetTagSuggestions"
 )
@@ -31,6 +32,7 @@ const (
 type TagServiceClient interface {
 	UpsertTag(ctx context.Context, in *UpsertTagRequest, opts ...grpc.CallOption) (*UpsertTagResponse, error)
 	ListTags(ctx context.Context, in *ListTagsRequest, opts ...grpc.CallOption) (*ListTagsResponse, error)
+	RenameTag(ctx context.Context, in *RenameTagRequest, opts ...grpc.CallOption) (*RenameTagResponse, error)
 	DeleteTag(ctx context.Context, in *DeleteTagRequest, opts ...grpc.CallOption) (*DeleteTagResponse, error)
 	GetTagSuggestions(ctx context.Context, in *GetTagSuggestionsRequest, opts ...grpc.CallOption) (*GetTagSuggestionsResponse, error)
 }
@@ -61,6 +63,15 @@ func (c *tagServiceClient) ListTags(ctx context.Context, in *ListTagsRequest, op
 	return out, nil
 }
 
+func (c *tagServiceClient) RenameTag(ctx context.Context, in *RenameTagRequest, opts ...grpc.CallOption) (*RenameTagResponse, error) {
+	out := new(RenameTagResponse)
+	err := c.cc.Invoke(ctx, TagService_RenameTag_FullMethodName, in, out, opts...)
+	if err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
 func (c *tagServiceClient) DeleteTag(ctx context.Context, in *DeleteTagRequest, opts ...grpc.CallOption) (*DeleteTagResponse, error) {
 	out := new(DeleteTagResponse)
 	err := c.cc.Invoke(ctx, TagService_DeleteTag_FullMethodName, in, out, opts...)
@@ -85,6 +96,7 @@ func (c *tagServiceClient) GetTagSuggestions(ctx context.Context, in *GetTagSugg
 type TagServiceServer interface {
 	UpsertTag(context.Context, *UpsertTagRequest) (*UpsertTagResponse, error)
 	ListTags(context.Context, *ListTagsRequest) (*ListTagsResponse, error)
+	RenameTag(context.Context, *RenameTagRequest) (*RenameTagResponse, error)
 	DeleteTag(context.Context, *DeleteTagRequest) (*DeleteTagResponse, error)
 	GetTagSuggestions(context.Context, *GetTagSuggestionsRequest) (*GetTagSuggestionsResponse, error)
 	mustEmbedUnimplementedTagServiceServer()
@@ -100,6 +112,9 @@ func (UnimplementedTagServiceServer) UpsertTag(context.Context, *UpsertTagReques
 func (UnimplementedTagServiceServer) ListTags(context.Context, *ListTagsRequest) (*ListTagsResponse, error) {
 	return nil, status.Errorf(codes.Unimplemented, "method ListTags not implemented")
 }
+func (UnimplementedTagServiceServer) RenameTag(context.Context, *RenameTagRequest) (*RenameTagResponse, error) {
+	return nil, status.Errorf(codes.Unimplemented, "method RenameTag not implemented")
+}
 func (UnimplementedTagServiceServer) DeleteTag(context.Context, *DeleteTagRequest) (*DeleteTagResponse, error) {
 	return nil, status.Errorf(codes.Unimplemented, "method DeleteTag not implemented")
 }
@@ -155,6 +170,24 @@ func _TagService_ListTags_Handler(srv interface{}, ctx context.Context, dec func
 	return interceptor(ctx, in, info, handler)
 }
 
+func _TagService_RenameTag_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
+	in := new(RenameTagRequest)
+	if err := dec(in); err != nil {
+		return nil, err
+	}
+	if interceptor == nil {
+		return srv.(TagServiceServer).RenameTag(ctx, in)
+	}
+	info := &grpc.UnaryServerInfo{
+		Server:     srv,
+		FullMethod: TagService_RenameTag_FullMethodName,
+	}
+	handler := func(ctx context.Context, req interface{}) (interface{}, error) {
+		return srv.(TagServiceServer).RenameTag(ctx, req.(*RenameTagRequest))
+	}
+	return interceptor(ctx, in, info, handler)
+}
+
 func _TagService_DeleteTag_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
 	in := new(DeleteTagRequest)
 	if err := dec(in); err != nil {
@@ -206,6 +239,10 @@ var TagService_ServiceDesc = grpc.ServiceDesc{
 			MethodName: "ListTags",
 			Handler:    _TagService_ListTags_Handler,
 		},
+		{
+			MethodName: "RenameTag",
+			Handler:    _TagService_RenameTag_Handler,
+		},
 		{
 			MethodName: "DeleteTag",
 			Handler:    _TagService_DeleteTag_Handler,

web/src/components/RenameTagDialog.tsx

+import { Button, IconButton, Input, List, ListItem } from "@mui/joy";
+import React, { useState } from "react";
+import { toast } from "react-hot-toast";
+import { tagServiceClient } from "@/grpcweb";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import useLoading from "@/hooks/useLoading";
+import { useTranslate } from "@/utils/i18n";
+import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
+
+interface Props extends DialogProps {
+  tag: string;
+}
+
+const RenameTagDialog: React.FC<Props> = (props: Props) => {
+  const { tag, destroy } = props;
+  const t = useTranslate();
+  const currentUser = useCurrentUser();
+  const [newName, setNewName] = useState(tag);
+  const requestState = useLoading(false);
+
+  const handleTagNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewName(e.target.value.trim());
+  };
+
+  const handleConfirm = async () => {
+    if (!newName) {
+      toast.error("Please fill all required fields");
+      return;
+    }
+    if (newName === tag) {
+      toast.error("New name cannot be the same as the old name");
+      return;
+    }
+
+    try {
+      await tagServiceClient.renameTag({
+        user: currentUser.name,
+        oldName: tag,
+        newName: newName,
+      });
+      toast.success("Rename tag successfully");
+      setTimeout(() => {
+        window.location.reload();
+      }, 300);
+    } catch (error: any) {
+      console.error(error);
+      toast.error(error.details);
+    }
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">{"Rename tag"}</p>
+        <IconButton size="sm" onClick={() => destroy()}>
+          <Icon.X className="w-5 h-auto" />
+        </IconButton>
+      </div>
+      <div className="dialog-content-container max-w-xs">
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <div className="relative w-full mb-2 flex flex-row justify-start items-center space-x-2">
+            <span className="w-20 text-sm whitespace-nowrap shrink-0 text-right">Old Name</span>
+            <Input className="w-full" readOnly disabled type="text" placeholder="A new tag name" size="md" value={tag} />
+          </div>
+          <div className="relative w-full mb-2 flex flex-row justify-start items-center space-x-2">
+            <span className="w-20 text-sm whitespace-nowrap shrink-0 text-right">New Name</span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="A new tag name"
+              size="md"
+              value={newName}
+              onChange={handleTagNameInputChange}
+            />
+          </div>
+          <List className="!leading-5" size="sm" marker="disc">
+            <ListItem>All memes with this tag will be updated.</ListItem>
+            <ListItem>If the amount of data is large, it will take longer and the server load will become higher.</ListItem>
+            <ListItem>The page will be automatically refreshed when the task is completed</ListItem>
+          </List>
+        </div>
+        <div className="w-full flex flex-row justify-end items-center mt-2 space-x-2">
+          <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={destroy}>
+            {t("common.cancel")}
+          </Button>
+          <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleConfirm}>
+            {t("common.confirm")}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function showRenameTagDialog(props: Pick<Props, "tag">) {
+  generateDialog(
+    {
+      className: "rename-tag-dialog",
+      dialogName: "rename-tag-dialog",
+    },
+    RenameTagDialog,
+    props
+  );
+}
+
+export default showRenameTagDialog;

web/src/components/TagList.tsx

+import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
 import { useEffect, useState } from "react";
 import useToggle from "react-use/lib/useToggle";
 import { useFilterStore, useTagStore } from "@/store/module";
@@ -5,6 +6,7 @@ import { useMemoList } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import showCreateTagDialog from "./CreateTagDialog";
 import Icon from "./Icon";
+import showRenameTagDialog from "./RenameTagDialog";
 
 interface Tag {
   key: string;
@@ -116,17 +118,25 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
 
   return (
     <>
-      <div
-        className="relative group flex flex-row justify-between items-center w-full h-8 py-0 mt-px first:mt-1 rounded-lg text-base sm:text-sm cursor-pointer select-none shrink-0 hover:opacity-80"
-        onClick={handleTagClick}
-      >
+      <div className="relative group flex flex-row justify-between items-center w-full h-8 py-0 mt-px first:mt-1 rounded-lg text-base sm:text-sm cursor-pointer select-none shrink-0 hover:opacity-80">
         <div
           className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-gray-600 dark:text-gray-400 ${
             isActive && "!text-blue-600"
           }`}
         >
-          <Icon.Hash className="w-4 h-auto shrink-0 opacity-60 mr-1" />
-          <span className="truncate">{tag.key}</span>
+          <Dropdown>
+            <MenuButton slots={{ root: "div" }}>
+              <div className="shrink-0">
+                <Icon.Hash className="w-4 h-auto shrink-0 opacity-60 mr-1" />
+              </div>
+            </MenuButton>
+            <Menu size="sm" placement="bottom-start">
+              <MenuItem onClick={() => showRenameTagDialog({ tag: tag.text })}>Rename</MenuItem>
+            </Menu>
+          </Dropdown>
+          <span className="truncate" onClick={handleTagClick}>
+            {tag.key}
+          </span>
         </div>
         <div className="flex flex-row justify-end items-center">
           {hasSubTags ? (