summaryrefslogtreecommitdiff
path: root/apps/web/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components')
-rw-r--r--apps/web/src/components/editor/media-panel/index.tsx4
-rw-r--r--apps/web/src/components/editor/media-panel/store.ts6
-rw-r--r--apps/web/src/components/editor/media-panel/views/audio.tsx19
-rw-r--r--apps/web/src/components/editor/media-panel/views/sounds.tsx500
-rw-r--r--apps/web/src/components/editor/preview-panel.tsx2
-rw-r--r--apps/web/src/components/editor/properties-panel/index.tsx109
-rw-r--r--apps/web/src/components/editor/timeline/index.tsx9
-rw-r--r--apps/web/src/components/icons.tsx22
-rw-r--r--apps/web/src/components/providers/global-prefetcher.ts78
-rw-r--r--apps/web/src/components/ui/dropdown-menu.tsx10
-rw-r--r--apps/web/src/components/ui/input.tsx64
-rw-r--r--apps/web/src/components/ui/scroll-area.tsx55
12 files changed, 690 insertions, 188 deletions
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 4d80b642..70eb69dd 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -4,7 +4,7 @@ import { TabBar } from "./tabbar";
import { MediaView } from "./views/media";
import { useMediaPanelStore, Tab } from "./store";
import { TextView } from "./views/text";
-import { AudioView } from "./views/audio";
+import { SoundsView } from "./views/sounds";
import { Separator } from "@/components/ui/separator";
import { SettingsView } from "./views/settings";
@@ -13,7 +13,7 @@ export function MediaPanel() {
const viewMap: Record<Tab, React.ReactNode> = {
media: <MediaView />,
- audio: <AudioView />,
+ sounds: <SoundsView />,
text: <TextView />,
stickers: (
<div className="p-4 text-muted-foreground">
diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts
index 577417a9..e1212030 100644
--- a/apps/web/src/components/editor/media-panel/store.ts
+++ b/apps/web/src/components/editor/media-panel/store.ts
@@ -15,7 +15,7 @@ import { create } from "zustand";
export type Tab =
| "media"
- | "audio"
+ | "sounds"
| "text"
| "stickers"
| "effects"
@@ -30,9 +30,9 @@ export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
icon: VideoIcon,
label: "Media",
},
- audio: {
+ sounds: {
icon: MusicIcon,
- label: "Audio",
+ label: "Sounds",
},
text: {
icon: TypeIcon,
diff --git a/apps/web/src/components/editor/media-panel/views/audio.tsx b/apps/web/src/components/editor/media-panel/views/audio.tsx
deleted file mode 100644
index 0d3c3f1e..00000000
--- a/apps/web/src/components/editor/media-panel/views/audio.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-
-export function AudioView() {
- const [search, setSearch] = useState("");
- return (
- <div className="h-full flex flex-col gap-2 p-4">
- <Input
- placeholder="Search songs and artists"
- className="bg-panel-accent"
- value={search}
- onChange={(e) => setSearch(e.target.value)}
- />
- <div className="flex flex-col gap-2" />
- </div>
- );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
new file mode 100644
index 00000000..ed0db8ab
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/sounds.tsx
@@ -0,0 +1,500 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { useState, useMemo, useRef, useEffect } from "react";
+import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ PlayIcon,
+ PauseIcon,
+ HeartIcon,
+ PlusIcon,
+ ListFilter,
+} from "lucide-react";
+import { useSoundsStore } from "@/stores/sounds-store";
+import { useSoundSearch } from "@/hooks/use-sound-search";
+import type { SoundEffect, SavedSound } from "@/types/sounds";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuCheckboxItem,
+} from "@/components/ui/dropdown-menu";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export function SoundsView() {
+ return (
+ <div className="h-full flex flex-col">
+ <Tabs defaultValue="sound-effects" className="flex flex-col h-full">
+ <div className="px-3 pt-4 pb-0">
+ <TabsList>
+ <TabsTrigger value="sound-effects">Sound effects</TabsTrigger>
+ <TabsTrigger value="songs">Songs</TabsTrigger>
+ <TabsTrigger value="saved">Saved</TabsTrigger>
+ </TabsList>
+ </div>
+ <Separator className="my-4" />
+ <TabsContent
+ value="sound-effects"
+ className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+ >
+ <SoundEffectsView />
+ </TabsContent>
+ <TabsContent
+ value="saved"
+ className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+ >
+ <SavedSoundsView />
+ </TabsContent>
+ <TabsContent
+ value="songs"
+ className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+ >
+ <SongsView />
+ </TabsContent>
+ </Tabs>
+ </div>
+ );
+}
+
+function SoundEffectsView() {
+ const {
+ topSoundEffects,
+ isLoading,
+ searchQuery,
+ setSearchQuery,
+ scrollPosition,
+ setScrollPosition,
+ loadSavedSounds,
+ isSoundSaved,
+ toggleSavedSound,
+ showCommercialOnly,
+ toggleCommercialFilter,
+ } = useSoundsStore();
+ const {
+ results: searchResults,
+ isLoading: isSearching,
+ loadMore,
+ hasNextPage,
+ isLoadingMore,
+ } = useSoundSearch(searchQuery, showCommercialOnly);
+
+ // Audio playback state
+ const [playingId, setPlayingId] = useState<number | null>(null);
+ const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+ null
+ );
+
+ // Scroll position persistence
+ const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+ // Load saved sounds and restore scroll position when component mounts
+ useEffect(() => {
+ loadSavedSounds();
+
+ if (scrollAreaRef.current && scrollPosition > 0) {
+ const timeoutId = setTimeout(() => {
+ scrollAreaRef.current?.scrollTo({ top: scrollPosition });
+ }, 100); // Small delay to ensure content is rendered
+
+ return () => clearTimeout(timeoutId);
+ }
+ }, []); // Only run on mount
+
+ // Track scroll position changes and handle infinite scroll
+ const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
+ const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+ setScrollPosition(scrollTop);
+
+ // Trigger loadMore when scrolled to within 200px of bottom
+ const nearBottom = scrollTop + clientHeight >= scrollHeight - 200;
+ if (nearBottom && hasNextPage && !isLoadingMore && !isSearching) {
+ loadMore();
+ }
+ };
+
+ // Use your existing design, just swap the data source
+ const displayedSounds = useMemo(() => {
+ const sounds = searchQuery ? searchResults : topSoundEffects;
+ return sounds;
+ }, [searchQuery, searchResults, topSoundEffects]);
+
+ const playSound = (sound: SoundEffect) => {
+ if (playingId === sound.id) {
+ audioElement?.pause();
+ setPlayingId(null);
+ return;
+ }
+
+ // Stop previous sound
+ audioElement?.pause();
+
+ if (sound.previewUrl) {
+ const audio = new Audio(sound.previewUrl);
+ audio.addEventListener("ended", () => {
+ setPlayingId(null);
+ });
+ audio.addEventListener("error", (e) => {
+ setPlayingId(null);
+ });
+ audio.play().catch((error) => {
+ setPlayingId(null);
+ });
+
+ setAudioElement(audio);
+ setPlayingId(sound.id);
+ }
+ };
+
+ return (
+ <div className="flex flex-col gap-5 mt-1 h-full">
+ <div className="flex items-center gap-3">
+ <Input
+ placeholder="Search sound effects"
+ className="bg-panel-accent w-full"
+ containerClassName="w-full"
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ showClearIcon
+ onClear={() => setSearchQuery("")}
+ />
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button
+ variant="text"
+ size="icon"
+ className={cn(showCommercialOnly && "text-primary")}
+ >
+ <ListFilter className="w-4 h-4" />
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end" className="w-56">
+ <DropdownMenuCheckboxItem
+ checked={showCommercialOnly}
+ onCheckedChange={toggleCommercialFilter}
+ >
+ Show only commercially licensed
+ </DropdownMenuCheckboxItem>
+ <div className="px-2 py-1.5 text-xs text-muted-foreground">
+ {showCommercialOnly
+ ? "Only showing sounds licensed for commercial use"
+ : "Showing all sounds regardless of license"}
+ </div>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ </div>
+
+ <div className="relative h-full overflow-hidden">
+ <ScrollArea
+ className="flex-1 h-full"
+ ref={scrollAreaRef}
+ onScrollCapture={handleScroll}
+ >
+ <div className="flex flex-col gap-4">
+ {isLoading && !searchQuery && (
+ <div className="text-muted-foreground text-sm">
+ Loading sounds...
+ </div>
+ )}
+ {isSearching && searchQuery && (
+ <div className="text-muted-foreground text-sm">Searching...</div>
+ )}
+ {displayedSounds.map((sound) => (
+ <AudioItem
+ key={sound.id}
+ sound={sound}
+ isPlaying={playingId === sound.id}
+ onPlay={() => playSound(sound)}
+ isSaved={isSoundSaved(sound.id)}
+ onToggleSaved={() => toggleSavedSound(sound)}
+ />
+ ))}
+ {!isLoading && !isSearching && displayedSounds.length === 0 && (
+ <div className="text-muted-foreground text-sm">
+ {searchQuery ? "No sounds found" : "No sounds available"}
+ </div>
+ )}
+ {isLoadingMore && (
+ <div className="text-muted-foreground text-sm text-center py-4">
+ Loading more sounds...
+ </div>
+ )}
+ </div>
+ </ScrollArea>
+ </div>
+ </div>
+ );
+}
+
+function SavedSoundsView() {
+ const {
+ savedSounds,
+ isLoadingSavedSounds,
+ savedSoundsError,
+ loadSavedSounds,
+ isSoundSaved,
+ toggleSavedSound,
+ clearSavedSounds,
+ } = useSoundsStore();
+
+ // Audio playback state
+ const [playingId, setPlayingId] = useState<number | null>(null);
+ const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+ null
+ );
+
+ // Clear confirmation dialog state
+ const [showClearDialog, setShowClearDialog] = useState(false);
+
+ // Load saved sounds when tab becomes active
+ useEffect(() => {
+ loadSavedSounds();
+ }, [loadSavedSounds]);
+
+ const playSound = (sound: SavedSound) => {
+ if (playingId === sound.id) {
+ audioElement?.pause();
+ setPlayingId(null);
+ return;
+ }
+
+ // Stop previous sound
+ audioElement?.pause();
+
+ if (sound.previewUrl) {
+ const audio = new Audio(sound.previewUrl);
+ audio.addEventListener("ended", () => {
+ setPlayingId(null);
+ });
+ audio.addEventListener("error", (e) => {
+ setPlayingId(null);
+ });
+ audio.play().catch((error) => {
+ setPlayingId(null);
+ });
+
+ setAudioElement(audio);
+ setPlayingId(sound.id);
+ }
+ };
+
+ // Convert SavedSound to SoundEffect for compatibility with AudioItem
+ const convertToSoundEffect = (savedSound: SavedSound): SoundEffect => ({
+ id: savedSound.id,
+ name: savedSound.name,
+ description: "",
+ url: "",
+ previewUrl: savedSound.previewUrl,
+ downloadUrl: savedSound.downloadUrl,
+ duration: savedSound.duration,
+ filesize: 0,
+ type: "audio",
+ channels: 0,
+ bitrate: 0,
+ bitdepth: 0,
+ samplerate: 0,
+ username: savedSound.username,
+ tags: savedSound.tags,
+ license: savedSound.license,
+ created: savedSound.savedAt,
+ downloads: 0,
+ rating: 0,
+ ratingCount: 0,
+ });
+
+ if (isLoadingSavedSounds) {
+ return (
+ <div className="flex items-center justify-center h-full">
+ <div className="text-muted-foreground text-sm">
+ Loading saved sounds...
+ </div>
+ </div>
+ );
+ }
+
+ if (savedSoundsError) {
+ return (
+ <div className="flex items-center justify-center h-full">
+ <div className="text-destructive text-sm">
+ Error: {savedSoundsError}
+ </div>
+ </div>
+ );
+ }
+
+ if (savedSounds.length === 0) {
+ return (
+ <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
+ <HeartIcon
+ className="w-10 h-10 text-muted-foreground"
+ strokeWidth={1.5}
+ />
+ <div className="flex flex-col gap-2 text-center">
+ <p className="text-lg font-medium">No saved sounds</p>
+ <p className="text-sm text-muted-foreground text-balance">
+ Click the heart icon on any sound to save it here
+ </p>
+ </div>
+ </div>
+ );
+ }
+
+ return (
+ <div className="flex flex-col gap-5 mt-1 h-full">
+ <div className="flex items-center justify-between">
+ <p className="text-sm text-muted-foreground">
+ {savedSounds.length} saved{" "}
+ {savedSounds.length === 1 ? "sound" : "sounds"}
+ </p>
+ <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
+ <DialogTrigger asChild>
+ <Button
+ variant="text"
+ size="sm"
+ className="h-auto text-muted-foreground hover:text-destructive !opacity-100"
+ >
+ Clear all
+ </Button>
+ </DialogTrigger>
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>Clear all saved sounds?</DialogTitle>
+ <DialogDescription>
+ This will permanently remove all {savedSounds.length} saved
+ sounds from your collection. This action cannot be undone.
+ </DialogDescription>
+ </DialogHeader>
+ <DialogFooter>
+ <Button variant="text" onClick={() => setShowClearDialog(false)}>
+ Cancel
+ </Button>
+ <Button
+ variant="destructive"
+ onClick={async () => {
+ await clearSavedSounds();
+ setShowClearDialog(false);
+ }}
+ >
+ Clear all sounds
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </div>
+
+ <div className="relative h-full overflow-hidden">
+ <ScrollArea className="flex-1 h-full">
+ <div className="flex flex-col gap-4">
+ {savedSounds.map((sound) => (
+ <AudioItem
+ key={sound.id}
+ sound={convertToSoundEffect(sound)}
+ isPlaying={playingId === sound.id}
+ onPlay={() => playSound(sound)}
+ isSaved={isSoundSaved(sound.id)}
+ onToggleSaved={() =>
+ toggleSavedSound(convertToSoundEffect(sound))
+ }
+ />
+ ))}
+ </div>
+ </ScrollArea>
+ </div>
+ </div>
+ );
+}
+
+function SongsView() {
+ return <div>Songs</div>;
+}
+
+interface AudioItemProps {
+ sound: SoundEffect;
+ isPlaying: boolean;
+ onPlay: () => void;
+ isSaved: boolean;
+ onToggleSaved: () => void;
+}
+
+function AudioItem({
+ sound,
+ isPlaying,
+ onPlay,
+ isSaved,
+ onToggleSaved,
+}: AudioItemProps) {
+ const { addSoundToTimeline } = useSoundsStore();
+
+ const handleClick = () => {
+ onPlay();
+ };
+
+ const handleSaveClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ onToggleSaved();
+ };
+
+ const handleAddToTimeline = async (e: React.MouseEvent) => {
+ e.stopPropagation();
+ await addSoundToTimeline(sound);
+ };
+
+ return (
+ <div
+ className="group flex items-center gap-3 opacity-100 hover:opacity-75 transition-opacity cursor-pointer"
+ onClick={handleClick}
+ >
+ <div className="relative w-12 h-12 bg-accent rounded-md flex items-center justify-center overflow-hidden shrink-0">
+ <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent" />
+ {isPlaying ? (
+ <PauseIcon className="w-5 h-5" />
+ ) : (
+ <PlayIcon className="w-5 h-5" />
+ )}
+ </div>
+
+ <div className="flex-1 min-w-0 overflow-hidden">
+ <p className="font-medium truncate text-sm">{sound.name}</p>
+ <span className="text-xs text-muted-foreground truncate block">
+ {sound.username}
+ </span>
+ </div>
+
+ <div className="flex items-center gap-3 pr-2">
+ <Button
+ variant="text"
+ size="icon"
+ className="text-muted-foreground hover:text-foreground !opacity-100 w-auto"
+ onClick={handleAddToTimeline}
+ title="Add to timeline"
+ >
+ <PlusIcon className="w-4 h-4" />
+ </Button>
+ <Button
+ variant="text"
+ size="icon"
+ className={`hover:text-foreground !opacity-100 w-auto ${
+ isSaved
+ ? "text-red-500 hover:text-red-600"
+ : "text-muted-foreground"
+ }`}
+ onClick={handleSaveClick}
+ title={isSaved ? "Remove from saved" : "Save sound"}
+ >
+ <HeartIcon className={`w-4 h-4 ${isSaved ? "fill-current" : ""}`} />
+ </Button>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 96166d43..14b086fe 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -383,7 +383,7 @@ export function PreviewPanel() {
textDecoration: element.textDecoration,
padding: "4px 8px",
borderRadius: "2px",
- whiteSpace: "nowrap",
+ whiteSpace: "pre-wrap",
// Fallback for system fonts that don't have classes
...(fontClassName === "" && { fontFamily: element.fontFamily }),
}}
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index f1b3f6a3..6c79327e 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -1,95 +1,22 @@
"use client";
-import { FPS_PRESETS } from "@/constants/timeline-constants";
-import { useAspectRatio } from "@/hooks/use-aspect-ratio";
import { useMediaStore } from "@/stores/media-store";
-import { useProjectStore } from "@/stores/project-store";
import { useTimelineStore } from "@/stores/timeline-store";
-import { Label } from "../../ui/label";
import { ScrollArea } from "../../ui/scroll-area";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "../../ui/select";
import { AudioProperties } from "./audio-properties";
import { MediaProperties } from "./media-properties";
-import {
- PropertyItem,
- PropertyItemLabel,
- PropertyItemValue,
-} from "./property-item";
import { TextProperties } from "./text-properties";
+import { SquareSlashIcon } from "lucide-react";
export function PropertiesPanel() {
- const { activeProject, updateProjectFps } = useProjectStore();
- const { getDisplayName, canvasSize } = useAspectRatio();
const { selectedElements, tracks } = useTimelineStore();
const { mediaItems } = useMediaStore();
- const handleFpsChange = (value: string) => {
- const fps = parseFloat(value);
- if (!isNaN(fps) && fps > 0) {
- updateProjectFps(fps);
- }
- };
-
- const emptyView = (
- <div className="space-y-4 p-5">
- {/* Media Properties */}
- <div className="flex flex-col gap-3">
- <PropertyItem direction="column">
- <PropertyItemLabel className="text-xs text-muted-foreground">
- Name:
- </PropertyItemLabel>
- <PropertyItemValue className="text-xs truncate">
- {activeProject?.name || ""}
- </PropertyItemValue>
- </PropertyItem>
- <PropertyItem direction="column">
- <PropertyItemLabel className="text-xs text-muted-foreground">
- Aspect ratio:
- </PropertyItemLabel>
- <PropertyItemValue className="text-xs truncate">
- {getDisplayName()}
- </PropertyItemValue>
- </PropertyItem>
- <PropertyItem direction="column">
- <PropertyItemLabel className="text-xs text-muted-foreground">
- Resolution:
- </PropertyItemLabel>
- <PropertyItemValue className="text-xs truncate">
- {`${canvasSize.width} × ${canvasSize.height}`}
- </PropertyItemValue>
- </PropertyItem>
- <div className="flex flex-col gap-1">
- <Label className="text-xs text-muted-foreground">Frame rate:</Label>
- <Select
- value={(activeProject?.fps || "N/A").toString()}
- onValueChange={handleFpsChange}
- >
- <SelectTrigger className="w-32 h-6 text-xs">
- <SelectValue />
- </SelectTrigger>
- <SelectContent>
- {FPS_PRESETS.map(({ value, label }) => (
- <SelectItem key={value} value={value} className="text-xs">
- {label}
- </SelectItem>
- ))}
- </SelectContent>
- </Select>
- </div>
- </div>
- </div>
- );
-
return (
- <ScrollArea className="h-full bg-panel rounded-sm">
- {selectedElements.length > 0
- ? selectedElements.map(({ trackId, elementId }) => {
+ <>
+ {selectedElements.length > 0 ? (
+ <ScrollArea className="h-full bg-panel rounded-sm">
+ {selectedElements.map(({ trackId, elementId }) => {
const track = tracks.find((t) => t.id === trackId);
const element = track?.elements.find((e) => e.id === elementId);
@@ -116,8 +43,28 @@ export function PropertiesPanel() {
);
}
return null;
- })
- : emptyView}
- </ScrollArea>
+ })}
+ </ScrollArea>
+ ) : (
+ <EmptyView />
+ )}
+ </>
+ );
+}
+
+function EmptyView() {
+ return (
+ <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
+ <SquareSlashIcon
+ className="w-10 h-10 text-muted-foreground"
+ strokeWidth={1.5}
+ />
+ <div className="flex flex-col gap-2 text-center">
+ <p className="text-lg font-medium">It’s empty here</p>
+ <p className="text-sm text-muted-foreground text-balance">
+ Click an element on the timeline to edit its properties
+ </p>
+ </div>
+ </div>
);
}
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 8f41fbf3..7a2cc7f2 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -1,6 +1,6 @@
"use client";
-import { ScrollArea } from "../../ui/scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "../../ui/button";
import {
Scissors,
@@ -746,12 +746,7 @@ export function Timeline() {
containerRef={tracksContainerRef}
isActive={selectionBox?.isActive || false}
/>
- <ScrollArea
- className="w-full h-full"
- ref={tracksScrollRef}
- type="scroll"
- showHorizontalScrollbar
- >
+ <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
<div
className="relative flex-1"
style={{
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 065a123d..43f953e8 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -163,25 +163,3 @@ export function DataBuddyIcon({
</svg>
);
}
-
-export function SquareSlashIcon({
- className,
- size = 24,
-}: {
- className?: string;
- size?: number;
-}) {
- return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width={size}
- height={size}
- className={className}
- fill="none"
- viewBox="0 0 256 256"
- >
- <rect width="18" height="18" x="3" y="3" rx="2" />
- <line x1="9" x2="15" y1="15" y2="9" />
- </svg>
- );
-}
diff --git a/apps/web/src/components/providers/global-prefetcher.ts b/apps/web/src/components/providers/global-prefetcher.ts
new file mode 100644
index 00000000..2d7c684c
--- /dev/null
+++ b/apps/web/src/components/providers/global-prefetcher.ts
@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect } from "react";
+import { useSoundsStore } from "@/stores/sounds-store";
+
+export function useGlobalPrefetcher() {
+ const {
+ hasLoaded,
+ setTopSoundEffects,
+ setLoading,
+ setError,
+ setHasLoaded,
+ setCurrentPage,
+ setHasNextPage,
+ setTotalCount,
+ } = useSoundsStore();
+
+ useEffect(() => {
+ if (hasLoaded) return;
+
+ let ignore = false;
+
+ const prefetchTopSounds = async () => {
+ try {
+ if (!ignore) {
+ setLoading(true);
+ setError(null);
+ }
+
+ const response = await fetch(
+ "/api/sounds/search?page_size=50&sort=downloads"
+ );
+
+ if (!ignore) {
+ if (!response.ok) {
+ throw new Error(`Failed to fetch: ${response.status}`);
+ }
+
+ const data = await response.json();
+ setTopSoundEffects(data.results);
+ setHasLoaded(true);
+
+ // Set pagination state for top sounds
+ setCurrentPage(1);
+ setHasNextPage(!!data.next);
+ setTotalCount(data.count);
+ }
+ } catch (error) {
+ if (!ignore) {
+ console.error("Failed to prefetch top sounds:", error);
+ setError(
+ error instanceof Error ? error.message : "Failed to load sounds"
+ );
+ }
+ } finally {
+ if (!ignore) {
+ setLoading(false);
+ }
+ }
+ };
+
+ const timeoutId = setTimeout(prefetchTopSounds, 100);
+
+ return () => {
+ clearTimeout(timeoutId);
+ ignore = true;
+ };
+ }, [
+ hasLoaded,
+ setTopSoundEffects,
+ setLoading,
+ setError,
+ setHasLoaded,
+ setCurrentPage,
+ setHasNextPage,
+ setTotalCount,
+ ]);
+}
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index bdd86d58..823d48a3 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -126,20 +126,24 @@ const DropdownMenuCheckboxItem = React.forwardRef<
ref={ref}
className={cn(
dropdownMenuItemVariants({ variant }),
- "pl-8 pr-2",
+ "pl-2 pr-8",
className
)}
checked={checked}
+ onSelect={(e) => {
+ e.preventDefault();
+ }}
{...props}
>
- <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+ {children}
+ <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
- {children}
</DropdownMenuPrimitive.CheckboxItem>
));
+
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName;
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index d4cd57a1..440191f2 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { Eye, EyeOff } from "lucide-react";
+import { Eye, EyeOff, X } from "lucide-react";
import { cn } from "../../lib/utils";
import { Button } from "./button";
@@ -7,39 +7,93 @@ import { Button } from "./button";
interface InputProps extends React.ComponentProps<"input"> {
showPassword?: boolean;
onShowPasswordChange?: (show: boolean) => void;
+ showClearIcon?: boolean;
+ onClear?: () => void;
+ containerClassName?: string;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
(
- { className, type, showPassword, onShowPasswordChange, value, ...props },
+ {
+ className,
+ type,
+ containerClassName,
+ showPassword,
+ onShowPasswordChange,
+ showClearIcon,
+ onClear,
+ value,
+ onFocus,
+ onBlur,
+ ...props
+ },
ref
) => {
+ const [isFocused, setIsFocused] = React.useState(false);
+
const isPassword = type === "password";
const showPasswordToggle = isPassword && onShowPasswordChange;
+ const showClear =
+ showClearIcon &&
+ onClear &&
+ value &&
+ String(value).length > 0 &&
+ isFocused;
const inputType = isPassword && showPassword ? "text" : type;
+ const hasIcons = showPasswordToggle || showClear;
+ const iconCount = Number(showPasswordToggle) + Number(showClear);
+ const paddingRight =
+ iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
+
return (
- <div className={showPassword ? "relative w-full" : ""}>
+ <div className={cn(hasIcons ? "relative w-full" : "", containerClassName)}>
<input
type={inputType}
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
- showPasswordToggle && "pr-10",
+ paddingRight,
className
)}
ref={ref}
value={value}
+ onFocus={(e) => {
+ setIsFocused(true);
+ onFocus?.(e);
+ }}
+ onBlur={(e) => {
+ setIsFocused(false);
+ onBlur?.(e);
+ }}
{...props}
/>
+ {showClear && (
+ <Button
+ type="button"
+ variant="text"
+ size="icon"
+ onMouseDown={(e) => {
+ e.preventDefault();
+ onClear?.();
+ }}
+ className="absolute right-0 top-0 h-full px-3 text-muted-foreground !opacity-100"
+ aria-label="Clear input"
+ >
+ <X className="!size-[0.85]" />
+ </Button>
+ )}
{showPasswordToggle && (
<Button
type="button"
variant="text"
size="icon"
onClick={() => onShowPasswordChange?.(!showPassword)}
- className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
+ className={cn(
+ "absolute top-0 h-full px-3 text-muted-foreground hover:text-foreground",
+ showClear ? "right-10" : "right-0"
+ )}
aria-label={showPassword ? "Hide password" : "Show password"}
>
{showPassword ? (
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index d5aaf2ee..1fc227b0 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -1,53 +1,18 @@
-"use client";
-
import * as React from "react";
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
const ScrollArea = React.forwardRef<
- React.ElementRef<typeof ScrollAreaPrimitive.Root>,
- React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
- type?: "auto" | "always" | "scroll" | "hover";
- showHorizontalScrollbar?: boolean;
- }
->(({ className, children, type, showHorizontalScrollbar, ...props }, ref) => (
- <ScrollAreaPrimitive.Root
- ref={ref}
- className={cn("relative overflow-hidden", className)}
- type={type}
- {...props}
- >
- <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
- {children}
- </ScrollAreaPrimitive.Viewport>
- <ScrollBar />
- {showHorizontalScrollbar && <ScrollBar orientation="horizontal" />}
- <ScrollAreaPrimitive.Corner />
- </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
- React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
- React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
- <ScrollAreaPrimitive.ScrollAreaScrollbar
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+ <div
ref={ref}
- orientation={orientation}
- className={cn(
- "flex touch-none select-none transition-colors",
- orientation === "vertical" &&
- "h-full w-2.5 border-l border-l-transparent p-px",
- orientation === "horizontal" &&
- "h-2.5 flex-col border-t border-t-transparent p-px",
- className
- )}
+ className={cn("overflow-auto scrollbar-thin", className)}
{...props}
>
- <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
- </ScrollAreaPrimitive.ScrollAreaScrollbar>
+ {children}
+ </div>
));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollArea.displayName = "ScrollArea";
-export { ScrollArea, ScrollBar };
+export { ScrollArea };
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 23:30:50 +0000