From 3d4162d3dc3c735ec3c7e00a4d496762bac41b14 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 25 Jun 2025 15:00:39 +0200
Subject: [PATCH] feat(ui): add heart icon and enhance popup messaging for
 sponsorship support

---
 public/heart.png                              | Bin 0 -> 3972 bytes
 resources/views/components/popup.blade.php    |  21 +++---
 .../views/livewire/layout-popups.blade.php    |  64 ++++++++++++++----
 3 files changed, 61 insertions(+), 24 deletions(-)
 create mode 100644 public/heart.png

diff --git a/public/heart.png b/public/heart.png
new file mode 100644
index 0000000000000000000000000000000000000000..c44a21301660dda6cd6e5a6fb64f8c0ed8738cb7
GIT binary patch
literal 3972
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
V+O0oYf`8Q%A5VXeTka@E`2)FNIX(aY

literal 0
HcmV?d00001

diff --git a/resources/views/components/popup.blade.php b/resources/views/components/popup.blade.php
index afcb773eb..ace85425d 100644
--- a/resources/views/components/popup.blade.php
+++ b/resources/views/components/popup.blade.php
@@ -6,29 +6,30 @@
     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"
-    x-cloak>
+    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>
     <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))
-                {{ $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
-                @if ($buttonText->attributes->whereStartsWith('@click')->first()) @click="bannerVisible=false;{{ $buttonText->attributes->get('@click') }}"
+        <button
+            @if ($buttonText->attributes->whereStartsWith('@click')->first()) @click="bannerVisible=false;{{ $buttonText->attributes->get('@click') }}"
                     @else
                 @click="bannerVisible=false;" @endif
-                class="w-full px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-coolgray-200 lg:w-auto dark:text-neutral-200 dark:hover:bg-coolgray-300 focus:shadow-outline focus:outline-hidden">
-                {{ $buttonText }}
-            </button>
+            class="w-full px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-coolgray-200 lg:w-auto dark:text-neutral-200 dark:hover:bg-coolgray-300 focus:shadow-outline focus:outline-hidden">
+            {{ $buttonText }}
+        </button>
     </div>
 </div>
diff --git a/resources/views/livewire/layout-popups.blade.php b/resources/views/livewire/layout-popups.blade.php
index c639b4627..5fc17bdde 100644
--- a/resources/views/livewire/layout-popups.blade.php
+++ b/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';
-        this.popups.notification = localStorage.getItem('popupNotification') !== 'false';
+        console.log(this.isDevelopment);
+        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"
-                    class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
+                <img src="{{ asset('heart.png') }}" 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
-                    consider donating on <a href="https://github.com/sponsors/coollabsio"
-                        class="text-xs underline dark:text-white">GitHub</a> or <a
-                        href="https://opencollective.com/coollabsio"
-                        class="text-xs underline dark:text-white">OpenCollective</a>.<br><br></span>
-                <span>It enables us to keep creating features without paywalls, ensuring our work remains free and
-                    open.</span>
+                <div class="text-md dark:text-white">
+                    <span>We are already profitable, but we would like to scale even further.</span>
+                    <br><span>Please
+                        consider donating on one (or both) of the following platforms.<br /><br /> <a
+                            href="https://github.com/sponsors/coollabsio"
+                            class="underline text-lg font-bold dark:text-white">GitHub
+                            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() {