feat: add AnimatedLogo component with sound effect on hover

sizzlebop · sizzlebop · commit 65edc8e01736 · 2025-05-29T00:18:59.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **🔄 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
+- **🤖 Animated Robot Logo:** Added cute hover animation and robot sound effect to the Promptzy logo
+- **🎵 Interactive Sound:** Robot logo plays a fun sound effect when hovered for enhanced user experience
+- **✨ Bouncy Animation:** Logo bounces, rotates, and glows with purple shadow on hover
 
 ### Changed
 - **🎨 Header Layout:** Refresh button positioned between logo and settings for easy access
diff --git a/README.md b/README.md
@@ -1,15 +1,15 @@
 # ✨ Promptzy 🎯
 
 <p align="center">
-  <img src="https://res.cloudinary.com/di7ctlowx/image/upload/v1748393462/icon_lzh8zy.png" alt="Promptzy Logo" width="200" />
+  <img src="https://res.cloudinary.com/di7ctlowx/image/upload/v1748393462/icon_lzh8zy.png" alt="Promptzy Logo" width="250" height="250" />
 </p>
 
 **Promptzy** - A modern, cute web application for managing and organizing your AI prompts, with tagging, search, and cloud storage.
 
 <div align="center">
 
 ![License](https://img.shields.io/badge/license-MIT-blue.svg)
-![Version](https://img.shields.io/badge/version-1.3.1-green.svg)
+![Version](https://img.shields.io/badge/version-1.3.2-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)
@@ -35,7 +35,9 @@
 
 ## 🖥️ Screenshots
 
-*Coming soon*
+<p align="center">
+  <img src="https://res.cloudinary.com/di7ctlowx/image/upload/v1748492164/dashboard_c6krgr.png" alt="Screenshot" width="800" />
+</p>
 
 ## 🛠️ Installation
 
diff --git a/dashboard.png b/dashboard.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pinkpixel/promptzy",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "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",
diff --git a/public/robot-sound.mp3 b/public/robot-sound.mp3
diff --git a/src/components/AnimatedLogo.tsx b/src/components/AnimatedLogo.tsx
@@ -0,0 +1,53 @@
+import React, { useRef, useState } from "react";
+
+interface AnimatedLogoProps {
+  className?: string;
+}
+
+const AnimatedLogo: React.FC<AnimatedLogoProps> = ({ className = "" }) => {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const handleMouseEnter = async () => {
+    if (isPlaying) return; // Prevent overlapping sounds
+    
+    try {
+      // Create a new audio instance each time to avoid conflicts
+      const audio = new Audio('/robot-sound.mp3');
+      audioRef.current = audio;
+      
+      // Set volume to a reasonable level
+      audio.volume = 0.3;
+      
+      setIsPlaying(true);
+      
+      // Play the sound
+      await audio.play();
+      
+      // Reset playing state when sound ends
+      audio.addEventListener('ended', () => {
+        setIsPlaying(false);
+      });
+      
+    } catch (error) {
+      console.log("Could not play robot sound:", error);
+      setIsPlaying(false);
+    }
+  };
+
+  return (
+    <div 
+      className={`robot-logo-container ${className}`}
+      onMouseEnter={handleMouseEnter}
+    >
+      <img 
+        src="/favicon.png" 
+        alt="Promptzy Robot Logo" 
+        className="robot-logo w-10 h-10 sm:w-12 sm:h-12 cursor-pointer select-none"
+        draggable={false}
+      />
+    </div>
+  );
+};
+
+export default AnimatedLogo;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Plus, Settings, RefreshCw } from "lucide-react";
 import SettingsDialog from "@/components/SettingsDialog";
+import AnimatedLogo from "@/components/AnimatedLogo";
 
 interface HeaderProps {
   onAddPrompt: () => void;
@@ -15,7 +16,7 @@ const Header: React.FC<HeaderProps> = ({ onAddPrompt, onRefreshPrompts, isRefres
   return (
     <header className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 gap-4 sm:gap-0">
       <div className="flex items-center gap-2">
-        <img src="/favicon.png" alt="Logo" className="w-10 h-10 sm:w-12 sm:h-12" />
+        <AnimatedLogo />
         <h1 className="text-2xl sm:text-3xl font-bold">Promptzy</h1>
       </div>
       <div className="flex gap-2 w-full sm:w-auto">
diff --git a/src/index.css b/src/index.css
@@ -6,32 +6,32 @@
   :root {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    
+
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    
+
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    
+
     --primary: 252 79% 65%;
     --primary-foreground: 0 0% 98%;
-    
+
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    
+
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
-    
+
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
-    
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    
+
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 252 79% 65%;
-    
+
     --radius: 0.75rem;
   }
 }
@@ -40,11 +40,11 @@
   * {
     @apply border-border selection:bg-purple-300/20 selection:text-white;
   }
-  
+
   body {
     @apply bg-background text-foreground antialiased;
   }
-  
+
   .glass {
     @apply bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl;
   }
@@ -53,28 +53,65 @@
     @apply bg-gradient-to-br from-secondary to-secondary/80;
     @apply transition-all duration-300;
   }
-  
+
   .prompt-card:hover {
     @apply from-secondary/90 to-secondary/60;
   }
-  
+
   .tag {
     @apply bg-purple-300/20 text-purple-300 text-xs px-2 py-1 rounded-full;
     @apply transition-all duration-200 hover:bg-purple-300/30;
   }
-  
+
   .tag-active {
     @apply bg-purple-300 text-black;
   }
-  
+
   .btn-hover-effect {
     @apply relative overflow-hidden;
   }
-  
+
+  /* Robot Logo Animations */
+  .robot-logo-container {
+    @apply transition-transform duration-300 ease-in-out;
+  }
+
+  .robot-logo-container:hover {
+    animation: robotBounce 0.6s ease-in-out;
+  }
+
+  .robot-logo {
+    @apply transition-all duration-300 ease-in-out;
+    filter: drop-shadow(0 0 0 transparent);
+  }
+
+  .robot-logo-container:hover .robot-logo {
+    filter: drop-shadow(0 0 8px rgba(126, 105, 171, 0.6));
+    transform: scale(1.1);
+  }
+
+  @keyframes robotBounce {
+    0% { transform: translateY(0) rotate(0deg) scale(1); }
+    25% { transform: translateY(-8px) rotate(-5deg) scale(1.05); }
+    50% { transform: translateY(-4px) rotate(3deg) scale(1.1); }
+    75% { transform: translateY(-6px) rotate(-2deg) scale(1.05); }
+    100% { transform: translateY(0) rotate(0deg) scale(1); }
+  }
+
+  /* Add a subtle pulse effect for extra cuteness */
+  .robot-logo-container:hover {
+    animation: robotBounce 0.6s ease-in-out, robotPulse 2s ease-in-out infinite;
+  }
+
+  @keyframes robotPulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+  }
+
   .btn-hover-effect:after {
     @apply content-[''] absolute inset-0 bg-white/0 transition-colors duration-300 pointer-events-none;
   }
-  
+
   .btn-hover-effect:hover:after {
     @apply bg-white/10;
   }
diff --git a/src/lib/supabasePromptStore.ts b/src/lib/supabasePromptStore.ts
@@ -166,10 +166,11 @@ export const getCurrentUserId = async (): Promise<string> => {
 };
 
 export const getPromptsFromSupabase = async (): Promise<Prompt[]> => {
-  const client = supabaseClient;
+  // Create a fresh client to ensure we have the latest credentials
+  const client = createClient(getSupabaseCredentials().supabaseUrl, getSupabaseCredentials().supabaseKey);
 
   try {
-    console.log("Fetching prompts from Supabase...");
+    console.log("Fetching prompts from Supabase with fresh client...");
     const tableReady = await ensurePromptsTable(client);
     if (!tableReady) {
       console.error("Prompts table is not available");
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
@@ -36,6 +36,7 @@ const Index = () => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [supabaseConnected, setSupabaseConnected] = useState<boolean>(false);
   const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+  const [refreshKey, setRefreshKey] = useState<number>(0);
   const { toast } = useToast();
 
   // Delete confirmation state
@@ -83,7 +84,7 @@ const Index = () => {
 
     checkAuth();
 
-    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
       setIsLoggedIn(!!session);
       checkSupabaseConnection();
     });
@@ -94,10 +95,10 @@ const Index = () => {
   }, [checkSupabaseConnection]);
 
   // Function to load prompts from Supabase (extracted for reuse)
-  const loadPrompts = useCallback(async () => {
-    console.log("Loading prompts from Supabase, connected:", supabaseConnected);
+  const loadPrompts = useCallback(async (forceRefresh = false) => {
+    console.log("Loading prompts from Supabase, connected:", supabaseConnected, "forceRefresh:", forceRefresh);
 
-    if (!supabaseConnected) {
+    if (!supabaseConnected && !forceRefresh) {
       console.log("Supabase not connected, skipping prompt load");
       return;
     }
@@ -113,6 +114,9 @@ const Index = () => {
         new Map(tagsFromSupabase.map(tag => [tag.id, tag])).values()
       );
       setAllTags(uniqueTags);
+
+      // Force a re-render by updating a timestamp or counter
+      console.log("Prompts state updated with", supabasePrompts.length, "prompts");
     } catch (error) {
       console.error("Error loading prompts from Supabase:", error);
       toast({
@@ -131,12 +135,19 @@ const Index = () => {
   // Function to handle manual refresh
   const handleRefreshPrompts = useCallback(async () => {
     setIsRefreshing(true);
+    console.log("Manual refresh triggered");
 
     try {
+      // Clear current prompts to show loading state
+      setPrompts([]);
+      setAllTags([]);
+
       // Re-check Supabase connection first
+      console.log("Checking Supabase connection...");
       const isConnected = await checkSupabaseConnection();
 
       if (!isConnected) {
+        console.log("Connection check failed");
         toast({
           title: "Connection Failed",
           description: "Could not connect to Supabase. Please check your settings.",
@@ -145,8 +156,15 @@ const Index = () => {
         return;
       }
 
-      // Load prompts if connected
-      await loadPrompts();
+      console.log("Connection successful, loading prompts...");
+      // Force refresh prompts regardless of connection state
+      await loadPrompts(true);
+
+      // Add a small delay to ensure state updates are processed
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Force a re-render by updating the refresh key
+      setRefreshKey(prev => prev + 1);
 
       toast({
         title: "Prompts Refreshed",
@@ -339,7 +357,7 @@ const Index = () => {
   }, [filteredPrompts, colCount]);
 
   return (
-    <div className="container mx-auto py-8 px-4 min-h-screen max-w-5xl">
+    <div key={refreshKey} className="container mx-auto py-8 px-4 min-h-screen max-w-5xl">
       <Header
         onAddPrompt={handleAddPrompt}
         onRefreshPrompts={handleRefreshPrompts}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@pinkpixel/promptzy",`
`3`		`- "version": "1.3.1",`
	`3`	`+ "version": "1.3.2",`
`4`	`4`	`"description": "Promptzy - A modern, cute web application for managing and organizing your AI prompts, with tagging, search, and cloud storage.",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.html",`