@imjp/writenex-astro 0.1.0

package/src/client/components/SelectCollectionModal/SelectCollectionModal.css

@@ -0,0 +1,308 @@
+/**
+ * @fileoverview SelectCollectionModal styles
+ *
+ * Modal styling for collection selection dialog.
+ */
+
+/* ============================================================================
+   MODAL OVERLAY
+   ============================================================================ */
+
+.wn-select-collection-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wn-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--wn-backdrop);
+  animation: wn-select-collection-fadeIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes wn-select-collection-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ============================================================================
+   MODAL CONTAINER
+   ============================================================================ */
+
+.wn-select-collection-modal {
+  width: 100%;
+  max-width: var(--wn-modal-sm);
+  max-height: 80vh;
+  overflow: hidden;
+  border-radius: var(--wn-radius-lg);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-900);
+  display: flex;
+  flex-direction: column;
+  animation: wn-select-collection-zoomIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes wn-select-collection-zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* ============================================================================
+   MODAL HEADER
+   ============================================================================ */
+
+.wn-select-collection-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-5) var(--wn-space-6);
+  border-bottom: 1px solid var(--wn-zinc-700);
+  flex-shrink: 0;
+}
+
+.wn-select-collection-header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-4);
+}
+
+.wn-select-collection-icon {
+  color: var(--wn-brand-500);
+}
+
+.wn-select-collection-title {
+  font-size: var(--wn-font-md);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+  margin: 0;
+}
+
+.wn-select-collection-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  border: none;
+  border-radius: var(--wn-radius-md);
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-select-collection-close:hover {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-50);
+}
+
+/* ============================================================================
+   MODAL BODY
+   ============================================================================ */
+
+.wn-select-collection-body {
+  padding: var(--wn-space-5) var(--wn-space-6);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.wn-select-collection-hint {
+  font-size: var(--wn-font-base);
+  color: var(--wn-zinc-500);
+  margin: 0 0 var(--wn-space-5) 0;
+}
+
+/* Collection list */
+.wn-select-collection-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+}
+
+.wn-select-collection-item {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-4);
+  width: 100%;
+  padding: var(--wn-space-4) var(--wn-space-5);
+  border-radius: var(--wn-radius-md);
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  font-size: var(--wn-font-base);
+  text-align: left;
+  cursor: pointer;
+  transition: all var(--wn-transition-fast) ease;
+}
+
+.wn-select-collection-item:hover {
+  background-color: var(--wn-overlay-5);
+  color: var(--wn-zinc-50);
+}
+
+.wn-select-collection-item--focused {
+  background-color: var(--wn-brand-alpha-10);
+  border-color: var(--wn-brand-alpha-30);
+  color: var(--wn-brand-400);
+}
+
+.wn-select-collection-item-name {
+  flex: 1;
+  font-weight: 500;
+}
+
+.wn-select-collection-item-count {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-500);
+}
+
+.wn-select-collection-item--focused .wn-select-collection-item-count {
+  color: var(--wn-brand-400);
+  opacity: 0.7;
+}
+
+.wn-select-collection-item-arrow {
+  opacity: 0;
+  transition: opacity var(--wn-transition-fast);
+}
+
+.wn-select-collection-item:hover .wn-select-collection-item-arrow,
+.wn-select-collection-item--focused .wn-select-collection-item-arrow {
+  opacity: 1;
+}
+
+/* Loading & Empty states */
+.wn-select-collection-loading,
+.wn-select-collection-empty {
+  padding: var(--wn-space-8);
+  text-align: center;
+  font-size: var(--wn-font-base);
+  color: var(--wn-zinc-500);
+}
+
+/* ============================================================================
+   MODAL FOOTER
+   ============================================================================ */
+
+.wn-select-collection-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-7);
+  padding: var(--wn-space-4) var(--wn-space-6);
+  border-top: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-overlay-light-10);
+  flex-shrink: 0;
+}
+
+.wn-select-collection-shortcut {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-1);
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-500);
+}
+
+.wn-select-collection-shortcut kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.125rem;
+  padding: 0 var(--wn-space-1);
+  background-color: var(--wn-zinc-800);
+  border: 1px solid var(--wn-zinc-700);
+  border-radius: var(--wn-radius-sm);
+  font-family: inherit;
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  color: var(--wn-zinc-400);
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-select-collection-overlay {
+  background-color: var(--wn-backdrop-light);
+}
+
+.wn-light .wn-select-collection-modal {
+  border-color: var(--wn-zinc-200);
+  background-color: #fff;
+}
+
+.wn-light .wn-select-collection-header {
+  border-bottom-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-select-collection-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-select-collection-close {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-select-collection-close:hover {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-select-collection-hint {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-select-collection-item {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-select-collection-item:hover {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-select-collection-item--focused {
+  background-color: var(--wn-brand-alpha-10);
+  border-color: var(--wn-brand-alpha-30);
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-select-collection-item-count {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-select-collection-item--focused .wn-select-collection-item-count {
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-select-collection-loading,
+.wn-light .wn-select-collection-empty {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-select-collection-footer {
+  border-top-color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-50);
+}
+
+.wn-light .wn-select-collection-shortcut kbd {
+  background-color: #fff;
+  border-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-600);
+}

package/src/client/components/SelectCollectionModal/SelectCollectionModal.tsx

@@ -0,0 +1,223 @@
+/**
+ * @fileoverview Select collection modal component
+ *
+ * Modal dialog for selecting a collection when creating new content
+ * without a pre-selected collection. Triggered by Alt+N shortcut.
+ *
+ * @module @writenex/astro/client/components/SelectCollectionModal
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { X, Folder, ChevronRight } from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import type { Collection } from "../../hooks/useApi";
+import "./SelectCollectionModal.css";
+
+/**
+ * Props for SelectCollectionModal component
+ */
+interface SelectCollectionModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Callback to close the modal */
+  onClose: () => void;
+  /** Callback when a collection is selected */
+  onSelect: (collectionName: string) => void;
+  /** Available collections */
+  collections: Collection[];
+  /** Whether collections are loading */
+  isLoading?: boolean;
+}
+
+/**
+ * Modal dialog for selecting a collection
+ *
+ * @component
+ */
+export function SelectCollectionModal({
+  isOpen,
+  onClose,
+  onSelect,
+  collections,
+  isLoading = false,
+}: SelectCollectionModalProps): React.ReactElement | null {
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const listRef = useRef<HTMLUListElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  // Store the trigger element when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      triggerRef.current = document.activeElement as HTMLElement;
+      setFocusedIndex(0);
+    }
+  }, [isOpen]);
+
+  // Focus trap for accessibility
+  const { containerRef } = useFocusTrap({
+    enabled: isOpen,
+    onEscape: onClose,
+    returnFocusTo: triggerRef.current,
+  });
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen || collections.length === 0) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) =>
+            prev < collections.length - 1 ? prev + 1 : 0
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) =>
+            prev > 0 ? prev - 1 : collections.length - 1
+          );
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (collections[focusedIndex]) {
+            onSelect(collections[focusedIndex].name);
+          }
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, collections, focusedIndex, onSelect]);
+
+  // Scroll focused item into view
+  useEffect(() => {
+    if (listRef.current && collections.length > 0) {
+      const focusedItem = listRef.current.children[focusedIndex] as HTMLElement;
+      focusedItem?.scrollIntoView({ block: "nearest" });
+    }
+  }, [focusedIndex, collections.length]);
+
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  const handleItemClick = useCallback(
+    (collectionName: string) => {
+      onSelect(collectionName);
+    },
+    [onSelect]
+  );
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="wn-select-collection-overlay"
+      onClick={handleOverlayClick}
+      role="presentation"
+    >
+      <div
+        ref={containerRef}
+        className="wn-select-collection-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="select-collection-title"
+      >
+        {/* Header */}
+        <div className="wn-select-collection-header">
+          <div className="wn-select-collection-header-content">
+            <Folder size={18} className="wn-select-collection-icon" />
+            <h2
+              id="select-collection-title"
+              className="wn-select-collection-title"
+            >
+              Select Collection
+            </h2>
+          </div>
+          <button
+            className="wn-select-collection-close"
+            onClick={onClose}
+            title="Close (Esc)"
+            aria-label="Close modal"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="wn-select-collection-body">
+          <p className="wn-select-collection-hint">
+            Choose a collection to create new content in:
+          </p>
+
+          {isLoading ? (
+            <div className="wn-select-collection-loading">
+              Loading collections...
+            </div>
+          ) : collections.length === 0 ? (
+            <div className="wn-select-collection-empty">
+              No collections found
+            </div>
+          ) : (
+            <ul
+              ref={listRef}
+              className="wn-select-collection-list"
+              role="listbox"
+              aria-label="Collections"
+            >
+              {collections.map((collection, index) => (
+                <li
+                  key={collection.name}
+                  role="option"
+                  aria-selected={index === focusedIndex}
+                >
+                  <button
+                    className={`wn-select-collection-item ${
+                      index === focusedIndex
+                        ? "wn-select-collection-item--focused"
+                        : ""
+                    }`}
+                    onClick={() => handleItemClick(collection.name)}
+                    tabIndex={index === focusedIndex ? 0 : -1}
+                  >
+                    <Folder size={16} />
+                    <span className="wn-select-collection-item-name">
+                      {collection.name}
+                    </span>
+                    <span className="wn-select-collection-item-count">
+                      {collection.count} items
+                    </span>
+                    <ChevronRight
+                      size={14}
+                      className="wn-select-collection-item-arrow"
+                    />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* Footer hint */}
+        <div className="wn-select-collection-footer">
+          <span className="wn-select-collection-shortcut">
+            <kbd>↑</kbd> <kbd>↓</kbd> Navigate
+          </span>
+          <span className="wn-select-collection-shortcut">
+            <kbd>Enter</kbd> Select
+          </span>
+          <span className="wn-select-collection-shortcut">
+            <kbd>Esc</kbd> Cancel
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/SelectCollectionModal/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview SelectCollectionModal component exports
+ *
+ * @module @writenex/astro/client/components/SelectCollectionModal
+ */
+
+export { SelectCollectionModal } from "./SelectCollectionModal";