From 82cb26b4651fccc0bc829aefa60747ee7d053419 Mon Sep 17 00:00:00 2001
From: Doruk <peak@peaktwilight.com>
Date: Sun, 15 Jun 2025 01:10:43 +0200
Subject: [PATCH 1/9] change btn info to btn primary

---
 src/layouts/Layout.vue   | 2 +-
 src/pages/StatusPage.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 9faedf589..e93a5159e 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -16,7 +16,7 @@
                 <span class="fs-4 title">{{ $t("Uptime Kuma") }}</span>
             </router-link>
 
-            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/uptime-kuma/releases" class="btn btn-info me-3">
+            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/uptime-kuma/releases" class="btn btn-primary me-3">
                 <font-awesome-icon icon="arrow-alt-circle-up" /> {{ $t("New Update") }}
             </a>
 
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 116968282..e0df74fde 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -157,12 +157,12 @@
             <!-- Admin functions -->
             <div v-if="hasToken" class="mb-4">
                 <div v-if="!enableEditMode">
-                    <button class="btn btn-info me-2" data-testid="edit-button" @click="edit">
+                    <button class="btn btn-primary me-2" data-testid="edit-button" @click="edit">
                         <font-awesome-icon icon="edit" />
                         {{ $t("Edit Status Page") }}
                     </button>
 
-                    <a href="/manage-status-page" class="btn btn-info">
+                    <a href="/manage-status-page" class="btn btn-primary">
                         <font-awesome-icon icon="tachometer-alt" />
                         {{ $t("Go to Dashboard") }}
                     </a>

From b1bf26289e3169614bb1975c809727ef1abbd96f Mon Sep 17 00:00:00 2001
From: Doruk <peak@peaktwilight.com>
Date: Sun, 15 Jun 2025 18:09:23 +0200
Subject: [PATCH 2/9] add tooltip

---
 src/components/HeartbeatBar.vue | 199 ++++++++++++++++++++++++++--
 src/components/Tooltip.vue      | 226 ++++++++++++++++++++++++++++++++
 2 files changed, 415 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Tooltip.vue

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 429ca9f91..3a523997a 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -7,11 +7,17 @@
                 class="beat-hover-area"
                 :class="{ 'empty': (beat === 0) }"
                 :style="beatHoverAreaStyle"
-                :title="getBeatTitle(beat)"
+                :aria-label="getBeatAriaLabel(beat)"
+                role="status"
+                tabindex="0"
+                @mouseenter="showTooltip(beat, $event)"
+                @mouseleave="hideTooltip"
+                @focus="showTooltip(beat, $event)"
+                @blur="hideTooltip"
             >
                 <div
                     class="beat"
-                    :class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
+                    :class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
                     :style="beatStyle"
                 />
             </div>
@@ -24,13 +30,27 @@
             <div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
             <div>{{ timeSinceLastBeat }}</div>
         </div>
+        
+        
+        <!-- Custom Tooltip -->
+        <Tooltip 
+            :visible="tooltipVisible" 
+            :content="tooltipContent"
+            :x="tooltipX"
+            :y="tooltipY"
+            :position="tooltipPosition"
+        />
     </div>
 </template>
 
 <script>
 import dayjs from "dayjs";
