@locusai/web 0.1.7 → 0.2.2

package/src/app/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
   /* Shadcn-like Design System */
@@ -601,3 +602,261 @@ input::placeholder {
   justify-content: center;
   color: var(--accent);
 }
+
+/* Tiptap & ProseMirror Styles */
+.ProseMirror {
+  outline: none !important;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--muted-foreground);
+  pointer-events: none;
+  height: 0;
+  opacity: 0.5;
+  font-style: italic;
+}
+
+/* Tighten regular lists */
+.prose ul,
+.prose ol,
+.ProseMirror ul,
+.ProseMirror ol {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.prose li,
+.ProseMirror li {
+  margin-top: 0.125rem !important;
+  margin-bottom: 0.125rem !important;
+}
+
+.prose li > p,
+.ProseMirror li > p {
+  margin: 0 !important;
+}
+
+/* Task List Styling */
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+}
+
+ul[data-type="taskList"] li {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.25rem !important; /* Tightened */
+}
+
+ul[data-type="taskList"] li > div p {
+  margin: 0 !important;
+  line-height: inherit;
+}
+
+ul[data-type="taskList"] li > label {
+  flex: 0 0 auto;
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+ul[data-type="taskList"] li > div {
+  flex: 1 1 auto;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+
+ul[data-type="taskList"] input[type="checkbox"] {
+  appearance: none;
+  background-color: transparent;
+  margin: 0;
+  font: inherit;
+  color: var(--primary);
+  width: 1.15em;
+  height: 1.15em;
+  border: 1.5px solid var(--border);
+  border-radius: 4px;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+/* Heading Overrides for Editor - Forced Hierarchy */
+.prose h1,
+.ProseMirror h1,
+h1.text-3xl {
+  font-size: 2rem !important;
+  line-height: 1.1 !important;
+  font-weight: 900 !important;
+  margin-top: 2rem !important;
+  margin-bottom: 1.5rem !important;
+  display: block !important;
+  color: var(--foreground) !important;
+}
+
+.prose h2,
+.ProseMirror h2,
+h2.text-xl {
+  font-size: 1.5rem !important;
+  line-height: 1.2 !important;
+  font-weight: 800 !important;
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.25rem !important;
+  display: block !important;
+  color: var(--foreground) !important;
+}
+
+.prose h3,
+.ProseMirror h3,
+h3.text-base {
+  font-size: 1rem !important;
+  line-height: 1.3 !important;
+  font-weight: 700 !important;
+  margin-top: 1.25rem !important;
+  margin-bottom: 1rem !important;
+  display: block !important;
+  color: var(--foreground) !important;
+}
+
+ul[data-type="taskList"] input[type="checkbox"]:hover {
+  background-color: var(--secondary);
+  border-color: var(--primary);
+}
+
+ul[data-type="taskList"] input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--primary);
+  transform-origin: bottom left;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+ul[data-type="taskList"] input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/* Code Block & Inline Code Refinement */
+.ProseMirror pre {
+  background: #0d1117 !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 12px !important;
+  padding: 1.25rem !important;
+  margin: 1.5rem 0 !important;
+  font-family:
+    "JetBrains Mono", "Fira Code", ui-monospace, monospace !important;
+  font-size: 0.875rem !important;
+  line-height: 1.6 !important;
+  overflow-x: auto !important;
+}
+
+.ProseMirror pre code {
+  background: transparent !important;
+  padding: 0 !important;
+  border: none !important;
+  color: #e6edf3 !important;
+  font-family: inherit !important;
+}
+
+.ProseMirror code {
+  background: rgba(255, 255, 255, 0.05) !important;
+  color: var(--primary) !important;
+  padding: 0.2rem 0.4rem !important;
+  border-radius: 6px !important;
+  font-family: ui-monospace, monospace !important;
+  font-size: 0.85em !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Syntax Highlighting (lowlight / hljs) */
+.hljs-comment,
+.hljs-quote {
+  color: #8b949e;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-type {
+  color: #ff7b72;
+}
+
+.hljs-attribute,
+.hljs-name,
+.hljs-tag {
+  color: #7ee787;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ffa657;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition {
+  color: #a5d6ff;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #79c0ff;
+}
+
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #ff9bce;
+}
+
+.hljs-function,
+.hljs-title {
+  color: #d2a8ff;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-type {
+  color: #ff7b72;
+}
+
+/* Custom Scrollbar for Editor Area */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 20px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}

package/src/app/layout.tsx

@@ -1,8 +1,6 @@
 import type { Metadata } from "next";
 import { Roboto } from "next/font/google";
 import "./globals.css";
-import { Header } from "@/components/Header";
-import { Sidebar } from "@/components/Sidebar";
 import { Providers } from "./providers";
 
 const roboto = Roboto({
@@ -20,26 +18,18 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
+type Props = {
   children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" className="dark">
-      <body className={`${roboto.className} antialiased`}>
-        <Providers>
-          <div className="flex h-screen overflow-hidden bg-background">
-            <Sidebar />
+};
 
-            <main className="flex-1 overflow-auto bg-background p-8">
-              <div className="max-w-[1440px] mx-auto">
-                <Header />
-                {children}
-              </div>
-            </main>
-          </div>
-        </Providers>
+export default function RootLayout({ children }: Props) {
+  return (
+    <html suppressHydrationWarning lang="en" className="dark">
+      <body
+        suppressHydrationWarning
+        className={`${roboto.className} antialiased`}
+      >
+        <Providers>{children}</Providers>
       </body>
     </html>
   );

package/src/app/providers.tsx

@@ -3,14 +3,37 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useState } from "react";
+import { Toaster } from "@/components/ui/Toast";
+import { AuthProvider } from "@/context";
+import { QUERY_CONFIG } from "@/lib/constants";
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(() => new QueryClient({}));
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: QUERY_CONFIG.DEFAULT_STALE_TIME,
+            gcTime: QUERY_CONFIG.DEFAULT_GC_TIME,
+            retry: QUERY_CONFIG.DEFAULT_RETRY,
+            refetchOnWindowFocus: QUERY_CONFIG.REFETCH_ON_WINDOW_FOCUS,
+          },
+          mutations: {
+            retry: QUERY_CONFIG.MUTATION_RETRY,
+          },
+        },
+      })
+  );
+
+  const isProduction = process.env.NODE_ENV === "production";
 
   return (
     <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+      <AuthProvider>
+        {children}
+        <Toaster />
+        {!isProduction && <ReactQueryDevtools initialIsOpen={false} />}
+      </AuthProvider>
     </QueryClientProvider>
   );
 }

