feat: move improved components out of ui folder

src/components/buttons/Bookmark.astro

@@ -0,0 +1,85 @@
+---
+import Icon from '@components/ui/icons/icon.astro';
+---
+
+<button
+  type="button"
+  class="button-base button-bg-blue group inline-flex items-center rounded-lg p-2.5"
+  data-bookmark-button="bookmark-button"
+>
+  <Icon name="bookmark" />
+</button>
+
+<script>
+  class Bookmark {
+    private static readonly BOOKMARKS_KEY = 'bookmarks';
+    private bookmarkButton: Element | null;
+
+    constructor(private dataAttrValue: string) {
+      this.bookmarkButton = document.querySelector(`[data-bookmark-button="${dataAttrValue}"]`);
+    }
+
+    private getStoredBookmarks(): string[] {
+      const item = localStorage.getItem(Bookmark.BOOKMARKS_KEY);
+      return item ? JSON.parse(item) : [];
+    }
+
+    init(): void {
+      if (this.bookmarkButton && this.isStored()) {
+        this.markAsStored();
+      }
+
+      this.bookmarkButton?.addEventListener('click', () => this.toggleBookmark());
+    }
+
+    isStored(): boolean {
+      return this.getStoredBookmarks().includes(window.location.pathname);
+    }
+
+    markAsStored(): void {
+      if (this.bookmarkButton) {
+        this.bookmarkButton.classList.add('bookmarked');
+        const svgElement = this.bookmarkButton.querySelector('svg');
+        if (svgElement) {
+          svgElement.setAttribute('class', 'h-6 w-6 fill-red-500 dark:fill-red-500');
+        }
+        const pathElement = svgElement?.querySelector('path');
+        if (pathElement) {
+          pathElement.setAttribute('class', 'fill-current text-red-500 dark:text-red-500');
+        }
+      }
+    }
+
+    unmarkAsStored(): void {
+      if (this.bookmarkButton) {
+        this.bookmarkButton.classList.remove('bookmarked');
+        const svgElement = this.bookmarkButton.querySelector('svg');
+        if (svgElement) {
+          svgElement.setAttribute('class', 'h-6 w-6 fill-none');
+        }
+        const pathElement = svgElement?.querySelector('path');
+        if (pathElement) {
+          pathElement.setAttribute(
+            'class',
+            'fill-current text-neutral-500 group-hover:text-red-400 dark:text-neutral-500 group-hover:dark:text-red-400'
+          );
+        }
+      }
+    }
+
+    toggleBookmark(): void {
+      const storedBookmarks = this.getStoredBookmarks();
+      const index = storedBookmarks.indexOf(window.location.pathname);
+      if (index !== -1) {
+        storedBookmarks.splice(index, 1);
+        this.unmarkAsStored();
+      } else {
+        storedBookmarks.push(window.location.pathname);
+        this.markAsStored();
+      }
+      localStorage.setItem(Bookmark.BOOKMARKS_KEY, JSON.stringify(storedBookmarks));
+    }
+  }
+
+  new Bookmark('bookmark-button').init();
+</script>

src/components/buttons/GiteaButton.astro

@@ -0,0 +1,31 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  title?: string;
+  url?: string;
+}
+
+const { title, url } = Astro.props;
+---
+
+<a
+  class="button-base button-bg-gitea group inline-flex rounded-full gap-x-2"
+  href={url}
+  target="_blank"
+  rel="noopener noreferrer"
+>
+  <div class="button-text-title flex relative items-center text-center">
+    <Icon
+      name="pajamas:gitea"
+      class="h-4 w-4 md:h-6 md:w-6"
+    />
+    <span class="ml-2">
+      {title}
+    </span>
+    <Icon
+      name="mdi:keyboard-arrow-right"
+      class="button-hover-arrow"
+    />
+  </div>
+</a>

src/components/buttons/GoBack.astro

@@ -0,0 +1,28 @@
+---
+import Icon from '@components/ui/icons/icon.astro';
+
+interface Props {
+  noArrow?: boolean;
+}
+
+const { noArrow } = Astro.props;
+---
+
+<button
+  class="button-base button-bg-blue group inline-flex rounded-lg gap-x-2"
+  id="back-button"
+  data-astro-prefetch
+>
+  <div class="button-text-title flex relative items-center text-center">
+    {noArrow ? null : <Icon name="arrowLeft" />}
+    <span class="ml-2">
+      Go Back
+    </span>
+  </div>
+</button>
+
+<script>
+  document.getElementById('back-button')?.addEventListener('click', () => {
+    window.history.back();
+  });
+</script>

