Compare commits
4
Commits
v0.7.14
...
cd6cc7fde2
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cd6cc7fde2 | ||
|
|
7cde902978 | ||
|
|
67f3532938 | ||
|
|
1d8dfce99a |
@@ -290,7 +290,7 @@ Planned work is prioritized in the [Project Roadmap](./ROADMAP.md) (source of tr
|
||||
| Smart default sort | ✅ | 12-tier priority: updated_at → created_at → *_at → *_id → seq/rank/version |
|
||||
| Data grid pagination | ✅ | Page nav, page size selector persisted in settings |
|
||||
| Column filtering (server-side) | ✅ | eq, neq, contains, starts, ends, gt, lt, null, notnull pushed to SQL WHERE |
|
||||
| Visual filter builder | ✅ | Drag-and-drop column palette (@dnd-kit) with type-aware operators (textish → contains, else eq), AND semantics, persists in tab `filterRules` |
|
||||
| Visual filter builder | ✅ | Column Filters popover with a "+ Add filter" row editor (column / operator / value selects, per-rule remove, AND semantics, persists in tab `filterRules`). Free-text values are debounced (400ms) so a query only fires after the user stops typing; column/operator changes apply immediately. The filter button is a plain toggle (open when closed, close when open) |
|
||||
| Column sorting (server-side) | ✅ | Multi-column asc/desc pushed to SQL ORDER BY |
|
||||
| Column show/hide | ✅ | Toggle visibility per column |
|
||||
| Column resize (drag handle) | ✅ | Double-click to auto-fit |
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { FilterBuilder } from "./FilterBuilder";
|
||||
import type { ColumnInfo } from "../../lib/types";
|
||||
|
||||
const cols: ColumnInfo[] = [
|
||||
{ name: "id", data_type: "integer", is_nullable: false, is_pk: true, is_fk: false, fk_ref: null, default_value: null, editable: false, is_generated: false },
|
||||
{ name: "name", data_type: "text", is_nullable: true, is_pk: false, is_fk: false, fk_ref: null, default_value: null, editable: true, is_generated: false },
|
||||
];
|
||||
|
||||
describe("FilterBuilder", () => {
|
||||
it("drops a column chip into the drop zone to create a rule with a type-aware operator", () => {
|
||||
const onChange = vi.fn();
|
||||
render(<FilterBuilder columns={cols} rules={[]} onChange={onChange} />);
|
||||
fireEvent.click(screen.getByText("name"));
|
||||
expect(onChange).toHaveBeenCalledWith([
|
||||
expect.objectContaining({ column: "name", operator: "contains" }),
|
||||
]);
|
||||
});
|
||||
it("removing a rule calls onChange without it", () => {
|
||||
const onChange = vi.fn();
|
||||
const rules = [{ id: "r1", column: "name", operator: "contains" as const, value: "Al" }];
|
||||
render(<FilterBuilder columns={cols} rules={rules} onChange={onChange} />);
|
||||
fireEvent.click(screen.getByLabelText("Remove filter name"));
|
||||
expect(onChange).toHaveBeenCalledWith([]);
|
||||
});
|
||||
});
|
||||
@@ -1,132 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core";
|
||||
import { X } from "lucide-react";
|
||||
import { defaultFilterOperator } from "../grid/gridEditability";
|
||||
import type { ColumnInfo } from "../../lib/types";
|
||||
import type { FilterRule, FilterOperator } from "../../stores/dbViewerStore";
|
||||
|
||||
interface Props {
|
||||
columns: ColumnInfo[];
|
||||
rules: FilterRule[];
|
||||
onChange: (rules: FilterRule[]) => void;
|
||||
}
|
||||
|
||||
function Chip({ col, onAdd }: { col: ColumnInfo; onAdd: () => void }) {
|
||||
const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
|
||||
id: `col-${col.name}`,
|
||||
data: { column: col },
|
||||
});
|
||||
return (
|
||||
<button
|
||||
ref={setNodeRef}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
onClick={onAdd}
|
||||
className={`px-2 py-1 text-xs rounded border border-border bg-surface text-text hover:border-accent ${
|
||||
isDragging ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
{col.name}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const OPERATORS: FilterOperator[] = [
|
||||
"eq",
|
||||
"neq",
|
||||
"contains",
|
||||
"starts",
|
||||
"ends",
|
||||
"gt",
|
||||
"lt",
|
||||
"null",
|
||||
"notnull",
|
||||
];
|
||||
|
||||
export function FilterBuilder({ columns, rules, onChange }: Props) {
|
||||
const [val, setVal] = useState<Record<string, string>>({});
|
||||
|
||||
const addRule = (col: ColumnInfo) => {
|
||||
const op = defaultFilterOperator(col.data_type);
|
||||
onChange([
|
||||
...rules,
|
||||
{
|
||||
id: `f-${Date.now()}-${col.name}`,
|
||||
column: col.name,
|
||||
operator: op,
|
||||
value: "",
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const { setNodeRef, isOver } = useDroppable({ id: "filter-dropzone" });
|
||||
|
||||
const remove = (id: string) => onChange(rules.filter((r) => r.id !== id));
|
||||
const update = (id: string, patch: Partial<FilterRule>) =>
|
||||
onChange(rules.map((r) => (r.id === id ? { ...r, ...patch } : r)));
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
onDragEnd={(e) => {
|
||||
const id = e.active.id as string;
|
||||
const colName = id.replace(/^col-/, "");
|
||||
const col = columns.find((c) => c.name === colName);
|
||||
if (col && e.over?.id === "filter-dropzone") addRule(col);
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-wrap gap-1 mb-2">
|
||||
{columns.map((c) => (
|
||||
<Chip key={c.name} col={c} onAdd={() => addRule(c)} />
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={`min-h-[40px] border border-dashed rounded p-2 space-y-1 ${
|
||||
isOver ? "border-accent bg-surface" : "border-border"
|
||||
}`}
|
||||
>
|
||||
{rules.length === 0 && (
|
||||
<span className="text-xs text-text-muted">
|
||||
Drop columns here to add filters
|
||||
</span>
|
||||
)}
|
||||
{rules.map((r) => (
|
||||
<div key={r.id} className="flex items-center gap-2 text-xs">
|
||||
<span className="text-text font-semibold">{r.column}</span>
|
||||
<select
|
||||
value={r.operator}
|
||||
onChange={(e) =>
|
||||
update(r.id, { operator: e.target.value as FilterOperator })
|
||||
}
|
||||
className="bg-surface border border-border rounded px-1"
|
||||
>
|
||||
{OPERATORS.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{!["null", "notnull"].includes(r.operator) && (
|
||||
<input
|
||||
value={val[r.id] ?? r.value}
|
||||
onChange={(e) => {
|
||||
setVal({ ...val, [r.id]: e.target.value });
|
||||
update(r.id, { value: e.target.value });
|
||||
}}
|
||||
className="bg-surface border border-border rounded px-1 flex-1"
|
||||
placeholder="value"
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
aria-label={`Remove filter ${r.column}`}
|
||||
onClick={() => remove(r.id)}
|
||||
className="text-text-muted hover:text-red-400"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
@@ -325,13 +325,100 @@ describe("TableControls", () => {
|
||||
expect(screen.queryByLabelText(/insert row/i)).toBeNull();
|
||||
});
|
||||
|
||||
it("renders the FilterBuilder inside the filter popover", () => {
|
||||
it("renders the column filter popover with the + Add filter action", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
renderControls();
|
||||
fireEvent.click(screen.getByLabelText(/column filters/i));
|
||||
expect(
|
||||
screen.getByText("Drop columns here to add filters"),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText("Column Filters")).toBeInTheDocument();
|
||||
expect(screen.getByText("+ Add filter")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("debounces filter value edits so a query only fires after the user stops typing", () => {
|
||||
vi.useFakeTimers();
|
||||
seed([makeTab()], "tab-1");
|
||||
const onFilterChange = vi.fn();
|
||||
renderControls({
|
||||
onFilterChange,
|
||||
filterRules: [
|
||||
{ id: "r1", column: "id", operator: "contains", value: "" },
|
||||
],
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/column filters/i));
|
||||
|
||||
const input = screen.getByPlaceholderText("value");
|
||||
fireEvent.change(input, { target: { value: "a" } });
|
||||
fireEvent.change(input, { target: { value: "ab" } });
|
||||
fireEvent.change(input, { target: { value: "abc" } });
|
||||
|
||||
// No commit yet — the debounce hasn't elapsed.
|
||||
expect(onFilterChange).not.toHaveBeenCalled();
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(400);
|
||||
});
|
||||
|
||||
// Only the final value is committed, once.
|
||||
expect(onFilterChange).toHaveBeenCalledTimes(1);
|
||||
expect(onFilterChange).toHaveBeenCalledWith([
|
||||
expect.objectContaining({ value: "abc" }),
|
||||
]);
|
||||
});
|
||||
|
||||
it("closes the filter popover when the button is clicked while it is open", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
renderControls();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/column filters/i));
|
||||
expect(screen.getByText("Column Filters")).toBeInTheDocument();
|
||||
|
||||
// Clicking the button while open closes it (plain toggle).
|
||||
fireEvent.click(screen.getByLabelText(/column filters/i));
|
||||
expect(screen.queryByText("Column Filters")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("toggles the sort rules popover open and closed", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
renderControls();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/sort rules/i));
|
||||
expect(screen.getByText("Sort Rules")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/sort rules/i));
|
||||
expect(screen.queryByText("Sort Rules")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("toggles the auto-refresh dropdown open and closed", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
renderControls();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/auto-refresh/i));
|
||||
expect(screen.getByText("Off")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/auto-refresh/i));
|
||||
expect(screen.queryByText("Off")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("toggles the show/hide columns dropdown open and closed", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
renderControls();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/toggle columns/i));
|
||||
expect(screen.getByText("Visible columns")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/toggle columns/i));
|
||||
expect(screen.queryByText("Visible columns")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("toggles the export dropdown open and closed", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
renderControls();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/export/i));
|
||||
expect(screen.getByText("JSON")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/export/i));
|
||||
expect(screen.queryByText("JSON")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("export dropdown includes the Excel option", () => {
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
} from "lucide-react";
|
||||
import { useDbViewerStore, type FilterRule, type SortRule } from "../../stores/dbViewerStore";
|
||||
import { useNotificationStore } from "../../stores/notificationStore";
|
||||
import { FilterBuilder } from "./FilterBuilder";
|
||||
import { Tooltip } from "../ui/Tooltip";
|
||||
import { exportData } from "../../lib/exportData";
|
||||
import type { ColumnInfo } from "../../lib/types";
|
||||
@@ -49,22 +48,28 @@ function DropdownMenu({
|
||||
open,
|
||||
setOpen,
|
||||
align,
|
||||
wrapRef,
|
||||
children,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (v: boolean) => void;
|
||||
align?: "left" | "right";
|
||||
/** When provided, outside-click detection uses this wrapper (which should
|
||||
* contain both the toggle button and the menu) so the button never fights
|
||||
* the outside-click handler. */
|
||||
wrapRef?: React.RefObject<HTMLDivElement | null>;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const close = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
const container = wrapRef?.current ?? ref.current;
|
||||
if (container && !container.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
document.addEventListener("mousedown", close);
|
||||
return () => document.removeEventListener("mousedown", close);
|
||||
}, [open, setOpen]);
|
||||
}, [open, setOpen, wrapRef]);
|
||||
|
||||
if (!open) return null;
|
||||
return (
|
||||
@@ -79,28 +84,84 @@ function DropdownMenu({
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Debounced free-text input for filter values. The value is committed to the
|
||||
* rules (and thus triggers a server-side refetch) only after the user stops
|
||||
* typing for `DEBOUNCE_MS`. Without this, every keystroke fires a query and
|
||||
* the in-flight guard in `fetchData` silently drops intermediate fetches, so
|
||||
* the final filter value can end up not being applied.
|
||||
*/
|
||||
const FILTER_DEBOUNCE_MS = 400;
|
||||
|
||||
function DebouncedValueInput({
|
||||
value,
|
||||
onCommit,
|
||||
placeholder,
|
||||
}: {
|
||||
value: string;
|
||||
onCommit: (v: string) => void;
|
||||
placeholder?: string;
|
||||
}) {
|
||||
const [draft, setDraft] = useState(value);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Keep the draft in sync when the committed value changes externally
|
||||
// (e.g. a rule is replaced or removed while this input is mounted).
|
||||
useEffect(() => {
|
||||
setDraft(value);
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const v = e.target.value;
|
||||
setDraft(v);
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
timerRef.current = setTimeout(() => onCommit(v), FILTER_DEBOUNCE_MS);
|
||||
};
|
||||
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={draft}
|
||||
onChange={handleChange}
|
||||
placeholder={placeholder}
|
||||
className="flex-1 rounded border border-border bg-surface text-xs px-1.5 py-1 text-text min-w-0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FilterModal({
|
||||
columns,
|
||||
rules,
|
||||
onChange,
|
||||
open,
|
||||
setOpen,
|
||||
wrapRef,
|
||||
}: {
|
||||
columns: ColumnInfo[];
|
||||
rules: FilterRule[];
|
||||
onChange: (rules: FilterRule[]) => void;
|
||||
open: boolean;
|
||||
setOpen: (v: boolean) => void;
|
||||
wrapRef: React.RefObject<HTMLDivElement | null>;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
// Close on outside click, but treat the toggle button (which lives inside
|
||||
// the same wrapper) as part of the modal so it never fights the toggle.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const close = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", close);
|
||||
return () => document.removeEventListener("mousedown", close);
|
||||
}, [open, setOpen]);
|
||||
}, [open, setOpen, wrapRef]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
@@ -116,17 +177,13 @@ function FilterModal({
|
||||
onChange(rules.map((r) => (r.id === id ? { ...r, ...patch } : r)));
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="absolute top-full left-0 mt-1 z-30 w-96 rounded-lg bg-surface border border-border shadow-lg p-3"
|
||||
>
|
||||
<div className="absolute top-full left-0 mt-1 z-30 w-96 rounded-lg bg-surface border border-border shadow-lg p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-semibold text-text">Column Filters</span>
|
||||
<button type="button" onClick={() => setOpen(false)} className="text-text-muted hover:text-text cursor-pointer">
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<FilterBuilder columns={columns} rules={rules} onChange={onChange} />
|
||||
{rules.map((rule) => (
|
||||
<div key={rule.id} className="flex items-center gap-1.5 mb-1.5">
|
||||
<select
|
||||
@@ -152,12 +209,10 @@ function FilterModal({
|
||||
<option value="notnull">not null</option>
|
||||
</select>
|
||||
{rule.operator !== "null" && rule.operator !== "notnull" && (
|
||||
<input
|
||||
type="text"
|
||||
<DebouncedValueInput
|
||||
value={rule.value}
|
||||
onChange={(e) => updateRule(rule.id, { value: e.target.value })}
|
||||
onCommit={(v) => updateRule(rule.id, { value: v })}
|
||||
placeholder="value"
|
||||
className="flex-1 rounded border border-border bg-surface text-xs px-1.5 py-1 text-text min-w-0"
|
||||
/>
|
||||
)}
|
||||
<button type="button" onClick={() => removeRule(rule.id)} className="text-text-muted hover:text-red-400 shrink-0 cursor-pointer">
|
||||
@@ -182,22 +237,27 @@ function SortModal({
|
||||
onChange,
|
||||
open,
|
||||
setOpen,
|
||||
wrapRef,
|
||||
}: {
|
||||
columns: ColumnInfo[];
|
||||
rules: SortRule[];
|
||||
onChange: (rules: SortRule[]) => void;
|
||||
open: boolean;
|
||||
setOpen: (v: boolean) => void;
|
||||
wrapRef: React.RefObject<HTMLDivElement | null>;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
// Close on outside click, but treat the toggle button (which lives inside
|
||||
// the same wrapper) as part of the modal so it never fights the toggle.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const close = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", close);
|
||||
return () => document.removeEventListener("mousedown", close);
|
||||
}, [open, setOpen]);
|
||||
}, [open, setOpen, wrapRef]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
@@ -213,10 +273,7 @@ function SortModal({
|
||||
onChange(rules.map((r) => (r.id === id ? { ...r, ...patch } : r)));
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="absolute top-full left-0 mt-1 z-30 w-72 rounded-lg bg-surface border border-border shadow-lg p-3"
|
||||
>
|
||||
<div className="absolute top-full left-0 mt-1 z-30 w-72 rounded-lg bg-surface border border-border shadow-lg p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-semibold text-text">Sort Rules</span>
|
||||
<button type="button" onClick={() => setOpen(false)} className="text-text-muted hover:text-text cursor-pointer">
|
||||
@@ -272,6 +329,7 @@ function BulkActionsDropdown({
|
||||
onClearSelection: () => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const wrapRef = useRef<HTMLDivElement>(null);
|
||||
const addChange = useDbViewerStore((s) => s.addChange);
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
@@ -338,7 +396,7 @@ function BulkActionsDropdown({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="relative" ref={wrapRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
@@ -347,7 +405,7 @@ function BulkActionsDropdown({
|
||||
<span className="text-xs font-medium">Actions</span>
|
||||
<ChevronDown size={12} />
|
||||
</button>
|
||||
<DropdownMenu open={open} setOpen={setOpen} align="right">
|
||||
<DropdownMenu open={open} setOpen={setOpen} align="right" wrapRef={wrapRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyJSON}
|
||||
@@ -445,11 +503,16 @@ export function TableControls({
|
||||
|
||||
// local state
|
||||
const [filterOpen, setFilterOpen] = useState(false);
|
||||
const filterWrapRef = useRef<HTMLDivElement>(null);
|
||||
const [sortOpen, setSortOpen] = useState(false);
|
||||
const sortWrapRef = useRef<HTMLDivElement>(null);
|
||||
const [columnMenuOpen, setColumnMenuOpen] = useState(false);
|
||||
const columnMenuWrapRef = useRef<HTMLDivElement>(null);
|
||||
const [exportOpen, setExportOpen] = useState(false);
|
||||
const exportWrapRef = useRef<HTMLDivElement>(null);
|
||||
const [autoRefresh, setAutoRefresh] = useState(defaultRefreshRate);
|
||||
const [autoRefreshOpen, setAutoRefreshOpen] = useState(false);
|
||||
const autoRefreshWrapRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-refresh: a self-restarting timer that only counts down while the tab
|
||||
// is idle. Fires a refresh, waits for it to complete (loading → false),
|
||||
@@ -545,7 +608,7 @@ export function TableControls({
|
||||
);
|
||||
|
||||
const exportControl = (
|
||||
<div className="relative">
|
||||
<div className="relative" ref={exportWrapRef}>
|
||||
<Tooltip content="Export" side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
@@ -556,7 +619,7 @@ export function TableControls({
|
||||
<Download size={14} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<DropdownMenu open={exportOpen} setOpen={setExportOpen}>
|
||||
<DropdownMenu open={exportOpen} setOpen={setExportOpen} wrapRef={exportWrapRef}>
|
||||
{EXPORT_FORMATS.map((fmt) => (
|
||||
<button
|
||||
key={fmt.ext}
|
||||
@@ -572,7 +635,7 @@ export function TableControls({
|
||||
);
|
||||
|
||||
const columnsControl = (
|
||||
<div className="relative">
|
||||
<div className="relative" ref={columnMenuWrapRef}>
|
||||
<Tooltip content="Show/hide columns" side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
@@ -587,6 +650,7 @@ export function TableControls({
|
||||
open={columnMenuOpen}
|
||||
setOpen={setColumnMenuOpen}
|
||||
align={isQuery ? "left" : "right"}
|
||||
wrapRef={columnMenuWrapRef}
|
||||
>
|
||||
<div className="px-2 py-1 text-[10px] text-text-muted uppercase tracking-wider">
|
||||
Visible columns
|
||||
@@ -658,7 +722,7 @@ export function TableControls({
|
||||
{refreshControl}
|
||||
|
||||
{/* Auto-refresh */}
|
||||
<div className="relative">
|
||||
<div className="relative" ref={autoRefreshWrapRef}>
|
||||
<Tooltip content={`Auto-refresh: ${autoRefresh > 0 ? `${autoRefresh / 1000}s` : "Off"}`} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
@@ -672,7 +736,7 @@ export function TableControls({
|
||||
{autoRefresh > 0 && <span className="text-[10px] font-medium">{autoRefresh / 1000}s</span>}
|
||||
</button>
|
||||
</Tooltip>
|
||||
<DropdownMenu open={autoRefreshOpen} setOpen={setAutoRefreshOpen}>
|
||||
<DropdownMenu open={autoRefreshOpen} setOpen={setAutoRefreshOpen} wrapRef={autoRefreshWrapRef}>
|
||||
{AUTO_REFRESH_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
@@ -692,7 +756,7 @@ export function TableControls({
|
||||
<div className="w-px h-4 bg-border mx-1" />
|
||||
|
||||
{/* Filter */}
|
||||
<div className="relative">
|
||||
<div className="relative" ref={filterWrapRef}>
|
||||
<Tooltip content="Column filters" side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
@@ -716,11 +780,12 @@ export function TableControls({
|
||||
onChange={onFilterChange}
|
||||
open={filterOpen}
|
||||
setOpen={setFilterOpen}
|
||||
wrapRef={filterWrapRef}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sort */}
|
||||
<div className="relative">
|
||||
<div className="relative" ref={sortWrapRef}>
|
||||
<Tooltip content="Sort rules" side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
@@ -744,6 +809,7 @@ export function TableControls({
|
||||
onChange={onSortChange}
|
||||
open={sortOpen}
|
||||
setOpen={setSortOpen}
|
||||
wrapRef={sortWrapRef}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
+19
-2
@@ -45,8 +45,20 @@ get_token() {
|
||||
if [ -n "$tok" ]; then echo "$tok"; return; fi
|
||||
fi
|
||||
fi
|
||||
read -rsp "Gitea personal access token (repo write): " GITEA_TOKEN
|
||||
echo "$GITEA_TOKEN"
|
||||
# Fall back to the git credential store: tea's OAuth login stores an access
|
||||
# token as the password for every push to this remote, and Gitea accepts it
|
||||
# for API auth (Authorization: token <access_token>).
|
||||
local host cred
|
||||
host="${GITEA_SERVER#*://}"
|
||||
cred="$(printf 'protocol=https\nhost=%s\n\n' "$host" \
|
||||
| git credential fill 2>/dev/null | sed -n 's/^password=//p' | head -1 || true)"
|
||||
if [ -n "$cred" ]; then echo "$cred"; return; fi
|
||||
# Fail fast — continuing without a token fails only at the upload step,
|
||||
# after the whole build has run.
|
||||
echo "error: no Gitea token found" >&2
|
||||
echo " set GITEA_TOKEN, or run 'tea login' / 'git push' once so the" >&2
|
||||
echo " credential store has an entry for $host" >&2
|
||||
exit 1
|
||||
}
|
||||
|
||||
GITEA_TOKEN="$(get_token)"
|
||||
@@ -112,6 +124,8 @@ echo ">> Building PostgreSQL client tools..."
|
||||
mkdir -p "$OUT_PG"
|
||||
PG_VER="16.4"
|
||||
curl -fsSL "https://ftp.postgresql.org/pub/source/v${PG_VER}/postgresql-${PG_VER}.tar.bz2" -o /tmp/pg.tar.bz2
|
||||
# Idempotent re-runs: clear stale build dirs left by previous invocations.
|
||||
rm -rf "/tmp/postgresql-${PG_VER}" /tmp/pgbuild
|
||||
tar -xf /tmp/pg.tar.bz2 -C /tmp
|
||||
cd /tmp/postgresql-${PG_VER}
|
||||
ac_cv_func_strchrnul=no ./configure --prefix=/tmp/pgbuild --without-readline --without-icu CFLAGS="-O2"
|
||||
@@ -137,6 +151,9 @@ done
|
||||
echo ">> Building MariaDB client tools..."
|
||||
mkdir -p "$OUT_MY"
|
||||
MARIADB_VER="11.4.5"
|
||||
# Idempotent re-runs: git clone fails if the destination is non-empty (e.g.
|
||||
# left over from an earlier build on the same machine). Clean it first.
|
||||
rm -rf /tmp/mariadb-server
|
||||
git clone --depth 1 --branch "mariadb-${MARIADB_VER}" https://github.com/MariaDB/server.git /tmp/mariadb-server
|
||||
cd /tmp/mariadb-server
|
||||
if [ "$(uname -m)" = arm64 ]; then
|
||||
|
||||
+9
-4
@@ -7,12 +7,12 @@ export const faqItems: FaqItem[] = [
|
||||
{
|
||||
question: "Is Gridline really free for commercial use?",
|
||||
answer:
|
||||
"Yes. Gridline is released under the Apache 2.0 license. You can use it for personal, commercial, or internal company work without paying or signing up.",
|
||||
"Yes. Gridline is Apache 2.0. You can use it for personal, commercial, or internal work without paying or signing up.",
|
||||
},
|
||||
{
|
||||
question: "Which databases are supported?",
|
||||
answer:
|
||||
"PostgreSQL and SQLite are fully supported today, including browsing, querying, editing, backups, and visual tools. MySQL and Redis connections are in active development.",
|
||||
"PostgreSQL and SQLite are fully supported today — browsing, querying, editing, backups, and the visual tools. MySQL and Redis connections are in active development.",
|
||||
},
|
||||
{
|
||||
question: "How is this different from TablePlus, Beekeeper Studio, or DB Pro?",
|
||||
@@ -22,10 +22,15 @@ export const faqItems: FaqItem[] = [
|
||||
{
|
||||
question: "Do you store my database credentials?",
|
||||
answer:
|
||||
"Passwords are stored in your operating system keychain — macOS Keychain, Linux Secret Service, or Windows Credential Manager — never in Gridline's local SQLite database.",
|
||||
"No. Passwords live in your operating system keychain — macOS Keychain, Linux Secret Service, or Windows Credential Manager — never in Gridline's local SQLite database.",
|
||||
},
|
||||
{
|
||||
question: "Can I self-host or contribute?",
|
||||
question: "How do you make money?",
|
||||
answer:
|
||||
"Gridline is free and isn't built around a paywall. If it saves you time, you can buy a coffee at ko-fi.com/adrianbonpin — it's entirely optional and never gates a feature. Otherwise, issues, docs, and contributions all help.",
|
||||
},
|
||||
{
|
||||
question: "Can I contribute or self-host?",
|
||||
answer:
|
||||
"Gridline is a desktop app, not a SaaS, so there's nothing to self-host. The repo is open for contributions: code, docs, translations, and issue reports are all welcome.",
|
||||
},
|
||||
|
||||
@@ -149,12 +149,13 @@ const isProd = import.meta.env.PROD;
|
||||
<ul class="space-y-2 text-sm text-[var(--text-muted)]">
|
||||
<li><a href="https://x.com/AdrianBonpin" target="_blank" rel="noopener" class="footer-link">X / Twitter</a></li>
|
||||
<li><a href="mailto:adrianbonpin@gmail.com" class="footer-link">Email</a></li>
|
||||
<li><a href="https://ko-fi.com/adrianbonpin" target="_blank" rel="noopener" class="footer-link">Support on Ko-fi ☕</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 pt-8 border-t border-[var(--border)] flex flex-col md:flex-row justify-between gap-3 text-xs text-[var(--text-muted)] font-mono">
|
||||
<span>© 2026 Gridline contributors · Apache 2.0</span>
|
||||
<span>Made with care for databases.</span>
|
||||
<span>Coffee-powered.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -176,13 +176,21 @@ const jsonLd = [
|
||||
<section id="oss" class="section-animate py-20 md:py-28 text-center">
|
||||
<div class="max-w-[800px] mx-auto px-6">
|
||||
<p class="font-mono text-xs text-[var(--accent)] uppercase tracking-[0.15em] mb-3">Open Source</p>
|
||||
<h2 class="font-serif text-3xl md:text-5xl mb-5">Built in public.<br />No VC roadmap, no rug pulls.</h2>
|
||||
<h2 class="font-serif text-3xl md:text-5xl mb-5">Built in public,<br />no VC roadmap attached.</h2>
|
||||
<p class="text-[var(--text-muted)] mb-8 max-w-md mx-auto">
|
||||
Gridline is Apache 2.0 and developed openly. Contributions, issues, and feature requests are welcome.
|
||||
</p>
|
||||
<a href="https://git.ranio.xyz/adrianbonpin/gridline" target="_blank" rel="noopener" class="ghost-btn">
|
||||
Star on Gitea
|
||||
</a>
|
||||
<div class="flex flex-wrap items-center justify-center gap-3">
|
||||
<a href="https://git.ranio.xyz/adrianbonpin/gridline" target="_blank" rel="noopener" class="ghost-btn">
|
||||
Star on Gitea
|
||||
</a>
|
||||
<a href="https://ko-fi.com/adrianbonpin" target="_blank" rel="noopener" class="ghost-btn">
|
||||
☕ Support on Ko-fi
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-6 text-xs text-[var(--text-muted)] max-w-sm mx-auto">
|
||||
Gridline stays free — no feature is ever behind a payment. Ko-fi is only for those who want to say thanks.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user