Add user authentication and dynamic feature/category inputs

Implement Keycloak authentication, protected routes, and add combobox and autocomplete components for tool categories and features. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 776963d0-f75d-42e2-a57b-cc36bdff8495 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 0b145113-c016-4f54-b000-13bd3b0ba8f0 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0683fb79-a27c-485c-9333-5f4b288c4567/776963d0-f75d-42e2-a57b-cc36bdff8495/z4uWN6A Replit-Helium-Checkpoint-Created: true
2026-05-25 13:20:15 +00:00
parent e03c51a75e
commit 7abb048edc
22 changed files with 1027 additions and 68 deletions
@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useListCategories } from "@workspace/api-client-react";
+
+interface CategoryComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function CategoryCombobox({ value, onChange, placeholder = "Select or type a category..." }: CategoryComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
+  const categories = useListCategories();
+
+  const known: string[] = categories.data ?? [];
+
+  const filtered = inputValue.trim()
+    ? known.filter((c) => c.toLowerCase().includes(inputValue.toLowerCase()))
+    : known;
+
+  const showCreateOption = inputValue.trim() !== "" && !known.some(
+    (c) => c.toLowerCase() === inputValue.toLowerCase()
+  );
+
+  function select(val: string) {
+    onChange(val);
+    setInputValue(val);
+    setOpen(false);
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between font-normal h-9"
+          data-testid="button-category-combobox"
+        >
+          <span className={cn(!value && "text-muted-foreground")}>
+            {value || placeholder}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="Search or enter new category..."
+            value={inputValue}
+            onValueChange={(v) => {
+              setInputValue(v);
+              onChange(v);
+            }}
+            data-testid="input-category-search"
+          />
+          <CommandList>
+            {filtered.length === 0 && !showCreateOption && (
+              <CommandEmpty>No categories found.</CommandEmpty>
+            )}
+            {filtered.length > 0 && (
+              <CommandGroup heading="Known categories">
+                {filtered.map((cat) => (
+                  <CommandItem
+                    key={cat}
+                    value={cat}
+                    onSelect={() => select(cat)}
+                    data-testid={`item-category-${cat}`}
+                  >
+                    <Check
+                      className={cn("mr-2 h-4 w-4", value === cat ? "opacity-100" : "opacity-0")}
+                    />
+                    {cat}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            {showCreateOption && (
+              <CommandGroup heading="Create new">
+                <CommandItem
+                  value={inputValue}
+                  onSelect={() => select(inputValue.trim())}
+                  data-testid="item-category-create-new"
+                >
+                  <span className="text-primary font-medium">+ Create</span>
+                  <span className="ml-2 text-muted-foreground">&ldquo;{inputValue.trim()}&rdquo;</span>
+                </CommandItem>
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -0,0 +1,74 @@
+import { useState, useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { useListAllFeatures } from "@workspace/api-client-react";
+import { cn } from "@/lib/utils";
+
+interface FeatureInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  "data-testid"?: string;
+}
+
+export function FeatureInput({ value, onChange, placeholder, "data-testid": testId }: FeatureInputProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const allFeatures = useListAllFeatures();
+
+  const known: string[] = allFeatures.data ?? [];
+
+  const suggestions = value.trim().length >= 1
+    ? known.filter(
+        (f) =>
+          f.toLowerCase().includes(value.toLowerCase()) &&
+          f.toLowerCase() !== value.toLowerCase()
+      ).slice(0, 6)
+    : [];
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      <Input
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        placeholder={placeholder}
+        data-testid={testId}
+        autoComplete="off"
+      />
+      {open && suggestions.length > 0 && (
+        <div className="absolute z-50 top-full mt-1 w-full rounded-md border bg-popover shadow-md text-sm overflow-hidden">
+          {suggestions.map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={cn(
+                "w-full text-left px-3 py-2 hover:bg-muted transition-colors text-foreground",
+              )}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                onChange(s);
+                setOpen(false);
+              }}
+              data-testid={`suggestion-feature-${s}`}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -1,8 +1,12 @@
 import { Link, useLocation } from "wouter";
-import { LayoutDashboard, Wrench, PlusCircle, BarChart3 } from "lucide-react";
+import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User } from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";

 export function Layout({ children }: { children: React.ReactNode }) {
  const [location] = useLocation();
+  const { user, isLoading, isAuthenticated, login, logout } = useAuth();

  const links = [
    { href: "/", label: "Dashboard", icon: LayoutDashboard },
@@ -25,20 +29,83 @@ export function Layout({ children }: { children: React.ReactNode }) {
            const isActive = location === link.href || (link.href !== "/" && location.startsWith(link.href));
            const Icon = link.icon;
            return (
-              <Link key={link.href} href={link.href} className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${isActive ? "bg-primary text-primary-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"}`}>
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${isActive ? "bg-primary text-primary-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"}`}
+              >
                <Icon className="w-5 h-5" />
                {link.label}
              </Link>
            );
          })}
        </nav>
+
+        <div className="p-4 border-t">
+          {isLoading ? (
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Skeleton className="w-8 h-8 rounded-full" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          ) : isAuthenticated && user ? (
+            <div className="space-y-2">
+              <div className="flex items-center gap-3 px-3 py-2 rounded-md bg-muted/50">
+                <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center shrink-0">
+                  <User className="w-4 h-4 text-primary" />
+                </div>
+                <div className="min-w-0">
+                  <p className="text-sm font-medium truncate text-foreground">
+                    {user.name || user.preferredUsername || "User"}
+                  </p>
+                  {user.email && (
+                    <p className="text-xs text-muted-foreground truncate">{user.email}</p>
+                  )}
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="w-full justify-start gap-2 text-muted-foreground hover:text-destructive"
+                onClick={logout}
+                data-testid="button-logout"
+              >
+                <LogOut className="w-4 h-4" />
+                Sign out
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full gap-2"
+              onClick={() => login(location)}
+              data-testid="button-login"
+            >
+              <LogIn className="w-4 h-4" />
+              Sign in with Keycloak
+            </Button>
+          )}
+        </div>
      </aside>
+
      <main className="flex-1 flex flex-col min-w-0">
-        <header className="md:hidden border-b p-4 flex items-center bg-card">
+        <header className="md:hidden border-b p-4 flex items-center justify-between bg-card">
          <div className="flex items-center gap-2 text-primary font-bold text-lg">
            <Wrench className="w-5 h-5" />
            <span>ToolRate</span>
          </div>
+          {!isLoading && (
+            isAuthenticated ? (
+              <Button variant="ghost" size="sm" onClick={logout} data-testid="button-logout-mobile">
+                <LogOut className="w-4 h-4" />
+              </Button>
+            ) : (
+              <Button variant="outline" size="sm" onClick={() => login(location)} data-testid="button-login-mobile">
+                <LogIn className="w-4 h-4 mr-1" />
+                Sign in
+              </Button>
+            )
+          )}
        </header>
        <div className="flex-1 p-6 md:p-8 overflow-auto">
          {children}