feat(tasks): assign tasks in shared lists, unified people search, list avatars

- Tasks in shared task lists can be assigned to one or more people with access
  (task_assignees); assignments are pruned whenever access is lost
- UserAutocomplete: type-to-search everywhere, nothing before typing, max 3 results,
  first match preselected
- Task list and list tabs: avatar stack of members and round monochrome counter
- Shared list items remember who added them (list_items.created_by)
- Doku/ui-patterns.md documents the shared UI patterns

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/UserAutocomplete.tsx

@@ -3,6 +3,10 @@ import { Search, X, Check } from 'lucide-react';
 import { User } from '../lib/types';
 import { UserAvatar } from '../components/UserAvatar';
 
+// Shared type-to-search for picking people (sharing, groups, task assignees). Nothing is listed until
+// something is typed, then at most MAX_RESULTS matches appear below the field. See Doku/ui-patterns.md.
+const MAX_RESULTS = 3;
+
 interface UserAutocompleteProps {
   users: User[];
   selectedUser: User | null;
@@ -42,10 +46,8 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
   // Filter users based on query and exclusions
   const filteredUsers = React.useMemo(() => {
     const q = query.trim().toLowerCase();
+    if (!q) return [];
     const available = users.filter((u) => !excludeUserIds.includes(u.id));
-    if (!q) {
-      return available.slice(0, 15);
-    }
     return available
       .filter((u) => {
         const nameMatch = (u.displayName || '').toLowerCase().includes(q);
@@ -53,8 +55,9 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
         const userMatch = (u.username || '').toLowerCase().includes(q);
         return nameMatch || emailMatch || userMatch;
       })
-      .slice(0, 15);
+      .slice(0, MAX_RESULTS);
   }, [users, query, excludeUserIds]);
+  const showResults = isOpen && query.trim() !== '';
 
   const handleSelect = (user: User) => {
     onSelectUser(user);
@@ -70,8 +73,8 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!isOpen) {
-      if (e.key === 'ArrowDown' || e.key === 'Enter') {
+    if (!showResults) {
+      if (e.key === 'ArrowDown') {
         setIsOpen(true);
       }
       return;
@@ -139,7 +142,8 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
             onChange={(e) => {
               setQuery(e.target.value);
               setIsOpen(true);
-              setHighlightedIndex(-1);
+              // First match is preselected so Enter picks it right away
+              setHighlightedIndex(0);
             }}
             onFocus={() => setIsOpen(true)}
             onKeyDown={handleKeyDown}
@@ -147,8 +151,8 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
             className="w-full h-8 pl-8 pr-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs placeholder:text-muted transition-colors disabled:opacity-50"
           />
 
-          {isOpen && (
-            <div className="absolute top-full left-0 right-0 z-50 mt-1 max-h-56 overflow-y-auto bg-panel border border-border rounded-card shadow-panel py-1 space-y-0.5">
+          {showResults && (
+            <div className="absolute top-full left-0 right-0 z-50 mt-1 bg-panel border border-border rounded-card shadow-panel py-1 space-y-0.5">
               {filteredUsers.length === 0 ? (
                 <div className="p-3 text-xs text-muted text-center">
                   Kein passender Benutzer gefunden