feat: Add manual refresh button for prompts and enhance loading states in mobile PWA

Author: sizzlebop

CHANGELOG.md

@@ -5,7 +5,24 @@ All notable changes to Promptzy will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.3.1]
+
+### Added
+- **🔄 Refresh Prompts Button:** Added manual refresh button in header for both web and mobile PWA
+- **📱 Mobile PWA Sync:** Refresh button specifically addresses mobile PWA prompt loading after Supabase configuration
+- **🔄 Smart Connection Check:** Refresh function re-validates Supabase connection before loading prompts
+- **✨ Loading States:** Visual feedback with spinning icon and disabled button during refresh operation
+- **📢 User Feedback:** Toast notifications for refresh success, failure, and connection issues
+
+### Changed
+- **🎨 Header Layout:** Refresh button positioned between logo and settings for easy access
+- **📱 Responsive Design:** Refresh button adapts to mobile with proper touch targets and responsive text
+- **⚡ Performance:** Extracted prompt loading logic into reusable function for better code organization
+
+### Fixed
+- **📱 Mobile PWA Issue:** Prompts now properly load after entering Supabase credentials on mobile app
+- **🔄 Cross-Device Sync:** Manual refresh ensures prompts appear when switching devices or browsers
+- **🔗 Connection Reliability:** Refresh validates connection before attempting to load data
 
 ## [1.3.0] - 2025-05-28
 

OVERVIEW.md

@@ -1,6 +1,6 @@
 # ✨ Promptzy 🎯
 
-**Last Updated:** 2025-05-28T01:47:10.617Z
+**Last Updated:** 2025-05-29T03:05:39.954Z
 
 ## Project Overview
 
@@ -12,6 +12,7 @@
 - **Prompt Types:** Support for system, task, image, and video prompts with type-specific badges
 - **Tagging System:** Organize prompts with customizable tags and visual tag chips
 - **Search & Filter:** Full-text search and tag-based filtering with responsive masonry layout
+- **Manual Refresh:** Dedicated refresh button in header for syncing prompts after configuration changes
 - **AI Assistant:** Generate new prompt ideas using Pollinations.ai API with streaming responses and collapsible interface
 - **Cloud Storage:**
   - Supabase-only storage for reliable cloud persistence
@@ -29,6 +30,7 @@
   - Service worker for offline functionality and caching
   - Native app experience with no browser UI
   - Auto-updates and home screen installation
+  - Manual refresh button for mobile PWA sync after Supabase setup
 - **Settings & Configuration:** Comprehensive settings dialog with Supabase connection testing and system prompt management
 - **Theming & Responsive Design:** Custom purple theme with dark/light mode support and smooth animations
 - **Global Installation:** npm global installation support with CLI commands (`promptzy`, `prompt-dashboard`, `ai-prompt-dashboard`)
@@ -80,7 +82,7 @@ promptzy/
 │   │   ├── SearchInput.tsx      # Search input with icon
 │   │   ├── TagFilter.tsx        # Tag filtering buttons
 │   │   ├── EmptyState.tsx       # Contextual empty states
-│   │   ├── Header.tsx           # App header with settings
+│   │   ├── Header.tsx           # App header with refresh, settings, and add buttons
 │   │   ├── SettingsDialog.tsx   # Comprehensive settings modal
 │   │   └── ui/                  # Shadcn UI & Radix primitives (40+ components)
 │   ├── hooks/              # Custom React hooks (use-toast, use-mobile)
@@ -140,14 +142,15 @@ For detailed deployment instructions, see the [DEPLOYMENT.md](DEPLOYMENT.md) gui
 
 - **✅ Storage Simplified:** Removed localStorage and sync functionality - now uses Supabase-only storage for reliability
 - **✅ Sync Issues Resolved:** Eliminated prompt duplication and cross-browser sync problems by removing hybrid storage
+- **✅ Manual Refresh Button:** Added refresh button in header to solve mobile PWA sync issues after Supabase configuration
 - **✅ Global CLI Support:** Added npm global installation with `promptzy`, `prompt-dashboard` and `ai-prompt-dashboard` commands
 - **✅ Progressive Web App:** Added PWA functionality for mobile app installation directly from browser
 - **✅ Mobile Responsive:** Fixed mobile layout issues with header, buttons, and AI assistant panel
 - **✅ Clean Settings:** Removed default Supabase credentials - settings form now starts blank
 - **Authentication:** User prefers login-based authentication system with multiple options (Google, GitHub, email/password) over anonymous user IDs
 - **✅ Cloud Operations:** All CRUD operations now properly update Supabase database with proper error handling
 - **✅ Rebranded to Promptzy:** Updated from "AI Prompt Dashboard" to "Promptzy" with cute new branding and logo
