Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import { downloadImageAsBase64, setupClipboardListener } from "../../shared/types.ts";
4
5interface ImageSearchResult {
6  url: string;
7  thumbnail: string;
10}
11
12interface ImageSearchModalProps {
13  isOpen: boolean;
14  onClose: () => void;
15  onSelectImage: (imageUrl: string) => void;
16  searchQuery?: string;
17}
18
19export function ImageSearchModal({ isOpen, onClose, onSelectImage, searchQuery = '' }: ImageSearchModalProps) {
20  const [query, setQuery] = useState(searchQuery);
21  const [results, setResults] = useState<ImageSearchResult[]>([]);
22  const [loading, setLoading] = useState(false);
23  const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
27  useEffect(() => {
28    if (isOpen) {
29      const cleanup = setupClipboardListener((imageData: string) => {
30        // Directly use the pasted image
31        onSelectImage(imageData);
32        onClose();
33      });
34      return cleanup;
35    }
36  }, [isOpen, onSelectImage, onClose]);
37
38  const searchImages = async (searchTerm: string) => {
39    if (!searchTerm.trim()) return;
40    
43    
44    try {
45      const results: ImageSearchResult[] = [];
46      
47      // Try multiple sources for better media coverage
84            tmdbData.results.slice(0, 8).forEach((item: any) => {
85              if (item.poster_path) {
86                const posterUrl = `https://image.tmdb.org/t/p/w500${item.poster_path}`;
87                const thumbnailUrl = `https://image.tmdb.org/t/p/w300${item.poster_path}`;
88                results.push({
89                  url: posterUrl,
100      }
101      
102      // 3. If we still don't have enough results, add some smart themed placeholder images
103      if (results.length < 8) {
104        const remainingSlots = 12 - results.length;
120      
121    } catch (err) {
122      console.error('Image search failed:', err);
123      setError('Failed to search for images. Please try again.');
124      
125      // Generate themed placeholder results as final fallback
126      const searchTermClean = searchTerm.replace(/[^a-zA-Z0-9\s]/g, '');
127      const fallbackResults: ImageSearchResult[] = Array.from({ length: 8 }, (_, i) => ({
128        url: `https://via.placeholder.com/400x600/e2e8f0/64748b?text=${encodeURIComponent(searchTermClean)}`,
129        thumbnail: `https://via.placeholder.com/200x300/e2e8f0/64748b?text=${encodeURIComponent(searchTermClean)}`,
143      setQuery(searchQuery);
144      // Auto-search when modal opens with a search query
145      searchImages(searchQuery);
146    }
147  }, [isOpen, searchQuery]);
149  const handleSearch = (e: React.FormEvent) => {
150    e.preventDefault();
151    searchImages(query);
152  };
153
154  const handleImageSelect = async (imageUrl: string, index: number) => {
155    // Show loading state for this specific image
156    setDownloadingIndex(index);
157    
158    try {
159      // Download and convert the image to base64
160      const base64Image = await downloadImageAsBase64(imageUrl, 500); // 500KB max
161      
162      if (base64Image) {
163        // Pass the base64 data URL instead of the original URL
164        onSelectImage(base64Image);
165        onClose();
166      } else {
167        // If download failed, ask user if they want to use the URL anyway
168        const useUrl = confirm(
169          'Unable to download and store this image locally (may be due to server restrictions). ' +
170          'Would you like to use the image URL instead? Note: it may not work offline.'
171        );
172        
173        if (useUrl) {
174          onSelectImage(imageUrl);
175          onClose();
176        }
177      }
178    } catch (error) {
179      console.error('Error processing image:', error);
180      
181      // Ask user if they want to use the URL as fallback
182      const useUrl = confirm(
183        'Error downloading image. Would you like to use the image URL instead? ' +
184        'Note: it may not work offline.'
185      );
186      
187      if (useUrl) {
188        onSelectImage(imageUrl);
189        onClose();
190      }
202        <div className="px-6 py-4 border-b border-gray-700">
203          <div className="flex items-center justify-between">
204            <h2 className="text-lg font-semibold text-gray-100">Search for Cover Image</h2>
205            <button
206              type="button"
223                value={query}
224                onChange={(e) => setQuery(e.target.value)}
225                placeholder="Search for images (e.g., book title, movie name, game title)"
226                className="w-full px-3 py-2 border border-gray-600 bg-gray-800 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
227                autoFocus
240              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12" />
241            </svg>
242            Images are downloaded and stored locally for offline viewing
243          </div>
244          <div className="mt-1 text-xs text-gray-400 text-center">
245            📎 Or paste an image from clipboard (Ctrl/Cmd+V)
246          </div>
247        </div>
263            <div className="text-center py-8">
264              <div className="w-8 h-8 border-4 border-gray-600 border-t-blue-400 rounded-full animate-spin mx-auto mb-4"></div>
265              <p className="text-gray-400">Searching for images...</p>
266            </div>
267          )}
274                </svg>
275              </div>
276              <p className="text-gray-400">No images found. Try a different search term.</p>
277            </div>
278          )}
285                </svg>
286              </div>
287              <p className="text-gray-400">Enter a search term to find cover images</p>
288            </div>
289          )}
291          {results.length > 0 && (
292            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
293              {results.map((image, index) => (
294                <div
295                  key={index}
297                    downloadingIndex === index ? 'opacity-50 pointer-events-none' : ''
298                  }`}
299                  onClick={() => handleImageSelect(image.url, index)}
300                >
301                  <div className="relative aspect-[3/4] bg-gray-100">
302                    <img
303                      src={image.thumbnail}
304                      alt={image.title}
305                      className="w-full h-full object-cover"
306                      onError={(e) => {
307                        const target = e.target as HTMLImageElement;
308                        target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDIwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMzAwIiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMTUwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzlDQTNBRiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2UgTm90IEZvdW5kPC90ZXh0Pgo8L3N2Zz4=';
309                      }}
310                    />
331                  </div>
332                  <div className="p-2 bg-gray-800">
333                    <p className="text-xs text-gray-600 truncate" title={image.title}>
334                      {image.title}
335                    </p>
336                    <p className="text-xs text-gray-400">
337                      via {image.source}
338                    </p>
339                  </div>
347        <div className="px-6 py-4 border-t border-gray-700 bg-gray-700 flex justify-between items-center">
348          <p className="text-xs text-gray-400">
349            Click on any image to select it as your cover
350          </p>
351          <button

8  onClose: () => void;
9  onAdd: (media: Omit<MediaItem, 'id' | 'user_id' | 'created_at' | 'updated_at'>) => void;
10  onOpenImageSearch: (searchQuery: string, onSelectImage: (imageUrl: string) => void) => void;
11}
12
41];
42
43export function AddMediaModal({ isOpen, onClose, onAdd, onOpenImageSearch }: AddMediaModalProps) {
44  const [formData, setFormData] = useState({
45    title: '',
59  
60  const [saving, setSaving] = useState(false);
61  const [imageError, setImageError] = useState(false);
62  
63  // Setup clipboard listener when modal is open
64  useEffect(() => {
65    if (isOpen) {
66      const cleanup = setupClipboardListener((imageData: string) => {
67        setFormData(prev => ({ ...prev, cover_url: imageData }));
68        setImageError(false);
69      });
70      return cleanup;
72  }, [isOpen]);
73  
74  const handleImageUrlChange = (url: string) => {
75    setFormData(prev => ({ ...prev, cover_url: url }));
76    setImageError(false);
77  };
78  
79  const handleImageError = () => {
80    setImageError(true);
81  };
82
83  const handleImageSelect = (imageUrl: string) => {
84    handleImageUrlChange(imageUrl);
85  };
86  
162            </div>
163            
164            {/* Cover Image URL */}
165            <div>
166              <label htmlFor="cover_url" className="block text-sm font-medium text-gray-300 mb-1">
167                Cover Image URL (optional)
168              </label>
169              <div className="space-y-2">
173                    id="cover_url"
174                    value={formData.cover_url}
175                    onChange={(e) => handleImageUrlChange(e.target.value)}
176                    placeholder="https://example.com/cover-image.jpg"
177                    className="flex-1 px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400"
178                  />
179                  <button
180                    type="button"
181                    onClick={() => onOpenImageSearch(formData.title || '', handleImageSelect)}
182                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
183                    title="Search for images"
184                  >
185                    🔍
187                </div>
188                <div className="text-xs text-gray-400 text-center">
189                  📎 Paste an image from clipboard (Ctrl/Cmd+V) or search above
190                </div>
191                {formData.cover_url && (
196                        alt="Cover preview"
197                        className={`w-16 h-20 object-cover rounded border-2 ${
198                          imageError ? 'border-red-300 bg-red-50' : 'border-gray-300'
199                        }`}
200                        onError={handleImageError}
201                        onLoad={() => setImageError(false)}
202                      />
203                      {imageError && (
204                        <div className="absolute inset-0 flex items-center justify-center bg-red-50 rounded text-red-500 text-xs">
205                          Invalid URL
210                )}
211                <p className="text-xs text-gray-500">
212                  Add a square image URL to represent this media item in the grid, or click the search button to find one
213                </p>
214              </div>

10  onUpdate: (media: MediaItem) => void;
11  onClose: () => void;
12  onOpenImageSearch: (searchQuery: string, onSelectImage: (imageUrl: string) => void) => void;
13}
14
53};
54
55export function MediaDetailModal({ group, status, items, onUpdate, onClose, onOpenImageSearch }: MediaDetailModalProps) {
56  const [editingItem, setEditingItem] = useState<MediaItem | null>(null);
57  const [editForm, setEditForm] = useState({
74  };
75
76  const handleImageSelect = (imageUrl: string) => {
77    setEditForm(prev => ({ ...prev, cover_url: imageUrl }));
78  };
79  
120  useEffect(() => {
121    if (editingItem) {
122      const cleanup = setupClipboardListener((imageData: string) => {
123        setEditForm(prev => ({ ...prev, cover_url: imageData }));
124      });
125      return cleanup;
174            
175            <div>
176              <label className="block text-sm font-medium text-gray-300 mb-1">Cover Image URL</label>
177              <div className="space-y-2">
178                <div className="flex space-x-2">
186                  <button
187                    type="button"
188                    onClick={() => onOpenImageSearch(editingItem?.title || '', handleImageSelect)}
189                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
190                    title="Search for images"
191                  >
192                    🔍
194                </div>
195                <div className="text-xs text-gray-400 text-center">
196                  📎 Paste an image from clipboard (Ctrl/Cmd+V) or search above
197                </div>
198                {editForm.cover_url && (
203                      className="w-12 h-16 object-cover rounded border border-gray-300"
204                      onError={(e) => {
205                        const target = e.target as HTMLImageElement;
206                        target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA0OCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjI0IiB5PSIzMiIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IiM5Q0EzQUYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVycm9yPC90ZXh0Pgo8L3N2Zz4=';
207                      }}
208                    />
301                <div className="flex items-start justify-between">
302                  <div className="flex space-x-3 flex-1">
303                    {/* Cover Image or Type Icon */}
304                    <div className="flex-shrink-0">
305                      {item.cover_url ? (
309                          className="w-12 h-16 object-cover rounded border border-gray-300"
310                          onError={(e) => {
311                            const target = e.target as HTMLImageElement;
312                            target.style.display = 'none';
313                            const fallback = target.parentElement?.querySelector('.fallback-icon') as HTMLElement;

60  };
61  
62  // Render media items as image collage with overlap
63  const renderMediaCollage = (items: MediaItem[]) => {
64    if (items.length === 0) {
89                  className="w-full h-full object-cover rounded"
90                  onError={(e) => {
91                    // Fallback to type icon if image fails to load
92                    const target = e.target as HTMLImageElement;
93                    target.style.display = 'none';
94                    const fallback = target.nextElementSibling as HTMLElement;

13    
14    <!-- Favicon and Icons -->
15    <link rel="icon" type="image/svg+xml" href="/frontend/favicon.svg">
16    <link rel="apple-touch-icon" href="/frontend/favicon.svg">
17    

13      "src": "/frontend/favicon.svg",
14      "sizes": "any",
15      "type": "image/svg+xml",
16      "purpose": "any maskable"
17    }
22      "src": "/frontend/screenshot-mobile.jpg",
23      "sizes": "390x844",
24      "type": "image/jpeg",
25      "form_factor": "narrow",
26      "label": "Task and habit tracking on mobile"

18  date: string;
19  doc: string;
20  image: string;
21  tags: string;
22  title: string;
66      sequences: item.sequences,
67      date: item.date,
68      image: item.image,
69      backlinks: item.backlinks,
70      category: extractPostCategory(item),
89        (page.sequences?.length > 0 ? `- sequences: ${page.sequences.map(seq => `[Sequence ${seq.id} on ${seq.topic}](${SITE_URL}/sequences#${seq.id})`).join(", ")}` : null),
90        (page.book ? `- book_id: ${page.book}` : null),
91        (page.image ? `- image: ${page.image}` : null),
92        (page.score ? `- relevance: ${page.score.toFixed(3)}` : null),
93    ].filter((a) => a !== null).join("\n");
299- sequences: a comma-separated set of markdown-formatted (title and URL) sequences that the post is part of, if any.
300- backklinks: a comma-separated set of post URLs that link to this post, if any.
301- image: the URL of the feature image associated with the post, if any.
302- relevance: a score indicating how relevant the post is to the search query, defaults to 1 if not present.
303- category: available categories are: blog, notes, exercise, replies, and page.`,

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/frontend/style.css">
8    <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
9  </head>
10  <body>

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7To use this, fork it to your account.