feat: enhance dynamic options loading and add toggle pack functionality

src/features/background/options/sections/PhotoPackSettings.jsx

@@ -42,6 +42,21 @@ const PhotoPackSettings = ({ pack }) => {
     }
   }, [pack.id, pack.settings_schema, settings]);
 
+  const loadDynamicOptions = async (field) => {
+    if (field.options_source === 'api:categories') {
+      try {
+        const response = await fetch(`${variables.constants.API_URL}/images/categories`);
+        const categories = await response.json();
+        setDynamicOptions((prev) => ({
+          ...prev,
+          [field.key]: categories,
+        }));
+      } catch (error) {
+        console.error('Failed to load categories:', error);
+      }
+    }
+  };
+
   // Load dynamic options (e.g., categories from API)
   useEffect(() => {
     if (!pack.settings_schema || pack.settings_schema.length === 0) {
@@ -62,21 +77,6 @@ const PhotoPackSettings = ({ pack }) => {
     validateSettings();
   }, [settings, validateSettings, pack.settings_schema]);
 
-  const loadDynamicOptions = async (field) => {
-    if (field.options_source === 'api:categories') {
-      try {
-        const response = await fetch(`${variables.constants.API_URL}/images/categories`);
-        const categories = await response.json();
-        setDynamicOptions((prev) => ({
-          ...prev,
-          [field.key]: categories,
-        }));
-      } catch (error) {
-        console.error('Failed to load categories:', error);
-      }
-    }
-  };
-
   const handleSettingChange = (key, value, secure = false) => {
     const processedValue = secure ? btoa(value) : value;
     const newSettings = { ...settings, [key]: processedValue };

src/features/marketplace/components/Items/Items.jsx

@@ -66,8 +66,6 @@ function ItemCard({
   onTogglePack,
   showChips = true,
 }) {
-  item._onCollection = onCollection;
-
   const isSideloaded = item.sideload === true;
   const packId = item.id || item.name;
 

src/features/marketplace/views/Added.jsx

@@ -63,7 +63,7 @@ const Added = memo(() => {
     toast(variables.getMessage('toasts.installed'));
     variables.stats.postEvent('marketplace', 'Sideload');
     setInstalled(JSON.parse(localStorage.getItem('installed')));
-    window.dispatchEvent(new Event('installedAddonsChanged'));
+    window.dispatchEvent(new window.Event('installedAddonsChanged'));
   }, []);
 
   const getSideloadButton = useCallback(() => {
@@ -158,14 +158,21 @@ const Added = memo(() => {
     localStorage.setItem('installed', JSON.stringify([]));
     toast(variables.getMessage('toasts.uninstalled_all'));
     setInstalled([]);
-    window.dispatchEvent(new Event('installedAddonsChanged'));
+    window.dispatchEvent(new window.Event('installedAddonsChanged'));
   }, [installed]);
 
   const handleUninstall = useCallback((type, name) => {
     uninstall(type, name);
     toast(variables.getMessage('toasts.uninstalled'));
     setInstalled(JSON.parse(localStorage.getItem('installed')));
-    window.dispatchEvent(new Event('installedAddonsChanged'));
+    window.dispatchEvent(new window.Event('installedAddonsChanged'));
+  }, []);
+
+  const handleTogglePack = useCallback((packId, newState) => {
+    const message = newState
+      ? variables.getMessage('toasts.enabled')
+      : variables.getMessage('toasts.disabled');
+    toast(message);
   }, []);
 
   useEffect(() => {
@@ -294,6 +301,7 @@ const Added = memo(() => {
         toggleFunction={(input) => toggle('item', input)}
         showCreateYourOwn={false}
         onUninstall={handleUninstall}
+        onTogglePack={handleTogglePack}
         viewType={viewType}
       />
     </>