Add task priority enum and rename priority to rank

The existing integer priority field represents positional ordering
within a state, not semantic importance. Rename it to rank and
introduce a new priority field with enum values URGENT, HIGH,
MEDIUM and LOW across the entire stack.

Rank is now scoped to (state, priority) so tasks are ordered
within each priority group. A generated priority_rank column
combines both fields into a single sortable integer for cursor
pagination.

Dragging a task across priority groups updates its priority
automatically based on the drop position neighbors. The backend
first moves the task to the new group then repositions it at the
target rank.

The migration defaults existing rows to MEDIUM priority and
backfills ranks per (state, priority) group.

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/PriorityLevel/PriorityLevel.stories.tsx

@@ -24,8 +24,26 @@ export default {
 
 type Story = StoryObj<typeof PriorityLevel>;
 
-export const Default: Story = {
+export const Low: Story = {
   args: {
-    level: 1,
+    level: "LOW",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    level: "MEDIUM",
+  },
+};
+
+export const High: Story = {
+  args: {
+    level: "HIGH",
+  },
+};
+
+export const Urgent: Story = {
+  args: {
+    level: "URGENT",
   },
 };

packages/ui/src/Atoms/PriorityLevel/PriorityLevel.tsx

@@ -15,28 +15,46 @@
 import { clsx } from "clsx";
 
 type Props = {
-  level: number;
+  level: "LOW" | "MEDIUM" | "HIGH" | "URGENT";
 };
 
 export function PriorityLevel({ level }: Props) {
+  if (level === "URGENT") {
+    return (
+      <div className="w-max flex items-center justify-center text-txt-danger">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M7 1.75v5.25M7 10.5h.005"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+    );
+  }
+
+  const bars = level === "HIGH" ? 3 : level === "MEDIUM" ? 2 : 1;
+
   return (
     <div className="w-max p-[2px] flex gap-[2px] items-end">
       <div
         className={clsx(
-          "h-1 w-[3px] bg-txt-quaternary rounded",
-          level >= 1 ? "bg-txt-secondary" : "bg-txt-quaternary",
+          "h-1 w-[3px] rounded",
+          bars >= 1 ? "bg-txt-secondary" : "bg-txt-quaternary",
         )}
       />
       <div
         className={clsx(
-          "h-2 w-[3px] bg-txt-quaternary rounded",
-          level >= 2 ? "bg-txt-secondary" : "bg-txt-quaternary",
+          "h-2 w-[3px] rounded",
+          bars >= 2 ? "bg-txt-secondary" : "bg-txt-quaternary",
         )}
       />
       <div
         className={clsx(
-          "h-3 w-[3px] bg-txt-quaternary rounded",
-          level >= 3 ? "bg-txt-secondary" : "bg-txt-quaternary",
+          "h-3 w-[3px] rounded",
+          bars >= 3 ? "bg-txt-secondary" : "bg-txt-quaternary",
         )}
       />
     </div>