feat: order by urgency

db/migrations/0003.sql

···
+-- Update active_todos view to include urgency calculation and sort by urgency
+DROP VIEW IF EXISTS active_todos;
+
+CREATE VIEW IF NOT EXISTS active_todos AS 
+SELECT 
+    id,
+    description,
+    project,
+    tags,
+    due,
+    wait,
+    priority,
+    -- Calculate urgency score
+    (
+        -- Priority: +6 points if priority = '1'
+        CASE WHEN priority = '1' THEN 6 ELSE 0 END +
+        
+        -- Due date urgency
+        CASE 
+            WHEN due != '' AND date(due) < date('now') THEN 12  -- Overdue
+            WHEN due != '' AND date(due) = date('now') THEN 8   -- Due today  
+            WHEN due != '' AND date(due) <= date('now', '+7 days') THEN 5  -- Due this week
+            WHEN due != '' AND date(due) <= date('now', '+30 days') THEN 2  -- Due this month
+            ELSE 0 
+        END +
+        
+        -- Project: +1 if has project
+        CASE WHEN project != '' THEN 1 ELSE 0 END +
+        
+        -- Tags: +1 if has tags
+        CASE WHEN tags != '[]' AND tags != '' THEN 1 ELSE 0 END
+        
+    ) as urgency,
+    -- working_id based on urgency-sorted order
+    ROW_NUMBER() OVER (ORDER BY 
+        (
+            CASE WHEN priority = '1' THEN 6 ELSE 0 END +
+            CASE 
+                WHEN due != '' AND date(due) < date('now') THEN 12
+                WHEN due != '' AND date(due) = date('now') THEN 8
+                WHEN due != '' AND date(due) <= date('now', '+7 days') THEN 5
+                WHEN due != '' AND date(due) <= date('now', '+30 days') THEN 2
+                ELSE 0 
+            END +
+            CASE WHEN project != '' THEN 1 ELSE 0 END +
+            CASE WHEN tags != '[]' AND tags != '' THEN 1 ELSE 0 END
+        ) DESC, 
+        id
+    ) as working_id
+FROM todos 
+WHERE completed = 0;

mast-react-vite/src/App.tsx

···
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { useQuery } from "@vlcn.io/react";
 import { DataTable } from "@/components/ui/data-table";
 import * as commandParser from "@/lib/command_js.js";
 import { ActionParser } from "@/components/ui/action-parser";
 import { useSelection } from "@/contexts/selection-context";
 import { useFilter } from "@/contexts/filter-context";
+import { sortByUrgency } from "@/lib/urgency";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/ui/app-sidebar";
 import { Badge } from "@/components/ui/badge";
···
   console.log("updating todos: ", whereClause, "newParams: ", newParams);
   const rawTodos = useQuery(
     ctx,
-    `SELECT * FROM active_todos ${whereClause ? "WHERE " + whereClause : ""}`,
+    `SELECT * FROM urgent_todos ${whereClause ? "WHERE " + whereClause : ""}`,
 		newParams,
   ).data;
 
···
           completed: 2, // preview-add state
           working_id: 0,
         };
-        return [newTodo, ...todos];
+        // Sort by urgency to show where the new todo would appear
+        const todosWithNew = [...todos, newTodo];
+        const sorted = sortByUrgency(todosWithNew);
+        // Update working_id based on new sort order
+        return sorted.map((todo, index) => ({
+          ...todo,
+          working_id: index + 1
+        }));
 
       case "done":
