[FEAT] Implement view page functionalities

ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Devlane UI",
   "private": true,
-  "version": "0.3.4",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

ui/src/components/CreateWorkItemModal.tsx

@@ -223,6 +223,8 @@ export function CreateWorkItemModal({
   const [labelSearch, setLabelSearch] = useState("");
   const [cycleSearch, setCycleSearch] = useState("");
   const [moduleSearch, setModuleSearch] = useState("");
+  const [createLabelLoading, setCreateLabelLoading] = useState(false);
+  const [createLabelError, setCreateLabelError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!openDropdown) {
@@ -232,6 +234,7 @@ export function CreateWorkItemModal({
       setLabelSearch("");
       setCycleSearch("");
       setModuleSearch("");
+      setCreateLabelError(null);
     }
   }, [openDropdown]);
 
@@ -462,6 +465,26 @@ export function CreateWorkItemModal({
     );
   };
 
+  const handleCreateLabel = async () => {
+    const name = labelSearch.trim();
+    if (!name || !workspaceSlug || !pid) return;
+    setCreateLabelError(null);
+    setCreateLabelLoading(true);
+    try {
+      const created = await labelService.create(workspaceSlug, pid, { name });
+      setLabels((prev) => [...prev, created]);
+      setLabelIds((prev) => [...prev, created.id]);
+      setLabelSearch("");
+      setOpenDropdown(null);
+    } catch (err) {
+      setCreateLabelError(
+        err instanceof Error ? err.message : "Failed to create label.",
+      );
+    } finally {
+      setCreateLabelLoading(false);
+    }
+  };
+
   if (!open) return null;
 
   return createPortal(
@@ -690,6 +713,31 @@ export function CreateWorkItemModal({
                       {l.name}
                     </button>
                   ))}
+                  {labelSearch.trim() &&
+                    !labels.some(
+                      (l) =>
+                        l.name.toLowerCase() ===
+                        labelSearch.trim().toLowerCase(),
+                    ) && (
+                      <>
+                        <div className="my-1 border-t border-[var(--border-subtle)]" />
+                        <button
+                          type="button"
+                          onClick={handleCreateLabel}
+                          disabled={createLabelLoading}
+                          className="w-full text-left text-[var(--brand-default)] hover:bg-[var(--bg-layer-1-hover)] disabled:opacity-50"
+                        >
+                          {createLabelLoading
+                            ? "Creating…"
+                            : `Create label "${labelSearch.trim()}"`}
+                        </button>
+                        {createLabelError && (
+                          <p className="px-2 py-1 text-xs text-red-600">
+                            {createLabelError}
+                          </p>
+                        )}
+                      </>
+                    )}
                 </div>
               </Dropdown>
               <DatePickerTrigger

ui/src/components/layout/AppShell.tsx

@@ -1,19 +1,27 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
+import { WorkspaceViewsStateProvider } from "../../contexts/WorkspaceViewsStateContext";
 import { PageHeader } from "./PageHeader";
 import { Sidebar } from "./Sidebar";
 
 export function AppShell() {
+  const { pathname } = useLocation();
+  const isViewsRoute = pathname.includes("/views");
+
   return (
-    <div className="flex h-screen flex-col overflow-hidden bg-[var(--bg-screen)] p-3">
-      <div className="flex min-h-0 flex-1 overflow-hidden rounded-[var(--radius-lg)] bg-[var(--bg-surface-1)] shadow-[var(--shadow-container)]">
-        <Sidebar />
-        <main className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[var(--bg-canvas)]">
-          <PageHeader />
-          <div className="main-content-scroll min-h-0 flex-1 overflow-auto p-[var(--padding-page)]">
-            <Outlet />
-          </div>
-        </main>
+    <WorkspaceViewsStateProvider>
+      <div className="flex h-screen flex-col overflow-hidden bg-[var(--bg-screen)] p-3">
+        <div className="flex min-h-0 flex-1 overflow-hidden rounded-[var(--radius-lg)] bg-[var(--bg-surface-1)] shadow-[var(--shadow-container)]">
+          <Sidebar />
+          <main className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[var(--bg-canvas)]">
+            <PageHeader />
+            <div
+              className={`main-content-scroll min-h-0 flex-1 overflow-auto p-[var(--padding-page)] ${isViewsRoute ? "pl-0" : ""}`}
+            >
+              <Outlet />
+            </div>
+          </main>
+        </div>
       </div>
-    </div>
+    </WorkspaceViewsStateProvider>
   );
 }