feat: project colors, timeline filters, sidebar fix, GitLooper agent, and misc improvements

- Fix sidebar double-highlight on /vacations/my (Gitea #6): add isNavItemActive() helper
- Add project color picker (schema + API + modal + timeline rendering)
- Add ProjectCombobox/ResourceCombobox to timeline toolbar
- Show PENDING vacations on timeline with dashed/dimmed style
- Add "show demand projects" preference with localStorage persistence
- Add ProjectAssignmentsTable with total hours/cost columns
- Extend vacation API to accept status arrays
- Add GitLooper formal YAML agent configuration
- Extend user admin with permission overrides UI
- Add delete-assignment use case tests
- Add status-styles.ts shared badge constants
- Centralize formatMoney/formatCents in format.ts

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/components/timeline/TimelineToolbar.tsx

@@ -1,7 +1,10 @@
 "use client";
 
 import { clsx } from "clsx";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
+import { ResourceCombobox } from "~/components/ui/ResourceCombobox.js";
 import { TimelineFilter, type TimelineFilters } from "./TimelineFilter.js";
 import { TimelineQuickFilters } from "./TimelineQuickFilters.js";
 
@@ -50,6 +53,32 @@ export function TimelineToolbar({
     filters.countryCodes.length;
   const filterAnchorRef = useRef<HTMLDivElement | null>(null);
 
+  // Track selected resource ID for the combobox (separate from the EID-based filter)
+  const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);
+
+  // Look up resource to get EID when selected
+  const { data: resourceLookup } = trpc.resource.list.useQuery(
+    { limit: 500 },
+    { staleTime: 60_000 },
+  );
+
+  function handleProjectChange(id: string | null) {
+    onFiltersChange({ ...filters, projectIds: id ? [id] : [] });
+  }
+
+  function handleResourceChange(id: string | null) {
+    setSelectedResourceId(id);
+    if (!id) {
+      onFiltersChange({ ...filters, eids: [] });
+      return;
+    }
+    const resources = (resourceLookup?.resources ?? []) as Array<{ id: string; eid: string }>;
+    const resource = resources.find((r) => r.id === id);
+    if (resource?.eid) {
+      onFiltersChange({ ...filters, eids: [resource.eid] });
+    }
+  }
+
   function clearQuickFilters() {
     onFiltersChange({
       ...filters,
@@ -62,10 +91,24 @@ export function TimelineToolbar({
 
   return (
     <div className="app-toolbar flex flex-wrap items-center justify-between gap-3">
-      <div className="text-sm text-gray-500 dark:text-gray-400">
-        {viewMode === "resource"
-          ? `${resourceCount} resources · ${totalAllocCount} allocations`
-          : `${projectCount} projects`}
+      <div className="flex items-center gap-3">
+        <ProjectCombobox
+          value={filters.projectIds[0] ?? null}
+          onChange={handleProjectChange}
+          placeholder="Filter by project..."
+          className="min-w-[220px]"
+        />
+        <ResourceCombobox
+          value={selectedResourceId}
+          onChange={handleResourceChange}
+          placeholder="Filter by resource..."
+          className="min-w-[180px]"
+        />
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          {viewMode === "resource"
+            ? `${resourceCount} resources \u00B7 ${totalAllocCount} allocations`
+            : `${projectCount} projects`}
+        </div>
       </div>
 
       <div className="flex flex-wrap items-center justify-end gap-2">