package/src/components/AuthLayoutUI.tsx

@@ -0,0 +1,53 @@
+/**
+ * Auth Layout UI Component
+ *
+ * Provides centered card layout for authentication pages.
+ * Includes branding, logo, and centered content area.
+ * Used by login, register, and other auth flows.
+ *
+ * Features:
+ * - Centered layout with max-width constraint
+ * - Branding section with logo
+ * - Responsive padding and spacing
+ * - Consistent styling across auth pages
+ *
+ * @example
+ * <AuthLayoutUI>
+ *   <LoginForm />
+ * </AuthLayoutUI>
+ */
+
+import Image from "next/image";
+import { SecondaryText } from "./typography";
+
+interface AuthLayoutUIProps {
+  /** Content to display in the centered card */
+  children: React.ReactNode;
+}
+
+export function AuthLayoutUI({ children }: AuthLayoutUIProps) {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-6">
+      <div className="w-full max-w-[400px]">
+        {/* Branding Section */}
+        <div className="flex flex-col items-center mb-8">
+          <div className="relative h-8 w-[98px] mb-2">
+            <Image
+              src="/logo.png"
+              alt="Locus AI Logo"
+              fill
+              className="object-contain"
+              priority
+            />
+          </div>
+          <SecondaryText size="xs">Intelligent Task Management</SecondaryText>
+        </div>
+
+        {/* Content Card */}
+        <div className="bg-card border border-border/60 rounded-2xl p-8 shadow-sm">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/BoardFilter.tsx

@@ -1,98 +1,99 @@
+/**
+ * Board Filter Component
+ *
+ * Provides filtering controls for board view.
+ * Supports search, priority filtering, and role filtering.
+ * Helps users find and organize tasks efficiently.
+ *
+ * Features:
+ * - Task search by title/content
+ * - Priority-based filtering
+ * - Role-based filtering
+ * - Clear filters button
+ * - Real-time filtering
+ *
+ * @example
+ * <BoardFilter
+ *   searchQuery={search}
+ *   onSearchChange={handleSearch}
+ *   priorityFilter={priority}
+ *   onPriorityChange={handlePriority}
+ *   roleFilter={role}
+ *   onRoleChange={handleRole}
+ * />
+ */
+
 "use client";
 
-import { AssigneeRole, TaskPriority } from "@locusai/shared";
-import { Search, X } from "lucide-react";
-import { Button, Dropdown, Input } from "@/components/ui";
+import { AssigneeRole } from "@locusai/shared";
+import { Filter } from "lucide-react";
 
 interface BoardFilterProps {
+  /** Current search query */
   searchQuery: string;
+  /** Called when search changes */
   onSearchChange: (query: string) => void;
-  priorityFilter: TaskPriority | "ALL";
-  onPriorityChange: (priority: TaskPriority | "ALL") => void;
-  assigneeFilter: AssigneeRole | "ALL";
-  onAssigneeChange: (assignee: AssigneeRole | "ALL") => void;
-  onClearFilters: () => void;
-  hasActiveFilters: boolean;
+  /** Currently selected priority filter */
+  priorityFilter: string | null;
+  /** Called when priority filter changes */
+  onPriorityChange: (priority: string | null) => void;
+  /** Currently selected role filter */
+  roleFilter: string | null;
+  /** Called when role filter changes */
+  onRoleChange: (role: string | null) => void;
 }
 
-const PRIORITY_FILTER_OPTIONS = [
-  { value: "ALL" as const, label: "All Priorities" },
-  { value: TaskPriority.LOW, label: "Low" },
-  { value: TaskPriority.MEDIUM, label: "Medium" },
-  { value: TaskPriority.HIGH, label: "High" },
-  { value: TaskPriority.CRITICAL, label: "Critical" },
-];
-
-const ASSIGNEE_FILTER_OPTIONS = [
-  { value: "ALL" as const, label: "All Assignees" },
-  ...Object.values(AssigneeRole).map((role) => ({
-    value: role,
-    label: role.charAt(0) + role.slice(1).toLowerCase(),
-  })),
-];
-
 export function BoardFilter({
   searchQuery,
   onSearchChange,
   priorityFilter,
   onPriorityChange,
-  assigneeFilter,
-  onAssigneeChange,
-  onClearFilters,
-  hasActiveFilters,
+  roleFilter,
+  onRoleChange,
 }: BoardFilterProps) {
   return (
-    <div className="flex flex-wrap items-end gap-4 mb-8 bg-card p-4 rounded-xl border shadow-sm">
-      <div className="flex-1 min-w-[300px]">
-        <Input
+    <div className="flex items-center flex-wrap gap-3 p-2 bg-secondary/20 rounded-xl border border-border/40">
+      {/* Search */}
+      <div className="flex-1 min-w-[180px] relative">
+        <input
+          type="text"
+          placeholder="Filter tasks..."
           value={searchQuery}
           onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="Filter by title or ID..."
-          className="search-input h-10"
-          icon={<Search size={16} />}
-          rightElement={
-            searchQuery ? (
-              <button
-                className="hover:text-destructive transition-colors"
-                onClick={() => onSearchChange("")}
-              >
-                <X size={14} />
-              </button>
-            ) : undefined
-          }
+          className="w-full bg-background border border-border/50 rounded-lg pl-9 pr-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
+        />
+        <Filter
+          size={14}
+          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/50"
         />
       </div>
 
-      <div className="flex gap-4">
-        <div className="w-[180px]">
-          <Dropdown
-            label="Priority Filter"
-            value={priorityFilter}
-            onChange={onPriorityChange}
-            options={PRIORITY_FILTER_OPTIONS}
-          />
-        </div>
-        <div className="w-[180px]">
-          <Dropdown
-            label="Assignee Filter"
-            value={assigneeFilter}
-            onChange={onAssigneeChange}
-            options={ASSIGNEE_FILTER_OPTIONS}
-          />
-        </div>
-      </div>
+      {/* Priority Filter */}
+      <select
+        value={priorityFilter || ""}
+        onChange={(e) => onPriorityChange(e.target.value || null)}
+        className="bg-background border border-border/50 rounded-lg px-2 py-1.5 text-xs font-medium focus:outline-none h-8"
+      >
+        <option value="">All Priorities</option>
+        <option value="LOW">Low</option>
+        <option value="MEDIUM">Medium</option>
+        <option value="HIGH">High</option>
+        <option value="CRITICAL">Critical</option>
+      </select>
 
-      {hasActiveFilters && (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="text-muted-foreground hover:text-destructive h-10 px-4"
-          onClick={onClearFilters}
-        >
-          <X size={14} className="mr-2" />
-          Clear All
-        </Button>
-      )}
+      {/* Role Filter */}
+      <select
+        value={roleFilter || ""}
+        onChange={(e) => onRoleChange(e.target.value || null)}
+        className="bg-background border border-border/50 rounded-lg px-2 py-1.5 text-xs font-medium focus:outline-none h-8"
+      >
+        <option value="">All Roles</option>
+        <option value={AssigneeRole.BACKEND}>Backend</option>
+        <option value={AssigneeRole.FRONTEND}>Frontend</option>
+        <option value={AssigneeRole.QA}>QA</option>
+        <option value={AssigneeRole.PM}>PM</option>
+        <option value={AssigneeRole.DESIGN}>Design</option>
+      </select>
     </div>
   );
 }