Dokploy/templates
1
0
Fork 0
mirror of https://github.com/Dokploy/templates synced 2025-06-26 18:16:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #8 from zaaakher/ui/loading

Browse Source 
chore(ui): improve search UI
This commit is contained in:
Mauricio Siu
2025-03-11 20:50:18 -06:00
committed by GitHub
parent 3a400a86e2 523d12e6f3
commit 96ee890079
8 changed files with 314 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/package.json
View File

@@ -38,7 +38,8 @@
"tailwind-merge": "^3.0.2", "tailwind-merge": "^3.0.2",
"tailwindcss": "^4.0.12", "tailwindcss": "^4.0.12",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"vite-plugin-static-copy": "2.3.0" "vite-plugin-static-copy": "2.3.0",
"zustand": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.8.2", "@types/node": "^20.8.2",

5
app/src/App.tsx
View File

@@ -1,14 +1,17 @@
import TemplateGrid from "./components/TemplateGrid"; import TemplateGrid from "./components/TemplateGrid";
import Navigation from "./components/Navigation"; import Navigation from "./components/Navigation";
import Search from "./components/Search"; import Search from "./components/Search";
import { useStore } from "./store";
import "./App.css"; import "./App.css";
function App() { function App() {
const view = useStore((state) => state.view);
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<Search /> <Search />
<TemplateGrid /> <TemplateGrid view={view} />
</div> </div>
); );
} }

86
app/src/components/Search.tsx
View File