-        return todos.map((todo) => {
+        const doneTodos = todos.map((todo) => {
           if (selectedItems.has(todo.working_id)) {
             return { ...todo, completed: 3 }; // preview-done state
           }
           return todo;
         });
+        // Sort by urgency and update working_id
+        const sortedDone = sortByUrgency(doneTodos);
+        return sortedDone.map((todo, index) => ({
+          ...todo,
+          working_id: index + 1
+        }));
 
 			case "modify":
-				return todos.map((todo) => {
+				const modifiedTodos = todos.map((todo) => {
     if (selectedItems.has(todo.working_id)) {
       // Create a preview object that contains the original todo and the changes
       const previewChanges = {};
···
     }
     return todo;
         });
+        // Sort by urgency and update working_id
+        const sortedModified = sortByUrgency(modifiedTodos);
+        return sortedModified.map((todo, index) => ({
+          ...todo,
+          working_id: index + 1
+        }));
 
 
       case "filter":
···
 
   // Use previewTodos if available, otherwise use regular todos
   const displayTodos = previewTodos.length > 0 ? previewTodos : todos;
+  
+  // Calculate scroll position for preview todos
+  const prevNewTextRef = useRef("");
+  const prevPreviewPositionRef = useRef(-1);
+  
+  const scrollToPreviewIndex = useMemo(() => {
+    if (previewTodos.length === 0 || parsedCommand.action !== "add") {
+      return undefined;
+    }
+    
+    // Find the preview todo (the one with completed: 2)
+    const previewIndex = previewTodos.findIndex(todo => todo.completed === 2);
+    
+    if (previewIndex === -1) {
+      return undefined;
+    }
+    
+    // Check if we should scroll:
+    // 1. If we just started typing (previous text was empty)
+    // 2. If the preview position changed significantly
+    const justStartedTyping = prevNewTextRef.current === "" && newText !== "";
+    const positionChanged = Math.abs(previewIndex - prevPreviewPositionRef.current) > 1;
+    
+    // Update refs for next comparison
+    const shouldScroll = justStartedTyping || positionChanged;
+    prevNewTextRef.current = newText;
+    prevPreviewPositionRef.current = previewIndex;
+    
+    return shouldScroll ? previewIndex : undefined;
+  }, [previewTodos, parsedCommand.action, newText]);
 
   const handleEnter = (e) => {
     if (e.key === "Enter") {
···
       if (sel.type === "id") {
         conditions.push(`id IN (
 					SELECT id 
-					FROM active_todos 
+					FROM urgent_todos 
 					WHERE working_id IN (${sel.ids.map(() => "?").join(",")})
 				)`);
         params.push(...sel.ids);
···
             />
             <div className="h-2" />
             <div className="flex-1 w-full">
-              <DataTable data={displayTodos} onMarkDone={handleMarkDone} />
+              <DataTable data={displayTodos} onMarkDone={handleMarkDone} scrollToPreviewIndex={scrollToPreviewIndex} />
             </div>
           </section>
         </div>
···
             />
             <div className="h-2" />
             <div className="flex-1 w-full h-full">
-              <DataTable data={displayTodos} onMarkDone={handleMarkDone} />
+              <DataTable data={displayTodos} onMarkDone={handleMarkDone} scrollToPreviewIndex={scrollToPreviewIndex} />
             </div>
           </section>
         </div>

mast-react-vite/src/components/ui/app-sidebar.tsx

···
   };
 	const projects = useQuery(
     ctx,
-    `SELECT DISTINCT project FROM active_todos WHERE project != '' ORDER BY project`
+    `SELECT DISTINCT project FROM urgent_todos WHERE project != '' ORDER BY project`
   ).data || [];
 
 	const handleProjectClick = (project, e) => {
···
 
 	const tags = useQuery(
     ctx,
-    `SELECT DISTINCT value as tag FROM active_todos, json_each(active_todos.tags) ORDER BY tag`
+    `SELECT DISTINCT value as tag FROM urgent_todos, json_each(urgent_todos.tags) ORDER BY tag`
   ).data || [];
 
 	const handleTagClick = (tag, e) => {

mast-react-vite/src/components/ui/data-table.tsx

···
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Task } from "@/components/ui/task";
 
···
 interface DataTableProps<TData> {
   data: TData[];
   onMarkDone?: (selectedIds: number[]) => void;
+  scrollToPreviewIndex?: number; // Index of item to scroll to (for preview positioning)
 }
 
-export function DataTable<TData>({ data, onMarkDone }: DataTableProps<TData>) {
+export function DataTable<TData>({ data, onMarkDone, scrollToPreviewIndex }: DataTableProps<TData>) {
+  const desktopScrollRef = useRef<HTMLDivElement>(null);
+  const mobileScrollRef = useRef<HTMLDivElement>(null);
+  
+  // Scroll to preview position when scrollToPreviewIndex changes
+  useEffect(() => {
+    if (scrollToPreviewIndex !== undefined && scrollToPreviewIndex >= 0) {
+      // Estimate item height (adjust based on your actual task height)
+      const estimatedItemHeight = 80; // Approximate height of a Task component
+      const scrollPosition = scrollToPreviewIndex * estimatedItemHeight;
+      
+      // Scroll both desktop and mobile areas (only one will be visible)
+      if (desktopScrollRef.current) {
+        const viewport = desktopScrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
+        if (viewport) {
+          viewport.scrollTo({ top: scrollPosition, behavior: 'smooth' });
+        }
+      }
+      
+      if (mobileScrollRef.current) {
+        const viewport = mobileScrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
+        if (viewport) {
+          viewport.scrollTo({ top: scrollPosition, behavior: 'smooth' });
+        }
+      }
+    }
+  }, [scrollToPreviewIndex]);
+
   return (
     <>
       <div className="hidden md:flex flex-col w-full">
-        <ScrollArea className="h-[calc(100vh-12rem)] rounded-md border">
+        <ScrollArea ref={desktopScrollRef} className="h-[calc(100vh-12rem)] rounded-md border">
           {data.length ? (
             data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} />)
           ) : (
···
 
       {/* Mobile view layout - shown only on mobile */}
       <div className="md:hidden">
-        <ScrollArea className="min-h-[120%] h-[calc(100vh)] border">
+        <ScrollArea ref={mobileScrollRef} className="min-h-[120%] h-[calc(100vh)] border">
           {data.length ? (
             data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} />)
           ) : (

mast-react-vite/src/lib/urgency.ts

···
+// Urgency calculation that matches the SQL logic in urgent_todos view
+export function calculateUrgency(todo: {
+  priority?: string | boolean;
+  due?: string | null;
+  project?: string;
+  tags?: string;
+}): number {
+  let urgency = 0;
+
+  // Priority: +6 points if priority = '1' or true
+  if (todo.priority === '1' || todo.priority === true) {
+    urgency += 6;
+  }
+
+  // Due date urgency
+  if (todo.due && todo.due !== '') {
+    const dueDate = new Date(todo.due);
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const todayTime = today.getTime();
+    const dueDateDay = new Date(dueDate.getFullYear(), dueDate.getMonth(), dueDate.getDate());
+    const dueDateTime = dueDateDay.getTime();
+
+    if (dueDateTime < todayTime) {
+      urgency += 12; // Overdue
+    } else if (dueDateTime === todayTime) {
+      urgency += 8; // Due today
+    } else if (dueDateTime <= todayTime + (7 * 24 * 60 * 60 * 1000)) {
+      urgency += 5; // Due this week
+    } else if (dueDateTime <= todayTime + (30 * 24 * 60 * 60 * 1000)) {
+      urgency += 2; // Due this month
+    }
+  }
+
+  // Project: +1 if has project
+  if (todo.project && todo.project !== '') {
+    urgency += 1;
+  }
+
+  // Tags: +1 if has tags
+  if (todo.tags && todo.tags !== '[]' && todo.tags !== '') {
+    try {
+      const parsedTags = JSON.parse(todo.tags);
+      if (Array.isArray(parsedTags) && parsedTags.length > 0) {
+        urgency += 1;
+      }
+    } catch {
+      // If tags is not valid JSON, assume it's a non-empty string
+      urgency += 1;
+    }
+  }
+
+  return urgency;
+}
+
+// Sort todos by urgency (descending) then by id
+export function sortByUrgency<T extends { id: string | number; priority?: string | boolean; due?: string | null; project?: string; tags?: string }>(todos: T[]): T[] {
+  return [...todos].sort((a, b) => {
+    const urgencyA = calculateUrgency(a);
+    const urgencyB = calculateUrgency(b);
+    
+    if (urgencyA !== urgencyB) {
+      return urgencyB - urgencyA; // Higher urgency first
+    }
+    
+    // If urgency is the same, sort by id
+    if (typeof a.id === 'string' && typeof b.id === 'string') {
+      return a.id.localeCompare(b.id);
+    }
+    return Number(a.id) - Number(b.id);
+  });
+}

mast-react-vite/src/main.tsx

···
         urgency
     FROM todos 
     WHERE completed = 0;
+    
+    CREATE VIEW IF NOT EXISTS urgent_todos AS 
+    SELECT 
+        id,
+        description,
+        project,
+        tags,
+        due,
+        wait,
+        priority,
+        -- Calculate urgency score
+        (
+            -- Priority: +6 points if priority = '1'
+            CASE WHEN priority = '1' THEN 6 ELSE 0 END +
+            
+            -- Due date urgency
+            CASE 
+                WHEN due != '' AND date(due) < date('now') THEN 12  -- Overdue
+                WHEN due != '' AND date(due) = date('now') THEN 8   -- Due today  
+                WHEN due != '' AND date(due) <= date('now', '+7 days') THEN 5  -- Due this week
+                WHEN due != '' AND date(due) <= date('now', '+30 days') THEN 2  -- Due this month
+                ELSE 0 
+            END +
+            
+            -- Project: +1 if has project
+            CASE WHEN project != '' THEN 1 ELSE 0 END +
+            
+            -- Tags: +1 if has tags
+            CASE WHEN tags != '[]' AND tags != '' THEN 1 ELSE 0 END
+            
+        ) as urgency,
+        -- working_id based on urgency-sorted order
+        ROW_NUMBER() OVER (ORDER BY 
+            (
+                CASE WHEN priority = '1' THEN 6 ELSE 0 END +
+                CASE 
+                    WHEN due != '' AND date(due) < date('now') THEN 12
+                    WHEN due != '' AND date(due) = date('now') THEN 8
+                    WHEN due != '' AND date(due) <= date('now', '+7 days') THEN 5
+                    WHEN due != '' AND date(due) <= date('now', '+30 days') THEN 2
+                    ELSE 0 
+                END +
+                CASE WHEN project != '' THEN 1 ELSE 0 END +
+                CASE WHEN tags != '[]' AND tags != '' THEN 1 ELSE 0 END
+            ) DESC, 
+            id
+        ) as working_id
+    FROM todos 
+    WHERE completed = 0;
   `);
   const rx = tblrx(db);