hikari-desktop/src/lib/components/SystemClock.svelte

<script lang="ts">
  let currentTime = $state("");

  function updateTime() {
    const now = new Date();

    // Format date as "1 January 2026"
    const day = now.getDate();
    const month = now.toLocaleString("en-GB", { month: "long" });
    const year = now.getFullYear();

    // Format time as HH:MM:SS (24-hour)
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");
    const seconds = String(now.getSeconds()).padStart(2, "0");

    currentTime = `${day} ${month} ${year}, ${hours}:${minutes}:${seconds}`;
  }

  // Update immediately on mount
  updateTime();

  // Update every second
  const interval = setInterval(updateTime, 1000);

  // Cleanup on component destroy
  $effect(() => {
    return () => {
      clearInterval(interval);
    };
  });
</script>

<div class="system-clock">
  <svg
    class="clock-icon"
    width="14"
    height="14"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <circle cx="12" cy="12" r="10" />
    <polyline points="12 6 12 12 16 14" />
  </svg>
  <span class="clock-text">{currentTime}</span>
</div>

<style>
  .system-clock {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: var(--font-mono, monospace);
    transition: all 0.2s;
    margin-left: auto;
  }

  .system-clock:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
  }

  .clock-icon {
    flex-shrink: 0;
    opacity: 0.7;
  }

  .clock-text {
    white-space: nowrap;
  }
</style>