auto-claude: subtask-1-3 - Create useIntersectionObserver hook for element vi

2026-01-25 06:26:31 +01:00
parent 77ceae5b9f
commit 2b096416a0
5 changed files with 340 additions and 1 deletions
@@ -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"
+}
@@ -0,0 +1,25 @@
+{
+  "active": true,
+  "spec": "026-pause-background-animations-when-not-visible",
+  "state": "building",
+  "subtasks": {
+    "completed": 2,
+    "total": 6,
+    "in_progress": 1,
+    "failed": 0
+  },
+  "phase": {
+    "current": "Create Utility Functions and Hooks",
+    "id": null,
+    "total": 3
+  },
+  "workers": {
+    "active": 0,
+    "max": 1
+  },
+  "session": {
+    "number": 4,
+    "started_at": "2026-01-25T06:18:19.433683"
+  },
+  "last_update": "2026-01-25T06:25:37.855493"
+}
@@ -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\\026-pause-background-animations-when-not-visible/**)",
+      "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\026-pause-background-animations-when-not-visible/**)",
+      "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\026-pause-background-animations-when-not-visible/**)",
+      "Glob(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\026-pause-background-animations-when-not-visible/**)",
+      "Grep(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\026-pause-background-animations-when-not-visible/**)",
+      "Read(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\026-pause-background-animations-when-not-visible\\.auto-claude\\specs\\026-pause-background-animations-when-not-visible/**)",
+      "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\026-pause-background-animations-when-not-visible\\.auto-claude\\specs\\026-pause-background-animations-when-not-visible/**)",
+      "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\026-pause-background-animations-when-not-visible\\.auto-claude\\specs\\026-pause-background-animations-when-not-visible/**)",
+      "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(*)"
+    ]
+  }
+}
@@ -82,3 +82,6 @@ supabase/.temp/

 # Source images (originals before optimization)
 source-images/
+
+# Auto Claude data directory
+.auto-claude/
@@ -0,0 +1,45 @@
+import { useState, useEffect, useRef, RefObject } from 'react';
+
+interface UseIntersectionObserverOptions {
+  threshold?: number | number[];
+  root?: Element | null;
+  rootMargin?: string;
+}
+
+/**
+ * Hook to detect when an element is visible in the viewport using IntersectionObserver
+ * @param options - IntersectionObserver options (threshold, root, rootMargin)
+ * @returns Object containing ref to attach to element and isIntersecting state
+ */
+export const useIntersectionObserver = <T extends HTMLElement = HTMLDivElement>(
+  options: UseIntersectionObserverOptions = {}
+): { ref: RefObject<T>; isIntersecting: boolean } => {
+  const { threshold = 0.5, root = null, rootMargin = '0px' } = options;
+  const [isIntersecting, setIsIntersecting] = useState<boolean>(false);
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+      },
+      {
+        threshold,
+        root,
+        rootMargin,
+      }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [threshold, root, rootMargin]);
+
+  return { ref, isIntersecting };
+};