allow for custom url repositories (locally hosted strudel files)

Author: therebelrobot

src/components/ExportImport.tsx

@@ -11,7 +11,9 @@ export function ExportImport() {
   const savedRepositories = useSoundStore((state) => state.savedRepositories);
   const importRepositories = useSoundStore((state) => state.importRepositories);
   const importBlocklist = useSoundStore((state) => state.importBlocklist);
+  const importCustomUrls = useSoundStore((state) => state.importCustomUrls);
   const getBlockedRepos = useSoundStore((state) => state.getBlockedRepos);
+  const getCustomUrls = useSoundStore((state) => state.getCustomUrls);
   const clearPreviews = useSoundStore((state) => state.clearPreviews);
   const previewRepositories = useSoundStore((state) => state.previewRepositories);
   const toast = useToast();
@@ -23,8 +25,17 @@ export function ExportImport() {
     }
 
     const blocklist = getBlockedRepos();
-    downloadExport(savedRepositories, blocklist);
-    toast.success(`Exported ${savedRepositories.length} saved repositories and ${blocklist.length} blocked repositories!`);
+    const customUrls = getCustomUrls();
+    downloadExport(savedRepositories, blocklist, customUrls);
+    
+    let successMessage = `Exported ${savedRepositories.length} saved repositories`;
+    if (blocklist.length > 0) {
+      successMessage += `, ${blocklist.length} blocked repositories`;
+    }
+    if (customUrls.length > 0) {
+      successMessage += `, ${customUrls.length} custom URLs`;
+    }
+    toast.success(successMessage + '!');
   };
 
   const handleImport = async (e: ChangeEvent<HTMLInputElement>) => {
@@ -56,10 +67,19 @@ export function ExportImport() {
         importBlocklist(data.blocklist);
       }
 
-      const blocklistMsg = data.blocklist && data.blocklist.length > 0
-        ? ` and ${data.blocklist.length} blocked repositories`
-        : '';
-      toast.success(`Successfully imported ${data.repositories.length} repositories${blocklistMsg}!`);
+      // Import custom URLs if present
+      if (data.customUrls && data.customUrls.length > 0) {
+        importCustomUrls(data.customUrls);
+      }
+      
+      let successMessage = `Successfully imported ${data.repositories.length} repositories`;
+      if (data.blocklist && data.blocklist.length > 0) {
+        successMessage += `, ${data.blocklist.length} blocked repositories`;
+      }
+      if (data.customUrls && data.customUrls.length > 0) {
+        successMessage += `, ${data.customUrls.length} custom URLs`;
+      }
+      toast.success(successMessage + '!');
       setPendingImport(null);
     } catch (error) {
       toast.error(`Failed to import: ${error instanceof Error ? error.message : 'Unknown error'}`);

src/components/SavedRepositoryCard.tsx

@@ -43,7 +43,10 @@ export function SavedRepositoryCard({ repository, onPlay, onStop }: SavedReposit
     return groupSoundsByCategory(repository.sounds);
   }, [repository.sounds]);
 
