task bucket fixes and task creation clarity

src/components/QuickEntryForm.tsx

@@ -3,6 +3,7 @@ import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, ups
 import { Search, Command, Clock, ArrowUpCircle, Copy, ChevronDown, Gauge, RotateCcw } from "lucide-solid";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 import { TextField, TextFieldInput } from "@/components/ui/textfield";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { TagPicker } from "@/components/TagPicker";
@@ -29,6 +30,7 @@ const [tags, setTags] = createSignal<string[]>([]);
 const [description, setDescription] = createSignal("");
 const [size, setSize] = createSignal<string>("3");
 const [dateString, setDateString] = createSignal<string>("");
+const [showValidation, setShowValidation] = createSignal(false);
 
 let lastParsedTags: string[] = [];
 
@@ -40,6 +42,7 @@ const resetQuickEntryState = () => {
     setDescription("");
     setSize("3");
     setDateString("");
+    setShowValidation(false);
     lastParsedTags = [];
 };
 
@@ -140,7 +143,12 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
 
     const parseAndAdd = async () => {
         let text = input();
-        if (!text || !priority() || !urgency()) return;
+        if (!text || !priority() || !urgency()) {
+            setShowValidation(true);
+            toast.error("Please fill in all required fields (Title, Priority, Urgency)");
+            if (!text) inputRef?.focus();
+            return;
+        }
 
         let finalPriority = parseInt(priority());
         let finalUrgency = parseInt(urgency());
@@ -268,9 +276,13 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
 
     return (
         <div class="flex flex-col h-full bg-card">
-            <div class="flex items-center px-4 py-3 border-b border-border sticky top-0 bg-card z-10">
-                <Search class="text-muted-foreground mr-3" size={20} />
-                <TextField class="flex-1">
+            <div class={cn("flex flex-col border-b border-border sticky top-0 bg-card z-10 transition-colors", showValidation() && !input() && "bg-destructive/5")}>
+                <div class="flex items-center px-4 py-3">
+                    <Search class={cn("text-muted-foreground mr-3 transition-colors", showValidation() && !input() && "text-destructive")} size={20} />
+                    <TextField
+                        class="flex-1"
+                        validationState={showValidation() && !input() ? "invalid" : "valid"}
+                    >
                         <TextFieldInput
                             id="quick-entry-input"
                             name="task-title"
@@ -279,10 +291,19 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                             onInput={(e) => setInput(e.currentTarget.value)}
                             onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
                             placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
-                        class="border-none shadow-none focus-visible:ring-0 text-lg"
+                            class="border-none shadow-none focus-visible:ring-0 text-lg p-0"
                         />
                     </TextField>
                 </div>
+                <Show when={showValidation() && !input()}>
+                    <div class="px-4 pb-2 -mt-1 flex items-center gap-1.5 animate-in fade-in slide-in-from-top-1 duration-200">
+                        <div class="w-1.5 h-1.5 rounded-full bg-destructive" />
+                        <span class="text-[0.625rem] font-bold uppercase tracking-widest text-destructive/80">
+                            Title is required to create a task
+                        </span>
+                    </div>
+                </Show>
+            </div>
 
             <div class="flex-1 overflow-y-auto overscroll-contain">
                 <div class="flex flex-col md:flex-row flex-wrap items-stretch md:items-center p-4 gap-4 border-b border-border bg-muted/10">
@@ -305,11 +326,17 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                                     {props.item.rawValue.label}
                                 </SelectItem>
                             )}
+                            validationState={showValidation() && !priority() ? "invalid" : "valid"}
+                        >
+                            <SelectTrigger
+                                class={cn(
+                                    "w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
+                                    showValidation() && !priority() && "border-destructive/50 bg-destructive/5"
+                                )}
                             >
-                            <SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
                                 <div class="flex items-center gap-2 truncate">
