fix: add cancel button for editing comments (#580)

* fix: add cancel button for editing comments

* cleanup

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>

apps/client/src/features/comment/components/comment-actions.tsx

@@ -4,13 +4,26 @@ import { useTranslation } from "react-i18next";
 type CommentActionsProps = {
   onSave: () => void;
   isLoading?: boolean;
+  onCancel?: () => void;
+  isCommentEditor?: boolean;
 };
 
-function CommentActions({ onSave, isLoading }: CommentActionsProps) {
+function CommentActions({
+  onSave,
+  isLoading,
+  onCancel,
+  isCommentEditor,
+}: CommentActionsProps) {
   const { t } = useTranslation();
   
   return (
-    <Group justify="flex-end" pt={2} wrap="nowrap">
+    <Group justify="flex-end" pt="sm" wrap="nowrap">
+      {isCommentEditor && (
+        <Button size="compact-sm" variant="default" onClick={onCancel}>
+          {t("Cancel")}
+        </Button>
+      )}
+
       <Button size="compact-sm" loading={isLoading} onClick={onSave}>
         {t("Save")}
       </Button>

apps/client/src/features/comment/components/comment-list-item.tsx

@@ -58,6 +58,9 @@ function CommentListItem({ comment }: CommentListItemProps) {
   function handleEditToggle() {
     setIsEditing(true);
   }
+  function cancelEdit() {
+    setIsEditing(false);
+  }
 
   return (
     <Box ref={ref} pb="xs">
@@ -115,6 +118,8 @@ function CommentListItem({ comment }: CommentListItemProps) {
             <CommentActions
               onSave={handleUpdateComment}
               isLoading={isLoading}
+              onCancel={cancelEdit}
+              isCommentEditor={true}
             />
           </>
         )}