+import Tooltip from "./Tooltip.vue";
 
 export default {
+    components: {
+        Tooltip,
+    },
     props: {
         /** Size of the heartbeat bar */
         size: {
@@ -46,6 +66,11 @@ export default {
         heartbeatList: {
             type: Array,
             default: null,
+        },
+        /** Heartbeat bar days */
+        heartbeatBarDays: {
+            type: Number,
+            default: 0
         }
     },
     data() {
@@ -56,10 +81,25 @@ export default {
             beatHoverAreaPadding: 4,
             move: false,
             maxBeat: -1,
+            // Tooltip data
+            tooltipVisible: false,
+            tooltipContent: null,
+            tooltipX: 0,
+            tooltipY: 0,
+            tooltipPosition: 'below',
+            tooltipTimeoutId: null,
         };
     },
     computed: {
 
+        /**
+         * Normalized heartbeatBarDays as a number
+         * @returns {number} Number of days for heartbeat bar
+         */
+        normalizedHeartbeatBarDays() {
+            return Math.max(0, Math.min(365, Math.floor(this.heartbeatBarDays || 0)));
+        },
+
         /**
          * If heartbeatList is null, get it from $root.heartbeatList
          * @returns {object} Heartbeat list
@@ -80,6 +120,12 @@ export default {
             if (!this.beatList) {
                 return 0;
             }
+
+            // For configured ranges, no padding needed since we show all beats
+            if (this.normalizedHeartbeatBarDays > 0) {
+                return 0;
+            }
+
             let num = this.beatList.length - this.maxBeat;
 
             if (this.move) {
@@ -98,8 +144,20 @@ export default {
                 return [];
             }
 
+            // If heartbeat days is configured (not auto), data is already aggregated from server
+            if (this.normalizedHeartbeatBarDays > 0 && this.beatList.length > 0) {
+                // Show all beats from server - they are already properly aggregated
+                return this.beatList;
+            }
+
+            // Original logic for auto mode (heartbeatBarDays = 0)
             let placeholders = [];
 
+            // Handle case where maxBeat is -1 (no limit)
+            if (this.maxBeat <= 0) {
+                return this.beatList;
+            }
+
             let start = this.beatList.length - this.maxBeat;
 
             if (this.move) {
@@ -172,13 +230,17 @@ export default {
          * @returns {string} The time elapsed in minutes or hours.
          */
         timeSinceFirstBeat() {
+            // For configured days mode, show the configured range
+            if (this.normalizedHeartbeatBarDays > 0) {
+                return this.normalizedHeartbeatBarDays < 2 ?
+                    (this.normalizedHeartbeatBarDays * 24) + "h" :
+                    this.normalizedHeartbeatBarDays + "d";
+            }
+
+            // For auto mode, calculate from actual data
             const firstValidBeat = this.shortBeatList.at(this.numPadding);
             const minutes = dayjs().diff(dayjs.utc(firstValidBeat?.time), "minutes");
-            if (minutes > 60) {
-                return (minutes / 60).toFixed(0) + "h";
-            } else {
-                return minutes + "m";
-            }
+            return minutes > 60 ? Math.floor(minutes / 60) + "h" : minutes + "m";
         },
 
         /**
@@ -205,7 +267,7 @@ export default {
     },
     watch: {
         beatList: {
-            handler(val, oldVal) {
+            handler() {
                 this.move = true;
 
                 setTimeout(() => {
@@ -217,6 +279,10 @@ export default {
     },
     unmounted() {
         window.removeEventListener("resize", this.resize);
+        // Clean up tooltip timeout
+        if (this.tooltipTimeoutId) {
+            clearTimeout(this.tooltipTimeoutId);
+        }
     },
     beforeMount() {
         if (this.heartbeatList === null) {
@@ -256,7 +322,23 @@ export default {
          */
         resize() {
             if (this.$refs.wrap) {
-                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatHoverAreaPadding * 2));
+                const newMaxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatHoverAreaPadding * 2));
+
+                // If maxBeat changed and we're in configured days mode, notify parent to reload data
+                if (newMaxBeat !== this.maxBeat && this.normalizedHeartbeatBarDays > 0) {
+                    this.maxBeat = newMaxBeat;
+
+                    // Find the closest parent with reloadHeartbeatData method (StatusPage)
+                    let parent = this.$parent;
+                    while (parent && !parent.reloadHeartbeatData) {
+                        parent = parent.$parent;
+                    }
+                    if (parent && parent.reloadHeartbeatData) {
+                        parent.reloadHeartbeatData(newMaxBeat);
+                    }
+                } else {
+                    this.maxBeat = newMaxBeat;
+                }
             }
         },
 
