feat(contacts): add no-category filter, drag-drop to category, and category combo box

- Add 'No Category' sidebar item to filter uncategorized contacts
- Categories section now always visible (not just when keywords exist)
- Add drag-and-drop support on category items in sidebar to assign keywords
- Fix effectAllowed mismatch (move -> copyMove) for category drop targets
- Replace plain text categories input with combo box in contact edit form
  - Shows existing categories as clickable suggestions
  - Displays assigned categories as removable badges
  - Supports adding new categories inline
- Add translations for all 8 locales

components/contacts/contact-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
 import { X, Plus, ChevronDown, ChevronRight, User, Building, MapPin, Globe, Cake, Heart, Tag, StickyNote, Mail, Phone, Calendar, UserCircle, Book } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -48,6 +48,7 @@ interface AddressEntry {
 interface ContactFormProps {
   contact?: ContactCard | null;
   addressBooks?: AddressBook[];
+  allKeywords?: string[];
   onSave: (data: Partial<ContactCard>) => Promise<void>;
   onCancel: () => void;
 }
@@ -123,7 +124,7 @@ function Select({ value, onChange, children, className }: {
   );
 }
 
-export function ContactForm({ contact, addressBooks, onSave, onCancel }: ContactFormProps) {
+export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCancel }: ContactFormProps) {
   const t = useTranslations("contacts.form");
   const isEditing = !!contact;
 
@@ -819,14 +820,14 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
 
           {/* Categories */}
           <FormSection icon={Tag} title={t("categories")} collapsible defaultOpen category="digital">
-            <div>
-              <Input
-                value={keywordsStr}
-                onChange={(e) => setKeywordsStr(e.target.value)}
-                placeholder={t("categories_placeholder")}
-              />
-              <p className="text-xs text-muted-foreground mt-1.5">{t("categories_hint")}</p>
-            </div>
+            <CategoryComboBox
+              keywordsStr={keywordsStr}
+              onChange={setKeywordsStr}
+              allKeywords={allKeywords || []}
+              placeholder={t("categories_placeholder")}
+              hint={t("categories_hint")}
+              addLabel={t("category_add")}
+            />
           </FormSection>
 
           {/* Gender */}
@@ -895,3 +896,142 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
     </form>
   );
 }
