From 39fb437ff9852c22b4577534e1e9ef4a4ec3340a Mon Sep 17 00:00:00 2001
From: Brandon Brown <afrobot@gmail.com>
Date: Sat, 2 May 2026 01:02:48 -0700
Subject: [PATCH] fix: domain picker overflow, triage skip-for-today,
 important/urgent at creation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Domain picker: anchor dropdown to left-0 instead of centered translate
- Triage banner: add "Skip for today" button using existing markTriageDone()
- TaskInput: add !/⚡ priority toggle pills; pass important/urgent on create

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/app/(app)/layout.tsx             |  5 ++
 frontend/src/components/domain-picker.tsx     |  2 +-
 frontend/src/components/task-input.tsx        | 52 ++++++++++++++++++-
 .../src/components/triage-reminder-banner.tsx | 32 ++++++++----
 frontend/src/lib/api.ts                       |  2 +
 5 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/(app)/layout.tsx b/frontend/src/app/(app)/layout.tsx
index ade95d3..e132ae3 100644
--- a/frontend/src/app/(app)/layout.tsx
+++ b/frontend/src/app/(app)/layout.tsx
@@ -381,6 +381,11 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
         <TriageReminderBanner
           onStart={() => { setShowTriageBanner(false); router.push("/triage"); }}
           onDismiss={() => setShowTriageBanner(false)}
+          onSkipForToday={() => {
+            markTriageDone();
+            setTriagePending(false);
+            setShowTriageBanner(false);
+          }}
           isFirstTime={user ? !user.has_triaged_before : false}
         />
       )}
diff --git a/frontend/src/components/domain-picker.tsx b/frontend/src/components/domain-picker.tsx
index da943aa..9113568 100644
--- a/frontend/src/components/domain-picker.tsx
+++ b/frontend/src/components/domain-picker.tsx
@@ -99,7 +99,7 @@ export function DomainPicker({ taskId, currentDomain, domains, onMutate }: Domai
         )}
       </button>
       {isOpen && (
-        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1 z-10 flex items-center gap-1 bg-bg-card border border-border rounded-lg px-1.5 py-1.5 shadow-lg">
+        <div className="absolute top-full left-0 mt-1 z-10 flex flex-wrap items-center gap-1 bg-bg-card border border-border rounded-lg px-1.5 py-1.5 shadow-lg max-w-[calc(100vw-2rem)]">
           {domains.map((d) => (
             <button
               key={d.id}
diff --git a/frontend/src/components/task-input.tsx b/frontend/src/components/task-input.tsx
index 81047dd..fda5fe7 100644
--- a/frontend/src/components/task-input.tsx
+++ b/frontend/src/components/task-input.tsx
@@ -21,6 +21,8 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
   const [phase, setPhase] = useState<Phase>("typing");
   // Index into [undefined, ...domains] where undefined = "None"
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [important, setImportant] = useState(false);
+  const [urgent, setUrgent] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const chipContainerRef = useRef<HTMLDivElement>(null);
 
@@ -37,6 +39,8 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
   const resetToTyping = useCallback(() => {
     setText("");
     setSelectedIndex(0);
+    setImportant(false);
+    setUrgent(false);
     setPhase("typing");
     setShouldRefocus(true);
   }, []);
@@ -45,13 +49,19 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
     setPhase("submitting");
     const domainId = domainIndex > 0 ? domains[domainIndex - 1]?.id : undefined;
     try {
-      await createTask({ text: taskText, bucket, domain_id: domainId });
+      await createTask({
+        text: taskText,
+        bucket,
+        domain_id: domainId,
+        important: important || undefined,
+        urgent: urgent || undefined,
+      });
       onCreated();
     } catch (err) {
       console.error("Failed to create task:", err);
     }
     resetToTyping();
-  }, [bucket, domains, onCreated, resetToTyping]);
+  }, [bucket, domains, important, urgent, onCreated, resetToTyping]);
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key !== "Enter") return;
@@ -128,6 +138,44 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
           disabled={isDisabled || phase === "selecting"}
           className="flex-1 bg-transparent text-sm text-text-primary placeholder:text-text-muted outline-none disabled:opacity-50"
         />
