feat(ui): add heart icon and enhance popup messaging for sponsorship support

resources/views/components/popup.blade.php

@@ -6,21 +6,22 @@
     x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
     x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0"
     x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
-    class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 w-full z-999"
+    class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 w-full z-999" x-cloak>
-    x-cloak>
     <div
-        class="flex items-center flex-col justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded-sm">
+        class="flex lg:items-center flex-col justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded-sm">
         <div
             class="flex flex-col items-start h-full pb-6 text-xs lg:items-center lg:flex-row lg:pb-0 lg:pr-6 lg:space-x-5 dark:text-neutral-300">
             @if (isset($icon))
+                <div class="hidden lg:block">
                     {{ $icon }}
+                </div>
             @endif
 
             <div class="pt-6 lg:pt-0">
                 <h4 class="w-full mb-1 text-xl font-bold leading-none -translate-y-1 text-neutral-900 dark:text-white">
                     {{ $title }}
                 </h4>
-                <p class="">{{ $description }}</span></p>
+                <p>{{ $description }}</span></p>
             </div>
         </div>
         <button

resources/views/livewire/layout-popups.blade.php

@@ -4,9 +4,11 @@
         notification: true,
         realtime: false,
     },
+    isDevelopment: {{ isDev() ? 'true' : 'false' }},
     init() {
-        this.popups.sponsorship = localStorage.getItem('popupSponsorship') !== 'false';
+        console.log(this.isDevelopment);
-        this.popups.notification = localStorage.getItem('popupNotification') !== 'false';
+        this.popups.sponsorship = this.shouldShowMonthlyPopup('popupSponsorship');
+        this.popups.notification = this.shouldShowMonthlyPopup('popupNotification');
         this.popups.realtime = localStorage.getItem('popupRealtime');
 
         let checkNumber = 1;
@@ -31,6 +33,35 @@
                 }
             }, 2000);
         }
+    },
+    shouldShowMonthlyPopup(storageKey) {
+        const disabledTimestamp = localStorage.getItem(storageKey);
+
+        // If never disabled, show the popup
+        if (!disabledTimestamp || disabledTimestamp === 'false') {
+            return true;
+        }
+
+        // If disabled timestamp is not a valid number, show the popup
+        const disabledTime = parseInt(disabledTimestamp);
+        if (isNaN(disabledTime)) {
+            return true;
+        }
+
+        const now = new Date();
+        const disabledDate = new Date(disabledTime);
+
+        {{-- if (this.isDevelopment) {
+            // In development: check if 10 seconds have passed
+            const timeDifference = now.getTime() - disabledDate.getTime();
+            const tenSecondsInMs = 10 * 1000;
+            return timeDifference >= tenSecondsInMs;
+        } else { --}}
+        // In production: check if we're in a different month or year
+        const isDifferentMonth = now.getMonth() !== disabledDate.getMonth() ||
+            now.getFullYear() !== disabledDate.getFullYear();
+        return isDifferentMonth;
+        {{-- } --}}
     }
 }">
     @auth
@@ -59,20 +90,23 @@
     <span x-show="popups.sponsorship">
         <x-popup>
             <x-slot:title>
-                Love Coolify as we do?
+                Would you like to help us to make more cool things?
             </x-slot:title>
             <x-slot:icon>
-                <img src="https://cdn-icons-png.flaticon.com/512/8236/8236748.png"
+                <img src="{{ asset('heart.png') }}" class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
-                    class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
             </x-slot:icon>
             <x-slot:description>
-                <span>Please
+                <div class="text-md dark:text-white">
-                    consider donating on <a href="https://github.com/sponsors/coollabsio"
+                    <span>We are already profitable, but we would like to scale even further.</span>
-                        class="text-xs underline dark:text-white">GitHub</a> or <a
+                    <br><span>Please
-                        href="https://opencollective.com/coollabsio"
+                        consider donating on one (or both) of the following platforms.<br /><br /> <a
-                        class="text-xs underline dark:text-white">OpenCollective</a>.<br><br></span>
+                            href="https://github.com/sponsors/coollabsio"
-                <span>It enables us to keep creating features without paywalls, ensuring our work remains free and
+                            class="underline text-lg font-bold dark:text-white">GitHub
-                    open.</span>
+                            Sponsors</a> (registration required) <br /><br />
+                        <a href="https://opencollective.com/coollabsio/donate?interval=month&amount=10&name=&legalName=&email="
+                            class="underline text-lg font-bold dark:text-white">OpenCollective</a> (no registration
+                        required).</span>
+                </div>
             </x-slot:description>
             <x-slot:button-text @click="disableSponsorship()">
                 Disable This Popup
@@ -128,11 +162,13 @@
     @endif
     <script>
         function disableSponsorship() {
-            localStorage.setItem('popupSponsorship', false);
+            // Store current timestamp instead of just 'false'
+            localStorage.setItem('popupSponsorship', Date.now().toString());
         }
 
         function disableNotification() {
-            localStorage.setItem('popupNotification', false);
+            // Store current timestamp instead of just 'false'
+            localStorage.setItem('popupNotification', Date.now().toString());
         }
 
         function disableRealtime() {