From daf915c0830d0d22226580595b6bd0296386fb18 Mon Sep 17 00:00:00 2001 From: sean-eskerium Date: Thu, 9 Oct 2025 14:26:37 -0400 Subject: [PATCH] Fixes from biome and consistency review. --- .../archon/archon-ui-consistency-review.md | 32 +++- .../style-guide/components/StyleGuideView.tsx | 2 +- .../src/features/style-guide/index.ts | 2 +- .../layouts/DocumentBrowserExample.tsx | 8 +- .../layouts/KnowledgeLayoutExample.tsx | 36 +++-- .../layouts/ProjectsLayoutExample.tsx | 4 +- .../layouts/SettingsLayoutExample.tsx | 52 +++--- .../style-guide/showcases/StaticForms.tsx | 62 ++++--- .../style-guide/showcases/StaticTables.tsx | 100 ++++++------ .../style-guide/showcases/StaticToggles.tsx | 13 +- .../ui/primitives/pill-navigation.tsx | 153 ++++++++++++++++++ 11 files changed, 339 insertions(+), 125 deletions(-) create mode 100644 archon-ui-main/src/features/ui/primitives/pill-navigation.tsx diff --git a/.claude/commands/archon/archon-ui-consistency-review.md b/.claude/commands/archon/archon-ui-consistency-review.md index e361be6c..091d813d 100644 --- a/.claude/commands/archon/archon-ui-consistency-review.md +++ b/.claude/commands/archon/archon-ui-consistency-review.md @@ -234,6 +234,36 @@ Save to `PRPs/reviews/ui-consistency-review-[feature].md`. **Note**: The PRPs/reviews/ directory is gitignored and won't be committed. +### Step 7: Create Implementation PRP + +After completing the review report, **immediately create a PRP** for implementing the fixes using the review findings. + +**CRITICAL**: Do not stop after generating the report. The review is only the first phase - the PRP creation is required. + +**Use**: `/prp-claude-code:prp-claude-code-create` command with argument: `ui-consistency-fixes-[feature]` + +**PRP Should Include**: +1. **Feature Goal**: Fix all UI consistency violations identified in the review +2. **Context**: Reference the review report and specific violations with file:line numbers +3. **Implementation Tasks**: Ordered by priority (Critical → High → Medium → Low) + - Each task should reference specific violations from the review + - Include exact code snippets for fixes (from review report) + - Use dependency ordering (e.g., fix unconstrained scrolls before testing) +4. **Validation Gates**: + - Re-run automated scans from Step 3 + - Verify all violations are fixed + - Test responsive behavior at all breakpoints (375px, 768px, 1024px, 1440px) +5. **Success Metrics**: + - Zero violations in automated scans + - All scores improved to 10/10 + - Overall grade improved to A or A+ + +**PRP Template Sections to Emphasize**: +- **codebase_patterns**: Link to review report and UI_STANDARDS.md sections violated +- **existing_code**: Include specific file:line references from violation findings +- **implementation_notes**: Include "why this matters" context from review report +- **edge_cases**: Include responsive testing requirements and dark mode validation + --- -Start the review now. +Start the review now and create the PRP when complete. diff --git a/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx index 63a222ee..da082c8c 100644 --- a/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx +++ b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx @@ -1,7 +1,7 @@ import { Layout, Palette } from "lucide-react"; import { useState } from "react"; +import { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation"; import { ThemeToggle } from "../../../components/ui/ThemeToggle"; -import { PillNavigation, type PillNavigationItem } from "../shared/PillNavigation"; import { LayoutsTab } from "../tabs/LayoutsTab"; import { StyleGuideTab } from "../tabs/StyleGuideTab"; diff --git a/archon-ui-main/src/features/style-guide/index.ts b/archon-ui-main/src/features/style-guide/index.ts index 80e510c9..4578ae94 100644 --- a/archon-ui-main/src/features/style-guide/index.ts +++ b/archon-ui-main/src/features/style-guide/index.ts @@ -1,5 +1,5 @@ +export { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation"; export { StyleGuideView } from "./components/StyleGuideView"; -export { PillNavigation } from "./shared/PillNavigation"; export { SideNavigation } from "./shared/SideNavigation"; export { LayoutsTab } from "./tabs/LayoutsTab"; export { StyleGuideTab } from "./tabs/StyleGuideTab"; diff --git a/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx b/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx index a96bde84..3f749c0e 100644 --- a/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx +++ b/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx @@ -1,9 +1,8 @@ -import { Code, File, FileText, Globe, Search } from "lucide-react"; +import { Code, FileText, Globe, Search } from "lucide-react"; import { useState } from "react"; import { Button } from "@/features/ui/primitives/button"; -import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/features/ui/primitives/dialog"; +import { Dialog, DialogContent } from "@/features/ui/primitives/dialog"; import { Input } from "@/features/ui/primitives/input"; -import { StatPill } from "@/features/ui/primitives/pill"; import { cn } from "@/features/ui/primitives/styles"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/features/ui/primitives/tabs"; @@ -75,7 +74,6 @@ const DocumentBrowserModal = ({ open, onOpenChange }: { open: boolean; onOpenCha const [searchQuery, setSearchQuery] = useState(""); const [selectedDoc, setSelectedDoc] = useState(MOCK_DOCUMENTS[0]); const [selectedCode, setSelectedCode] = useState(MOCK_CODE[0]); - const [sourceType, setSourceType] = useState<"web" | "document">("web"); const filteredDocuments = MOCK_DOCUMENTS.filter((doc) => doc.title.toLowerCase().includes(searchQuery.toLowerCase())); @@ -231,7 +229,7 @@ const DocumentBrowserModal = ({ open, onOpenChange }: { open: boolean; onOpenCha

