feat: add keyboard navigation and visual selection for clipboard history

Author: mberrishdev

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.0.6] - 2024-12-14
+
+### Added
+- Keyboard navigation for clipboard history
+  - ↑/↓ arrows to navigate items
+  - Enter or C to copy selected item
+  - / to focus search input
+  - Escape to unfocus search
+- Visual highlight for selected item
+- Keyboard hints in search bar
+- Release script for easier publishing
+
 ## [0.0.5] - 2024-12-14
 
 ### Added

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "clipai",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Modern clipboard history manager powered by AI",
   "author": "Mikheil Berishvili",
   "main": "dist/main/main.js",
@@ -20,7 +20,8 @@
     "package": "bun run build && electron-builder",
     "package:all": "bun run build && electron-builder --mac --win",
     "package:dir": "bun run build && electron-builder --dir",
-    "rebuild": "electron-rebuild"
+    "rebuild": "electron-rebuild",
+    "release": "npm version patch --no-git-tag-version"
   },
   "build": {
     "appId": "com.clipai.app",

package.json

@@ -33,6 +33,19 @@
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
 
+/* Selected state */
+.history-item--selected {
+  background: rgba(99, 102, 241, 0.15);
+  border-color: rgba(99, 102, 241, 0.4);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3),
+              0 8px 32px rgba(99, 102, 241, 0.1);
+}
+
+.history-item--selected .item-number {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  color: white;
+}
+
 @keyframes itemSlideIn {
   from {
     opacity: 0;

src/renderer/components/ClipboardItem.css

@@ -18,6 +18,8 @@ interface ClipboardItemProps {
     timestamp: number;
   };
   index: number;
+  isSelected?: boolean;
+  onSelect?: () => void;
 }
 
 function formatTimestamp(timestamp: number): string {
@@ -35,7 +37,7 @@ function formatTimestamp(timestamp: number): string {
   return new Date(timestamp).toLocaleDateString();
 }
 
-export default function HistoryItemCard({ item, index }: ClipboardItemProps) {
+export default function HistoryItemCard({ item, index, isSelected, onSelect }: ClipboardItemProps) {
   const [detected, setDetected] = useState<DetectedContent | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -81,7 +83,11 @@ export default function HistoryItemCard({ item, index }: ClipboardItemProps) {
 
   if (item.type === "image") {
     return (
-      <div className="history-item">
+      <div 
+        className={`history-item ${isSelected ? 'history-item--selected' : ''}`}
+        data-index={index}
+        onClick={onSelect}
+      >
         <div className="item-number">{index + 1}</div>
         <div className="item-content">
           <div className="item-header">
@@ -123,7 +129,11 @@ export default function HistoryItemCard({ item, index }: ClipboardItemProps) {
       : detected.formatted);
 
   return (
-    <div className="history-item">
+    <div 
+      className={`history-item ${isSelected ? 'history-item--selected' : ''}`}
+      data-index={index}
+      onClick={onSelect}
+    >
       <div className="item-number">{index + 1}</div>
       <div className="item-content">
         <div className="item-header">

src/renderer/components/ClipboardItem.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import type { ClipboardItem as ClipboardItemType } from "../../models/ClipboardItem";
 import HistoryItemCard from "../components/ClipboardItem";
 import "./ClipboardHistory.css";
@@ -11,6 +11,9 @@ export default function ClipboardHistory({}: ClipboardHistoryProps) {
   const [hasMore, setHasMore] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
   const [hasApiKey, setHasApiKey] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   const performSearch = async () => {
     console.log("Search triggered for:", searchQuery);
@@ -43,6 +46,74 @@ export default function ClipboardHistory({}: ClipboardHistoryProps) {
     }
   };
 
+  const copySelectedItem = useCallback(async () => {
+    const item = history[selectedIndex];
+    if (!item) return;
+    
+    if (item.type === "text" && item.text) {
+      await navigator.clipboard.writeText(item.text);
+    } else if (item.type === "image" && item.image) {
+      const response = await fetch(item.image);
+      const blob = await response.blob();
+      await navigator.clipboard.write([
+        new (window as any).ClipboardItem({ [blob.type]: blob }),
+      ]);
+    }
+  }, [history, selectedIndex]);
+
+  // Global keyboard navigation
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      // Don't handle if typing in search input
+      if (document.activeElement === searchInputRef.current && e.key !== "Escape" && e.key !== "ArrowDown" && e.key !== "ArrowUp") {
+        return;
+      }
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.min(prev + 1, history.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+        case "c":
+        case "C":
+          if (document.activeElement !== searchInputRef.current) {
+            e.preventDefault();
+            copySelectedItem();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          searchInputRef.current?.blur();
+          break;
+        case "/":
+          if (document.activeElement !== searchInputRef.current) {
+            e.preventDefault();
+            searchInputRef.current?.focus();
+          }
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+  }, [history.length, copySelectedItem]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
+    selectedElement?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [selectedIndex]);
+
+  // Reset selection when history changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [history.length]);
+
   useEffect(() => {
     window.electronAPI.getClipboardHistory().then((items) => {
       console.log(`Initial history loaded: ${items.length} items`);
@@ -120,11 +191,12 @@ export default function ClipboardHistory({}: ClipboardHistoryProps) {
               />
             </svg>
             <input
+              ref={searchInputRef}
               type="text"
               className="search-input"
               placeholder={
                 hasApiKey
-                  ? "Search with AI..."
+                  ? "Search with AI... (press / to focus)"
                   : "Configure OpenAI API key in settings..."
               }
               value={searchQuery}
@@ -156,7 +228,7 @@ export default function ClipboardHistory({}: ClipboardHistoryProps) {
             )}
           </div>
           {hasApiKey ? (
-            <p className="search-hint">Press Enter to search</p>
+            <p className="search-hint">Press Enter to search • ↑↓ Navigate • Enter/C to copy • / to search</p>
           ) : (
             <p className="search-warning">
               OpenAI API key required. Configure in Settings to enable semantic
@@ -172,12 +244,14 @@ export default function ClipboardHistory({}: ClipboardHistoryProps) {
             </div>
           ) : (
             <>
-              <div className="history-list">
+              <div className="history-list" ref={listRef}>
                 {history.map((item, index) => (
                   <HistoryItemCard
                     key={item.id || index}
                     item={item}
                     index={index}
+                    isSelected={index === selectedIndex}
+                    onSelect={() => setSelectedIndex(index)}
                   />
                 ))}
               </div>