-  const repoUrl = `https://github.com/${repository.owner}/${repository.repo}`;
+  // Generate repository URL (handle custom URLs differently)
+  const repoUrl = repository.isCustomUrl
+    ? repository.strudel_json_url
+    : `https://github.com/${repository.owner}/${repository.repo}`;
 
   return (
     <div className="bg-white border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow">
@@ -68,7 +71,11 @@ export function SavedRepositoryCard({ repository, onPlay, onStop }: SavedReposit
           </div>
 
           <div className="bg-purple-50 px-2 py-1 rounded text-xs">
-            <span className="text-purple-700 font-mono">samples('github:{repository.owner}/{repository.repo}')</span>
+            <span className="text-purple-700 font-mono">
+              {repository.isCustomUrl
+                ? `samples('${repository.raw_json_url}')`
+                : `samples('github:${repository.owner}/${repository.repo}')`}
+            </span>
           </div>
         </div>
 

src/components/Settings.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
+import type { FormEvent } from 'react';
 import { setGitHubToken, clearGitHubToken, hasGitHubToken } from '../utils/github-api';
 import { useToast } from '../hooks/useToast';
 import { useSoundStore } from '../store/soundStore';
+import { useStrudelJson } from '../hooks/useStrudelJson';
+import type { CustomUrlRepository } from '../types/strudel';
 
 interface SettingsProps {
   onClose: () => void;
@@ -15,16 +18,22 @@ export function Settings({ onClose }: SettingsProps) {
   const [showClearBlocklistConfirm, setShowClearBlocklistConfirm] = useState(false);
   const [hasTokenState, setHasTokenState] = useState(false);
   const [blockedReposList, setBlockedReposList] = useState<string[]>([]);
+  const [customUrlsList, setCustomUrlsList] = useState<CustomUrlRepository[]>([]);
+  const [newCustomUrl, setNewCustomUrl] = useState('');
+  const [newCustomUrlName, setNewCustomUrlName] = useState('');
+  const [isLoadingCustomUrl, setIsLoadingCustomUrl] = useState(false);
+  const [customUrlError, setCustomUrlError] = useState<string | null>(null);
 
   // Refs to store functions without causing re-renders
   const storeRef = useRef({
-    unblockRepository: (key: string) => {
-      console.info('Placeholder unblockRepository called with key:', key);
-    },
-    clearBlocklist: () => {}
+    unblockRepository: (_key: string) => {},
+    clearBlocklist: () => {},
+    removeCustomUrl: (_url: string) => {},
+    getCustomUrls: () => [] as CustomUrlRepository[]
   });
 
   const toast = useToast();
+  const { loadCustomUrlRepository } = useStrudelJson();
 
   // Initialize state on mount only
   useEffect(() => {
@@ -35,17 +44,23 @@ export function Settings({ onClose }: SettingsProps) {
     const store = useSoundStore.getState();
     storeRef.current = {
       unblockRepository: store.unblockRepository,
-      clearBlocklist: store.clearBlocklist
+      clearBlocklist: store.clearBlocklist,
+      removeCustomUrl: store.removeCustomUrl,
+      getCustomUrls: store.getCustomUrls
     };
 
     // Get blocked repos
     setBlockedReposList(store.getBlockedRepos());
 
+    // Get custom URLs
+    setCustomUrlsList(store.getCustomUrls());
+    
     // Subscribe to blockedRepos changes
     const unsubscribe = useSoundStore.subscribe(
       (state) => {
-        // When blockedRepos changes, update our local state
+        // When blockedRepos or customUrls change, update our local state
         setBlockedReposList(state.getBlockedRepos());
+        setCustomUrlsList(state.getCustomUrls());
       }
     );
 
@@ -78,6 +93,46 @@ export function Settings({ onClose }: SettingsProps) {
     toast.success('Blocklist cleared');
     setShowClearBlocklistConfirm(false);
   };
+  
+  const handleAddCustomUrl = async (e: FormEvent) => {
+    e.preventDefault();
+    
+    if (!newCustomUrl.trim() || !newCustomUrlName.trim()) {
+      toast.error('Please enter both URL and name');
+      return;
+    }
+    
+    // Validate URL format
+    try {
+      new URL(newCustomUrl);
+    } catch (_err) {
+      toast.error('Please enter a valid URL');
+      return;
+    }
+    
+    setIsLoadingCustomUrl(true);
+    setCustomUrlError(null);
+    
+    try {
+      // Load the repository (it will be automatically saved)
+      await loadCustomUrlRepository(newCustomUrl, newCustomUrlName);
+      
+      toast.success(`Added custom URL: ${newCustomUrlName}`);
+      setNewCustomUrl('');
+      setNewCustomUrlName('');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to load custom URL';
+      setCustomUrlError(message);
+      toast.error(message);
+    } finally {
+      setIsLoadingCustomUrl(false);
+    }
+  };
+  
+  const handleRemoveCustomUrl = (url: string) => {
+    storeRef.current.removeCustomUrl(url);
+    toast.info('Custom URL removed');
+  };
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 overflow-y-auto">
@@ -206,6 +261,92 @@ export function Settings({ onClose }: SettingsProps) {
               </>
             )}
           </div>
+          
+          {/* Custom URLs Section */}
+          <div className="border-t pt-4">
+            <h3 className="font-semibold text-gray-800 mb-3">
+              🔗 Custom URLs ({customUrlsList.length})
+            </h3>
+            <p className="text-sm text-gray-600 mb-3">
+              Add custom strudel.json URLs from any source, including localhost for development.
+            </p>
+            
+            <form onSubmit={handleAddCustomUrl} className="mb-4 space-y-3">
+              <div>
+                <label htmlFor="customUrl" className="block text-sm font-medium text-gray-700 mb-1">
+                  Strudel JSON URL
+                </label>
+                <input
+                  id="customUrl"
+                  type="text"
+                  value={newCustomUrl}
+                  onChange={(e) => setNewCustomUrl(e.target.value)}
+                  placeholder="https://example.com/strudel.json"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                  disabled={isLoadingCustomUrl}
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="customUrlName" className="block text-sm font-medium text-gray-700 mb-1">
+                  Display Name
+                </label>
+                <input
+                  id="customUrlName"
+                  type="text"
+                  value={newCustomUrlName}
+                  onChange={(e) => setNewCustomUrlName(e.target.value)}
+                  placeholder="My Custom Strudel"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                  disabled={isLoadingCustomUrl}
+                />
+              </div>
+              
+              {customUrlError && (
+                <div className="text-sm text-red-600">
+                  Error: {customUrlError}
+                </div>
+              )}
+              
+              <button
+                type="submit"
+                disabled={isLoadingCustomUrl || !newCustomUrl.trim() || !newCustomUrlName.trim()}
+                className="px-3 py-1.5 bg-purple-600 text-white text-sm rounded hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+              >
+                {isLoadingCustomUrl ? 'Loading...' : '➕ Add Custom URL'}
+              </button>
+            </form>
+            
+            {customUrlsList.length === 0 ? (
+              <div className="bg-gray-50 border border-gray-200 rounded p-3 text-sm text-gray-600 text-center">
+                No custom URLs added
+              </div>
+            ) : (
+              <div className="bg-gray-50 border border-gray-200 rounded max-h-40 overflow-y-auto">
+                {customUrlsList.map((item) => (
+                  <div
+                    key={item.url}
+                    className="flex items-center justify-between p-2 border-b border-gray-200 last:border-b-0 hover:bg-gray-100"
+                  >
+                    <div className="flex-1 overflow-hidden">
+                      <div className="text-sm font-medium text-gray-800 truncate">
+                        {item.name}
+                      </div>
+                      <div className="text-xs text-gray-500 truncate font-mono">
+                        {item.url}
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => handleRemoveCustomUrl(item.url)}
+                      className="ml-2 px-2 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700 transition-colors flex-shrink-0"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
 
           <div className="flex gap-3 pt-4 border-t">
             <button

src/hooks/useStrudelJson.ts

@@ -1,20 +1,23 @@
 import { useState, useCallback } from 'react';
-import { fetchStrudelJson, buildRawUrl } from '../utils/github-api';
+import { fetchStrudelJson, buildRawUrl, fetchCustomUrlContent } from '../utils/github-api';
 import { extractSounds } from '../utils/sound-processor';
 import { useSoundStore } from '../store/soundStore';
 import type { GitHubCodeSearchItem } from '../types/github';
-import type { LoadedRepository } from '../types/strudel';
+import type { LoadedRepository, StrudelJson } from '../types/strudel';
 
 interface UseStrudelJsonResult {
   isLoading: boolean;
   error: string | null;
   loadRepository: (item: GitHubCodeSearchItem) => Promise<void>;
+  loadCustomUrlRepository: (url: string, name: string) => Promise<void>;
 }
 
 export function useStrudelJson(): UseStrudelJsonResult {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const addPreview = useSoundStore((state) => state.addPreview);
+  const saveRepository = useSoundStore((state) => state.saveRepository);
+  const addCustomUrl = useSoundStore((state) => state.addCustomUrl);
 
   const loadRepository = useCallback(async (item: GitHubCodeSearchItem) => {
     setIsLoading(true);
@@ -59,9 +62,60 @@ export function useStrudelJson(): UseStrudelJsonResult {
     }
   }, [addPreview]);
 
+  const loadCustomUrlRepository = useCallback(async (url: string, name: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Fetch the JSON content from the custom URL
+      const content = await fetchCustomUrlContent(url);
+
+      // Parse the JSON content
+      const strudelJson: StrudelJson = JSON.parse(content);
+
+      // Use custom values for owner and repo to identify this as a custom URL
+      const owner = 'custom';
+      const repo = name.replace(/\s+/g, '-').toLowerCase();
+      const path = 'strudel.json';
+
+      // Extract sounds
+      const sounds = extractSounds(strudelJson, owner, repo, path);
+
+      // Create loaded repository object
+      const loadedRepo: LoadedRepository = {
+        owner,
+        repo,
+        path,
+        branch: 'main',
+        strudel_json_url: url,
+        raw_json_url: url,
+        sounds,
+        loaded_at: new Date().toISOString(),
+        isCustomUrl: true
+      };
+
+      // Add to preview store
+      addPreview(loadedRepo);
+
+      // Also save it directly to saved repositories
+      saveRepository(loadedRepo);
+
+      // Save the custom URL for future use
+      addCustomUrl(url, name);
+
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to load custom URL';
+      setError(message);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [addPreview, saveRepository, addCustomUrl]);
+
   return {
     isLoading,
     error,
     loadRepository,
+    loadCustomUrlRepository
   };
 }