+
{content.split("\n").map((line, index) => (
// biome-ignore lint/suspicious/noArrayIndexKey:
{index + 1}
- {line.replaceAll("\t", "\u00a0\u00a0")}
+ {line.replaceAll("\t", "\u00a0\u00a0").replaceAll(" ", "\u00a0")}
))}
diff --git a/crates/web/frontend/src/components/examples-sheet/examples-sheet.module.css b/crates/web/frontend/src/components/examples-sheet/examples-sheet.module.css
deleted file mode 100644
index 713fab81..00000000
--- a/crates/web/frontend/src/components/examples-sheet/examples-sheet.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.accordion > :last-child {
- border-bottom: 0 !important;
-}
diff --git a/crates/web/frontend/src/components/examples-sheet/examples-sheet.tsx b/crates/web/frontend/src/components/examples-tab/examples-tab.tsx
similarity index 61%
rename from crates/web/frontend/src/components/examples-sheet/examples-sheet.tsx
rename to crates/web/frontend/src/components/examples-tab/examples-tab.tsx
index d2807cac..d13c515a 100644
--- a/crates/web/frontend/src/components/examples-sheet/examples-sheet.tsx
+++ b/crates/web/frontend/src/components/examples-tab/examples-tab.tsx
@@ -5,12 +5,9 @@ import { useSettings } from "@/providers/settings-provider";
import { useWorker } from "@/providers/worker-provider";
import { json } from "@codemirror/lang-json";
import CodeMirror from "@uiw/react-codemirror";
-import { Book } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import ActionButton from "../action-button/action-button";
+import { useCallback, useState } from "react";
import { formatCode } from "../editor/editor-utils";
import SimpleEditor from "../editor/simple-editor";
-import OnboardingPopup from "../onboarding-popup/onboarding-popup";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion";
import {
AlertDialog,
@@ -22,16 +19,8 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from "../ui/alert-dialog";
-import {
- Sheet,
- SheetContent,
- SheetDescription,
- SheetHeader,
- SheetTitle,
- SheetTrigger,
-} from "../ui/sheet";
+import { SidebarContent, SidebarDescription, SidebarHeader, SidebarTitle } from "../ui/sidebar";
import { type Example, type ExampleSection, queryExamples } from "./examples";
-import styles from "./examples-sheet.module.css";
interface ExampleItemDescriptionProps {
description: string;
@@ -73,17 +62,17 @@ const ExampleItemDescription = ({ description, className }: ExampleItemDescripti
const ExampleItem = ({ example, onClick }: ExampleItemProps) => {
return (
onClick(example.query)}
onKeyDown={(event) => event.key === "Enter" && onClick(example.query)}
>
{example.title}
event.stopPropagation()}
content={example.query}
/>
@@ -104,12 +93,14 @@ const ExamplesSection = ({ title, exampleSection, onClick }: ExampleSectionProps
);
return (
-
- {title}
+
+
+ {title}
+
-
+
{
- const [onboardingVisible, setOnboardingVisible] = useState(false);
- const [sheetOpen, setSheetOpen] = useState(false);
+const ExamplesTab = ({ onClickExample, className }: Props) => {
const [dialogOpen, setDialogOpen] = useState(false);
const [selectedExample, setSelectedExample] = useState<{
json: string;
@@ -151,34 +140,16 @@ const ExamplesSheet = ({ onClickExample, className }: Props) => {
setDialogOpen(true);
}, []);
- const handleCloseOnboarding = useCallback(() => {
- setOnboardingVisible(false);
- localStorage.setItem("onboarding", "done");
- }, []);
-
- const handleOpenChange = useCallback(
- (open: boolean) => {
- onboardingVisible && handleCloseOnboarding();
- setSheetOpen(open);
- },
- [onboardingVisible, handleCloseOnboarding],
- );
-
const handleSubmit = useCallback(async () => {
if (!selectedExample || !formatWorker) return;
const jsonData = new Data(selectedExample.json, FileType.JSON);
const queryData = new Data(selectedExample.query, FileType.GQ);
const formattedJson = await formatCode(jsonData, dataTabSize, formatWorker, true);
const formattedQuery = await formatCode(queryData, queryTabSize, formatWorker, true);
- setSheetOpen(false);
setDialogOpen(false);
onClickExample(formattedJson, formattedQuery);
}, [dataTabSize, queryTabSize, onClickExample, selectedExample, formatWorker]);
- useEffect(() => {
- localStorage.getItem("onboarding") || setOnboardingVisible(true);
- }, []);
-
return (
<>
@@ -186,53 +157,43 @@ const ExamplesSheet = ({ onClickExample, className }: Props) => {
Replace editor content?
- This will replace the content of both json and query editors with the selected
- example.
+ This will replace the content of both json and query editors with the selected example
-
- setDialogOpen(false)}>Cancel
-
+
+ setDialogOpen(false)}
+ >
+ Cancel
+
+
Continue
-
-
-
-
-
-
-
+
+ Query Examples
+
+ Check some query examples and import them into your editor with ease.
+
+
+
+ {queryExamples.map((exampleSection: ExampleSection) => (
+
-
-
-
-
-
-
-
-
- GQ Playground
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default memo(Header);
diff --git a/crates/web/frontend/src/components/history-tab/history-tab-utils.ts b/crates/web/frontend/src/components/history-tab/history-tab-utils.ts
new file mode 100644
index 00000000..e3d54e37
--- /dev/null
+++ b/crates/web/frontend/src/components/history-tab/history-tab-utils.ts
@@ -0,0 +1,87 @@
+import type { UserQuery } from "@/model/user-query";
+
+type GroupedQueries = {
+ [key: string]: UserQuery[];
+};
+
+export const groupQueries = (queries: UserQuery[]): GroupedQueries => {
+ const groupedQueries: GroupedQueries = {};
+ const now = Date.now();
+ const buckets = [
+ {
+ label: "Today",
+ dayDiff: 1,
+ },
+ {
+ label: "Yesterday",
+ dayDiff: 2,
+ },
+ {
+ label: "Two days ago",
+ dayDiff: 3,
+ },
+ {
+ label: "Three days ago",
+ dayDiff: 4,
+ },
+ {
+ label: "Four days ago",
+ dayDiff: 5,
+ },
+ {
+ label: "Five days ago",
+ dayDiff: 6,
+ },
+ {
+ label: "Six days ago",
+ dayDiff: 7,
+ },
+ {
+ label: "One week ago",
+ dayDiff: 14,
+ },
+ {
+ label: "Two weeks ago",
+ dayDiff: 21,
+ },
+ {
+ label: "Three weeks ago",
+ dayDiff: 28,
+ },
+ {
+ label: "One month ago",
+ dayDiff: 60,
+ },
+ {
+ label: "Two months ago",
+ dayDiff: 90,
+ },
+ {
+ label: "Three months ago",
+ dayDiff: 120,
+ },
+ ];
+ const stepsTimestamps = buckets.map((bucket) => ({
+ label: bucket.label,
+ timestamp: now - bucket.dayDiff * 24 * 60 * 60 * 1000,
+ }));
+ stepsTimestamps.push({
+ label: "A long time ago",
+ timestamp: 0,
+ });
+
+ let currentStep = 0;
+ for (const query of queries) {
+ while (query.timestamp < stepsTimestamps[currentStep].timestamp) {
+ currentStep++;
+ }
+ const step = stepsTimestamps[currentStep];
+ const stepKey = step.label;
+ if (!groupedQueries[stepKey]) {
+ groupedQueries[stepKey] = [];
+ }
+ groupedQueries[stepKey].push(query);
+ }
+
+ return groupedQueries;
+};
diff --git a/crates/web/frontend/src/components/history-tab/history-tab.tsx b/crates/web/frontend/src/components/history-tab/history-tab.tsx
new file mode 100644
index 00000000..f4dcd6de
--- /dev/null
+++ b/crates/web/frontend/src/components/history-tab/history-tab.tsx
@@ -0,0 +1,168 @@
+import useDebounce from "@/hooks/use-debounce";
+import { HISTORY_PAGE_SIZE } from "@/lib/constants";
+import { capitalize, cn, countLines } from "@/lib/utils";
+import type { UserQuery } from "@/model/user-query";
+import { addQuery, deleteQuery, getPaginatedQueries } from "@/services/queries/query-service";
+import { AnimatePresence, motion } from "framer-motion";
+import { Redo, Trash, X } from "lucide-react";
+import { type MutableRefObject, useCallback, useEffect, useState } from "react";
+import ActionButton from "../action-button/action-button";
+import SimpleEditor from "../editor/simple-editor";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { SidebarContent, SidebarDescription, SidebarHeader, SidebarTitle } from "../ui/sidebar";
+import { groupQueries } from "./history-tab-utils";
+
+interface Props {
+ onClickQuery: (queryContent: string) => void;
+ addNewQueryCallback: MutableRefObject<(queryContent: string) => void>;
+ className?: string;
+}
+
+const HistoryTab = ({ onClickQuery, addNewQueryCallback, className }: Props) => {
+ const [search, setSearch] = useState("");
+ const [currentPage, setCurrentPage] = useState(0);
+ const [hasMore, setHasMore] = useState(false);
+ const [queries, setQueries] = useState([]);
+ const debounce = useDebounce();
+
+ const handleSearch = useCallback(async (value: string) => {
+ setCurrentPage(0);
+ const [matchingQueries, hasMore] = await getPaginatedQueries(0, HISTORY_PAGE_SIZE, value);
+ setHasMore(hasMore);
+ setQueries(matchingQueries);
+ }, []);
+
+ const handleAddNewQuery = useCallback(
+ async (content: string) => {
+ const [addedQuery, deletedQuery] = await addQuery(content);
+ const newQueries = deletedQuery
+ ? queries.filter((query) => query.id !== deletedQuery.id)
+ : queries;
+ addedQuery && newQueries.unshift(addedQuery);
+ setQueries([...newQueries]);
+ },
+ [queries],
+ );
+
+ const handleDeleteQuery = useCallback(
+ async (id: number) => {
+ await deleteQuery(id);
+ setQueries(queries.filter((query) => query.id !== id));
+ },
+ [queries],
+ );
+
+ const handleLoadMore = useCallback(async () => {
+ const nextPage = currentPage + 1;
+ const [matchingQueries, hasMore] = await getPaginatedQueries(
+ nextPage,
+ HISTORY_PAGE_SIZE,
+ search,
+ );
+ setCurrentPage(nextPage);
+ setHasMore(hasMore);
+ setQueries((prevQueries) => [...prevQueries, ...matchingQueries]);
+ }, [currentPage, search]);
+
+ useEffect(() => debounce(200, () => handleSearch(search)), [search, debounce, handleSearch]);
+
+ useEffect(() => {
+ addNewQueryCallback.current = handleAddNewQuery;
+ }, [handleAddNewQuery, addNewQueryCallback]);
+
+ return (
+
+
+ Query history
+ Check the previous queries you have made.
+
+
+ {Object.entries(groupQueries(queries)).map((entry) => (
+
+
+ {capitalize(entry[0])}
+
+
+ {entry[1].map((query) => (
+
+
+ 2
+ ? "group-hover:max-w-10"
+ : "group-hover:max-w-20 flex",
+ )}
+ >
+
2 ? "right" : "bottom"}
+ containerClassName={cn(
+ "min-h-10 flex items-center justify-center border-l",
+ countLines(query.content) > 2 ? "h-1/2 border-b" : "h-full",
+ )}
+ className="h-full w-10 border-0"
+ description="Dump query into the editor"
+ onClick={() => onClickQuery(query.content)}
+ >
+
+
+
2 ? "right" : "bottom"}
+ containerClassName={cn(
+ "min-h-10 flex items-center justify-center border-l",
+ countLines(query.content) > 2 ? "h-1/2" : "h-full",
+ )}
+ className="h-full w-10 border-0"
+ description="Delete from history"
+ onClick={() => handleDeleteQuery(query.id)}
+ >
+
+
+
+