From 2436f780232e6daf196588a312b97184f9a9e8f5 Mon Sep 17 00:00:00 2001
From: le king fu <lekingfu@protonmail.com>
Date: Sun, 22 Feb 2026 07:29:29 -0500
Subject: [PATCH] feat: allow deleting keywords from the All Keywords view

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                   |  3 +++
 src/components/categories/AllKeywordsPanel.tsx | 16 +++++++++++++++-
 src/pages/CategoriesPage.tsx                   |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 038bdaf..ef9f011 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## [Unreleased]
 
+### Added
+- Delete keywords from the "All Keywords" view
+
 ## [0.3.8]
 
 ### Added
diff --git a/src/components/categories/AllKeywordsPanel.tsx b/src/components/categories/AllKeywordsPanel.tsx
index b08442d..945ed9c 100644
--- a/src/components/categories/AllKeywordsPanel.tsx
+++ b/src/components/categories/AllKeywordsPanel.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import {
   getAllKeywordsWithCategory,
   type KeywordWithCategory,
@@ -15,10 +15,12 @@ function normalize(str: string): string {
 
 interface AllKeywordsPanelProps {
   onSelectCategory: (id: number) => void;
+  onRemove: (id: number) => void;
 }
 
 export default function AllKeywordsPanel({
   onSelectCategory,
+  onRemove,
 }: AllKeywordsPanelProps) {
   const { t } = useTranslation();
   const [keywords, setKeywords] = useState<KeywordWithCategory[]>([]);
@@ -89,6 +91,7 @@ export default function AllKeywordsPanel({
               </th>
               <th className="pb-2 font-medium">{t("categories.priority")}</th>
               <th className="pb-2 font-medium">{t("transactions.category")}</th>
+              <th className="pb-2 w-8"></th>
             </tr>
           </thead>
           <tbody>
@@ -111,6 +114,17 @@ export default function AllKeywordsPanel({
                     {k.category_name}
                   </button>
                 </td>
+                <td className="py-2">
+                  <button
+                    onClick={() => {
+                      onRemove(k.id);
+                      setKeywords((prev) => prev.filter((kw) => kw.id !== k.id));
+                    }}
+                    className="p-1 text-[var(--muted-foreground)] hover:text-[var(--negative)] transition-colors"
+                  >
+                    <X size={14} />
+                  </button>
+                </td>
               </tr>
             ))}
           </tbody>
diff --git a/src/pages/CategoriesPage.tsx b/src/pages/CategoriesPage.tsx
index dd52d43..9d39703 100644
--- a/src/pages/CategoriesPage.tsx
+++ b/src/pages/CategoriesPage.tsx
@@ -87,6 +87,7 @@ export default function CategoriesPage() {
             setShowAllKeywords(false);
             selectCategory(id);
           }}
+          onRemove={removeKeyword}
         />
       ) : (
         <div className="flex gap-6" style={{ minHeight: "calc(100vh - 180px)" }}>