src/components/buttons/GoHome.astro

@@ -0,0 +1,25 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  url?: string;
+}
+
+const { url } = Astro.props;
+---
+
+<a
+  class="button-base button-bg-teal group inline-flex rounded-lg gap-x-2"
+  href={url}
+  data-astro-prefetch
+>
+  <div class="button-text-title flex relative items-center text-center">
+    <Icon
+      name="mdi:home-variant-outline"
+      class="card-hover-icon-scale h-3 w-3 md:h-5 md:w-5"
+    />
+    <span class="ml-2">
+      Return Home
+    </span>
+  </div>
+</a>

src/components/buttons/GoLinkPrimary.astro

@@ -0,0 +1,29 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  title?: string;
+  url?: string;
+  noArrow?: boolean;
+}
+
+const { title, url, noArrow } = Astro.props;
+---
+
+<a
+  class="button-base button-bg-teal group inline-flex rounded-lg gap-x-2"
+  href={url}
+  data-astro-prefetch
+>
+  <div class="button-text-title flex relative items-center text-center">
+    <span class="mr-2">
+      {title}
+    </span>
+    {noArrow ? null : (
+    <Icon
+      name="mdi:keyboard-arrow-right"
+      class="button-hover-arrow"
+    />
+    )}
+  </div>
+</a>

src/components/buttons/GoLinkSecondary.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  title?: string;
+  url?: string;
+}
+
+const { title, url } = Astro.props;
+---
+
+<a
+  class="button-base button-bg-neutral group inline-flex rounded-lg gap-x-2"
+  href={url}
+  data-astro-prefetch
+>
+  <div class="button-text-title flex relative items-center text-center">
+    <span>
+      {title}
+    </span>
+  </div>
+</a>

src/components/buttons/SocialShare.astro