+        <button
+          type="button"
+          onClick={() => setImportant((v) => !v)}
+          disabled={isDisabled}
+          aria-label={important ? "Remove important" : "Mark as important"}
+          aria-pressed={important}
+          title={important ? "Remove important" : "Mark as important"}
+          className="shrink-0 h-11 w-11 inline-flex items-center justify-center disabled:opacity-50"
+        >
+          <span
+            className={`font-mono text-[10px] px-1.5 py-0.5 rounded border transition-all duration-150 ${
+              important
+                ? "border-red-500/35 bg-red-500/8 text-red-300"
+                : "border-neutral-800 text-neutral-500 hover:text-neutral-400"
+            }`}
+          >
+            !
+          </span>
+        </button>
+        <button
+          type="button"
+          onClick={() => setUrgent((v) => !v)}
+          disabled={isDisabled}
+          aria-label={urgent ? "Remove urgent" : "Mark as urgent"}
+          aria-pressed={urgent}
+          title={urgent ? "Remove urgent" : "Mark as urgent"}
+          className="shrink-0 h-11 w-11 inline-flex items-center justify-center disabled:opacity-50"
+        >
+          <span
+            className={`text-[10px] px-1.5 py-0.5 rounded border transition-all duration-150 ${
+              urgent
+                ? "border-amber-500/35 bg-amber-500/8 text-amber-300"
+                : "border-neutral-800 text-neutral-500 hover:text-neutral-400"
+            }`}
+          >
+            ⚡
+          </span>
+        </button>
         {phase === "typing" && text.length > 0 && (
           <span className="text-xs text-text-muted shrink-0">{text.length}/500</span>
         )}
diff --git a/frontend/src/components/triage-reminder-banner.tsx b/frontend/src/components/triage-reminder-banner.tsx
index 2fdc9a1..7246b0d 100644
--- a/frontend/src/components/triage-reminder-banner.tsx
+++ b/frontend/src/components/triage-reminder-banner.tsx
@@ -3,10 +3,16 @@
 interface TriageReminderBannerProps {
   onStart: () => void;
   onDismiss: () => void;
+  onSkipForToday: () => void;
   isFirstTime?: boolean;
 }
 
-export function TriageReminderBanner({ onStart, onDismiss, isFirstTime }: TriageReminderBannerProps) {
+export function TriageReminderBanner({
+  onStart,
+  onDismiss,
+  onSkipForToday,
+  isFirstTime,
+}: TriageReminderBannerProps) {
   const message = isFirstTime
     ? "Ready for your first triage? It only takes a few minutes."
     : "Time to triage — you haven't sorted today's tasks yet.";
@@ -23,19 +29,27 @@ export function TriageReminderBanner({ onStart, onDismiss, isFirstTime }: Triage
           <p className="text-sm font-medium text-text-primary">Triage reminder</p>
           <p className="text-sm text-text-secondary leading-snug">{message}</p>
         </div>
-        <div className="flex gap-2">
+        <div className="space-y-2">
           <button
             onClick={onStart}
-            className="flex-1 bg-accent-blue text-white rounded-xl px-4 py-2.5 text-sm font-medium hover:bg-accent-blue/90 transition-colors min-h-[44px]"
+            className="w-full bg-accent-blue text-white rounded-xl px-4 py-2.5 text-sm font-medium hover:bg-accent-blue/90 transition-colors min-h-[44px]"
           >
             Start triage
           </button>
-          <button
-            onClick={onDismiss}
-            className="flex-1 rounded-xl border border-border px-4 py-2.5 text-sm text-text-secondary hover:bg-bg-hover transition-colors min-h-[44px]"
-          >
-            Maybe later
-          </button>
+          <div className="flex gap-2">
+            <button
+              onClick={onSkipForToday}
+              className="flex-1 rounded-xl border border-border px-4 py-2.5 text-sm text-text-secondary hover:bg-bg-hover transition-colors min-h-[44px]"
+            >
+              Skip for today
+            </button>
+            <button
+              onClick={onDismiss}
+              className="flex-1 rounded-xl px-4 py-2.5 text-xs text-text-muted hover:text-text-secondary hover:bg-bg-hover transition-colors min-h-[44px]"
+            >
+              Maybe later
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index daa9d2f..47d82dc 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -67,6 +67,8 @@ export async function createTask(body: {
   domain_id?: string;
   parent_id?: string;
   skip_triage_stamp?: boolean;
+  important?: boolean;
+  urgent?: boolean;
 }): Promise<Task> {
   return request<Task>("tasks", { method: "POST", body: JSON.stringify(body) });
 }