;
- if (shapePreset) {
- element = buildGraphicElement({
- definitionId: shapePreset.definitionId,
- name: shapePreset.name,
- startTime: currentTime,
- params: shapePreset.params,
- });
- } else {
- const { width: intrinsicWidth, height: intrinsicHeight } =
- await resolveStickerIntrinsicSize({ stickerId: item.id });
- element = buildStickerElement({
- stickerId: item.id,
- name: item.name,
- startTime: currentTime,
- intrinsicWidth,
- intrinsicHeight,
- });
- }
-
- editor.timeline.insertElement({
- placement: { mode: "auto" },
- element,
- });
-
- addToRecentStickers({ stickerId: item.id });
- } catch (error) {
- console.error("Failed to add sticker:", error);
- toast.error("Failed to add sticker to timeline");
- } finally {
- setIsAdding(false);
- }
- };
-
- const preview = (
-
- {hasImageError ? (
-
- {displayName}
-
- ) : (
- setHasImageError(true)}
- loading="lazy"
- unoptimized
- />
- )}
-
- );
-
- const dragData: TimelineDragData = shapePreset
- ? {
- id: item.id,
- type: "graphic",
- name: displayName,
- definitionId: shapePreset.definitionId,
- params: shapePreset.params ?? {},
- }
- : {
- id: item.id,
- type: "sticker",
- name: displayName,
- stickerId: item.id,
- };
-
- return (
-
-
- {isAdding && (
-
-
-
- )}
-
+
+ {
+ setSearchQuery({ query: e.target.value });
+ void searchStickers({ query: e.target.value });
+ }}
+ showClearIcon
+ onClear={() => {
+ setSearchQuery({ query: "" });
+ void searchStickers({ query: "" });
+ }}
+ className="w-full"
+ containerClassName="w-full"
+ />
+
+
+
{
+ setSelectedCategory({ category: value as StickerCategory });
+ }}
+ variant="underline"
+ className="mt-2 flex min-h-0 flex-1 flex-col"
+ >
+
+ {Object.entries(STICKER_CATEGORIES).map(([key, label]) => (
+
+ {label}
+
+ ))}
+
+
+
+
+
+
+ {items.map((item) => (
+
+ ))}
+
+ );
+}
+
+function StickerRow({ items }: { items: StickerData[] }) {
+ return (
+
+ {items.map((item) => (
+
+
+
+ ))}
+
+
+
+
No stickers found
+
{message}
+
+
+
+
+ );
+ }
+
+ if (searchResults?.items.length) {
+ const normalizedQuery = searchQuery.trim().toLowerCase();
+ const isRegionSearch =
+ selectedCategory === "flags" &&
+ resolveQueryToRegions({ query: normalizedQuery }) !== null;
+ const regionLabel = getRegionLabel({ query: normalizedQuery });
+
+ return (
+
+ {isRegionSearch &&
}
+
+
+ {searchResults.total} results
+
+
+
+
+
+
+ );
+ }
+
+ if (!browseContent?.sections.length) {
+ const categoryLabel = STICKER_CATEGORIES[selectedCategory];
+ return (
+
+ );
+ }
+
+ return (
+
+ {browseContent.sections.map((section) => (
+ {
+ setSelectedCategory({ category });
+ }}
+ />
+ ))}
+
+ );
+}
+
+function StickerSection({
+ section,
+ onClearRecent,
+ onSeeAll,
+}: {
+ section: StickerBrowseSection;
+ onClearRecent: () => void;
+ onSeeAll: (category: StickerCategory) => void;
+}) {
+ const hasHeader =
+ Boolean(section.title) || section.id === "recent" || section.action;
+
+ return (
+
+ {hasHeader && (
+
+ {section.title ? (
+
{section.title}
+ ) : (
+
+ )}
+
+
+ {section.id === "recent" && (
+
+ )}
+
+ {section.action?.type === "see-all" && section.action.category && (
+
+ )}
+
+
+ )}
+
+ {section.layout === "row" ? (
+
+ ) : (
+
+ )}
+
+ {hasImageError ? (
+
+ {displayName}
+
+ ) : (
+ setHasImageError(true)}
+ loading="lazy"
+ unoptimized
+ />
+ )}
+
+ );
+
+ const dragData: TimelineDragData = shapePreset
+ ? {
+ id: item.id,
+ type: "graphic",
+ name: displayName,
+ definitionId: shapePreset.definitionId,
+ params: shapePreset.params ?? {},
+ }
+ : {
+ id: item.id,
+ type: "sticker",
+ name: displayName,
+ stickerId: item.id,
+ };
+
+ return (
+
+
+ {isAdding && (
+
+
+
+ )}
+