feat: initial Gridline implementation (#1)
* chore: configure Tailwind, Vitest, Rust deps, dialog plugin (Task 1)
* feat: shared types and validation/filter utilities (Task 2)
* feat: Rust models, SQLite store, and migrations (Task 3)
* feat: Tauri commands for connections and folders (Task 4)
* feat: tag, settings, import/export Tauri commands (Task 5)
* feat: frontend command wrappers and Zustand stores (Task 6)
* feat: useSearch debounce and useFilteredConnections hooks (Task 7)
* feat: App view router with load-on-mount (Task 8)
* feat: UI primitives Button, Input, Badge, Card (Task 9)
* feat: SearchBar, ActionRow, ImportExportMenu (Task 10)
* feat: ConnectionCard, ConnectionGrid, TagBadge (Task 11)
* fix: resolve TypeScript errors across utils, Input, and test files
* feat: FolderTree, CreateFolderDialog, NewConnectionForm, SettingsPage, HomeScreen (Task 12)
* feat: Tauri file dialog integration for import/export (Task 13)
* feat: error/loading states and full App router integration (Task 14)
* chore: final integration gate — full test + build green (Task 15)
* fix: move folders inline, rearrange ActionRow layout, add borders to buttons
* feat: upgrade to Tailwind v4, apply new color palette
* Landing page restyle, folder explorer, selection/delete, and icon update
- Black-and-white color scheme with blue accent
- Glassmorphic New Folder modal with auto-parent
- Nested folder explorer with breadcrumb navigation
- Folder/connection selection with hover checkboxes
- Select All / Clear Selection / Delete dropdown
- Delete reparents children to parent folder
- Fixed Rust serde camelCase mismatch (models now use snake_case)
- Updated app icons from Apple Icon Composer exports
- Search bar with ⌘K badge
- Button styling: rounded pills, borders, cursor-pointer
- Prevent drag selection across app
* Tag system, folder edit/delete, searchable tag picker, delete confirmation, tag reordering
- Added folder_tags table for folder-tag associations
- Tags now show configured colors on folder and connection cards
- Searchable tag picker with text filtering in New/Edit Folder dialogs
- Edit Folder dialog with name and tag management
- Edit/Delete buttons next to breadcrumb with icons
- Delete confirmation dialog with reparenting notice
- Tag reordering in Settings with up/down buttons, persisted via tag_order setting
- useSortedTags hook for consistent tag ordering
- Cmd+K focuses search input
- Selection dropdown simplified to Select All/Clear/Delete
- Click-outside closes all dropdowns
- cursor-pointer on all interactables
* deps: install motion for animations
* feat(types): add system theme option
* feat(settings): default stored theme to system
* feat(ui): add Toggle primitive
* feat(ui): add Select primitive
* feat(ui): add SettingsRow and SettingsSection primitives
* fix(ui): improve SettingsRow and SettingsSection quality
* feat(ui): add ThemePicker primitive
* feat(ui): add AnimatedModal primitive with motion
* refactor(dialogs): use AnimatedModal for enter/exit animations
* fix(dialogs): ensure exit animations and Escape handling work with AnimatedModal
* feat(settings): redesign page with multi-section layout
* refactor(settings): split tabs, improve accessibility and animation
* fix(tauri): set window background color to dark canvas
* fix(settings): remove fake traffic lights, add header background, transparent title bar
* fix(settings): move Back into sidebar, add Settings heading, dynamic window title
* fix(tauri): show native window title so Home/Settings labels are visible
* fix(ui): disable overscroll on both axes
* test(dialogs): verify CreateFolderDialog shows and saves tags
* chore: ignore .worktrees directory
* refactor: centralize db type icons and labels
* feat: add connection string parser and detection
* test: add edge cases for connection string parser
* fix: preserve absolute paths in SQLite connection strings
* types: add new connection form fields
* feat: add folder path label helper
* test: cover missing folder in path label helper
* feat: add stub connection string parse and test commands
* feat: add stub test connection command
* feat: add new connection form primitives
* feat: add connection form shell
* feat: add shared form type and simple connection form
* fix: keep SimpleConnectionForm fully controlled
* style: format and tighten types for simple connection form
* feat: add detailed connection form
* fix: export DetailedConnectionFormProps and assert port update
* feat: add new connection screen container
* fix: clean up useEffect dependencies in new connection screen
* fix: address quality feedback on new connection screen
* feat: wire new connection screen into app and remove old form
* feat: open new connection screen from pasted db url in search
* test: add home search URL shortcut integration test
* refactor: replace FolderSelect and EnvironmentSelect with shared SelectDropdown
Add a reusable SelectDropdown component that keeps the select-styled
trigger while using the ActionRow-style popover menu. Update both
FolderSelect and EnvironmentSelect to use it.
* refactor: remove db type icon and label from connection form shell
Drop DbTypeHeader and the db_type prop from ConnectionFormShell so the
form header no longer displays the database icon/type. Update
NewConnectionScreen and its test accordingly.
* feat: home screen redesign and connection form updates
- Redesign HomeScreen layout and settings page
- Update connection card, grid, and simple form
- Replace selects with SelectDropdown component
- Remove DbTypeHeader from connection form
- Fix tests to match updated components
* fix: hide folders during search, update placeholder, and set window titles
- ConnectionGrid now hides folders when hasSearch is true so only
matching connections are shown.
- SearchBar placeholder now mentions typing a database URL to create
a new connection.
- App window titles set to Gridline (home), Settings, and New Connection.
* fix: shorter placeholder, dynamic window title, and startup flash
- Shorten SearchBar placeholder to mention DB URL creation concisely.
- Add core:window:allow-set-title permission and set document.title so
the window title updates per view (Gridline, Settings, New Connection).
- Add inline dark background style to index.html to prevent white flash
before CSS loads.
* feat: extend connection models with SSH/SSL/database fields, add db_viewer models (Task 1a)
* feat: extend frontend types with SSH/SSL fields and DB viewer types (Task 1b)
* feat: migrate connections table with SSH/SSL columns (Task 1c)
* chore: add new Rust dependencies (tokio, sqlx, redis, ssh2, indexmap, etc.) for Phase 2
* feat: connection pool manager with LRU eviction (Task 2a)
* feat: schema introspection query builders for PG, MySQL, SQLite (Task 2b)
* feat: test connection command (all 4 DB types) and SSH tunnel manager (Task 2c)
* feat: db viewer Rust commands and AppState refactor (Task 2d)
* feat: frontend command wrappers for DB viewer and updated validation (Task 3a)
* feat: dbViewer store with tabs, changes queue, pagination; uiStore activeConnectionId (Task 3b)
* feat: ConnectionCard navigates to DB Viewer, App routes to DbViewerScreen (Task 3c)
* feat: tooltip UI primitive (Task 4a)
* feat: SSH/SSL form tabs in DetailedConnectionForm (Task 4b)
* feat: DbViewerScreen shell with sidebar navigation (Task 4c)
* feat: toolbar, table tree, and overflow menu (Task 4d)
* fix: align TableInfo interface between frontend types and test files
* feat: tab bar, data grid, and pagination controls (Task 4e)
* feat: changes queue panel with cancel per change (Task 4f)
* feat: wire real IPC connect/disconnect/load in DbViewerScreen (Task 5a)
* feat: error banner, guard dialogs for destructive actions (Task 5b)
* feat: changes queue commit all with per-change IPC and error handling (Task 5c)
* chore: suppress expected dead-code warnings during multi-phase development
* fix: wire ConnectionCard click through to DB Viewer (HomeScreen -> ConnectionGrid -> ConnectionCard -> App route)
* fix: click connection opens DB viewer when nothing selected, toggles selection when items already selected; fix delete connections + generic confirm message
* fix: align ConnectionTestResult field name (ok vs success) and fix testConnection invoke param name (input vs config) to match Rust backend
* feat: implement DB Viewer Tauri commands (db_connect, get_databases, etc.)
* fix: align DB viewer IPC param names (snake_case), implement execute_change + refresh_connection, snake_case Change enum tags
* fix: use camelCase IPC keys for multi-word Tauri command params (Tauri v2 converts snake_case Rust -> camelCase)
* fix: surface full postgres error detail and redact credentials instead of opaque 'db error'; URL-encode pg connection strings
* fix: cache passwords per-session so saved connections can auto-connect; surface full postgres error detail
* fix: auto-fetch table data, full-row click, fill viewport, load columns on expand, database switching
* fix: align ColumnInfo/QueryResult types with Rust backend (columns=ColumnInfo[], rows=unknown[][], field names match)
* feat: truncate cell text, resizable columns with drag handles, tab bar no-wrap horizontal scroll
* fix: QueryResult uses total_rows/page/page_size (match Rust), brighter table borders, pagination NaN fix
* fix: table horizontal scrolling, viewport fills screen height (h-screen), remove clipping overflow-hidden
* fix: constrain layout to viewport with overflow-hidden on content column; flex-1 fills height; sidebar+grid scroll independently
* fix: move overflow-hidden down to grid wrapper so DataGrid scrollbars surface properly
* fix: add min-w-0 to DataGrid wrapper so flexbox allows shrinking for horizontal scroll
* fix: add overflow-hidden to flex row and right column to clip at viewport, DataGrid scrolls inside
* fix: use w-0 on right column to force width:0 flex-basis, preventing any content-based expansion
* fix: overscroll-contain on DataGrid and TableTree scroll areas to prevent bounce
* fix: inline overscroll-behavior:none + WebkitOverflowScrolling:auto for reliable macOS bounce prevention
* feat: page-size selector (50/100/200) in pagination bar, setPageSize resets to page 1 and triggers re-fetch
* fix: column resize with refs, FK cell click opens table with filter, vertical borders, tooltip positioning (right/bottom), sidebar transparent bg
* fix: sidebar bg-canvas, remove overflow-hidden from toolbar parent so dropdown tooltips aren't clipped
* chore: rename sidebar label from DB Viewer to Explorer
* feat: resizable table panel (180-600px) with drag handle on right edge
* feat: double-click panel resize handle resets to default 280px
* feat: column visibility dropdown in filter bar, max column width 800px, double-click resets column width
* fix: enforce column width on th cells, remove min-width:100% so columns stay at set width instead of stretching
* fix: removable resize handle always clickable (remove opacity-0), maxWidth+overflow on th/td to prevent column blowout
* feat: add environment label to connections (production/staging/development) with badge on cards
* feat: OS keychain integration for connection passwords via tauri-plugin-keyring-store
* style: monospace font for table data cells
* style: use Space Mono (font-heading) for table data cells
* feat: unified table controls bar (insert, refresh, auto-refresh, filter modal, sort modal, export, columns, pagination); fix pagination setPage not clearing data
* fix: auto-refresh defaults to off, click opens dropdown to pick interval
* fix: pagination/refresh keeps existing data visible, shows subtle loading bar instead of blank
* fix: new tabs start with loading:true so auto-fetch triggers instead of stuck on 'loading table data'
* feat: checkbox column for row selection (header=all, row=individual, selected state tracks indices)
* feat: selected row count in toolbar with clear button
* feat: bulk actions dropdown on selection (Copy JSON, Copy CSV, Copy SQL INSERT, Delete rows)
* docs: add changes-queue-before-execution rule to AGENTS.md guardrails
* docs: broaden CRUD guardrail to cover all destructive operations (DB data via queue, app entities via confirm dialog)
* feat: auto-create demo SQLite DB on first launch with sample e-commerce schema (users, products, orders, order_items)
* fix: demo DB startup panic (state before manage), add settings: re-add demo, table refresh rate, table page size
* feat: Cmd+W closes tab or navigates home, edit connection modal with update_connection backend, action queue button with count badge and dropdown
* fix: columns button icon-only, wire settings.table_page_size and table_refresh_rate to actual table behavior
* feat: shortcuts settings tab showing all keyboard shortcuts (Cmd+K, Cmd+W, Esc, Enter, Space, click, header checkbox)
* feat: editable keyboard shortcuts - click pencil to record new keybinding, persisted to settings, useShortcut hook for dynamic binding
* feat: add Tags & Env tab to edit connection modal (environment, folder, tag picker)
* feat(db-viewer): UX polish - cursor pointers, icon-only toolbar, top border
- Add cursor-pointer to all interactive elements across db-viewer components
- Simplify TableControls: Filter/Sort/Export show icons only with tooltips
- Add border-t to DbViewerScreen for visual separation from window frame
* fix(db-viewer): style EditConnectionModal, fix test connection, working refresh button
- Match EditConnectionModal styling to home screen modals (AnimatedModal, Button, no dividers)
- Fix test connection sending null password by fetching from keychain first
- Make refresh database button functional with success/error visual feedback and spin animation
* feat(db-viewer): compact ghost-style DB/schema dropdowns in single row
- Add variant prop to SelectDropdown (pill | ghost) for minimal text-only style
- Place DB and schema dropdowns side-by-side on one row with | separator
* fix(db-viewer): proper FK/enum detection and improved schema tree display
Rust backend:
- PostgreSQL: fix column query to detect FKs (was hardcoded false) and map
USER-DEFINED types to udt_name for enum display
- SQLite: use PRAGMA table_info for types/PK/NOT NULL/defaults and
PRAGMA foreign_key_list for FK detection
Frontend:
- FK columns show orange key icon in TableTree
- Data type abbreviations (varchar, int, bool, timestamptz, etc.) with
full type name on hover tooltip
- Column icons use shrink-0 to maintain size
* feat(db-viewer): PK/FK icons and shorthand types in DataGrid headers
* fix(db-viewer): fix NULL values for UUID and timestamp columns, FK underline style
- Add uuid::Uuid, chrono types to pg_value_to_json chain so UUID PKs/FKs
and timestamp columns display correctly instead of NULL
- Enable with-serde_json-1 feature on tokio-postgres
- Change FK cell styling from blue text to dotted underline
* feat(db-viewer): FK preview popover with inline filter
- Replace direct FK navigation with popover showing the referenced row
- New get_fk_preview Rust command fetches single row by column value
- FkPreviewPopover component displays columns with PK/FK icons
- 'Open' button creates filtered tab, visible in existing Filter UI
- Consolidate columnFilter into filterRules (no duplicate filter logic)
* feat(db-viewer): selectable cell text, JSON/JSONB popover with formatted/raw views
- Add select-text to cell contents for copy support
- New JsonCellPopover component with Formatted/Raw tabs and copy button
- JSON/JSONB columns show brief preview ({ N keys } / [ N items ])
- Click JSON cells to open popover with pretty-printed or raw output
* feat(db-viewer): smart default sort adds newest-first sorting automatically
- 12-tier priority system detects recency/ordering columns
- Prefers updated_at, created_at, *_at suffixes, last_* prefixes
- Falls back to timestamp types, numeric IDs, sequence/position cols
- Also covers rank, version, count/quantity columns
- Applied once per tab, visible in Sort dropdown for manual override
* feat(db-viewer): search tables input with slide animation and tree filtering
- Search icon in toolbar toggles animated input with slide-down effect
- Filters TableTree by table name as user types
- Clean border-bottom styling, search icon on left, X clear on right
- Auto-hides on blur when empty, stays when content present
- Search icon highlights when active
* docs: add comprehensive implementation status to AGENTS.md
- Status matrix across 6 areas: connections, home, db viewer, object explorer, query editor, backup/restore, settings, onboarding
- Covers 60+ features with ✅/🟡/❌ markers and details
- Identifies remaining work: query editor, object explorer, virtualized grid, MySQL browsing, SSH tunnels, backup/restore
This commit is contained in:
GitHub
@@ -0,0 +1,85 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import "@testing-library/jest-dom";
|
||||
import { CreateFolderDialog } from "./CreateFolderDialog";
|
||||
|
||||
const folders = [
|
||||
{ id: "f1", name: "Work", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
|
||||
{ id: "f2", name: "Personal", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
|
||||
];
|
||||
|
||||
const sampleTags = [
|
||||
{ id: "t1", name: "Production", color: "#ef4444", created_at: "", updated_at: "" },
|
||||
{ id: "t2", name: "Staging", color: "#3b82f6", created_at: "", updated_at: "" },
|
||||
];
|
||||
|
||||
describe("CreateFolderDialog", () => {
|
||||
it("calls onCreate with name, parent, and tags", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<CreateFolderDialog open parentOptions={folders} tags={[]} onCreate={fn} onClose={() => {}} />);
|
||||
await user.type(screen.getByPlaceholderText(/folder name/i), "New Folder");
|
||||
await user.click(screen.getByText(/create/i));
|
||||
expect(fn).toHaveBeenCalledWith(expect.objectContaining({ name: "New Folder", parent_id: null, tag_ids: [] }));
|
||||
});
|
||||
|
||||
it("auto-sets parent to current folder", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<CreateFolderDialog open parentOptions={folders} tags={[]} currentFolderId="f1" onCreate={fn} onClose={() => {}} />);
|
||||
expect(screen.getByText("Work")).toBeInTheDocument();
|
||||
await user.type(screen.getByPlaceholderText(/folder name/i), "Sub Folder");
|
||||
await user.click(screen.getByText(/create/i));
|
||||
expect(fn).toHaveBeenCalledWith(expect.objectContaining({ name: "Sub Folder", parent_id: "f1", tag_ids: [] }));
|
||||
});
|
||||
|
||||
it("does not call onCreate when name empty", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<CreateFolderDialog open parentOptions={folders} tags={[]} onCreate={fn} onClose={() => {}} />);
|
||||
await user.click(screen.getByText(/create/i));
|
||||
expect(fn).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("removes content from DOM after exit animation", async () => {
|
||||
const { rerender } = render(
|
||||
<CreateFolderDialog open parentOptions={folders} tags={[]} onCreate={vi.fn()} onClose={() => {}} />,
|
||||
);
|
||||
expect(screen.getByText("New Folder")).toBeInTheDocument();
|
||||
rerender(
|
||||
<CreateFolderDialog open={false} parentOptions={folders} tags={[]} onCreate={vi.fn()} onClose={() => {}} />,
|
||||
);
|
||||
await waitForElementToBeRemoved(() => screen.queryByText("New Folder"));
|
||||
expect(screen.queryByText("New Folder")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onCreate when Escape is pressed", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onClose = vi.fn();
|
||||
render(<CreateFolderDialog open parentOptions={folders} tags={[]} onCreate={vi.fn()} onClose={onClose} />);
|
||||
await user.keyboard("{Escape}");
|
||||
await waitFor(() => expect(onClose).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it("shows tags and includes selected tags in onCreate", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<CreateFolderDialog open parentOptions={folders} tags={sampleTags} onCreate={fn} onClose={() => {}} />);
|
||||
expect(screen.getByPlaceholderText(/search tags/i)).toBeInTheDocument();
|
||||
expect(screen.getByText("Production")).toBeInTheDocument();
|
||||
expect(screen.getByText("Staging")).toBeInTheDocument();
|
||||
|
||||
await user.click(screen.getByText("Production"));
|
||||
await user.type(screen.getByPlaceholderText(/folder name/i), "Tagged Folder");
|
||||
await user.click(screen.getByText(/create/i));
|
||||
|
||||
expect(fn).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
name: "Tagged Folder",
|
||||
parent_id: null,
|
||||
tag_ids: ["t1"],
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { Folder, Tag } from "../../lib/types";
|
||||
import { Button } from "../ui/Button";
|
||||
import { Input } from "../ui/Input";
|
||||
import { AnimatedModal } from "../ui/AnimatedModal";
|
||||
import { Folder as FolderIcon } from "lucide-react";
|
||||
import { useNotificationStore } from "../../stores/notificationStore";
|
||||
import { SearchableTagPicker } from "../tags/SearchableTagPicker";
|
||||
|
||||
interface CreateFolderDialogProps {
|
||||
open: boolean;
|
||||
parentOptions: Folder[];
|
||||
currentFolderId?: string | null;
|
||||
tags: Tag[];
|
||||
onCreate: (input: { name: string; parent_id: string | null; tag_ids: string[] }) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function CreateFolderDialog({ open, parentOptions, currentFolderId = null, tags, onCreate, onClose }: CreateFolderDialogProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const notify = useNotificationStore((s) => s.notify);
|
||||
|
||||
const parentName = currentFolderId
|
||||
? parentOptions.find((f) => f.id === currentFolderId)?.name ?? null
|
||||
: null;
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setName("");
|
||||
setSelectedTagIds([]);
|
||||
setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const handleCreate = () => {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
notify("Name must not be empty", "error");
|
||||
return;
|
||||
}
|
||||
onCreate({ name: trimmed, parent_id: currentFolderId ?? null, tag_ids: selectedTagIds });
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleCreate();
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTag = (tagId: string) => {
|
||||
setSelectedTagIds((prev) =>
|
||||
prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId],
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatedModal open={open} onClose={onClose}>
|
||||
<div className="w-96">
|
||||
<h3 className="font-heading text-text text-lg mb-1">New Folder</h3>
|
||||
{parentName && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-text-muted mb-4">
|
||||
<FolderIcon size={12} />
|
||||
<span>{parentName}</span>
|
||||
</div>
|
||||
)}
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder="Folder name"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
{tags.length > 0 && (
|
||||
<SearchableTagPicker
|
||||
tags={tags}
|
||||
selectedTagIds={selectedTagIds}
|
||||
onToggle={toggleTag}
|
||||
/>
|
||||
)}
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<Button variant="ghost" onClick={onClose}>Cancel</Button>
|
||||
<Button onClick={handleCreate}>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, waitForElementToBeRemoved } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import "@testing-library/jest-dom";
|
||||
import { EditFolderDialog } from "./EditFolderDialog";
|
||||
|
||||
const folder = {
|
||||
id: "f1",
|
||||
name: "Work",
|
||||
parent_id: null,
|
||||
tag_ids: ["t1"],
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
|
||||
const tags = [{ id: "t1", name: "red", color: "#ff0000", created_at: "", updated_at: "" }];
|
||||
|
||||
describe("EditFolderDialog", () => {
|
||||
it("calls onSave with updated name and tags", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<EditFolderDialog open folder={folder} tags={tags} onSave={fn} onClose={() => {}} />);
|
||||
await user.clear(screen.getByPlaceholderText(/folder name/i));
|
||||
await user.type(screen.getByPlaceholderText(/folder name/i), "Work Updated");
|
||||
await user.click(screen.getByText(/save/i));
|
||||
expect(fn).toHaveBeenCalledWith("f1", expect.objectContaining({ name: "Work Updated", tag_ids: ["t1"] }));
|
||||
});
|
||||
|
||||
it("does not call onSave when name is empty", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<EditFolderDialog open folder={folder} tags={tags} onSave={fn} onClose={() => {}} />);
|
||||
await user.clear(screen.getByPlaceholderText(/folder name/i));
|
||||
await user.click(screen.getByText(/save/i));
|
||||
expect(fn).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("removes content from DOM after exit animation", async () => {
|
||||
const { rerender } = render(
|
||||
<EditFolderDialog open folder={folder} tags={tags} onSave={vi.fn()} onClose={() => {}} />,
|
||||
);
|
||||
expect(screen.getByText("Edit Folder")).toBeInTheDocument();
|
||||
rerender(<EditFolderDialog open={false} folder={folder} tags={tags} onSave={vi.fn()} onClose={() => {}} />);
|
||||
await waitForElementToBeRemoved(() => screen.queryByText("Edit Folder"));
|
||||
expect(screen.queryByText("Edit Folder")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders nothing when folder is null", () => {
|
||||
render(<EditFolderDialog open folder={null} tags={tags} onSave={vi.fn()} onClose={() => {}} />);
|
||||
expect(screen.queryByText("Edit Folder")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onClose when Escape is pressed", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onClose = vi.fn();
|
||||
render(<EditFolderDialog open folder={folder} tags={tags} onSave={vi.fn()} onClose={onClose} />);
|
||||
await user.keyboard("{Escape}");
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,81 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { Folder, Tag } from "../../lib/types";
|
||||
import { Button } from "../ui/Button";
|
||||
import { Input } from "../ui/Input";
|
||||
import { AnimatedModal } from "../ui/AnimatedModal";
|
||||
import { useNotificationStore } from "../../stores/notificationStore";
|
||||
import { SearchableTagPicker } from "../tags/SearchableTagPicker";
|
||||
|
||||
interface EditFolderDialogProps {
|
||||
open: boolean;
|
||||
folder: Folder | null;
|
||||
tags: Tag[];
|
||||
onSave: (id: string, input: { name: string; tag_ids: string[] }) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function EditFolderDialog({ open, folder, tags, onSave, onClose }: EditFolderDialogProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const notify = useNotificationStore((s) => s.notify);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && folder) {
|
||||
setName(folder.name);
|
||||
setSelectedTagIds(folder.tag_ids);
|
||||
setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}
|
||||
}, [open, folder]);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!folder) return;
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
notify("Name must not be empty", "error");
|
||||
return;
|
||||
}
|
||||
onSave(folder.id, { name: trimmed, tag_ids: selectedTagIds });
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleSave();
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTag = (tagId: string) => {
|
||||
setSelectedTagIds((prev) =>
|
||||
prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId],
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatedModal open={open} onClose={onClose}>
|
||||
{folder ? (
|
||||
<div className="w-96">
|
||||
<h3 className="font-heading text-text text-lg mb-4">Edit Folder</h3>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder="Folder name"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
{tags.length > 0 && (
|
||||
<SearchableTagPicker
|
||||
tags={tags}
|
||||
selectedTagIds={selectedTagIds}
|
||||
onToggle={toggleTag}
|
||||
/>
|
||||
)}
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<Button variant="ghost" onClick={onClose}>Cancel</Button>
|
||||
<Button onClick={handleSave}>Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</AnimatedModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { FolderBreadcrumb } from "./FolderBreadcrumb";
|
||||
import type { Folder } from "../../lib/types";
|
||||
|
||||
const folders: Folder[] = [
|
||||
{ id: "f1", name: "Work", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
|
||||
{ id: "f2", name: "Client A", parent_id: "f1", tag_ids: [], created_at: "", updated_at: "" },
|
||||
];
|
||||
|
||||
describe("FolderBreadcrumb", () => {
|
||||
it("shows root when no folder active", () => {
|
||||
render(<FolderBreadcrumb folders={folders} activeFolderId={null} onNavigate={() => {}} />);
|
||||
expect(screen.getByText("All Connections")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows path to active folder", () => {
|
||||
render(<FolderBreadcrumb folders={folders} activeFolderId="f2" onNavigate={() => {}} />);
|
||||
expect(screen.getByText("Work")).toBeInTheDocument();
|
||||
expect(screen.getByText("Client A")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("navigates when clicking a breadcrumb item", async () => {
|
||||
const fn = vi.fn();
|
||||
render(<FolderBreadcrumb folders={folders} activeFolderId="f2" onNavigate={fn} />);
|
||||
await userEvent.click(screen.getByText("Work"));
|
||||
expect(fn).toHaveBeenCalledWith("f1");
|
||||
});
|
||||
|
||||
it("navigates to root", async () => {
|
||||
const fn = vi.fn();
|
||||
render(<FolderBreadcrumb folders={folders} activeFolderId="f2" onNavigate={fn} />);
|
||||
await userEvent.click(screen.getByText("All Connections"));
|
||||
expect(fn).toHaveBeenCalledWith(null);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { Folder } from "../../lib/types";
|
||||
import { ChevronRight, Home } from "lucide-react";
|
||||
import { getFolderPath } from "../../lib/utils";
|
||||
|
||||
interface FolderBreadcrumbProps {
|
||||
folders: Folder[];
|
||||
activeFolderId: string | null;
|
||||
onNavigate: (folderId: string | null) => void;
|
||||
}
|
||||
|
||||
export function FolderBreadcrumb({ folders, activeFolderId, onNavigate }: FolderBreadcrumbProps) {
|
||||
const path = getFolderPath(folders, activeFolderId);
|
||||
|
||||
return (
|
||||
<nav className="flex items-center gap-1 text-sm text-text-muted">
|
||||
<button
|
||||
onClick={() => onNavigate(null)}
|
||||
className={`flex items-center gap-1 px-2 py-1 rounded-md transition-colors ${
|
||||
activeFolderId === null ? "text-text" : "hover:text-text hover:bg-surface-raised"
|
||||
}`}
|
||||
>
|
||||
<Home size={14} />
|
||||
<span>All Connections</span>
|
||||
</button>
|
||||
{path.map((folder) => (
|
||||
<div key={folder.id} className="flex items-center gap-1">
|
||||
<ChevronRight size={14} />
|
||||
<button
|
||||
onClick={() => onNavigate(folder.id)}
|
||||
className={`px-2 py-1 rounded-md transition-colors ${
|
||||
folder.id === activeFolderId ? "text-text" : "hover:text-text hover:bg-surface-raised"
|
||||
}`}
|
||||
>
|
||||
{folder.name}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { FolderTree } from "./FolderTree";
|
||||
import type { Folder } from "../../lib/types";
|
||||
|
||||
const folders: Folder[] = [
|
||||
{ id: "f1", name: "Work", parent_id: null, tag_ids: [], created_at: "", updated_at: "" },
|
||||
{ id: "f2", name: "ClientA", parent_id: "f1", tag_ids: [], created_at: "", updated_at: "" },
|
||||
];
|
||||
|
||||
describe("FolderTree", () => {
|
||||
it("renders all folders", () => {
|
||||
render(<FolderTree folders={folders} activeFolderId={null} onSelect={() => {}} />);
|
||||
expect(screen.getByText("Work")).toBeInTheDocument();
|
||||
expect(screen.getByText("ClientA")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders All Connections option that clears filter", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<FolderTree folders={folders} activeFolderId="f1" onSelect={fn} />);
|
||||
await user.click(screen.getByText(/all connections/i));
|
||||
expect(fn).toHaveBeenCalledWith(null);
|
||||
});
|
||||
|
||||
it("selecting a folder calls onSelect with id", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fn = vi.fn();
|
||||
render(<FolderTree folders={folders} activeFolderId={null} onSelect={fn} />);
|
||||
await user.click(screen.getByText("Work"));
|
||||
expect(fn).toHaveBeenCalledWith("f1");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { Folder } from "../../lib/types";
|
||||
import { ChevronRight, Folder as FolderIcon } from "lucide-react";
|
||||
|
||||
interface FolderTreeProps {
|
||||
folders: Folder[];
|
||||
activeFolderId: string | null;
|
||||
onSelect: (id: string | null) => void;
|
||||
}
|
||||
|
||||
export function FolderTree({ folders, activeFolderId, onSelect }: FolderTreeProps) {
|
||||
const roots = folders.filter((f) => f.parent_id === null);
|
||||
const childrenOf = (id: string) => folders.filter((f) => f.parent_id === id);
|
||||
|
||||
const renderFolder = (folder: Folder, depth: number) => {
|
||||
const isActive = activeFolderId === folder.id;
|
||||
return (
|
||||
<div key={folder.id}>
|
||||
<button
|
||||
onClick={() => onSelect(folder.id)}
|
||||
className={`flex items-center gap-1 w-full text-left px-2 py-1 rounded text-sm ${isActive ? "bg-accent/20 text-white" : "text-white/70 hover:text-white"}`}
|
||||
style={{ paddingLeft: `${depth * 12 + 8}px` }}
|
||||
>
|
||||
<FolderIcon size={14} /> {folder.name}
|
||||
</button>
|
||||
{childrenOf(folder.id).map((c) => renderFolder(c, depth + 1))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
<button
|
||||
onClick={() => onSelect(null)}
|
||||
className={`flex items-center gap-1 w-full text-left px-2 py-1 rounded text-sm ${activeFolderId === null ? "bg-accent/20 text-white" : "text-white/70 hover:text-white"}`}
|
||||
>
|
||||
<ChevronRight size={14} /> All Connections
|
||||
</button>
|
||||
{roots.map((r) => renderFolder(r, 0))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user