[Website] Add a search params hook

[beefchimi]

I want to be able to toggle some "Debug UI", so adding a hook to watch for window > popstate would be good... I attempted this however, and it did not work.

Some code for reference:

<script setup lang="ts">
import {watch} from 'vue';
import {useSearchParams} from '@/hooks';

const state = useSearchParams();

watch(state, (incoming) => {
  console.log('incoming keys', Object.keys(incoming));
  console.log('incoming values', Object.values(incoming));
});

function updateUrl(key: string, value?: string | number | boolean) {
  const params = new URLSearchParams(window.location.search);
  const safeValue = `${value}`;

  if (!value || params.has(key, safeValue)) {
    params.delete(key);
  } else {
    params.set(key, `${value}`);
  }

  const parsedParams = params.toString();
  history.pushState({}, '', `?${parsedParams}`);
}
</script>

<template>
  <button type="button" @click="() => updateUrl('one', 2)">One</button>
  <button type="button" @click="() => updateUrl('foo', 'bar')">Two</button>
  <button type="button" @click="() => updateUrl('cheese', true)">Three</button>
  <button type="button" @click="() => updateUrl('nope', false)">Four</button>
  <button type="button" @click="() => updateUrl('forget')">Five</button>
</template>

import {reactive, onMounted, onUnmounted} from 'vue';

import {supportDom} from '@earwurm/utilities';
import {useSupported} from './useSupported';

export type UrlParams = Record<string, string[] | string>;

function read() {
  const rawParams = window.location.search || '';
  return new URLSearchParams(rawParams);
}

// Adapted from:
// https://github.com/vueuse/vueuse/blob/main/packages/core/useUrlSearchParams
export function useSearchParams() {
  const isSupported = useSupported(supportDom);
  const state = reactive<UrlParams>({});

  if (!isSupported) return state;

  function updateState(params: URLSearchParams) {
    const unusedKeys = new Set(Object.keys(state));

    for (const key of params.keys()) {
      const paramsForKey = params.getAll(key);

      state[key] =
        paramsForKey.length > 1 ? paramsForKey : params.get(key) || '';

      unusedKeys.delete(key);
    }

    Array.from(unusedKeys).forEach((key) => delete state[key]);
  }

  function handlePopState(event: PopStateEvent) {
    console.log('PopState > event', event);

    const params = read();
    updateState(params);
  }

  const initial = read();

  if (initial.keys().next().value) {
    updateState(initial);
  } else {
    Object.assign(state, {});
  }

  onMounted(() => {
    window.addEventListener('popstate', handlePopState);
  });

  onUnmounted(() => {
    window.removeEventListener('popstate', handlePopState);
  });

  return state;
}