summaryrefslogtreecommitdiff
path: root/apps/web
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web')
-rw-r--r--apps/web/src/app/projects/page.tsx131
-rw-r--r--apps/web/src/components/ui/draggable-item.tsx1
-rw-r--r--apps/web/src/stores/project-store.ts41
3 files changed, 149 insertions, 24 deletions
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index 499b999a..04270aee 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
import {
ChevronLeft,
Plus,
@@ -14,6 +15,7 @@ import {
Loader2,
X,
Trash2,
+ Search,
} from "lucide-react";
import { TProject } from "@/types/project";
import Image from "next/image";
@@ -28,6 +30,13 @@ import { useProjectStore } from "@/stores/project-store";
import { useRouter } from "next/navigation";
import { DeleteProjectDialog } from "@/components/delete-project-dialog";
import { RenameProjectDialog } from "@/components/rename-project-dialog";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
export default function ProjectsPage() {
const {
@@ -36,6 +45,7 @@ export default function ProjectsPage() {
isLoading,
isInitialized,
deleteProject,
+ getFilteredAndSortedProjects,
} = useProjectStore();
const router = useRouter();
const [isSelectionMode, setIsSelectionMode] = useState(false);
@@ -43,6 +53,8 @@ export default function ProjectsPage() {
new Set()
);
const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [sortOption, setSortOption] = useState("createdAt-desc");
const handleCreateProject = async () => {
const projectId = await createNewProject("New Project");
@@ -62,7 +74,7 @@ export default function ProjectsPage() {
const handleSelectAll = (checked: boolean) => {
if (checked) {
- setSelectedProjects(new Set(savedProjects.map((p) => p.id)));
+ setSelectedProjects(new Set(sortedProjects.map((p) => p.id)));
} else {
setSelectedProjects(new Set());
}
@@ -82,10 +94,13 @@ export default function ProjectsPage() {
setIsBulkDeleteDialogOpen(false);
};
+ const sortedProjects = getFilteredAndSortedProjects(searchQuery, sortOption);
+
const allSelected =
- savedProjects.length > 0 && selectedProjects.size === savedProjects.length;
+ sortedProjects.length > 0 &&
+ selectedProjects.size === sortedProjects.length;
const someSelected =
- selectedProjects.size > 0 && selectedProjects.size < savedProjects.length;
+ selectedProjects.size > 0 && selectedProjects.size < sortedProjects.length;
return (
<div className="min-h-screen bg-background">
@@ -172,25 +187,40 @@ export default function ProjectsPage() {
</div>
</div>
- {isSelectionMode && savedProjects.length > 0 && (
- <div
- className="mb-6 p-4 bg-muted/30 rounded-lg border cursor-pointer hover:bg-muted/40 transition-colors"
- onClick={() => handleSelectAll(!allSelected)}
- >
+ <div className="mb-4 flex items-center justify-between gap-4">
+ <div className="flex-1 max-w-72">
+ <Input
+ placeholder="Search projects..."
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ />
+ </div>
+ <Select value={sortOption} onValueChange={setSortOption}>
+ <SelectTrigger className="w-[180px]">
+ <SelectValue placeholder="Sort by" />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="createdAt-desc">Newest to Oldest</SelectItem>
+ <SelectItem value="createdAt-asc">Oldest to Newest</SelectItem>
+ <SelectItem value="name-asc">Name (A-Z)</SelectItem>
+ <SelectItem value="name-desc">Name (Z-A)</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+
+ {isSelectionMode && sortedProjects.length > 0 && (
+ <div className="mb-6 p-4 bg-muted/30 rounded-lg border">
<div className="flex items-center gap-3">
<Checkbox
- checked={allSelected}
- onCheckedChange={handleSelectAll}
- onClick={(e) => e.stopPropagation()}
+ checked={someSelected ? "indeterminate" : allSelected}
+ onCheckedChange={(value) => handleSelectAll(!!value)}
/>
- <div className="flex-1 flex items-center justify-start gap-2">
- <span className="text-sm font-medium">
- {allSelected ? "Deselect All" : "Select All"}
- </span>
- <span className="text-sm text-muted-foreground">
- ({selectedProjects.size} of {savedProjects.length} selected)
- </span>
- </div>
+ <span className="text-sm font-medium">
+ {allSelected ? "Deselect All" : "Select All"}
+ </span>
+ <span className="text-sm text-muted-foreground">
+ ({selectedProjects.size} of {sortedProjects.length} selected)
+ </span>
</div>
</div>
)}
@@ -201,15 +231,21 @@ export default function ProjectsPage() {
</div>
) : savedProjects.length === 0 ? (
<NoProjects onCreateProject={handleCreateProject} />
+ ) : sortedProjects.length === 0 ? (
+ <NoResults
+ searchQuery={searchQuery}
+ onClearSearch={() => setSearchQuery("")}
+ />
) : (
<div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
- {savedProjects.map((project) => (
+ {sortedProjects.map((project) => (
<ProjectCard
key={project.id}
project={project}
isSelectionMode={isSelectionMode}
isSelected={selectedProjects.has(project.id)}
onSelect={handleSelectProject}
+ searchQuery={searchQuery}
/>
))}
</div>
@@ -230,6 +266,7 @@ interface ProjectCardProps {
isSelectionMode?: boolean;
isSelected?: boolean;
onSelect?: (projectId: string, checked: boolean) => void;
+ searchQuery?: string;
}
function ProjectCard({
@@ -237,6 +274,7 @@ function ProjectCard({
isSelectionMode = false,
isSelected = false,
onSelect,
+ searchQuery,
}: ProjectCardProps) {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -292,7 +330,7 @@ function ProjectCard({
{/* Selection checkbox */}
{isSelectionMode && (
<div className="absolute top-3 left-3 z-10">
- <div className="w-5 h-5 rounded-full bg-background/80 backdrop-blur-sm border flex items-center justify-center">
+ <div className="w-5 h-5 rounded bg-background/80 backdrop-blur-sm border flex items-center justify-center">
<Checkbox
checked={isSelected}
onCheckedChange={(checked) =>
@@ -322,10 +360,10 @@ function ProjectCard({
</div>
</div>
- <CardContent className="px-0 pt-5 flex flex-col gap-1 p-2">
+ <CardContent className="px-0 pt-5 flex flex-col gap-1">
<div className="flex items-start justify-between">
<h3 className="font-medium text-sm leading-snug group-hover:text-foreground/90 transition-colors line-clamp-2">
- {project.name}
+ <Highlight text={project.name} query={searchQuery} />
</h3>
{!isSelectionMode && (
<DropdownMenu
@@ -432,7 +470,7 @@ function ProjectCard({
<CardContent className="px-0 pt-5 flex flex-col gap-1">
<div className="flex items-start justify-between">
<h3 className="font-medium text-sm leading-snug group-hover:text-foreground/90 transition-colors line-clamp-2">
- {project.name}
+ <Highlight text={project.name} query={searchQuery} />
</h3>
<DropdownMenu
open={isDropdownOpen}
@@ -519,6 +557,28 @@ function ProjectCard({
);
}
+function Highlight({ text, query }: { text: string; query?: string }) {
+ if (!query || query.trim() === "") {
+ return <span>{text}</span>;
+ }
+
+ const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+ const parts = text.split(new RegExp(`(${escapedQuery})`, "gi"));
+ return (
+ <span>
+ {parts.map((part, i) =>
+ part.toLowerCase() === query.toLowerCase() ? (
+ <mark key={i} className="bg-yellow-200 text-black">
+ {part}
+ </mark>
+ ) : (
+ part
+ )
+ )}
+ </span>
+ );
+}
+
function CreateButton({ onClick }: { onClick?: () => void }) {
return (
<Button className="flex" onClick={onClick}>
@@ -546,3 +606,26 @@ function NoProjects({ onCreateProject }: { onCreateProject: () => void }) {
</div>
);
}
+
+function NoResults({
+ searchQuery,
+ onClearSearch,
+}: {
+ searchQuery: string;
+ onClearSearch: () => void;
+}) {
+ return (
+ <div className="flex flex-col items-center justify-center py-16 text-center">
+ <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
+ <Search className="h-8 w-8 text-muted-foreground" />
+ </div>
+ <h3 className="text-lg font-medium mb-2">No results found</h3>
+ <p className="text-muted-foreground mb-6 max-w-md">
+ Your search for "{searchQuery}" did not return any results.
+ </p>
+ <Button onClick={onClearSearch} variant="outline">
+ Clear Search
+ </Button>
+ </div>
+ );
+}
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index b15e8df8..dfb4dce7 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -177,6 +177,7 @@ function PlusButton({
e.stopPropagation();
onClick?.();
}}
+ title={tooltipText}
>
<Plus className="!size-3" />
</Button>
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index efb9cc71..a8833982 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -27,6 +27,11 @@ interface ProjectStore {
options?: { backgroundColor?: string; blurIntensity?: number }
) => Promise<void>;
updateProjectFps: (fps: number) => Promise<void>;
+
+ getFilteredAndSortedProjects: (
+ searchQuery: string,
+ sortOption: string
+ ) => TProject[];
}
export const useProjectStore = create<ProjectStore>((set, get) => ({
@@ -317,4 +322,40 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
});
}
},
+
+ getFilteredAndSortedProjects: (searchQuery: string, sortOption: string) => {
+ const { savedProjects } = get();
+
+ // Filter projects by search query
+ const filteredProjects = savedProjects.filter((project) =>
+ project.name.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ // Sort filtered projects
+ const sortedProjects = [...filteredProjects].sort((a, b) => {
+ const [key, order] = sortOption.split("-");
+
+ if (key !== "createdAt" && key !== "name") {
+ console.warn(`Invalid sort key: ${key}`);
+ return 0;
+ }
+
+ const aValue = a[key];
+ const bValue = b[key];
+
+ if (aValue === undefined || bValue === undefined) return 0;
+
+ if (order === "asc") {
+ if (aValue < bValue) return -1;
+ if (aValue > bValue) return 1;
+ return 0;
+ } else {
+ if (aValue > bValue) return -1;
+ if (aValue < bValue) return 1;
+ return 0;
+ }
+ });
+
+ return sortedProjects;
+ },
}));
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 14:05:24 +0000