feat: categories with titles

src/renderer/components/SettingsView/SettingsView.css

@@ -343,67 +343,80 @@
 }
 
 /* Categories management styles */
-.categories-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.categories-table-wrapper {
   padding: 12px 16px;
+  overflow-x: auto;
 }
 
-.category-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 10px;
-  background-color: var(--vscode-badge-background);
-  color: var(--vscode-badge-foreground);
-  border-radius: 4px;
+.categories-table {
+  width: 100%;
+  border-collapse: collapse;
   font-size: 13px;
 }
 
-.category-name {
+.categories-table th,
+.categories-table td {
+  border-bottom: 1px solid var(--vscode-panel-border);
+  padding: 8px 10px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.categories-table th {
+  color: var(--vscode-descriptionForeground);
+  font-weight: 600;
+}
+
+.categories-table td input[type="text"] {
+  width: 100%;
+  min-width: 200px;
+  padding: 6px 10px;
+  font-size: 13px;
+  background-color: var(--vscode-input-background);
+  border: 1px solid var(--vscode-input-border);
+  color: var(--vscode-input-foreground);
+  border-radius: 4px;
+  outline: none;
+}
+
+.categories-table td input[type="text"]:focus {
+  border-color: var(--vscode-focusBorder);
+}
+
+.category-name-cell {
   font-weight: 500;
-  min-width: 140px;
+  white-space: nowrap;
 }
 
-.category-settings-controls {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
+.category-checkbox-cell {
+  text-align: center;
 }
 
-.category-setting-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-}
-
-.category-setting-toggle input[type="checkbox"] {
-  margin: 0;
+.category-actions-cell {
+  text-align: center;
 }
 
 .category-remove {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: transparent;
-  border: none;
-  color: var(--vscode-badge-foreground);
+  border: 1px solid var(--vscode-panel-border);
+  color: var(--vscode-foreground);
   cursor: pointer;
-  opacity: 0.6;
-  font-size: 10px;
-  border-radius: 50%;
-  transition: opacity 0.15s, background-color 0.15s;
+  opacity: 0.8;
+  font-size: 12px;
+  border-radius: 4px;
+  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
 }
 
 .category-remove:hover {
   opacity: 1;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--vscode-toolbar-hoverBackground);
+  border-color: var(--vscode-focusBorder);
 }
 
 .category-add-form {