{selectedCode.summary}

{selectedCode.language} - 
+              
                 {selectedCode.code}
               

             
diff --git a/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
index 51efb6f6..0c64de4a 100644
--- a/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
@@ -133,23 +133,25 @@ export const KnowledgeLayoutExample = () => {
         
       ) : (
         // Table View - matching TaskView standard pattern
-        

-          
-            
-              
-                
-                
-                
-                
-                
-              
-            
-            
-              {MOCK_KNOWLEDGE_ITEMS.map((item, index) => (
-                
-              ))}
-            
-          
TitleTypeSourceChunksDate

+        

+          

+            
+              
+                
+                  
+                  
+                  
+                  
+                  
+                
+              
+              
+                {MOCK_KNOWLEDGE_ITEMS.map((item, index) => (
+                  
+                ))}
+              
+            
TitleTypeSourceChunksDate

+          

         

       )}
 
diff --git a/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
index c78788e7..2b2bb5f0 100644
--- a/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
@@ -21,10 +21,10 @@ import { Button } from "@/features/ui/primitives/button";
 import { DraggableCard } from "@/features/ui/primitives/draggable-card";
 import { Input } from "@/features/ui/primitives/input";
 import { StatPill } from "@/features/ui/primitives/pill";
+import { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation";
 import { SelectableCard } from "@/features/ui/primitives/selectable-card";
 import { cn } from "@/features/ui/primitives/styles";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/features/ui/primitives/tooltip";
-import { PillNavigation, type PillNavigationItem } from "../shared/PillNavigation";
 
 const MOCK_PROJECTS = [
   {
@@ -731,7 +731,7 @@ const TaskCardExample = ({ task, index }: { task: (typeof MOCK_TASKS)[0]; index:
 const TaskTableView = () => {
   return (
     

-      

+      

         
diff --git a/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
index 898a40a5..5e012019 100644
--- a/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
@@ -1,4 +1,5 @@
 import { Code, Database, FileText, Flame, Globe, Key, Monitor, Moon, Palette, Settings } from "lucide-react";
+import { useId } from "react";
 import { CollapsibleSettingsCard } from "@/components/ui/CollapsibleSettingsCard";
 import { Card } from "@/features/ui/primitives/card";
 import { Input } from "@/features/ui/primitives/input";
@@ -6,6 +7,17 @@ import { Label } from "@/features/ui/primitives/label";
 import { Switch } from "@/features/ui/primitives/switch";
 
 export const SettingsLayoutExample = () => {
+  const openaiKeyId = useId();
+  const googleKeyId = useId();
+  const dbUrlId = useId();
+  const autoBackupId = useId();
+  const extractCodeId = useId();
+  const maxExamplesId = useId();
+  const matchCountId = useId();
+  const rerankId = useId();
+  const maxDepthId = useId();
+  const followLinksId = useId();
+
   return (
     

       {/* Explanation Text */}
@@ -84,11 +96,11 @@ export const SettingsLayoutExample = () => {
             

             

               

-                

               

-