routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/directives/ripple/VRipple.css

@@ -0,0 +1,45 @@
+@layer vuetify-components {
+  .v-ripple__container {
+    color: inherit;
+    border-radius: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    z-index: 0;
+    pointer-events: none;
+    contain: strict;
+  }
+  .v-ripple__animation {
+    color: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+    will-change: transform, opacity;
+  }
+  .v-ripple__animation--enter {
+    transition: none;
+    opacity: 0;
+  }
+  .v-ripple__animation--in {
+    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
+    opacity: calc(0.25 * var(--v-theme-overlay-multiplier));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .v-ripple__animation--in {
+      transition-property: opacity;
+      transition-duration: 0.1s;
+    }
+  }
+  .v-ripple__animation--out {
+    transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
+    opacity: 0;
+  }
+}

frontend/node_modules/vuetify/lib/directives/ripple/VRipple.sass

@@ -0,0 +1,45 @@
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-ripple
+    &__container
+      color: inherit
+      border-radius: inherit
+      position: absolute
+      width: 100%
+      height: 100%
+      left: 0
+      top: 0
+      overflow: hidden
+      z-index: 0
+      pointer-events: none
+      contain: strict
+
+    &__animation
+      color: inherit
+      position: absolute
+      top: 0
+      left: 0
+      border-radius: 50%
+      background: currentColor
+      opacity: 0
+      pointer-events: none
+      overflow: hidden
+      will-change: transform, opacity
+
+      &--enter
+        transition: none
+        opacity: 0
+
+      &--in
+        transition: $ripple-animation-transition-in
+        opacity: $ripple-animation-visible-opacity
+
+        @media (prefers-reduced-motion: reduce)
+          transition-property: opacity
+          transition-duration: 0.1s
+
+      &--out
+        transition: $ripple-animation-transition-out
+        opacity: 0

frontend/node_modules/vuetify/lib/directives/ripple/_variables.scss

@@ -0,0 +1,6 @@
+@use '../../styles/settings';
+
+$ripple-animation-transition-in: transform .25s settings.$decelerated-easing,
+                                 opacity .1s settings.$decelerated-easing !default;
+$ripple-animation-transition-out: opacity .3s settings.$decelerated-easing !default;
+$ripple-animation-visible-opacity: calc(.25 * var(--v-theme-overlay-multiplier)) !default;

frontend/node_modules/vuetify/lib/directives/ripple/index.d.ts

@@ -0,0 +1,22 @@
+
+import type { DirectiveBinding } from 'vue';
+export interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    value?: boolean | {
+        class?: string;
+        keys?: string[];
+    };
+    modifiers: {
+        center?: boolean;
+        circle?: boolean;
+        stop?: boolean;
+    };
+}
+declare function mounted(el: HTMLElement, binding: RippleDirectiveBinding): void;
+declare function unmounted(el: HTMLElement): void;
+declare function updated(el: HTMLElement, binding: RippleDirectiveBinding): void;
+export declare const Ripple: {
+    mounted: typeof mounted;
+    unmounted: typeof unmounted;
+    updated: typeof updated;
+};
+export default Ripple;

frontend/node_modules/vuetify/lib/directives/ripple/index.js