@@ -0,0 +1,51 @@
+---
+import Icon from '@components/ui/icons/icon.astro';
+
+type SocialPlatform = {
+  name: string;
+  url: string;
+  svg: string;
+};
+
+interface Props {
+  pageTitle: string;
+}
+
+const { pageTitle } = Astro.props;
+
+const socialPlatforms: SocialPlatform[] = [
+  {
+    name: 'Facebook',
+    url: `https://www.facebook.com/sharer/sharer.php?u=${Astro.url}`,
+    svg: 'facebook',
+  },
+  {
+    name: 'X',
+    url: `https://x.com/intent/tweet?url=${Astro.url}&text=${pageTitle}`,
+    svg: 'x',
+  },
+  {
+    name: 'LinkedIn',
+    url: `https://www.linkedin.com/sharing/share-offsite/?url=${Astro.url}`,
+    svg: 'linkedIn',
+  },
+];
+---
+
+<div class="inline-flex items-center gap-x-2">
+  {
+    socialPlatforms.map((platform) => (
+      <a
+        class="button-base-hidden group inline-flex rounded-lg gap-x-2"
+        href={platform.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        title={`Share on ${platform.name}`}
+      >
+        <div class="button-text-title-hidden flex relative items-center text-center">
+          <Icon name={platform.svg} class="h-5 w-5" />
+        </div>
+      </a>
+    ))
+  }
+</div>

src/components/buttons/ThemeToggle.astro

@@ -0,0 +1,210 @@
+---
+
+---
+
+<button
+  id="theme-toggle"
+  data-theme-toggle
+  class="group dark:hover:bg-steel/30 hover:bg-yellow-300/20 transition-all duration-300 relative rounded-full p-1.5 sm:p-2 touch-manipulation"
+  aria-label="Toggle dark mode"
+>
+  <div class="relative flex h-5 w-5 items-center justify-center">
+    <!-- Sun icon -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-light absolute h-5 w-5 text-neutral-600 dark:text-neutral-400 scale-100 dark:scale-0 rotate-0 dark:-rotate-90 transition-all duration-500"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="5"></circle>
+      <path
+        d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
+      ></path>
+    </svg>
+
+    <!-- Moon icon -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-dark absolute h-5 w-5 text-neutral-600 dark:text-neutral-400 scale-0 dark:scale-100 rotate-90 dark:rotate-0 transition-all duration-500"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+    </svg>
+  </div>
+</button>
+
+<script is:inline>
+  const isDark =
+    localStorage.theme === 'dark' ||
+    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  document.documentElement.classList.toggle('dark', isDark);
+</script>
+
+<script>
+  function setupThemeToggle() {
+    const themeToggles = document.querySelectorAll('[data-theme-toggle]');
+
+    // Create theme switch overlay element
+    if (!document.querySelector('.theme-switch-overlay')) {
+      const overlay = document.createElement('div');
+      overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
+      overlay.style.opacity = '0';
+      overlay.style.transition = 'opacity 0.3s ease-out';
+      document.body.appendChild(overlay);
+    }
+
+    themeToggles.forEach((toggle) => {
+      ['click', 'touchend'].forEach((eventType) => {
+        toggle.addEventListener(
+          eventType,
+          (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Get click/touch position for radial animation
+            let x, y;
+            if (e.type === 'touchend' && e.changedTouches && e.changedTouches[0]) {
+              const rect = toggle.getBoundingClientRect();
+              x = e.changedTouches[0].clientX - rect.left;
+              y = e.changedTouches[0].clientY - rect.top;
+            } else {
+              const rect = toggle.getBoundingClientRect();
+              x = e.clientX - rect.left;
+              y = e.clientY - rect.top;
+            }
+
+            document.documentElement.style.setProperty('--x', `${x}px`);
+            document.documentElement.style.setProperty('--y', `${y}px`);
+
+            const overlay = document.querySelector('.theme-switch-overlay');
+            const isDark = document.documentElement.classList.contains('dark');
+            const newTheme = isDark ? 'light' : 'dark';
+
+            // Show overlay during transition
+            if (overlay) {
+              overlay.style.backgroundColor =
+                newTheme === 'dark' ? 'rgba(24, 24, 27, 0.3)' : 'rgba(255, 255, 255, 0.3)';
+              overlay.style.opacity = '1';
+            }
+
+            document.documentElement.classList.add('theme-switching');
+
+            // Force a reflow to ensure all elements update
+            document.body.offsetHeight;
+
+            // Toggle dark mode with a slight delay to allow overlay to appear
+            setTimeout(() => {
+              if (isDark) {
+                document.documentElement.classList.remove('dark');
+              } else {
+                document.documentElement.classList.add('dark');
+              }
+
+              localStorage.setItem('theme', newTheme);
+              document.dispatchEvent(
+                new CustomEvent('themeChanged', {
+                  detail: { isDark: newTheme === 'dark' },
+                })
+              );
+
+              // Force another reflow to ensure all elements update
+              document.body.offsetHeight;
+
+              setTimeout(() => {
+                if (overlay) {
+                  overlay.style.opacity = '0';
+                }
+                document.documentElement.classList.remove('theme-switching');
+              }, 300);
+            }, 50);
+          },
+          { passive: false }
+        );
+      });
+    });
+  }
+
+  // Run setup on load
+  document.addEventListener('astro:page-load', setupThemeToggle);
+
+  // Also run on page visibility change to ensure theme is consistent
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      const currentTheme = localStorage.getItem('theme');
+      if (currentTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else if (currentTheme === 'light') {
+        document.documentElement.classList.remove('dark');
+      }
+    }
+  });
+
+  // Listen for system preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+    if (!localStorage.getItem('theme')) {
+      if (matches) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    }
+  });
+</script>
+
+<style>
+  /* Subtle hover animation */
+  #theme-toggle {
+    transform: translateY(0);
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
+    min-height: 32px;
+    min-width: 32px;
+  }
+
+  @media (hover: hover) {
+    #theme-toggle:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    :global(:root:not(.dark)) #theme-toggle:hover .icon-light {
+      filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.6));
+      transform: scale(1.1) rotate(15deg);
+    }
+
+    :global(:root.dark) #theme-toggle:hover .icon-dark {
+      filter: drop-shadow(0 0 2px rgba(129, 140, 248, 0.6));
+      transform: scale(1.1) rotate(-15deg);
+    }
+  }
+
+  /* Optimize animations for mobile */
+  @media (prefers-reduced-motion: reduce) {
+    .icon-light,
+    .icon-dark {
+      transition: all 0.2s ease-out !important;
+    }
+
+    #theme-toggle,
+    #theme-toggle:hover {
+      transform: none;
+      transition: none;
+    }
+  }
+
+  /* Adjust size for very small screens */
+  @media (max-width: 320px) {
+    #theme-toggle {
+      padding: 0.25rem !important;
+    }
+  }
+</style>