+
+function CategoryComboBox({
+  keywordsStr,
+  onChange,
+  allKeywords,
+  placeholder,
+  hint,
+  addLabel,
+}: {
+  keywordsStr: string;
+  onChange: (value: string) => void;
+  allKeywords: string[];
+  placeholder: string;
+  hint: string;
+  addLabel: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Parse current keywords from comma-separated string
+  const currentKeywords = useMemo(() => {
+    return keywordsStr.split(",").map(k => k.trim()).filter(Boolean);
+  }, [keywordsStr]);
+
+  // Suggestions: existing keywords not already selected
+  const suggestions = useMemo(() => {
+    const lower = inputValue.toLowerCase();
+    return allKeywords.filter(kw =>
+      !currentKeywords.includes(kw) &&
+      (!lower || kw.toLowerCase().includes(lower))
+    );
+  }, [allKeywords, currentKeywords, inputValue]);
+
+  // Can add a new keyword if typed text is non-empty and not already in the list
+  const canAddNew = inputValue.trim() &&
+    !currentKeywords.includes(inputValue.trim()) &&
+    !allKeywords.some(kw => kw.toLowerCase() === inputValue.trim().toLowerCase());
+
+  const addKeyword = useCallback((keyword: string) => {
+    const trimmed = keyword.trim();
+    if (!trimmed || currentKeywords.includes(trimmed)) return;
+    const next = [...currentKeywords, trimmed].join(", ");
+    onChange(next);
+    setInputValue("");
+  }, [currentKeywords, onChange]);
+
+  const removeKeyword = useCallback((keyword: string) => {
+    const next = currentKeywords.filter(k => k !== keyword).join(", ");
+    onChange(next);
+  }, [currentKeywords, onChange]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (inputValue.trim()) {
+        addKeyword(inputValue);
+      }
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      {/* Keyword badges */}
+      {currentKeywords.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mb-2">
+          {currentKeywords.map(kw => (
+            <span
+              key={kw}
+              className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-primary/10 text-primary border border-primary/20"
+            >
+              {kw}
+              <button
+                type="button"
+                onClick={() => removeKeyword(kw)}
+                className="hover:text-destructive transition-colors"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Input with dropdown */}
+      <Input
+        ref={inputRef}
+        value={inputValue}
+        onChange={(e) => { setInputValue(e.target.value); setIsOpen(true); }}
+        onFocus={() => setIsOpen(true)}
+        onKeyDown={handleKeyDown}
+        placeholder={currentKeywords.length === 0 ? placeholder : ""}
+      />
+      <p className="text-xs text-muted-foreground mt-1.5">{hint}</p>
+
+      {/* Dropdown */}
+      {isOpen && (suggestions.length > 0 || canAddNew) && (
+        <div className="absolute left-0 right-0 top-[calc(100%-1.5rem)] mt-1 rounded-md border border-border bg-popover text-popover-foreground shadow-md z-50 max-h-48 overflow-y-auto py-1">
+          {suggestions.map(kw => (
+            <button
+              key={kw}
+              type="button"
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
+              onClick={() => { addKeyword(kw); inputRef.current?.focus(); }}
+            >
+              <Tag className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+              {kw}
+            </button>
+          ))}
+          {canAddNew && (
+            <button
+              type="button"
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left text-primary"
+              onClick={() => { addKeyword(inputValue); inputRef.current?.focus(); }}
+            >
+              <Plus className="w-3.5 h-3.5 flex-shrink-0" />
+              {addLabel}: &quot;{inputValue.trim()}&quot;
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

components/contacts/contact-list-item.tsx

@@ -32,7 +32,7 @@ export function ContactListItem({ contact, isSelected, isChecked, hasSelection,
       ? Array.from(selectedContactIds)
       : [contact.id];
 
-    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.effectAllowed = "copyMove";
     e.dataTransfer.setData("application/x-contact-ids", JSON.stringify(ids));
     e.dataTransfer.setData("text/plain", name || email || contact.id);
 

components/contacts/contacts-sidebar.tsx

@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
 import type { ContactCard, AddressBook } from "@/lib/jmap/types";
 import { getContactDisplayName } from "@/stores/contact-store";
 
-export type ContactCategory = "all" | { groupId: string } | { addressBookId: string } | { keyword: string };
+export type ContactCategory = "all" | { groupId: string } | { addressBookId: string } | { keyword: string } | "uncategorized";
 
 interface ContactsSidebarProps {
   groups: ContactCard[];
@@ -24,6 +24,7 @@ interface ContactsSidebarProps {
   onEditGroup?: (groupId: string) => void;
   onDeleteGroup?: (groupId: string) => void;
   onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
+  onDropContactsToCategory?: (contactIds: string[], keyword: string) => void;
   className?: string;
 }
 
@@ -56,6 +57,7 @@ export function ContactsSidebar({
   onEditGroup,
   onDeleteGroup,
   onDropContacts,
+  onDropContactsToCategory,
   className,
 }: ContactsSidebarProps) {
   const t = useTranslations("contacts");
@@ -146,6 +148,11 @@ export function ContactsSidebar({
     return Object.entries(counts).sort(([a], [b]) => a.localeCompare(b));
   }, [individuals]);
 
+  // Count of contacts without any keywords
+  const uncategorizedCount = useMemo(() => {
+    return individuals.filter(c => !c.keywords || Object.keys(c.keywords).filter(k => c.keywords![k]).length === 0).length;
+  }, [individuals]);
+
   // Resolve actual group member counts against living contacts
   const memberCountByGroup = useMemo(() => {
     const counts: Record<string, number> = {};
@@ -311,46 +318,56 @@ export function ContactsSidebar({
         )}
 
         {/* Categories section (from contact keywords) */}
-        {allKeywords.length > 0 && (
-          <div className="mt-2">
-            <button
-              onClick={() => toggleSection("categories")}
-              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
-            >
-              {collapsed.categories ? (
-                <ChevronRight className="w-3 h-3 text-muted-foreground" />
-              ) : (
-                <ChevronDown className="w-3 h-3 text-muted-foreground" />
-              )}
-              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t("detail.categories")}
-              </span>
-            </button>
+        <div className="mt-2">
+          <button
+            onClick={() => toggleSection("categories")}
+            className="flex items-center gap-1 px-3 py-1 w-full text-left group"
+          >
+            {collapsed.categories ? (
+              <ChevronRight className="w-3 h-3 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-3 h-3 text-muted-foreground" />
+            )}
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              {t("detail.categories")}
+            </span>
+          </button>
 
-            {!collapsed.categories && allKeywords.map(([keyword, count]) => {
-              const isActive = typeof activeCategory === "object" && "keyword" in activeCategory && activeCategory.keyword === keyword;
-              return (
-                <button
-                  key={keyword}
-                  onClick={() => onSelectCategory({ keyword })}
-                  className={cn(
-                    "w-full flex items-center gap-2 pl-5 pr-3 text-sm transition-colors",
-                    isActive
-                      ? "bg-accent text-accent-foreground font-medium"
-                      : "text-foreground/80 hover:bg-muted"
-                  )}
-                  style={{ paddingBlock: 'var(--density-sidebar-py, 4px)', minHeight: '32px' }}
-                >
-                  <Tag className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span className="truncate">{keyword}</span>
-                  <span className="ml-auto text-xs text-muted-foreground tabular-nums">
-                    {count}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        )}
+          {!collapsed.categories && (
+            <>
+              {/* No Category item */}
+              <button
+                onClick={() => onSelectCategory("uncategorized")}
+                className={cn(
+                  "w-full flex items-center gap-2 pl-5 pr-3 text-sm transition-colors",
+                  activeCategory === "uncategorized"
+                    ? "bg-accent text-accent-foreground font-medium"
+                    : "text-foreground/80 hover:bg-muted"
+                )}
+                style={{ paddingBlock: 'var(--density-sidebar-py, 4px)', minHeight: '32px' }}
+              >
+                <Tag className="w-3.5 h-3.5 flex-shrink-0 opacity-50" />
+                <span className="truncate italic">{t("no_category")}</span>
+                <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+                  {uncategorizedCount}
+                </span>
+              </button>
+              {allKeywords.map(([keyword, count]) => {
+                const isActive = typeof activeCategory === "object" && "keyword" in activeCategory && activeCategory.keyword === keyword;
+                return (
+                  <CategoryItem
+                    key={keyword}
+                    keyword={keyword}
+                    count={count}
+                    isActive={isActive}
+                    onSelect={() => onSelectCategory({ keyword })}
+                    onDropContacts={onDropContactsToCategory}
+                  />
+                );
+              })}
+            </>
+          )}
+        </div>
 
         {/* Shared accounts with address books */}
         {sharedBookGroups.map((group) => (
@@ -415,6 +432,71 @@ export function ContactsSidebar({
   );
 }
 
+function CategoryItem({
+  keyword,
+  count,
+  isActive,
+  onSelect,
+  onDropContacts,
+}: {
+  keyword: string;
+  count: number;
+  isActive: boolean;
+  onSelect: () => void;
+  onDropContacts?: (contactIds: string[], keyword: string) => void;
+}) {
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLButtonElement>) => {
+    if (!e.dataTransfer.types.includes("application/x-contact-ids")) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const data = e.dataTransfer.getData("application/x-contact-ids");
+    if (!data || !onDropContacts) return;
+    try {
+      const contactIds = JSON.parse(data) as string[];
+      if (contactIds.length > 0) {
+        onDropContacts(contactIds, keyword);
+      }
+    } catch {
+      // ignore invalid data
+    }
+  }, [keyword, onDropContacts]);
+
+  return (
+    <button
+      onClick={onSelect}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={cn(
+        "w-full flex items-center gap-2 pl-5 pr-3 text-sm transition-colors",
+        isActive
+          ? "bg-accent text-accent-foreground font-medium"
+          : "text-foreground/80 hover:bg-muted",
+        isDragOver && "bg-primary/20 ring-2 ring-primary/50"
+      )}
+      style={{ paddingBlock: 'var(--density-sidebar-py, 4px)', minHeight: '32px' }}
+    >
+      <Tag className="w-3.5 h-3.5 flex-shrink-0" />
+      <span className="truncate">{keyword}</span>
+      <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+        {count}
+      </span>
+    </button>
+  );
+}
+
 function AddressBookItem({
   book,
   isActive,