shark/src/lib/ToolBar.svelte

<script lang="ts">
  import { beforeNavigate } from '$app/navigation';

  let { onToggleNowPlaying }: { onToggleNowPlaying?: () => void } = $props();

  const icons = {
    back: '/icons/leftarrow.png',
    forward: '/icons/rightarrow.png',
    play: '/icons/speaker.png',
    search: '/icons/internet.png',
    computer: '/icons/computer.png',
    device: '/icons/ipod.svg',
  };

  let history: string[] = $state([]);
  let currentIndex = $state(-1);

  beforeNavigate((navigation) => {
    if (navigation.to?.url.pathname) {
      // Remove any forward history when navigating to a new page
      history = history.slice(0, currentIndex + 1);
      history.push(navigation.to.url.pathname);
      currentIndex = history.length - 1;
    }
  });

  function goBack() {
    if (currentIndex > 0) {
      currentIndex--;
      window.history.back();
    }
  }

  function goForward() {
    if (currentIndex < history.length - 1) {
      currentIndex++;
      window.history.forward();
    }
  }

  function handleNowPlayingClick() {
    if (onToggleNowPlaying) {
      onToggleNowPlaying();
    }
  }

  $effect(() => {
    if (history.length === 0 && typeof window !== 'undefined') {
      history = [window.location.pathname];
      currentIndex = 0;
    }
  });
</script>

<div class="toolbar">
  <button
    class="toolbar-button"
    disabled={currentIndex <= 0}
    title="Back"
    onclick={goBack}
  >
    <img src={icons.back} alt="Back" />
  </button>
  <button
    class="toolbar-button"
    disabled={currentIndex >= history.length - 1}
    title="Forward"
    onclick={goForward}
  >
    <img src={icons.forward} alt="Forward" />
  </button>

  <div class="toolbar-separator"></div>

  <button class="toolbar-button" onclick={handleNowPlayingClick} title="Now Playing">
    <img src={icons.play} alt="Play" />
    <span>Now Playing</span>
  </button>

  <a href="/search" class="toolbar-button" title="Search">
    <img src={icons.search} alt="Search" />
    <span>Search</span>
  </a>

  <a href="/sync" class="toolbar-button" title="Device Sync">
    <img src={icons.device} alt="Device Sync" />
    <span>Sync</span>
  </a>

  <a href="/settings" class="toolbar-button" title="Settings">
    <img src={icons.computer} alt="Settings" />
    <span>Settings</span>
  </a>

</div>

<style>
  .toolbar {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    gap: 1px;
    user-select: none;
  }

  .toolbar-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 3px 5px;
    min-width: auto;
    min-height: auto;
    font-family: "Pixelated MS Sans Serif", Arial;
    font-size: 11px;
    cursor: pointer;
    color: light-dark(#222, #ddd);
    text-shadow: none;
    text-decoration: none;
  }

  .toolbar-button:hover {
    background: light-dark(silver, #2b2b2b);
    box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
      inset 1px 1px light-dark(#fff, #525252),
      inset -2px -2px light-dark(grey, #232323),
      inset 2px 2px light-dark(#dfdfdf, #363636);
  }

  .toolbar-button:active {
    box-shadow: inset -1px -1px light-dark(#fff, #525252),
      inset 1px 1px light-dark(#0a0a0a, #000),
      inset -2px -2px light-dark(#dfdfdf, #363636),
      inset 2px 2px light-dark(grey, #232323);
  }

  .toolbar-button span {
    word-spacing: 2px;
  }

  .toolbar-button img {
    width: 20px;
    height: 20px;
    display: block;
  }

  .toolbar-separator {
    width: 2px;
    height: 20px;
    background: light-dark(grey, #232323);
    border-right: 1px solid light-dark(#fff, #525252);
    margin: 0 2px;
  }
</style>