@@ -0,0 +1,297 @@
+// Styles
+import "./VRipple.css";
+
+// Utilities
+import { isObject } from "../../util/index.js";
+import { Box, getTargetBox } from "../../util/box.js"; // Types
+const stopSymbol = Symbol('rippleStop');
+const DELAY_RIPPLE = 80;
+function transform(el, value) {
+  el.style.transform = value;
+  el.style.webkitTransform = value;
+}
+function isTouchEvent(e) {
+  return e.constructor.name === 'TouchEvent';
+}
+function isKeyboardEvent(e) {
+  return e.constructor.name === 'KeyboardEvent';
+}
+const calculate = (e, el, value = {}) => {
+  let localX = 0;
+  let localY = 0;
+  if (!isKeyboardEvent(e)) {
+    const offset = new Box(el);
+    const target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e;
+    const point = getTargetBox([target.clientX, target.clientY]);
+    localX = point.x - offset.left;
+    localY = point.y - offset.top;
+  }
+  let radius = 0;
+  let scale = 0.3;
+  if (el._ripple?.circle) {
+    scale = 0.15;
+    radius = el.clientWidth / 2;
+    radius = value.center ? radius : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4;
+  } else {
+    radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2;
+  }
+  const centerX = `${(el.clientWidth - radius * 2) / 2}px`;
+  const centerY = `${(el.clientHeight - radius * 2) / 2}px`;
+  const x = value.center ? centerX : `${localX - radius}px`;
+  const y = value.center ? centerY : `${localY - radius}px`;
+  return {
+    radius,
+    scale,
+    x,
+    y,
+    centerX,
+    centerY
+  };
+};
+const ripples = {
+  /* eslint-disable max-statements */
+  show(e, el, value = {}) {
+    if (!el?._ripple?.enabled) {
+      return;
+    }
+    const container = document.createElement('span');
+    const animation = document.createElement('span');
+    container.appendChild(animation);
+    container.className = 'v-ripple__container';
+    if (value.class) {
+      container.className += ` ${value.class}`;
+    }
+    const {
+      radius,
+      scale,
+      x,
+      y,
+      centerX,
+      centerY
+    } = calculate(e, el, value);
+    const size = `${radius * 2}px`;
+    animation.className = 'v-ripple__animation';
+    animation.style.width = size;
+    animation.style.height = size;
+    el.appendChild(container);
+    const computed = window.getComputedStyle(el);
+    if (computed && computed.position === 'static') {
+      el.style.position = 'relative';
+      el.dataset.previousPosition = 'static';
+    }
+    animation.classList.add('v-ripple__animation--enter');
+    animation.classList.add('v-ripple__animation--visible');
+    transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`);
+    animation.dataset.activated = String(performance.now());
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        animation.classList.remove('v-ripple__animation--enter');
+        animation.classList.add('v-ripple__animation--in');
+        transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
+      });
+    });
+  },
+  hide(el) {
+    if (!el?._ripple?.enabled) return;
+    const ripples = el.getElementsByClassName('v-ripple__animation');
+    if (ripples.length === 0) return;
+    const animation = Array.from(ripples).findLast(ripple => !ripple.dataset.isHiding);
+    if (!animation) return;else animation.dataset.isHiding = 'true';
+    const diff = performance.now() - Number(animation.dataset.activated);
+    const delay = Math.max(250 - diff, 0);
+    setTimeout(() => {
+      animation.classList.remove('v-ripple__animation--in');
+      animation.classList.add('v-ripple__animation--out');
+      setTimeout(() => {
+        const ripples = el.getElementsByClassName('v-ripple__animation');
+        if (ripples.length === 1 && el.dataset.previousPosition) {
+          el.style.position = el.dataset.previousPosition;
+          delete el.dataset.previousPosition;
+        }
+        if (animation.parentNode?.parentNode === el) el.removeChild(animation.parentNode);
+      }, 300);
+    }, delay);
+  }
+};
+function isRippleEnabled(value) {
+  return typeof value === 'undefined' || !!value;
+}
+function rippleShow(e) {
+  const value = {};
+  const element = e.currentTarget;
+  if (!element?._ripple || element._ripple.touched || e[stopSymbol]) return;
+
+  // Don't allow the event to trigger ripples on any other elements
+  e[stopSymbol] = true;
+  if (isTouchEvent(e)) {
+    element._ripple.touched = true;
+    element._ripple.isTouch = true;
+  } else {
+    // It's possible for touch events to fire
+    // as mouse events on Android/iOS, this
+    // will skip the event call if it has
+    // already been registered as touch
+    if (element._ripple.isTouch) return;
+  }
+  value.center = element._ripple.centered || isKeyboardEvent(e);
+  if (element._ripple.class) {
+    value.class = element._ripple.class;
+  }
+  if (isTouchEvent(e)) {
+    // already queued that shows or hides the ripple
+    if (element._ripple.showTimerCommit) return;
+    element._ripple.showTimerCommit = () => {
+      ripples.show(e, element, value);
+    };
+    element._ripple.showTimer = window.setTimeout(() => {
+      if (element?._ripple?.showTimerCommit) {
+        element._ripple.showTimerCommit();
+        element._ripple.showTimerCommit = null;
+      }
+    }, DELAY_RIPPLE);
+  } else {
+    ripples.show(e, element, value);
+  }
+}
+function rippleStop(e) {
+  e[stopSymbol] = true;
+}
+function rippleHide(e) {
+  const element = e.currentTarget;
+  if (!element?._ripple) return;
+  window.clearTimeout(element._ripple.showTimer);
+
+  // The touch interaction occurs before the show timer is triggered.
+  // We still want to show ripple effect.
+  if (e.type === 'touchend' && element._ripple.showTimerCommit) {
+    element._ripple.showTimerCommit();
+    element._ripple.showTimerCommit = null;
+
+    // re-queue ripple hiding
+    element._ripple.showTimer = window.setTimeout(() => {
+      rippleHide(e);
+    });
+    return;
+  }
+  window.setTimeout(() => {
+    if (element._ripple) {
+      element._ripple.touched = false;
+    }
+  });
+  ripples.hide(element);
+}
+function rippleCancelShow(e) {
+  const element = e.currentTarget;
+  if (!element?._ripple) return;
+  if (element._ripple.showTimerCommit) {
+    element._ripple.showTimerCommit = null;
+  }
+  window.clearTimeout(element._ripple.showTimer);
+}
+let keyboardRipple = false;
+function keyboardRippleShow(e, keys) {
+  if (!keyboardRipple && keys.includes(e.key)) {
+    keyboardRipple = true;
+    rippleShow(e);
+  }
+}
+function keyboardRippleHide(e) {
+  keyboardRipple = false;
+  rippleHide(e);
+}
+function focusRippleHide(e) {
+  if (keyboardRipple) {
+    keyboardRipple = false;
+    rippleHide(e);
+  }
+}
+function updateRipple(el, binding, wasEnabled) {
+  const {
+    value,
+    modifiers
+  } = binding;
+  const enabled = isRippleEnabled(value);
+  if (!enabled) {
+    ripples.hide(el);
+  }
+  el._ripple = el._ripple ?? {};
+  el._ripple.enabled = enabled;
+  el._ripple.centered = modifiers.center;
+  el._ripple.circle = modifiers.circle;
+  const bindingValue = isObject(value) ? value : {};
+  if (bindingValue.class) {
+    el._ripple.class = bindingValue.class;
+  }
+  const allowedKeys = bindingValue.keys ?? ['Enter', 'Space'];
+  el._ripple.keyDownHandler = e => keyboardRippleShow(e, allowedKeys);
+  if (enabled && !wasEnabled) {
+    if (modifiers.stop) {
+      el.addEventListener('touchstart', rippleStop, {
+        passive: true
+      });
+      el.addEventListener('mousedown', rippleStop);
+      return;
+    }
+    el.addEventListener('touchstart', rippleShow, {
+      passive: true
+    });
+    el.addEventListener('touchend', rippleHide, {
+      passive: true
+    });
+    el.addEventListener('touchmove', rippleCancelShow, {
+      passive: true
+    });
+    el.addEventListener('touchcancel', rippleHide);
+    el.addEventListener('mousedown', rippleShow);
+    el.addEventListener('mouseup', rippleHide);
+    el.addEventListener('mouseleave', rippleHide);
+    el.addEventListener('keydown', el._ripple.keyDownHandler);
+    el.addEventListener('keyup', keyboardRippleHide);
+    el.addEventListener('blur', focusRippleHide);
+
+    // Anchor tags can be dragged, causes other hides to fail - #1537
+    el.addEventListener('dragstart', rippleHide, {
+      passive: true
+    });
+  } else if (!enabled && wasEnabled) {
+    removeListeners(el);
+  }
+}
+function removeListeners(el) {
+  el.removeEventListener('touchstart', rippleStop);
+  el.removeEventListener('mousedown', rippleStop);
+  el.removeEventListener('touchstart', rippleShow);
+  el.removeEventListener('touchend', rippleHide);
+  el.removeEventListener('touchmove', rippleCancelShow);
+  el.removeEventListener('touchcancel', rippleHide);
+  el.removeEventListener('mousedown', rippleShow);
+  el.removeEventListener('mouseup', rippleHide);
+  el.removeEventListener('mouseleave', rippleHide);
+  if (el._ripple?.keyDownHandler) {
+    el.removeEventListener('keydown', el._ripple.keyDownHandler);
+  }
+  el.removeEventListener('keyup', keyboardRippleHide);
+  el.removeEventListener('blur', focusRippleHide);
+  el.removeEventListener('dragstart', rippleHide);
+}
+function mounted(el, binding) {
+  updateRipple(el, binding, false);
+}
+function unmounted(el) {
+  removeListeners(el);
+  delete el._ripple;
+}
+function updated(el, binding) {
+  if (binding.value === binding.oldValue) {
+    return;
+  }
+  const wasEnabled = isRippleEnabled(binding.oldValue);
+  updateRipple(el, binding, wasEnabled);
+}
+export const Ripple = {
+  mounted,
+  unmounted,
+  updated
+};
+export default Ripple;
+//# sourceMappingURL=index.js.map