-- **✅ Version Updated:** Current version 1.3.0 with PWA functionality and mobile optimization
+- **✅ Version Updated:** Current version 1.3.0+ with PWA functionality, mobile optimization, and refresh functionality
 
 ## 🔮 Future Enhancements
 

README.md

@@ -9,7 +9,7 @@
 <div align="center">
 
 ![License](https://img.shields.io/badge/license-MIT-blue.svg)
-![Version](https://img.shields.io/badge/version-1.2.0-green.svg)
+![Version](https://img.shields.io/badge/version-1.3.1-green.svg)
 ![NPM](https://img.shields.io/npm/v/@pinkpixel/promptzy?color=red)
 ![React](https://img.shields.io/badge/React-19.1.0-61DAFB?logo=react)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-3178C6?logo=typescript)
@@ -27,10 +27,8 @@
 - **Organize AI Prompts**: Store, edit, and categorize prompts for various AI models
 - **Custom Tagging**: Organize prompts with custom tags for easy retrieval
 - **Powerful Search**: Find the perfect prompt with full-text search and tag filtering
-- **Dual Storage**:
-  - Store prompts locally in your browser
-  - Cloud sync with Supabase for cross-device access
-  - Optional hybrid mode to sync between both
+- **Cloud Storage**: Reliable Supabase cloud storage with cross-device sync
+- **Refresh Prompts**: Manual refresh button to sync prompts after configuration changes
 - **AI Assistant**: Generate new prompt ideas with AI help
 - **Progressive Web App (PWA)**: Install as a mobile app directly from your browser
 - **Modern UI**: Clean, responsive interface built with Shadcn/UI and Tailwind
@@ -109,6 +107,7 @@ Promptzy can be installed as a mobile app directly from your browser! No app sto
 - ⚡ Faster loading and offline functionality
 - 🔄 Automatic updates when new versions are released
 - 🏠 Easy access from your home screen
+- 🔄 Manual refresh button for syncing prompts after setup
 
 ### Deployment
 
@@ -141,8 +140,9 @@ To use cloud storage features:
    - Paste and run it in the Supabase SQL Editor
 4. Return to Promptzy and click "Connect" again to verify the table setup
 5. Save your settings
+6. Use the "Refresh" button in the header to load your prompts
 
-   **Note:** Automatic table creation isn't supported by Supabase for security reasons, so this one-time manual setup is required.
+   **Note:** Automatic table creation isn't supported by Supabase for security reasons, so this one-time manual setup is required. After setup, use the refresh button to ensure prompts load properly, especially on mobile devices.
 
 The application will now use your Supabase instance for cloud storage!
 
@@ -165,11 +165,12 @@ This bidirectional sync ensures your prompts are available across devices and yo
 ## 📖 Usage
 
 1. Launch the application
-2. Choose your storage preference (local, Supabase, or both)
-3. Add prompts with the "+" button
-4. Assign tags to organize your prompts
-5. Use the search box and tag filters to find prompts
-6. Select a prompt to copy it or edit its details
+2. Configure your Supabase connection in Settings
+3. Use the "Refresh" button to load your prompts after setup
+4. Add prompts with the "+" button
+5. Assign tags to organize your prompts
+6. Use the search box and tag filters to find prompts
+7. Select a prompt to copy it or edit its details
 
 ## 🧩 Tech Stack
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinkpixel/promptzy",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Promptzy - A modern, cute web application for managing and organizing your AI prompts, with tagging, search, and cloud storage.",
   "type": "module",
   "main": "dist/index.html",

package.json

@@ -1,13 +1,15 @@
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Plus, Settings } from "lucide-react";
+import { Plus, Settings, RefreshCw } from "lucide-react";
 import SettingsDialog from "@/components/SettingsDialog";
 
 interface HeaderProps {
   onAddPrompt: () => void;
+  onRefreshPrompts: () => void;
+  isRefreshing: boolean;
 }
 
-const Header: React.FC<HeaderProps> = ({ onAddPrompt }) => {
+const Header: React.FC<HeaderProps> = ({ onAddPrompt, onRefreshPrompts, isRefreshing }) => {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   return (
@@ -17,6 +19,16 @@ const Header: React.FC<HeaderProps> = ({ onAddPrompt }) => {
         <h1 className="text-2xl sm:text-3xl font-bold">Promptzy</h1>
       </div>
       <div className="flex gap-2 w-full sm:w-auto">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRefreshPrompts}
+          disabled={isRefreshing}
+          className="flex items-center gap-1 flex-1 sm:flex-none"
+        >
+          <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+          <span className="hidden xs:inline">{isRefreshing ? 'Refreshing...' : 'Refresh'}</span>
+        </Button>
         <Button
           variant="outline"
           size="sm"

src/components/Header.tsx

@@ -114,7 +114,7 @@ const getUserId = async (client: ReturnType<typeof createClient>): Promise<strin
     }
 
     // If no authenticated user, check for a custom user ID set by the user
-    let customUserId = localStorage.getItem('custom-user-id');
+    const customUserId = localStorage.getItem('custom-user-id');
     if (customUserId && customUserId.trim()) {
       console.log("Using custom user ID:", customUserId);
       return customUserId.trim();

src/lib/supabasePromptStore.ts

@@ -35,6 +35,7 @@ const Index = () => {
   const [editingPrompt, setEditingPrompt] = useState<Prompt | null>(null);
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [supabaseConnected, setSupabaseConnected] = useState<boolean>(false);
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
   const { toast } = useToast();
 
   // Delete confirmation state
@@ -92,40 +93,76 @@ const Index = () => {
     };
   }, [checkSupabaseConnection]);
 
-  // Load prompts from Supabase
+  // Function to load prompts from Supabase (extracted for reuse)
+  const loadPrompts = useCallback(async () => {
+    console.log("Loading prompts from Supabase, connected:", supabaseConnected);
+
+    if (!supabaseConnected) {
+      console.log("Supabase not connected, skipping prompt load");
+      return;
+    }
+
+    try {
+      const supabasePrompts = await getPromptsFromSupabase();
+      console.log(`Retrieved ${supabasePrompts.length} prompts from Supabase`);
+
+      setPrompts(supabasePrompts);
+      // Extract unique tags from prompts
+      const tagsFromSupabase = supabasePrompts.flatMap(p => p.tags);
+      const uniqueTags = Array.from(
+        new Map(tagsFromSupabase.map(tag => [tag.id, tag])).values()
+      );
+      setAllTags(uniqueTags);
+    } catch (error) {
+      console.error("Error loading prompts from Supabase:", error);
+      toast({
+        title: "Error loading prompts",
+        description: "Could not load prompts from Supabase. Please check your connection.",
+        variant: "destructive",
+      });
+    }
+  }, [supabaseConnected, toast]);
+
+  // Load prompts from Supabase on mount and connection changes
   useEffect(() => {
-    const loadPrompts = async () => {
-      console.log("Loading prompts from Supabase, connected:", supabaseConnected);
+    loadPrompts();
+  }, [loadPrompts]);
 
-      if (!supabaseConnected) {
-        console.log("Supabase not connected, skipping prompt load");
-        return;
-      }
+  // Function to handle manual refresh
+  const handleRefreshPrompts = useCallback(async () => {
+    setIsRefreshing(true);
+
+    try {
+      // Re-check Supabase connection first
+      const isConnected = await checkSupabaseConnection();
 
-      try {
-        const supabasePrompts = await getPromptsFromSupabase();
-        console.log(`Retrieved ${supabasePrompts.length} prompts from Supabase`);
-
-        setPrompts(supabasePrompts);
-        // Extract unique tags from prompts
-        const tagsFromSupabase = supabasePrompts.flatMap(p => p.tags);
-        const uniqueTags = Array.from(
-          new Map(tagsFromSupabase.map(tag => [tag.id, tag])).values()
-        );
-        setAllTags(uniqueTags);
-      } catch (error) {
-        console.error("Error loading prompts from Supabase:", error);
+      if (!isConnected) {
         toast({
-          title: "Error loading prompts",
-          description: "Could not load prompts from Supabase. Please check your connection.",
+          title: "Connection Failed",
+          description: "Could not connect to Supabase. Please check your settings.",
           variant: "destructive",
         });
+        return;
       }
-    };
 
-    loadPrompts();
-  }, [supabaseConnected, toast, checkSupabaseConnection]);
+      // Load prompts if connected
+      await loadPrompts();
 
+      toast({
+        title: "Prompts Refreshed",
+        description: "Successfully refreshed prompts from Supabase.",
+      });
+    } catch (error) {
+      console.error("Error refreshing prompts:", error);
+      toast({
+        title: "Refresh Failed",
+        description: "Could not refresh prompts. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [checkSupabaseConnection, loadPrompts, toast]);
 
   const handleAddPrompt = () => {
     setEditingPrompt(null);
@@ -305,6 +342,8 @@ const Index = () => {
     <div className="container mx-auto py-8 px-4 min-h-screen max-w-5xl">
       <Header
         onAddPrompt={handleAddPrompt}
+        onRefreshPrompts={handleRefreshPrompts}
+        isRefreshing={isRefreshing}
       />
 
       <div className="mb-8 space-y-6">