@@ -1,7 +1,6 @@
import { Input } from "./ui/input"; import { Input } from "./ui/input";
import { useStore } from "../store"; import { useStore } from "../store";
import { SearchIcon, XIcon } from "lucide-react"; import { Grid, List, SearchIcon, XIcon } from "lucide-react";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { import {
@@ -15,14 +14,16 @@ import {
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react"; import { Check, ChevronsUpDown } from "lucide-react";
import React from "react"; import React from "react";
import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
import SelectedTags from "./SelectedTags";
const Search = () => { const Search = () => {
const { templates, searchQuery, setSearchQuery } = useStore(); const { templates, searchQuery, setSearchQuery, setView } = useStore();
const selectedTags = useStore((state) => state.selectedTags); const selectedTags = useStore((state) => state.selectedTags);
const addSelectedTag = useStore((state) => state.addSelectedTag); const addSelectedTag = useStore((state) => state.addSelectedTag);
const removeSelectedTag = useStore((state) => state.removeSelectedTag); const removeSelectedTag = useStore((state) => state.removeSelectedTag);
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [tagSearch, setTagSearch] = React.useState(""); const [tagSearch, setTagSearch] = React.useState("");
const view = useStore((state) => state.view);
// Get all unique tags, safely handle empty templates // Get all unique tags, safely handle empty templates
const uniqueTags = React.useMemo(() => { const uniqueTags = React.useMemo(() => {
@@ -41,31 +42,44 @@ const Search = () => {
}, [uniqueTags, tagSearch]); }, [uniqueTags, tagSearch]);
return ( return (
<div className="max-w-xl mx-auto p-12"> <div className=" mx-auto p-12 border-b w-full">
<h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8"> <h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
Available Templates ({templates?.length || 0}) Available Templates ({templates?.length || 0})
</h1> </h1>
<div className="max-w-xl mx-auto"> <div className="max-w-xl mx-auto flex flex-col gap-2">
<div className="flex flex-row gap-2"> <div className="relative w-full">
<div className="relative w-full"> <Input
<Input type="text"
type="text" placeholder="Search templates..."
placeholder="Search templates..." value={searchQuery}
value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)}
onChange={(e) => setSearchQuery(e.target.value)} className="w-full p-6"
className="w-full" />
/> {searchQuery.length > 0 ? (
{searchQuery.length > 0 ? ( <div className="cursor-pointer" onClick={() => setSearchQuery("")}>
<div <XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
className="cursor-pointer" </div>
onClick={() => setSearchQuery("")} ) : (
> <SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
<XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" /> )}
</div> </div>
) : (
<SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" /> <div className="flex flex-row gap-2 justify-between">
)} <Tabs
</div> defaultValue={view}
onValueChange={(value) => {
setView(value as "grid" | "rows");
}}
>
<TabsList>
<TabsTrigger value="grid">
<Grid /> <span className="text-xs p-1">Grid</span>
</TabsTrigger>
<TabsTrigger value="rows">
<List /> <span className="text-xs p-1">List</span>
</TabsTrigger>
</TabsList>
</Tabs>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
@@ -118,25 +132,7 @@ const Search = () => {
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
{selectedTags.length > 0 && ( {selectedTags.length > 0 && <SelectedTags />}
<div className="flex flex-wrap gap-2 mt-4">
{selectedTags.map((tag) => (
<Badge
key={tag}
variant="default"
className="cursor-pointer pr-1 flex items-center gap-1"
>
{tag}
<div
className="hover:bg-primary-foreground/20 rounded-full p-1"
onClick={() => removeSelectedTag(tag)}
>
<XIcon className="h-3 w-3" />
</div>
</Badge>
))}
</div>
)}
</div> </div>
</div> </div>
); );

30
app/src/components/SelectedTags.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { XIcon } from "lucide-react";
import { useStore } from "../store";
import { Badge } from "./ui/badge";
const SelectedTags = () => {
const selectedTags = useStore((state) => state.selectedTags);
const removeSelectedTag = useStore((state) => state.removeSelectedTag);
return (
<div className="flex flex-wrap gap-2 mt-4 border-t pt-4">
{selectedTags.map((tag) => (
<Badge
key={tag}
variant="default"
className="cursor-pointer pr-1 flex items-center gap-1"
>
{tag}
<div
className="hover:bg-primary-foreground/20 rounded-full p-1"
onClick={() => removeSelectedTag(tag)}
>
<XIcon className="h-3 w-3" />
</div>
</Badge>
))}
</div>
);
};
export default SelectedTags;

69
app/src/components/TemplateGrid.tsx
View File

@@ -22,6 +22,8 @@ import { useStore } from "../store";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Label } from "./ui/label"; import { Label } from "./ui/label";
import { Clipboard } from "lucide-react"; import { Clipboard } from "lucide-react";
import { Skeleton } from "./ui/skeleton";
import { cn } from "@/lib/utils";
interface Template { interface Template {
id: string; id: string;
@@ -42,11 +44,17 @@ interface TemplateFiles {
config: string | null; config: string | null;
} }
const TemplateGrid: React.FC = () => { interface TemplateGridProps {
view: "grid" | "rows";
}
const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
const { templates, setTemplates } = useStore(); const { templates, setTemplates } = useStore();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const { addSelectedTag, searchQuery, selectedTags } = useStore(); const searchQuery = useStore((state) => state.searchQuery);
const selectedTags = useStore((state) => state.selectedTags);
const { addSelectedTag } = useStore();
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>( const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
null null
@@ -133,9 +141,23 @@ const TemplateGrid: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h1 className="text-4xl font-bold text-center text-gray-900 mb-8"> <div
Loading templates... className={cn("", {
</h1> "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
view === "grid",
"grid grid-cols-1 gap-4": view === "rows",
})}
>
{[1, 2, 3].map((item) => (
<Skeleton
key={item}
className={cn({
"h-[300px]": view === "grid",
"h-[135px]": view === "rows",
})}
></Skeleton>
))}
</div>
</div> </div>
); );
} }
@@ -154,14 +176,27 @@ const TemplateGrid: React.FC = () => {
return ( return (
<> <>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div
className={cn("", {
"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
view === "grid",
"grid grid-cols-1 gap-4": view === "rows",
})}
>
{filteredTemplates.length > 0 ? ( {filteredTemplates.length > 0 ? (
filteredTemplates.map((template) => ( filteredTemplates.map((template) => (
<Card <Card
key={template.id} key={template.id}
className=" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]" onClick={() => handleTemplateClick(template)}
className={cn(
" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
{
"flex-col": view === "grid",
"flex-row": view === "rows",
}
)}
> >
<CardHeader onClick={() => handleTemplateClick(template)}> <CardHeader>
<CardTitle className="text-xl "> <CardTitle className="text-xl ">
<img <img
src={`/blueprints/${template.id}/${template.logo}`} src={`/blueprints/${template.id}/${template.logo}`}
@@ -175,10 +210,13 @@ const TemplateGrid: React.FC = () => {
<p className="text-sm text-muted-foreground line-clamp-2"> <p className="text-sm text-muted-foreground line-clamp-2">
{template.description} {template.description}
</p> </p>
<div className="mt-2 flex flex-wrap gap-1"> <div className="mt-2 flex flex-wrap gap-1 w-fit">
{template.tags.slice(0, 3).map((tag) => ( {template.tags.slice(0, 3).map((tag) => (
<span <span
onClick={() => addSelectedTag(tag)} onClick={(e) => {
e.stopPropagation();
addSelectedTag(tag);
}}
key={tag} key={tag}
className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800" className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
> >
@@ -187,10 +225,7 @@ const TemplateGrid: React.FC = () => {
))} ))}
</div> </div>
</CardContent> </CardContent>
<CardFooter <CardFooter className="flex justify-between items-center">
className="flex justify-between items-center"
onClick={() => handleTemplateClick(template)}
>
<span className="text-sm text-gray-500"> <span className="text-sm text-gray-500">
{template.version} {template.version}
</span> </span>
@@ -224,7 +259,7 @@ const TemplateGrid: React.FC = () => {
open={!!selectedTemplate} open={!!selectedTemplate}
onOpenChange={() => setSelectedTemplate(null)} onOpenChange={() => setSelectedTemplate(null)}
> >
<DialogContent className="max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0"> <DialogContent className="!max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
<DialogHeader className="space-y-4 border-b sticky top-0 p-4 bg-background z-10"> <DialogHeader className="space-y-4 border-b sticky top-0 p-4 bg-background z-10">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{selectedTemplate?.logo && ( {selectedTemplate?.logo && (
@@ -278,7 +313,7 @@ const TemplateGrid: React.FC = () => {
</div> </div>
</DialogHeader> </DialogHeader>
<div className="p-6 pt-3 flex flex-col gap-2"> <div className="p-6 pt-3 max-w-[100%] flex flex-col gap-2">
<DialogDescription className="text-base"> <DialogDescription className="text-base">
{selectedTemplate?.description} {selectedTemplate?.description}
</DialogDescription> </DialogDescription>
@@ -339,7 +374,7 @@ const TemplateGrid: React.FC = () => {
</TabsList> </TabsList>
<TabsContent value="docker-compose"> <TabsContent value="docker-compose">
{templateFiles?.dockerCompose && ( {templateFiles?.dockerCompose && (
<div className="max-w-6xl w-full relative"> <div className=" flex flex-col relative">
<Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1"> <Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
<span className="leading-tight text-xl font-semibold"> <span className="leading-tight text-xl font-semibold">
Docker Compose Docker Compose

278
app/src/components/ui/code-editor.tsx
View File

@@ -9,168 +9,168 @@ import { EditorView } from "@codemirror/view";
import { githubDark, githubLight } from "@uiw/codemirror-theme-github"; import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror"; import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
import { import {
autocompletion, autocompletion,
type CompletionContext, type CompletionContext,
type CompletionResult, type CompletionResult,
type Completion, type Completion,
} from "@codemirror/autocomplete"; } from "@codemirror/autocomplete";
import { useTheme } from "@/theme-provider"; import { useTheme } from "@/theme-provider";
// Docker Compose completion options // Docker Compose completion options
const dockerComposeServices = [ const dockerComposeServices = [
{ label: "services", type: "keyword", info: "Define services" }, { label: "services", type: "keyword", info: "Define services" },
{ label: "version", type: "keyword", info: "Specify compose file version" }, { label: "version", type: "keyword", info: "Specify compose file version" },
{ label: "volumes", type: "keyword", info: "Define volumes" }, { label: "volumes", type: "keyword", info: "Define volumes" },
{ label: "networks", type: "keyword", info: "Define networks" }, { label: "networks", type: "keyword", info: "Define networks" },
{ label: "configs", type: "keyword", info: "Define configuration files" }, { label: "configs", type: "keyword", info: "Define configuration files" },
{ label: "secrets", type: "keyword", info: "Define secrets" }, { label: "secrets", type: "keyword", info: "Define secrets" },
].map((opt) => ({ ].map((opt) => ({
...opt, ...opt,
apply: (view: EditorView, completion: Completion) => { apply: (view: EditorView, completion: Completion) => {
const insert = `${completion.label}:`; const insert = `${completion.label}:`;
view.dispatch({ view.dispatch({
changes: { changes: {
from: view.state.selection.main.from, from: view.state.selection.main.from,
to: view.state.selection.main.to, to: view.state.selection.main.to,
insert, insert,
}, },
selection: { anchor: view.state.selection.main.from + insert.length }, selection: { anchor: view.state.selection.main.from + insert.length },
}); });
}, },
})); }));
const dockerComposeServiceOptions = [ const dockerComposeServiceOptions = [
{ {
label: "image", label: "image",
type: "keyword", type: "keyword",
info: "Specify the image to start the container from", info: "Specify the image to start the container from",
}, },
{ label: "build", type: "keyword", info: "Build configuration" }, { label: "build", type: "keyword", info: "Build configuration" },
{ label: "command", type: "keyword", info: "Override the default command" }, { label: "command", type: "keyword", info: "Override the default command" },
{ label: "container_name", type: "keyword", info: "Custom container name" }, { label: "container_name", type: "keyword", info: "Custom container name" },
{ {
label: "depends_on", label: "depends_on",
type: "keyword", type: "keyword",
info: "Express dependency between services", info: "Express dependency between services",
}, },
{ label: "environment", type: "keyword", info: "Add environment variables" }, { label: "environment", type: "keyword", info: "Add environment variables" },
{ {
label: "env_file", label: "env_file",
type: "keyword", type: "keyword",
info: "Add environment variables from a file", info: "Add environment variables from a file",
}, },
{ {
label: "expose", label: "expose",
type: "keyword", type: "keyword",
info: "Expose ports without publishing them", info: "Expose ports without publishing them",
}, },
{ label: "ports", type: "keyword", info: "Expose ports" }, { label: "ports", type: "keyword", info: "Expose ports" },
{ {
label: "volumes", label: "volumes",
type: "keyword", type: "keyword",
info: "Mount host paths or named volumes", info: "Mount host paths or named volumes",
}, },
{ label: "restart", type: "keyword", info: "Restart policy" }, { label: "restart", type: "keyword", info: "Restart policy" },
{ label: "networks", type: "keyword", info: "Networks to join" }, { label: "networks", type: "keyword", info: "Networks to join" },
].map((opt) => ({ ].map((opt) => ({
...opt, ...opt,
apply: (view: EditorView, completion: Completion) => { apply: (view: EditorView, completion: Completion) => {
const insert = `${completion.label}: `; const insert = `${completion.label}: `;
view.dispatch({ view.dispatch({
changes: { changes: {
from: view.state.selection.main.from, from: view.state.selection.main.from,
to: view.state.selection.main.to, to: view.state.selection.main.to,
insert, insert,
}, },
selection: { anchor: view.state.selection.main.from + insert.length }, selection: { anchor: view.state.selection.main.from + insert.length },
}); });
}, },
})); }));
function dockerComposeComplete( function dockerComposeComplete(
context: CompletionContext, context: CompletionContext
): CompletionResult | null { ): CompletionResult | null {
const word = context.matchBefore(/\w*/); const word = context.matchBefore(/\w*/);
if (!word) return null; if (!word) return null;
if (!word.text && !context.explicit) return null; if (!word.text && !context.explicit) return null;
// Check if we're at the root level // Check if we're at the root level
const line = context.state.doc.lineAt(context.pos); const line = context.state.doc.lineAt(context.pos);
const indentation = /^\s*/.exec(line.text)?.[0].length || 0; const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
if (indentation === 0) { if (indentation === 0) {
return { return {
from: word.from, from: word.from,
options: dockerComposeServices, options: dockerComposeServices,
validFor: /^\w*$/, validFor: /^\w*$/,
}; };
} }
// If we're inside a service definition // If we're inside a service definition
if (indentation === 4) { if (indentation === 4) {
return { return {
from: word.from, from: word.from,
options: dockerComposeServiceOptions, options: dockerComposeServiceOptions,
validFor: /^\w*$/, validFor: /^\w*$/,
}; };
} }
return null; return null;
} }
interface Props extends ReactCodeMirrorProps { interface Props extends ReactCodeMirrorProps {
wrapperClassName?: string; wrapperClassName?: string;
disabled?: boolean; disabled?: boolean;
language?: "yaml" | "json" | "properties" | "shell"; language?: "yaml" | "json" | "properties" | "shell";
lineWrapping?: boolean; lineWrapping?: boolean;
lineNumbers?: boolean; lineNumbers?: boolean;
} }
export const CodeEditor = ({ export const CodeEditor = ({
className, className,
wrapperClassName, wrapperClassName,
language = "yaml", language = "yaml",
lineNumbers = true, lineNumbers = true,
...props ...props
}: Props) => { }: Props) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<div className={cn("relative overflow-auto", wrapperClassName)}> <div className={cn("relative overflow-auto", wrapperClassName)}>
<CodeMirror <CodeMirror
basicSetup={{ basicSetup={{
lineNumbers, lineNumbers,
foldGutter: true, foldGutter: true,
highlightSelectionMatches: true, highlightSelectionMatches: true,
highlightActiveLine: !props.disabled, highlightActiveLine: !props.disabled,
allowMultipleSelections: true, allowMultipleSelections: true,
}} }}
theme={theme === "dark" ? githubDark : githubLight} theme={theme === "dark" ? githubDark : githubLight}
extensions={[ extensions={[
language === "yaml" language === "yaml"
? yaml() ? yaml()
: language === "json" : language === "json"
? json() ? json()
: language === "shell" : language === "shell"
? StreamLanguage.define(shell) ? StreamLanguage.define(shell)
: StreamLanguage.define(properties), : StreamLanguage.define(properties),
props.lineWrapping ? EditorView.lineWrapping : [], props.lineWrapping ? EditorView.lineWrapping : [],
language === "yaml" language === "yaml"
? autocompletion({ ? autocompletion({
override: [dockerComposeComplete], override: [dockerComposeComplete],
}) })
: [], : [],
]} ]}
{...props} {...props}
editable={!props.disabled} editable={!props.disabled}
className={cn( className={cn(
"w-full h-full text-sm leading-relaxed", "w-full h-full text-sm leading-relaxed",
`cm-theme-${theme}`, `cm-theme-${theme}`,
className, className
)} )}
/> />
{props.disabled && ( {props.disabled && (
<div className="absolute top-0 rounded-md left-0 w-full h-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" /> <div className="absolute top-0 rounded-md left-0 w-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
)} )}
</div> </div>
); );
}; };

32
app/src/components/ui/dialog.tsx
View File

@@ -1,31 +1,31 @@
import * as React from "react" import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog" import * as DialogPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react" import { XIcon } from "lucide-react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
function Dialog({ function Dialog({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) { }: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} /> return <DialogPrimitive.Root data-slot="dialog" {...props} />;
} }
function DialogTrigger({ function DialogTrigger({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) { }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} /> return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
} }
function DialogPortal({ function DialogPortal({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) { }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} /> return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
} }
function DialogClose({ function DialogClose({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) { }: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} /> return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
} }
function DialogOverlay({ function DialogOverlay({
@@ -41,7 +41,7 @@ function DialogOverlay({
)} )}
{...props} {...props}
/> />
) );
} }
function DialogContent({ function DialogContent({
@@ -62,12 +62,12 @@ function DialogContent({
> >
{children} {children}
<DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-20 cursor-pointer"> <DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-20 cursor-pointer">
<XIcon className="size-5"/> <XIcon className="size-5" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>
</DialogPortal> </DialogPortal>
) );
} }
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -77,7 +77,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
className={cn("flex flex-col gap-2 text-center sm:text-left", className)} className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props} {...props}
/> />
) );
} }
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
)} )}
{...props} {...props}
/> />
) );
} }
function DialogTitle({ function DialogTitle({
@@ -103,7 +103,7 @@ function DialogTitle({
className={cn("text-lg leading-none font-semibold", className)} className={cn("text-lg leading-none font-semibold", className)}
{...props} {...props}
/> />
) );
} }
function DialogDescription({ function DialogDescription({
@@ -116,7 +116,7 @@ function DialogDescription({
className={cn("text-muted-foreground text-sm", className)} className={cn("text-muted-foreground text-sm", className)}
{...props} {...props}
/> />
) );
} }
export { export {
@@ -130,4 +130,4 @@ export {
DialogPortal, DialogPortal,
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} };

47
app/src/store.ts
View File

@@ -1,4 +1,5 @@
import { create } from "zustand"; import { create } from "zustand";
import { persist } from "zustand/middleware";
interface Template { interface Template {
id: string; id: string;
@@ -22,22 +23,34 @@ interface TemplateStore {
selectedTags: string[]; selectedTags: string[];
addSelectedTag: (tag: string) => void; addSelectedTag: (tag: string) => void;
removeSelectedTag: (tag: string) => void; removeSelectedTag: (tag: string) => void;
view: "grid" | "rows";
setView: (view: "grid" | "rows") => void;
} }
export const useStore = create<TemplateStore>((set) => ({ export const useStore = create<TemplateStore>()(
templates: [], persist(
setTemplates: (templates) => set({ templates }), (set) => ({
searchQuery: "", templates: [],
setSearchQuery: (searchQuery) => set({ searchQuery }), setTemplates: (templates) => set({ templates }),
selectedTags: [], searchQuery: "",
addSelectedTag: (tag) => setSearchQuery: (searchQuery) => set({ searchQuery }),
set((state) => ({ selectedTags: [],
selectedTags: state.selectedTags.includes(tag) addSelectedTag: (tag) =>
? state.selectedTags set((state) => ({
: [...state.selectedTags, tag], selectedTags: state.selectedTags.includes(tag)
})), ? state.selectedTags
removeSelectedTag: (tag) => : [...state.selectedTags, tag],
set((state) => ({ })),
selectedTags: state.selectedTags.filter((t) => t !== tag), removeSelectedTag: (tag) =>
})), set((state) => ({
})); selectedTags: state.selectedTags.filter((t) => t !== tag),
})),
view: "grid",
setView: (view) => set({ view }),
}),
{
name: "template-store",
partialize: (state) => ({ view: state.view }), // Only persist the view preference
}
)
);