- {#if !imageError && card.avatarUrl}
+ {#if !imageError && (card.imageUrl || card.avatarUrl)}
{:else}
- ([]);
let isLoading = $state(false);
let hasMore = $state(false);
@@ -54,8 +62,8 @@
let errorMessage = $state(null);
let nsfwMode = $state(loadNsfwMode());
let hasInitialSearched = $state(false);
+ let selectedCard = $state(null);
- // Track known imported items (URLs)
let importedUrls = $derived.by(() => {
const urls = new Set();
if (mode === "character") {
@@ -74,30 +82,20 @@
return urls;
});
- // Persist settings
$effect(() => {
if (typeof localStorage !== "undefined") {
localStorage.setItem(NSFW_MODE_STORAGE_KEY, nsfwMode);
}
});
- // Tag filtering
let selectedTags = $state([]);
let tagInput = $state("");
let showTagDropdown = $state(false);
- let showProviderDropdown = $state(false);
let availableTags = $state([]);
let isLoadingTags = $state(false);
- // Derived
let providers = $derived(discoveryService.getProviders(mode));
- let activeProviderName = $derived(
- activeProviderId === "all"
- ? "All Sources"
- : providers.find((p) => p.id === activeProviderId)?.name || "Unknown",
- );
- // Filter suggestions from available tags based on input
let tagSuggestions = $derived(
tagInput.trim()
? availableTags
@@ -106,14 +104,14 @@
t.toLowerCase().includes(tagInput.toLowerCase()) &&
!selectedTags.includes(t),
)
- .slice(0, 15)
+ .slice(0, 30)
: [],
);
- // Popular tags (subset of available tags for quick selection)
- let popularTags = $derived(availableTags.slice(0, 18));
+ let popularTags = $derived(
+ availableTags.slice(0, 20).filter((t) => !selectedTags.includes(t)),
+ );
- // Fetch tags when modal opens or provider changes
async function loadTags() {
isLoadingTags = true;
try {
@@ -131,33 +129,26 @@
}
}
- // Load tags when modal opens and trigger initial search
$effect(() => {
if (isOpen) {
loadTags();
- // Trigger initial search when modal first opens
if (!hasInitialSearched) {
hasInitialSearched = true;
handleSearch();
}
} else {
- // Reset when modal closes
hasInitialSearched = false;
}
});
- // Reload tags when provider changes
$effect(() => {
- // Create dependency on activeProviderId
const _providerId = activeProviderId;
if (isOpen) {
loadTags();
}
});
- // Reset state when mode changes
$effect(() => {
- // Access mode to create dependency
const _mode = mode;
results = [];
currentPage = 1;
@@ -211,7 +202,6 @@
let result: SearchResult;
if (activeProviderId === "all") {
- // Use loadMoreAll for aggregated pagination
result = await discoveryService.loadMoreAll(mode, 48);
} else {
const searchOptions = {
@@ -260,29 +250,6 @@
}
}
- function handleKeyDown(e: KeyboardEvent) {
- if (e.key === "Enter") {
- handleSearch();
- }
- if (e.key === "Escape") {
- if (showProviderDropdown) {
- showProviderDropdown = false;
- } else if (showTagDropdown) {
- showTagDropdown = false;
- } else {
- onClose();
- }
- }
- }
-
- function selectProvider(providerId: string) {
- activeProviderId = providerId;
- showProviderDropdown = false;
- results = [];
- hasMore = false;
- errorMessage = null;
- }
-
function toggleTag(tag: string) {
if (selectedTags.includes(tag)) {
selectedTags = selectedTags.filter((t) => t !== tag);
@@ -306,431 +273,344 @@
function clearTags() {
selectedTags = [];
}
+
+ function handleViewDetails(card: DiscoveryCard) {
+ selectedCard = card;
+ }
-{#if isOpen}
-
-
-
-
+
+
+
{/if}
diff --git a/src/lib/components/discovery/DiscoveryCardDetails.svelte b/src/lib/components/discovery/DiscoveryCardDetails.svelte
new file mode 100644
index 0000000..db8e0de
--- /dev/null
+++ b/src/lib/components/discovery/DiscoveryCardDetails.svelte
@@ -0,0 +1,304 @@
+
+
+
?
{/if}
@@ -57,52 +66,63 @@
{#if card.nsfw}
-
+
NSFW
-
+
{/if}
-
+
{card.source}
-
+
{#if isImported}
-
-
-
-
+
+
+
{/if}
{#if !isImported}
-
-
{/if}
-
+
-
+
+
{card.name}
{#if card.creator}
-
+
by {card.creator}
{/if}
{#if card.description}
-
+
{card.description}
{/if}
@@ -111,17 +131,17 @@
{#if card.tags.length > 0}
{#each card.tags.slice(0, 3) as tag}
-
+
{tag}
-
+
{/each}
{#if card.tags.length > 3}
-
+
+{card.tags.length - 3}
-
+
{/if}
{/if}
-
{card.name}
{#if card.creator} -+
by {card.creator}
{/if} {#if card.description} -+
{card.description}
{/if} @@ -111,17 +131,17 @@ {#if card.tags.length > 0}
{#each card.tags.slice(0, 3) as tag}
-
+
{tag}
-
+
{/each}
{#if card.tags.length > 3}
-
+
+{card.tags.length - 3}
-
+
{/if}
{/if}
-
+
+
diff --git a/src/lib/components/discovery/DiscoveryModal.svelte b/src/lib/components/discovery/DiscoveryModal.svelte
index 462a67e..311cc4c 100644
--- a/src/lib/components/discovery/DiscoveryModal.svelte
+++ b/src/lib/components/discovery/DiscoveryModal.svelte
@@ -3,13 +3,13 @@
X,
Search,
Loader2,
- ChevronDown,
- Tag,
Filter,
Check,
EyeOff,
Eye,
Blend,
+ Globe,
+ Tag,
} from "lucide-svelte";
import {
discoveryService,
@@ -17,10 +17,21 @@
type SearchResult,
} from "$lib/services/discovery";
import DiscoveryCardComponent from "./DiscoveryCard.svelte";
+ import DiscoveryCardDetails from "./DiscoveryCardDetails.svelte";
import { characterVault } from "$lib/stores/characterVault.svelte";
import { lorebookVault } from "$lib/stores/lorebookVault.svelte";
import { scenarioVault } from "$lib/stores/scenarioVault.svelte";
+ import * as ResponsiveModal from "$lib/components/ui/responsive-modal";
+ import { Button } from "$lib/components/ui/button";
+ import { Input } from "$lib/components/ui/input";
+ import { Badge } from "$lib/components/ui/badge";
+ import * as Select from "$lib/components/ui/select";
+ import * as ToggleGroup from "$lib/components/ui/toggle-group";
+ import * as Popover from "$lib/components/ui/popover";
+ import * as Command from "$lib/components/ui/command";
+ import { cn } from "$lib/utils/cn";
+
interface Props {
isOpen: boolean;
mode: "character" | "lorebook" | "scenario";
@@ -29,11 +40,9 @@
let { isOpen, mode, onClose }: Props = $props();
- // NSFW mode type
type NsfwMode = "disable" | "blur" | "enable";
const NSFW_MODE_STORAGE_KEY = "aventura:discovery:nsfwMode";
- // Load persisted NSFW mode
function loadNsfwMode(): NsfwMode {
if (typeof localStorage !== "undefined") {
const stored = localStorage.getItem(NSFW_MODE_STORAGE_KEY);
@@ -44,9 +53,8 @@
return "disable";
}
- // State
let searchQuery = $state("");
- let activeProviderId = $state("all"); // 'all' for Search All, or provider id
+ let activeProviderId = $state("all");
let results = $state
+
+
+
+
+ + {card.name} +
+ {#if isImported} + + {/if} +
+
+
+
+
+
+
+
+
+
+
+
+
+ NSFW
+
+ {/if}
+
+
+ {card.source}
+
+
+
+
+
+ {#if !imageError && (card.imageUrl || card.avatarUrl)}
+ 
+ {:else}
+
+
+ {#if card.nsfw}
+
+ ?
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if card.tags.length > 0}
+ {card.name}
+
+ {#if card.creator}
+ By {card.creator}
+ {/if}
+ {#if card.stats}
+
+
+ {#if card.stats.downloads}
+
+
+ {/if}
+
+ {#each card.tags as tag}
+
+ {tag}
+
+ {/each}
+
+ {/if}
+
+
+
+
+ + Description +
+
+ {card.description || "No description provided."}
+
+
+
+
+ {#if isRawDataOpen}
+
+
+
+ Import Context Warning
+
+ This is the raw data associated with the card. During import,
+ some fields might be remapped or formatted to fit the local
+ schema. This data serves as the source of truth for the import
+ process.
+
+
+
+
+ {/if}
+
+ {#if isLoadingDetails}
+
+
+
+ {:else}
+ {JSON.stringify(
+ detailedCard,
+ null,
+ 2,
+ )}
+ {/if}
+
+
+
+
+ !v && onClose()}>
+
-
-
e.stopPropagation()}
- >
-
-
+ Find and import new {mode}s from online sources.
+
+
-
-
(selectedCard = null)}
+ onImport={handleImport}
+ isImported={selectedCard &&
+ importedUrls.has(selectedCard.imageUrl || selectedCard.avatarUrl)}
+ {nsfwMode}
+ />
+ {:else}
+
-
+
+ Browse {mode === "character" ? "Characters" : mode === "lorebook" ? "Lorebooks" : "Scenarios"} -
- -
-
-
-{/if}
+ {/if}
+
+
diff --git a/src/lib/components/tags/TagManager.svelte b/src/lib/components/tags/TagManager.svelte
index 90a4761..743c0c8 100644
--- a/src/lib/components/tags/TagManager.svelte
+++ b/src/lib/components/tags/TagManager.svelte
@@ -1,37 +1,68 @@
-
-
-
-
- { if (e.target === e.currentTarget) onClose(); }}
- role="dialog"
- aria-modal="true"
->
-
-
-
+
+
+
diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 0000000..b413b5f
--- /dev/null
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,16 @@
+
+
+
+
diff --git a/src/lib/components/ui/collapsible/collapsible-trigger.svelte b/src/lib/components/ui/collapsible/collapsible-trigger.svelte
new file mode 100644
index 0000000..ad47c8c
--- /dev/null
+++ b/src/lib/components/ui/collapsible/collapsible-trigger.svelte
@@ -0,0 +1,22 @@
+
+
+text-accent-400]",
+ className
+ )}
+ {...restProps}
+>
+
diff --git a/src/lib/components/ui/collapsible/collapsible.svelte b/src/lib/components/ui/collapsible/collapsible.svelte
new file mode 100644
index 0000000..97d7b6d
--- /dev/null
+++ b/src/lib/components/ui/collapsible/collapsible.svelte
@@ -0,0 +1,17 @@
+
+
+
+ {#snippet children({ checked, indeterminate })}
+
+ {#if indeterminate}
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..1986371
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,26 @@
+
+
+
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..56be80d
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,19 @@
+
+
+
+ {#snippet children({ checked })}
+
+ {#if checked}
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..cf22641
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,16 @@
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..40c4502
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,50 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+const Trigger = DropdownMenuPrimitive.Trigger;
+const Group = DropdownMenuPrimitive.Group;
+const RadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export {
+ CheckboxItem,
+ Content,
+ Root as DropdownMenu,
+ CheckboxItem as DropdownMenuCheckboxItem,
+ Content as DropdownMenuContent,
+ Group as DropdownMenuGroup,
+ GroupHeading as DropdownMenuGroupHeading,
+ Item as DropdownMenuItem,
+ Label as DropdownMenuLabel,
+ RadioGroup as DropdownMenuRadioGroup,
+ RadioItem as DropdownMenuRadioItem,
+ Separator as DropdownMenuSeparator,
+ Shortcut as DropdownMenuShortcut,
+ Sub as DropdownMenuSub,
+ SubContent as DropdownMenuSubContent,
+ SubTrigger as DropdownMenuSubTrigger,
+ Trigger as DropdownMenuTrigger,
+ Group,
+ GroupHeading,
+ Item,
+ Label,
+ RadioGroup,
+ RadioItem,
+ Root,
+ Separator,
+ Shortcut,
+ Sub,
+ SubContent,
+ SubTrigger,
+ Trigger,
+};
diff --git a/src/lib/components/ui/index.ts b/src/lib/components/ui/index.ts
new file mode 100644
index 0000000..83c0198
--- /dev/null
+++ b/src/lib/components/ui/index.ts
@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
+
+export {
+ Root,
+ Content,
+ Trigger,
+ //
+ Root as Collapsible,
+ Content as CollapsibleContent,
+ Trigger as CollapsibleTrigger,
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 5e333a1..325f921 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -14,7 +14,10 @@
| { type: "file"; files?: FileList }
| { type?: InputType; files?: undefined }
)
- >;
+ > & {
+ leftIcon?: typeof import("lucide-svelte").Search;
+ rightIcon?: typeof import("lucide-svelte").Search;
+ };
let {
ref = $bindable(null),
@@ -22,6 +25,8 @@
type,
files = $bindable(),
class: className,
+ leftIcon,
+ rightIcon,
...restProps
}: Props = $props();
@@ -30,7 +35,7 @@
{:else}
-
+
{@render children?.()}
-{:else}
+ {:else}
{@render children?.()}
-{/if}
+ {/if}
diff --git a/src/lib/components/ui/responsive-modal/responsive-modal-footer.svelte b/src/lib/components/ui/responsive-modal/responsive-modal-footer.svelte
index 458469f..6aacbe6 100644
--- a/src/lib/components/ui/responsive-modal/responsive-modal-footer.svelte
+++ b/src/lib/components/ui/responsive-modal/responsive-modal-footer.svelte
@@ -9,11 +9,17 @@
{#if isMobile.current}
-
+
{@render children?.()}
{:else}
-
+
{@render children?.()}
{/if}
diff --git a/src/lib/components/ui/responsive-modal/responsive-modal-header.svelte b/src/lib/components/ui/responsive-modal/responsive-modal-header.svelte
index a5a5848..7431621 100644
--- a/src/lib/components/ui/responsive-modal/responsive-modal-header.svelte
+++ b/src/lib/components/ui/responsive-modal/responsive-modal-header.svelte
@@ -4,25 +4,39 @@
import { getResponsiveModalContext } from "./context";
import { cn } from "$lib/utils/cn";
import { X } from "lucide-svelte";
+ import { Button } from "$lib/components/ui/button";
- let { children, class: className, ...props } = $props();
+ let { title, class: className, children, ...props } = $props();
const { isMobile } = getResponsiveModalContext();
{#if isMobile.current}
-
- {@render children?.()}
+
+ {#if title}
+
{:else}
-
-
+Manage Tags
- -
-
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 0000000..094669e
--- /dev/null
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,25 @@
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 0000000..f9327d6
--- /dev/null
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
new file mode 100644
index 0000000..97e21b4
--- /dev/null
+++ b/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+ Root,
+ Description,
+ Title,
+ //
+ Root as Alert,
+ Description as AlertDescription,
+ Title as AlertTitle,
+};
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 2aaefcb..ad4f404 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -13,13 +13,14 @@
default:
"bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ "text-foreground hover:text-destructive",
outline:
"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
+ text: "text-foreground hover:text-accent",
},
size: {
default: "h-10 px-4 py-2",
diff --git a/src/lib/components/ui/collapsible/collapsible-content.svelte b/src/lib/components/ui/collapsible/collapsible-content.svelte
new file mode 100644
index 0000000..078c151
--- /dev/null
+++ b/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,22 @@
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..9c5b20c
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,30 @@
+
+
+
+ {#if leftIcon}
+
{/if}
diff --git a/src/lib/components/ui/responsive-modal/responsive-modal-content.svelte b/src/lib/components/ui/responsive-modal/responsive-modal-content.svelte
index e195dd8..596b893 100644
--- a/src/lib/components/ui/responsive-modal/responsive-modal-content.svelte
+++ b/src/lib/components/ui/responsive-modal/responsive-modal-content.svelte
@@ -8,15 +8,15 @@
const { isMobile } = getResponsiveModalContext();
-{#if isMobile.current}
+ {#if isMobile.current}
+
+ {/if}
+
+ {#if rightIcon}
+
+
+ {/if}
+ {title}
+ {:else} + {@render children?.()} + {/if}
+
- {@render children?.()}
+ {#if title}
+
-
-
+
{/if}
diff --git a/src/lib/components/ui/responsive-modal/responsive-modal-title.svelte b/src/lib/components/ui/responsive-modal/responsive-modal-title.svelte
index b3e8265..a966d88 100644
--- a/src/lib/components/ui/responsive-modal/responsive-modal-title.svelte
+++ b/src/lib/components/ui/responsive-modal/responsive-modal-title.svelte
@@ -9,7 +9,7 @@
{#if isMobile.current}
-
+
{@render children?.()}
{:else}
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index a130b97..e6eb722 100644
--- a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -24,6 +24,6 @@
>
{@render children?.()}
{title}
+ {:else} + {@render children?.()} + {/if}
-
-
-
-
{#if pendingCount >= 2}
-
-
-
-
-
{/if}
@@ -406,34 +396,43 @@
>
{#each messages as message (message.id)}