From 5b4c24e7371eb78dcfe5b7606d870dc14be38f17 Mon Sep 17 00:00:00 2001 From: Damjan Savic Date: Sun, 25 Jan 2026 06:32:13 +0100 Subject: [PATCH] auto-claude: subtask-1-1 - Add focusedIndex state and arrow key navigation logic - Added focusedIndex state to track keyboard focus - Enhanced handleKeyDown to support ArrowDown, ArrowUp, Enter, and Escape keys - Added visual focus indicator with orange ring (ring-2 ring-orange-500) - Implemented aria-activedescendant for screen reader support - Added unique IDs to language options for accessibility - Reset focusedIndex when dropdown opens/closes Co-Authored-By: Claude Sonnet 4.5 --- .auto-claude-security.json | 227 +++++++++++++++++++++ .auto-claude-status | 25 +++ .claude_settings.json | 39 ++++ .gitignore | 5 +- src/components/layout/LanguageSwitcher.tsx | 37 +++- 5 files changed, 327 insertions(+), 6 deletions(-) create mode 100644 .auto-claude-security.json create mode 100644 .auto-claude-status create mode 100644 .claude_settings.json diff --git a/.auto-claude-security.json b/.auto-claude-security.json new file mode 100644 index 0000000..eed60a2 --- /dev/null +++ b/.auto-claude-security.json @@ -0,0 +1,227 @@ +{ + "base_commands": [ + ".", + "[", + "[[", + "ag", + "awk", + "basename", + "bash", + "bc", + "break", + "cat", + "cd", + "chmod", + "clear", + "cmp", + "column", + "comm", + "command", + "continue", + "cp", + "curl", + "cut", + "date", + "df", + "diff", + "dig", + "dirname", + "du", + "echo", + "egrep", + "env", + "eval", + "exec", + "exit", + "expand", + "export", + "expr", + "false", + "fd", + "fgrep", + "file", + "find", + "fmt", + "fold", + "gawk", + "gh", + "git", + "grep", + "gunzip", + "gzip", + "head", + "help", + "host", + "iconv", + "id", + "jobs", + "join", + "jq", + "kill", + "killall", + "less", + "let", + "ln", + "ls", + "lsof", + "man", + "mkdir", + "mktemp", + "more", + "mv", + "nl", + "paste", + "pgrep", + "ping", + "pkill", + "popd", + "printenv", + "printf", + "ps", + "pushd", + "pwd", + "read", + "readlink", + "realpath", + "reset", + "return", + "rev", + "rg", + "rm", + "rmdir", + "sed", + "seq", + "set", + "sh", + "shuf", + "sleep", + "sort", + "source", + "split", + "stat", + "tail", + "tar", + "tee", + "test", + "time", + "timeout", + "touch", + "tr", + "tree", + "true", + "type", + "uname", + "unexpand", + "uniq", + "unset", + "unzip", + "watch", + "wc", + "wget", + "whereis", + "which", + "whoami", + "xargs", + "yes", + "yq", + "zip", + "zsh" + ], + "stack_commands": [ + "ar", + "clang", + "clang++", + "cmake", + "composer", + "dive", + "docker", + "docker-buildx", + "docker-compose", + "dockerfile", + "eslint", + "g++", + "gcc", + "ipython", + "jupyter", + "ld", + "make", + "meson", + "next", + "ninja", + "nm", + "node", + "notebook", + "npm", + "npx", + "objdump", + "pdb", + "php", + "pip", + "pip3", + "pipx", + "pnpm", + "pnpx", + "pudb", + "python", + "python3", + "react-scripts", + "strip", + "ts-node", + "tsc", + "tsx", + "vitest" + ], + "script_commands": [ + "bun", + "npm", + "pnpm", + "yarn" + ], + "custom_commands": [], + "detected_stack": { + "languages": [ + "python", + "javascript", + "typescript", + "php", + "c" + ], + "package_managers": [ + "pnpm" + ], + "frameworks": [ + "nextjs", + "react", + "vitest", + "eslint" + ], + "databases": [], + "infrastructure": [ + "docker" + ], + "cloud_providers": [], + "code_quality_tools": [], + "version_managers": [] + }, + "custom_scripts": { + "npm_scripts": [ + "dev", + "build", + "start", + "lint", + "build:images", + "generate:images", + "generate:images:dry", + "test", + "test:coverage" + ], + "make_targets": [], + "poetry_scripts": [], + "cargo_aliases": [], + "shell_scripts": [] + }, + "project_dir": "C:\\Users\\damja\\WebstormProjects\\Portfolio", + "created_at": "2026-01-22T15:28:38.237190", + "project_hash": "c4ad399e16be367eb4e6b076fe1d9ee3", + "inherited_from": "C:\\Users\\damja\\WebstormProjects\\Portfolio" +} \ No newline at end of file diff --git a/.auto-claude-status b/.auto-claude-status new file mode 100644 index 0000000..897d752 --- /dev/null +++ b/.auto-claude-status @@ -0,0 +1,25 @@ +{ + "active": true, + "spec": "011-languageswitcher-arrow-key-navigation", + "state": "planning", + "subtasks": { + "completed": 0, + "total": 0, + "in_progress": 1, + "failed": 0 + }, + "phase": { + "current": "Add Arrow Key Navigation", + "id": null, + "total": 1 + }, + "workers": { + "active": 0, + "max": 1 + }, + "session": { + "number": 2, + "started_at": "2026-01-25T06:26:06.270781" + }, + "last_update": "2026-01-25T06:29:49.299484" +} \ No newline at end of file diff --git a/.claude_settings.json b/.claude_settings.json new file mode 100644 index 0000000..b69525f --- /dev/null +++ b/.claude_settings.json @@ -0,0 +1,39 @@ +{ + "sandbox": { + "enabled": true, + "autoAllowBashIfSandboxed": true + }, + "permissions": { + "defaultMode": "acceptEdits", + "allow": [ + "Read(./**)", + "Write(./**)", + "Edit(./**)", + "Glob(./**)", + "Grep(./**)", + "Read(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation/**)", + "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation/**)", + "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation/**)", + "Glob(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation/**)", + "Grep(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation/**)", + "Read(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation\\.auto-claude\\specs\\011-languageswitcher-arrow-key-navigation/**)", + "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation\\.auto-claude\\specs\\011-languageswitcher-arrow-key-navigation/**)", + "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\011-languageswitcher-arrow-key-navigation\\.auto-claude\\specs\\011-languageswitcher-arrow-key-navigation/**)", + "Read(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)", + "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)", + "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)", + "Glob(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)", + "Grep(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)", + "Bash(*)", + "WebFetch(*)", + "WebSearch(*)", + "mcp__context7__resolve-library-id(*)", + "mcp__context7__get-library-docs(*)", + "mcp__graphiti-memory__search_nodes(*)", + "mcp__graphiti-memory__search_facts(*)", + "mcp__graphiti-memory__add_episode(*)", + "mcp__graphiti-memory__get_episodes(*)", + "mcp__graphiti-memory__get_entity_edge(*)" + ] + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index a484ab2..fa65296 100644 --- a/.gitignore +++ b/.gitignore @@ -81,4 +81,7 @@ supabase/.temp/ .history/ # Source images (originals before optimization) -source-images/ \ No newline at end of file +source-images/ + +# Auto Claude data directory +.auto-claude/ diff --git a/src/components/layout/LanguageSwitcher.tsx b/src/components/layout/LanguageSwitcher.tsx index f776dce..437f6ef 100644 --- a/src/components/layout/LanguageSwitcher.tsx +++ b/src/components/layout/LanguageSwitcher.tsx @@ -11,6 +11,7 @@ const LanguageSwitcher = () => { const pathname = usePathname(); const [isOpen, setIsOpen] = useState(false); const [isMobile, setIsMobile] = useState(false); + const [focusedIndex, setFocusedIndex] = useState(-1); const dropdownRef = useRef(null); const languages = [ @@ -30,8 +31,28 @@ const LanguageSwitcher = () => { }; const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === 'Escape') { - setIsOpen(false); + if (!isOpen) return; + + switch (e.key) { + case 'Escape': + setIsOpen(false); + setFocusedIndex(-1); + break; + case 'ArrowDown': + e.preventDefault(); + setFocusedIndex(prev => (prev + 1) % languages.length); + break; + case 'ArrowUp': + e.preventDefault(); + setFocusedIndex(prev => (prev - 1 + languages.length) % languages.length); + break; + case 'Enter': + e.preventDefault(); + if (focusedIndex >= 0) { + handleLanguageChange(languages[focusedIndex].code); + setFocusedIndex(-1); + } + break; } }; @@ -63,7 +84,10 @@ const LanguageSwitcher = () => { px-4 py-2 rounded-full transition-all duration-200 hover:bg-zinc-800/50 border border-transparent hover:border-zinc-800 hover:scale-105 active:scale-95" - onClick={() => setIsOpen(!isOpen)} + onClick={() => { + setIsOpen(!isOpen); + setFocusedIndex(-1); + }} aria-expanded={isOpen} aria-haspopup="listbox" aria-label="Select language" @@ -79,18 +103,21 @@ const LanguageSwitcher = () => { ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`} role="listbox" aria-label="Languages" + aria-activedescendant={focusedIndex >= 0 ? `lang-option-${languages[focusedIndex].code}` : undefined} onKeyDown={handleKeyDown} >
- {languages.map((lang) => ( + {languages.map((lang, index) => (