-                                    <ArrowUpCircle size={14} class="text-primary shrink-0" />
-                                    <span class="text-sm font-medium truncate">
+                                    <ArrowUpCircle size={14} class={cn("text-primary shrink-0", showValidation() && !priority() && "text-destructive")} />
+                                    <span class={cn("text-sm font-medium truncate", showValidation() && !priority() && "text-destructive")}>
                                         {PRIORITY_OPTIONS.find(o => o.value === priority())?.label || (priority() === "" ? "Pick Priority" : priority())}
                                     </span>
                                 </div>
@@ -364,11 +391,17 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                                     {props.item.rawValue.label}
                                 </SelectItem>
                             )}
+                            validationState={showValidation() && !urgency() ? "invalid" : "valid"}
+                        >
+                            <SelectTrigger
+                                class={cn(
+                                    "w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
+                                    showValidation() && !urgency() && "border-destructive/50 bg-destructive/5"
+                                )}
                             >
-                            <SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
                                 <div class="flex items-center gap-2 truncate">
-                                    <Clock size={14} class="text-primary shrink-0" />
-                                    <span class="text-sm font-medium truncate">
+                                    <Clock size={14} class={cn("text-primary shrink-0", showValidation() && !urgency() && "text-destructive")} />
+                                    <span class={cn("text-sm font-medium truncate", showValidation() && !urgency() && "text-destructive")}>
                                         {URGENCY_OPTIONS.find(o => o.value === urgency())?.label || (urgency() === "" ? "Pick Urgency" : urgency())}
                                     </span>
                                 </div>
@@ -505,7 +538,7 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                         </Popover>
                     </Show>
 
-                    <Button size="sm" onClick={parseAndAdd} disabled={!input() || !priority() || !urgency()}>
+                    <Button size="sm" onClick={parseAndAdd}>
                         Create Task
                     </Button>
                 </div>

src/store/index.ts

@@ -346,8 +346,7 @@ export const matchesFilter = (task: Task) => {
 
                 // EXCLUDE Buckets from the main "Mine" view
                 // The user wants to see "Direct Shares" (User Tags), not "Bucket Subscriptions" here.
-                const isBucket = store.buckets.some(b => b.name.toLowerCase() === tagName.toLowerCase());
-                if (isBucket) return false;
+                if (isBucketTag(tagName)) return false;
 
                 return task.tags?.some(t => t.toLowerCase() === tagName.toLowerCase());
             }
@@ -755,6 +754,7 @@ const shouldTaskBeVisible = (task: any, currentUserId: string): boolean => {
         // We ignore the rule.ownerId check (which would match the task.user)
         // and instead match purely on the tag.
         if (rule.ownerId === rule.targetUserId && rule.type === 'tag') {
+            if (isBucketTag(rule.tagName || "")) return false;
             const tags: string[] = task.tags || [];
             return tags.some(t => t.toLowerCase() === (rule.tagName || "").toLowerCase());
         }
@@ -787,6 +787,26 @@ const isTaskInSubscribedBucket = (task: any): boolean => {
     });
 };
 
+// Helper: detect bucket tags robustly (case-insensitive, with or without '@')
+const isBucketTag = (tagName: string): boolean => {
+    const raw = (tagName || "").trim().toLowerCase();
+    if (!raw) return false;
+    const normalized = raw.startsWith("@") ? raw.slice(1) : raw;
+
+    const bucketNameMatch = store.buckets.some(b => {
+        const bName = (b.name || "").trim().toLowerCase();
+        return normalized === bName || raw === `@${bName}`;
+    });
+    if (bucketNameMatch) return true;
+
+    const bucketTagDefMatch = store.tagDefinitions.some(d => {
+        if (!d.isBucket) return false;
+        const dName = (d.name || "").trim().toLowerCase();
+        return raw === dName || normalized === dName || raw === `@${dName}`;
+    });
+    return bucketTagDefMatch;
+};
+
 export const subscribeToRealtime = async () => {
     // Unsubscribe first to avoid duplicates
     await pb.collection(TASGRID_COLLECTION).unsubscribe('*');