@@ -267,7 +349,103 @@ export default {
          * @returns {string} Beat title
          */
         getBeatTitle(beat) {
-            return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
+            if (beat === 0 || !beat) {
+                return "";
+            }
+
+            // Show timestamp for all beats (both individual and aggregated)
+            return `${this.$root.datetime(beat.time)}${beat.msg ? ` - ${beat.msg}` : ""}`;
+        },
+
+        /**
+         * Get the aria-label for accessibility
+         * @param {object} beat Beat to get aria-label from
+         * @returns {string} Aria label
+         */
+        getBeatAriaLabel(beat) {
+            if (beat === 0 || !beat) {
+                return "No data";
+            }
+
+            const statusText = {
+                0: "Down",
+                1: "Up", 
+                2: "Pending",
+                3: "Maintenance"
+            }[beat.status] || "Unknown";
+
+            return `${statusText} at ${this.$root.datetime(beat.time)}`;
+        },
+
+        /**
+         * Show custom tooltip
+         * @param {object} beat Beat data
+         * @param {Event} event Mouse event
+         */
+        showTooltip(beat, event) {
+            if (beat === 0 || !beat) {
+                this.hideTooltip();
+                return;
+            }
+
+            // Clear any existing timeout
+            if (this.tooltipTimeoutId) {
+                clearTimeout(this.tooltipTimeoutId);
+            }
+
+            // Small delay for better UX
+            this.tooltipTimeoutId = setTimeout(() => {
+                this.tooltipContent = beat;
+                
+                // Calculate position relative to viewport
+                const rect = event.target.getBoundingClientRect();
+                
+                // Position relative to viewport
+                const x = rect.left + (rect.width / 2);
+                const y = rect.top;
+                
+                // Check if tooltip would go off-screen and adjust position
+                const tooltipHeight = 80; // Approximate tooltip height
+                const viewportHeight = window.innerHeight;
+                const spaceAbove = y;
+                const spaceBelow = viewportHeight - y - rect.height;
+                
+                if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
+                    // Show above - arrow points down
+                    this.tooltipPosition = 'above';
+                    this.tooltipY = y - 10;
+                } else {
+                    // Show below - arrow points up
+                    this.tooltipPosition = 'below';
+                    this.tooltipY = y + rect.height + 10;
+                }
+                
+                // Ensure tooltip doesn't go off the left or right edge
+                const tooltipWidth = 120; // Approximate tooltip width
+                let adjustedX = x;
+                
+                if (x - tooltipWidth/2 < 10) {
+                    adjustedX = tooltipWidth/2 + 10;
+                } else if (x + tooltipWidth/2 > window.innerWidth - 10) {
+                    adjustedX = window.innerWidth - tooltipWidth/2 - 10;
+                }
+                
+                this.tooltipX = adjustedX;
+                this.tooltipVisible = true;
+            }, 150);
+        },
+
+        /**
+         * Hide custom tooltip
+         */
+        hideTooltip() {
+            if (this.tooltipTimeoutId) {
+                clearTimeout(this.tooltipTimeoutId);
+                this.tooltipTimeoutId = null;
+            }
+            
+            this.tooltipVisible = false;
+            this.tooltipContent = null;
         },
 
     },
@@ -345,4 +523,5 @@ export default {
         background-color: #333;
     }
 }
