refactor(ui): unify low-level controls and expand design system

src/components/ui/InlineAddItem.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { InlineFormActions } from './InlineFormActions';
+
+interface InlineAddItemProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  isPending: boolean;
+  placeholder?: string;
+  rows?: number;
+  extra?: ReactNode;
+  submitColorClass?: string;
+  className?: string;
+}
+
+export function InlineAddItem({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  isPending,
+  placeholder,
+  rows = 2,
+  extra,
+  submitColorClass,
+  className = '',
+}: InlineAddItemProps) {
+  return (
+    <div className={`rounded-lg border border-border bg-card p-2 shadow-sm ${className}`}>
+      <textarea
+        autoFocus
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            onSubmit();
+          } else if (e.key === 'Escape') {
+            onCancel();
+          }
+        }}
+        placeholder={placeholder}
+        className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
+        rows={rows}
+        disabled={isPending}
+      />
+      {extra}
+      <InlineFormActions
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        isPending={isPending}
+        disabled={!value.trim()}
+        submitColorClass={submitColorClass}
+        className="mt-1"
+      />
+    </div>
+  );
+}