diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 77d7a6b6..75c4120b 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -4,11 +4,35 @@ Thank you for your interest in contributing to OpenCut! This document provides g ## Getting Started +### Prerequisites + +- [Node.js](https://nodejs.org/en/) (v18 or later) +- [Bun](https://bun.sh/docs/installation) + (for `npm` alternative) +- [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) + +> **Note:** Docker is optional, but it's essential for running the local database and Redis services. If you're planning to contribute to frontend features, you can skip the Docker setup. If you have followed the steps below in [Setup](#setup), you're all set to go! + +### Setup + 1. Fork the repository 2. Clone your fork locally 3. Navigate to the web app directory: `cd apps/web` -4. Install dependencies: `bun install` -5. Start the development server: `bun run dev` +4. Copy `.env.example` to `.env.local`: + + ```bash + # Unix/Linux/Mac + cp .env.example .env.local + + # Windows Command Prompt + copy .env.example .env.local + + # Windows PowerShell + Copy-Item .env.example .env.local + ``` + +5. Install dependencies: `bun install` +6. Start the development server: `bun run dev` > **Note:** If you see an error like `Unsupported URL Type "workspace:*"` when running `npm install`, you have two options: > @@ -18,6 +42,7 @@ Thank you for your interest in contributing to OpenCut! This document provides g ## What to Focus On **🎯 Good Areas to Contribute:** + - Timeline functionality and UI improvements - Project management features - Performance optimizations @@ -26,6 +51,7 @@ Thank you for your interest in contributing to OpenCut! This document provides g - Documentation and testing **⚠️ Areas to Avoid:** + - Preview panel enhancements (text fonts, stickers, effects) - Export functionality improvements - Preview rendering optimizations @@ -38,12 +64,6 @@ If you're unsure whether your idea falls into the preview category, feel free to ## Development Setup -### Prerequisites - -- Node.js 18+ -- Bun (latest version) -- Docker (for local database) - ### Local Development 1. Start the database and Redis services: diff --git a/.gitignore b/.gitignore index 4869b9bd..38711b81 100644 --- a/.gitignore +++ b/.gitignore @@ -9,8 +9,6 @@ # debug /apps/web/npm-debug.log* -/apps/web/yarn-debug.log* -/apps/web/yarn-error.log* # env files (can opt-in for committing if needed) /apps/web/.env* @@ -18,7 +16,6 @@ # typescript /apps/web/next-env.d.ts -/apps/web/yarn.lock # asdf version management .tool-versions diff --git a/README.md b/README.md index ad9a6d38..1378b15a 100644 --- a/README.md +++ b/README.md @@ -39,26 +39,36 @@ Before you begin, ensure you have the following installed on your system: +- [Node.js](https://nodejs.org/en/) (v18 or later) - [Bun](https://bun.sh/docs/installation) + (for `npm` alternative) - [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) -- [Node.js](https://nodejs.org/en/) (for `npm` alternative) + +> **Note:** Docker is optional, but it's essential for running the local database and Redis services. If you're planning to run the frontend or want to contribute to frontend features, you can skip the Docker setup. If you have followed the steps below in [Setup](#setup), you're all set to go! ### Setup 1. Fork the repository 2. Clone your fork locally 3. Navigate to the web app directory: `cd apps/web` -4. Install dependencies: `bun install` -5. Start the development server: `bun dev` +4. Copy `.env.example` to `.env.local`: + + ```bash + # Unix/Linux/Mac + cp .env.example .env.local + + # Windows Command Prompt + copy .env.example .env.local + + # Windows PowerShell + Copy-Item .env.example .env.local + ``` + +5. Install dependencies: `bun install` +6. Start the development server: `bun dev` ## Development Setup -### Prerequisites - -- Node.js 18+ -- Bun (latest version) -- Docker (for local database) - ### Local Development 1. Start the database and Redis services: 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 (
@@ -172,25 +187,40 @@ export default function ProjectsPage() {
- {isSelectionMode && savedProjects.length > 0 && ( -
handleSelectAll(!allSelected)} - > +
+
+ setSearchQuery(e.target.value)} + /> +
+ +
+ + {isSelectionMode && sortedProjects.length > 0 && ( +
e.stopPropagation()} + checked={someSelected ? "indeterminate" : allSelected} + onCheckedChange={(value) => handleSelectAll(!!value)} /> -
- - {allSelected ? "Deselect All" : "Select All"} - - - ({selectedProjects.size} of {savedProjects.length} selected) - -
+ + {allSelected ? "Deselect All" : "Select All"} + + + ({selectedProjects.size} of {sortedProjects.length} selected) +
)} @@ -201,15 +231,21 @@ export default function ProjectsPage() {
) : savedProjects.length === 0 ? ( + ) : sortedProjects.length === 0 ? ( + setSearchQuery("")} + /> ) : (
- {savedProjects.map((project) => ( + {sortedProjects.map((project) => ( ))}
@@ -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 && (
-
+
@@ -322,10 +360,10 @@ function ProjectCard({
- +

- {project.name} +

{!isSelectionMode && (

- {project.name} +

{text}; + } + + const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + const parts = text.split(new RegExp(`(${escapedQuery})`, "gi")); + return ( + + {parts.map((part, i) => + part.toLowerCase() === query.toLowerCase() ? ( + + {part} + + ) : ( + part + ) + )} + + ); +} + function CreateButton({ onClick }: { onClick?: () => void }) { return (
); } + +function NoResults({ + searchQuery, + onClearSearch, +}: { + searchQuery: string; + onClearSearch: () => void; +}) { + return ( +
+
+ +
+

No results found

+

+ Your search for "{searchQuery}" did not return any results. +

+ +
+ ); +} 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} > 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; updateProjectFps: (fps: number) => Promise; + + getFilteredAndSortedProjects: ( + searchQuery: string, + sortOption: string + ) => TProject[]; } export const useProjectStore = create((set, get) => ({ @@ -317,4 +322,40 @@ export const useProjectStore = create((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; + }, }));