+
 </style>
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
new file mode 100644
index 000000000..8106949b8
--- /dev/null
+++ b/src/components/Tooltip.vue
@@ -0,0 +1,226 @@
+<template>
+    <teleport to="body">
+        <div 
+            v-if="visible && content"
+            ref="tooltip"
+            class="tooltip-wrapper"
+            :style="tooltipStyle"
+            :class="{ 'tooltip-above': position === 'above' }"
+        >
+            <div class="tooltip-content">
+                <slot :content="content">
+                    <!-- Default content if no slot provided -->
+                    <div class="tooltip-status" :class="statusClass">
+                        {{ statusText }}
+                    </div>
+                    <div class="tooltip-time">{{ timeText }}</div>
+                    <div v-if="message" class="tooltip-message">{{ message }}</div>
+                </slot>
+            </div>
+            <div class="tooltip-arrow" :class="{ 'arrow-above': position === 'above' }"></div>
+        </div>
+    </teleport>
+</template>
+
+<script>
+export default {
+    name: "Tooltip",
+    props: {
+        /** Whether tooltip is visible */
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        /** Content object to display */
+        content: {
+            type: Object,
+            default: null
+        },
+        /** X position (viewport coordinates) */
+        x: {
+            type: Number,
+            default: 0
+        },
+        /** Y position (viewport coordinates) */  
+        y: {
+            type: Number,
+            default: 0
+        },
+        /** Position relative to target element */
+        position: {
+            type: String,
+            default: 'below',
+            validator: (value) => ['above', 'below'].includes(value)
+        }
+    },
+    computed: {
+        tooltipStyle() {
+            return {
+                left: this.x + 'px',
+                top: this.y + 'px',
+            };
+        },
+
+        statusText() {
+            if (!this.content || this.content === 0) return this.$t('Unknown');
+            
+            const statusMap = {
+                0: this.$t('Down'),
+                1: this.$t('Up'), 
+                2: this.$t('Pending'),
+                3: this.$t('Maintenance')
+            };
+            return statusMap[this.content.status] || this.$t('Unknown');
+        },
+
+        statusClass() {
+            if (!this.content || this.content === 0) return 'status-empty';
+            
+            const classMap = {
+                0: 'status-down',
+                1: 'status-up',
+                2: 'status-pending', 
+                3: 'status-maintenance'
+            };
+            return classMap[this.content.status] || 'status-unknown';
+        },
+
+        timeText() {
+            if (!this.content || this.content === 0) return '';
+            return this.$root.datetime(this.content.time);
+        },
+
+        message() {
+            if (!this.content || this.content === 0) return '';
+            return this.content.msg || '';
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.tooltip-wrapper {
+    position: fixed;
+    z-index: 9999;
+    pointer-events: none;
+    transform: translateX(-50%);
+    
+    .tooltip-content {
+        background: rgba(17, 24, 39, 0.95);
+        backdrop-filter: blur(8px);
+        border: 1px solid rgba(75, 85, 99, 0.3);
+        border-radius: 8px;
+        padding: 8px 12px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
+        min-width: 120px;
+        text-align: center;
+        
+        .tooltip-status {
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 4px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            
+            &.status-up {
+                color: $primary;
+            }
+            
+            &.status-down {
+                color: $danger;
+            }
+            
+            &.status-pending {
+                color: $warning;
+            }
+            
+            &.status-maintenance {
+                color: $maintenance;
+            }
+            
+            &.status-empty {
+                color: $secondary-text;
+            }
+        }
+        
+        .tooltip-time {
+            color: #d1d5db;
+            font-size: 11px;
+            margin-bottom: 2px;
+        }
+        
+        .tooltip-message {
+            color: #f3f4f6;
+            font-size: 10px;
+            margin-top: 4px;
+            padding-top: 4px;
+            border-top: 1px solid rgba(75, 85, 99, 0.3);
+        }
+    }
+    
+    .tooltip-arrow {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        
+        // Default: tooltip below element, arrow points up
+        border-bottom: 6px solid rgba(17, 24, 39, 0.95);
+        top: -6px;
+        
+        &.arrow-above {
+            // Tooltip above element, arrow points down
+            top: auto;
+            bottom: -6px;
+            border-bottom: none;
+            border-top: 6px solid rgba(17, 24, 39, 0.95);
+        }
+    }
+    
+    // Smooth entrance animation
+    animation: tooltip-fade-in 0.2s $easing-out;
+    
+    &.tooltip-above {
+        transform: translateX(-50%) translateY(-8px);
+    }
+}
+
+// Dark theme adjustments
+.dark .tooltip-wrapper {
+    .tooltip-content {
+        background: rgba(31, 41, 55, 0.95);
+        border-color: rgba(107, 114, 128, 0.3);
+    }
+    
+    .tooltip-arrow {
+        border-bottom-color: rgba(31, 41, 55, 0.95);
+        
+        &.arrow-above {
+            border-top-color: rgba(31, 41, 55, 0.95);
+        }
+    }
+}
+
+@keyframes tooltip-fade-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+// Accessibility improvements
+@media (prefers-reduced-motion: reduce) {
+    .tooltip-wrapper {
+        animation: none !important;
+    }
+}
+</style>
\ No newline at end of file

From 89fc5f16657027ab707eb1650629c3e5e607a473 Mon Sep 17 00:00:00 2001
From: Doruk <peak@peaktwilight.com>
Date: Sun, 15 Jun 2025 18:13:50 +0200
Subject: [PATCH 3/9] lint fix

---
 src/components/HeartbeatBar.vue | 39 +++++++--------
 src/components/Tooltip.vue      | 88 ++++++++++++++++++---------------
 2 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 3a523997a..43406b922 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -30,11 +30,10 @@
             <div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
             <div>{{ timeSinceLastBeat }}</div>
         </div>
-        
-        
+
         <!-- Custom Tooltip -->
-        <Tooltip 
-            :visible="tooltipVisible" 
+        <Tooltip
+            :visible="tooltipVisible"
             :content="tooltipContent"
             :x="tooltipX"
             :y="tooltipY"
@@ -86,7 +85,7 @@ export default {
             tooltipContent: null,
             tooltipX: 0,
             tooltipY: 0,
-            tooltipPosition: 'below',
+            tooltipPosition: "below",
             tooltipTimeoutId: null,
         };
     },
@@ -369,7 +368,7 @@ export default {
 
             const statusText = {
                 0: "Down",
-                1: "Up", 
+                1: "Up",
                 2: "Pending",
                 3: "Maintenance"
             }[beat.status] || "Unknown";
@@ -396,40 +395,40 @@ export default {
             // Small delay for better UX
             this.tooltipTimeoutId = setTimeout(() => {
                 this.tooltipContent = beat;
-                
+
                 // Calculate position relative to viewport
                 const rect = event.target.getBoundingClientRect();
-                
+
                 // Position relative to viewport
                 const x = rect.left + (rect.width / 2);
                 const y = rect.top;
-                
+
                 // Check if tooltip would go off-screen and adjust position
                 const tooltipHeight = 80; // Approximate tooltip height
                 const viewportHeight = window.innerHeight;
                 const spaceAbove = y;
                 const spaceBelow = viewportHeight - y - rect.height;
-                
+
                 if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
                     // Show above - arrow points down
-                    this.tooltipPosition = 'above';
+                    this.tooltipPosition = "above";
                     this.tooltipY = y - 10;
                 } else {
                     // Show below - arrow points up
-                    this.tooltipPosition = 'below';
+                    this.tooltipPosition = "below";
                     this.tooltipY = y + rect.height + 10;
                 }
-                
+
                 // Ensure tooltip doesn't go off the left or right edge
                 const tooltipWidth = 120; // Approximate tooltip width
                 let adjustedX = x;
-                
-                if (x - tooltipWidth/2 < 10) {
-                    adjustedX = tooltipWidth/2 + 10;
-                } else if (x + tooltipWidth/2 > window.innerWidth - 10) {
-                    adjustedX = window.innerWidth - tooltipWidth/2 - 10;
+
+                if (x - tooltipWidth / 2 < 10) {
+                    adjustedX = tooltipWidth / 2 + 10;
+                } else if (x + tooltipWidth / 2 > window.innerWidth - 10) {
+                    adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
                 }
-                
+
                 this.tooltipX = adjustedX;
                 this.tooltipVisible = true;
             }, 150);
@@ -443,7 +442,7 @@ export default {
                 clearTimeout(this.tooltipTimeoutId);
                 this.tooltipTimeoutId = null;
             }
-            
+
             this.tooltipVisible = false;
             this.tooltipContent = null;
         },
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 8106949b8..e1f025601 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -1,6 +1,6 @@
 <template>
     <teleport to="body">
-        <div 
+        <div
             v-if="visible && content"
             ref="tooltip"
             class="tooltip-wrapper"
@@ -41,7 +41,7 @@ export default {
             type: Number,
             default: 0
         },
-        /** Y position (viewport coordinates) */  
+        /** Y position (viewport coordinates) */
         y: {
             type: Number,
             default: 0
@@ -49,50 +49,58 @@ export default {
         /** Position relative to target element */
         position: {
             type: String,
-            default: 'below',
-            validator: (value) => ['above', 'below'].includes(value)
+            default: "below",
+            validator: (value) => [ "above", "below" ].includes(value)
         }
     },
     computed: {
         tooltipStyle() {
             return {
-                left: this.x + 'px',
-                top: this.y + 'px',
+                left: this.x + "px",
+                top: this.y + "px",
             };
         },
 
         statusText() {
-            if (!this.content || this.content === 0) return this.$t('Unknown');
-            
+            if (!this.content || this.content === 0) {
+                return this.$t("Unknown");
+            }
+
             const statusMap = {
-                0: this.$t('Down'),
-                1: this.$t('Up'), 
-                2: this.$t('Pending'),
-                3: this.$t('Maintenance')
+                0: this.$t("Down"),
+                1: this.$t("Up"),
+                2: this.$t("Pending"),
+                3: this.$t("Maintenance")
             };
-            return statusMap[this.content.status] || this.$t('Unknown');
+            return statusMap[this.content.status] || this.$t("Unknown");
         },
 
         statusClass() {
-            if (!this.content || this.content === 0) return 'status-empty';
-            
+            if (!this.content || this.content === 0) {
+                return "status-empty";
+            }
+
             const classMap = {
-                0: 'status-down',
-                1: 'status-up',
-                2: 'status-pending', 
-                3: 'status-maintenance'
+                0: "status-down",
+                1: "status-up",
+                2: "status-pending",
+                3: "status-maintenance"
             };
-            return classMap[this.content.status] || 'status-unknown';
+            return classMap[this.content.status] || "status-unknown";
         },
 
         timeText() {
-            if (!this.content || this.content === 0) return '';
+            if (!this.content || this.content === 0) {
+                return "";
+            }
             return this.$root.datetime(this.content.time);
         },
 
         message() {
-            if (!this.content || this.content === 0) return '';
-            return this.content.msg || '';
+            if (!this.content || this.content === 0) {
+                return "";
+            }
+            return this.content.msg || "";
         }
     }
 };
@@ -106,7 +114,7 @@ export default {
     z-index: 9999;
     pointer-events: none;
     transform: translateX(-50%);
-    
+
     .tooltip-content {
         background: rgba(17, 24, 39, 0.95);
         backdrop-filter: blur(8px);
@@ -116,41 +124,41 @@ export default {
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
         min-width: 120px;
         text-align: center;
-        
+
         .tooltip-status {
             font-size: 12px;
             font-weight: 600;
             margin-bottom: 4px;
             text-transform: uppercase;
             letter-spacing: 0.5px;
-            
+
             &.status-up {
                 color: $primary;
             }
-            
+
             &.status-down {
                 color: $danger;
             }
-            
+
             &.status-pending {
                 color: $warning;
             }
-            
+
             &.status-maintenance {
                 color: $maintenance;
             }
-            
+
             &.status-empty {
                 color: $secondary-text;
             }
         }
-        
+
         .tooltip-time {
             color: #d1d5db;
             font-size: 11px;
             margin-bottom: 2px;
         }
-        
+
         .tooltip-message {
             color: #f3f4f6;
             font-size: 10px;
@@ -159,7 +167,7 @@ export default {
             border-top: 1px solid rgba(75, 85, 99, 0.3);
         }
     }
-    
+
     .tooltip-arrow {
         position: absolute;
         left: 50%;
@@ -168,11 +176,11 @@ export default {
         height: 0;
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
-        
+
         // Default: tooltip below element, arrow points up
         border-bottom: 6px solid rgba(17, 24, 39, 0.95);
         top: -6px;
-        
+
         &.arrow-above {
             // Tooltip above element, arrow points down
             top: auto;
@@ -181,10 +189,10 @@ export default {
             border-top: 6px solid rgba(17, 24, 39, 0.95);
         }
     }
-    
+
     // Smooth entrance animation
     animation: tooltip-fade-in 0.2s $easing-out;
-    
+
     &.tooltip-above {
         transform: translateX(-50%) translateY(-8px);
     }
@@ -196,10 +204,10 @@ export default {
         background: rgba(31, 41, 55, 0.95);
         border-color: rgba(107, 114, 128, 0.3);
     }
-    
+
     .tooltip-arrow {
         border-bottom-color: rgba(31, 41, 55, 0.95);
-        
+
         &.arrow-above {
             border-top-color: rgba(31, 41, 55, 0.95);
         }
@@ -223,4 +231,4 @@ export default {
         animation: none !important;
     }
 }
-</style>
\ No newline at end of file
+</style>

From 2055b63822829182965f5f2f3d62afbf003ea9af Mon Sep 17 00:00:00 2001
From: Doruk <peak@peaktwilight.com>
Date: Sun, 15 Jun 2025 18:22:11 +0200
Subject: [PATCH 4/9] lint fix v2

---
 src/components/HeartbeatBar.vue | 2 ++
 src/components/Tooltip.vue      | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 43406b922..85648bb29 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -380,6 +380,7 @@ export default {
          * Show custom tooltip
          * @param {object} beat Beat data
          * @param {Event} event Mouse event
+         * @returns {void}
          */
         showTooltip(beat, event) {
             if (beat === 0 || !beat) {
@@ -436,6 +437,7 @@ export default {
 
         /**
          * Hide custom tooltip
+         * @returns {void}
          */
         hideTooltip() {
             if (this.tooltipTimeoutId) {
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index e1f025601..921d22d23 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -226,6 +226,7 @@ export default {
 }
 
 // Accessibility improvements
+
 @media (prefers-reduced-motion: reduce) {
     .tooltip-wrapper {
         animation: none !important;

From 3f7450d809a4dfd98370ebe20601834f5911b2f0 Mon Sep 17 00:00:00 2001
From: Doruk <peak@peaktwilight.com>
Date: Sun, 15 Jun 2025 18:23:58 +0200
Subject: [PATCH 5/9] fix lint v3

---
 src/components/Tooltip.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 921d22d23..c71592224 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -219,6 +219,7 @@ export default {
         opacity: 0;
         transform: translateX(-50%) translateY(4px);
     }
+
     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0);

From 2c7165a7989f205362765e3680a8e6b2192b932f Mon Sep 17 00:00:00 2001
From: Peak Twilight <77903714+peaktwilight@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:13:57 +0200
Subject: [PATCH 6/9] Update src/components/HeartbeatBar.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/HeartbeatBar.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 85648bb29..b1660ca13 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -229,14 +229,14 @@ export default {
          * @returns {string} The time elapsed in minutes or hours.
          */
         timeSinceFirstBeat() {
-            // For configured days mode, show the configured range
-            if (this.normalizedHeartbeatBarDays > 0) {
-                return this.normalizedHeartbeatBarDays < 2 ?
-                    (this.normalizedHeartbeatBarDays * 24) + "h" :
-                    this.normalizedHeartbeatBarDays + "d";
+            if (this.normalizedHeartbeatBarDays === 1) {
+                return (this.normalizedHeartbeatBarDays * 24) + "h";
+            }
+            if (this.normalizedHeartbeatBarDays >= 2) {
+                return this.normalizedHeartbeatBarDays + "d";
             }
 
-            // For auto mode, calculate from actual data
+            // Need to calculate from actual data
             const firstValidBeat = this.shortBeatList.at(this.numPadding);
             const minutes = dayjs().diff(dayjs.utc(firstValidBeat?.time), "minutes");
             return minutes > 60 ? Math.floor(minutes / 60) + "h" : minutes + "m";

From 4fe257e15c23836f41a2c09b8a9e68768a3a43fd Mon Sep 17 00:00:00 2001
From: Peak Twilight <77903714+peaktwilight@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:14:16 +0200
Subject: [PATCH 7/9] Update src/components/HeartbeatBar.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/HeartbeatBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index b1660ca13..d97ab1a89 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -348,7 +348,7 @@ export default {
          * @returns {string} Beat title
          */
         getBeatTitle(beat) {
-            if (beat === 0 || !beat) {
+            if (!beat) {
                 return "";
             }
 

From 3a174ea27a0104e89d636e480ae9015f14a3886c Mon Sep 17 00:00:00 2001
From: Peak Twilight <77903714+peaktwilight@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:17:13 +0200
Subject: [PATCH 8/9] Update src/components/HeartbeatBar.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/HeartbeatBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index d97ab1a89..5c16ebd57 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -424,9 +424,9 @@ export default {
                 const tooltipWidth = 120; // Approximate tooltip width
                 let adjustedX = x;
 
-                if (x - tooltipWidth / 2 < 10) {
+                if ((x - tooltipWidth / 2) < 10) {
                     adjustedX = tooltipWidth / 2 + 10;
-                } else if (x + tooltipWidth / 2 > window.innerWidth - 10) {
+                } else if ((x + tooltipWidth / 2) > (window.innerWidth - 10)) {
                     adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
                 }
 

From 65e70ecd192ed5f95fe4fe6102ddd0698ccaca62 Mon Sep 17 00:00:00 2001
From: Peak Twilight <77903714+peaktwilight@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:20:23 +0200
Subject: [PATCH 9/9] Update src/components/Tooltip.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/Tooltip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index c71592224..0c895a6d5 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -14,7 +14,7 @@
                         {{ statusText }}
                     </div>
                     <div class="tooltip-time">{{ timeText }}</div>
-                    <div v-if="message" class="tooltip-message">{{ message }}</div>
+                    <div v-if="content?.msg" class="tooltip-message">{{ content.msg }}</div>
                 </slot>
             </div>
             <div class="tooltip-arrow" :class="{ 'arrow-above': position === 'above' }"></div>