chore: migrate with new structure

.github/FUNDING.yml

@@ -1,2 +1 @@
-open_collective: antfu
-github: [antfu]
+github: [nekomeowww, kwaa]

.vscode/settings.json

@@ -38,8 +38,5 @@
     "json",
     "jsonc",
     "yaml"
-  ],
-  "interline-translate.knownPopularWordCount": 6000,
-  "iconify.annotations": true,
-  "iconify.inplace": true
+  ]
 }

app/app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { appName } from '~/constants'
+import { appName } from './constants'
 
 useHead({
   title: appName,

app/components/AudioWaveform.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { useDark, useElementBounding } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+
+import { useAudioContext } from '../stores/audio'
+
+const containerRef = ref<HTMLDivElement>()
+// https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
+const analyser = ref<AnalyserNode>()
+const analyserDataBuffer = ref<Uint8Array>()
+const { audioContext } = useAudioContext()
+const canvasElemRef = ref<HTMLCanvasElement>()
+const isDark = useDark()
+
+// https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/playbackRate
+// explain: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+// reference: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Simple_synth
+function fetchAnalyserDataDuringFrames() {
+  if (!analyser.value || !analyserDataBuffer.value || !canvasElemRef.value)
+    return
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
+  requestAnimationFrame(fetchAnalyserDataDuringFrames)
+  if (analyserDataBuffer.value.length > 60 * 2)
+    analyserDataBuffer.value = new Uint8Array(analyser.value.frequencyBinCount)
+
+  analyser.value.getByteTimeDomainData(analyserDataBuffer.value)
+
+  const context = canvasElemRef.value.getContext('2d')!
+
+  if (isDark.value)
+    context.fillStyle = 'rgba(34, 34, 34, 1)'
+  else
+    context.fillStyle = 'rgba(255, 255, 255, 1)'
+
+  context.fillRect(0, 0, canvasElemRef.value.width, canvasElemRef.value.height)
+
+  context.lineWidth = 2
+  if (isDark.value)
+    context.strokeStyle = 'rgb(255 255 255)'
+  else
+    context.strokeStyle = 'rgb(0 0 0)'
+
+  context.beginPath()
+
+  const sliceWidth = (canvasElemRef.value.width * 1.0) / analyser.value.frequencyBinCount
+  let x = 0
+
+  for (let i = 0; i < analyser.value.frequencyBinCount; i++) {
+    const v = analyserDataBuffer.value[i] / 128.0
+    const y = (v * canvasElemRef.value.height) / 2
+
+    if (i === 0)
+      context.moveTo(x, y)
+    else
+      context.lineTo(x, y)
+
+    x += sliceWidth
+  }
+
+  context.lineTo(canvasElemRef.value.width, canvasElemRef.value.height / 2)
+  context.stroke()
+}
+
+function initAnalyser() {
+  analyser.value = audioContext.createAnalyser()
+  analyserDataBuffer.value = new Uint8Array(analyser.value.frequencyBinCount)
+  analyser.value.getByteTimeDomainData(analyserDataBuffer.value)
+  const windowAny = window as any
+  windowAny.analyserDataBuffer = analyserDataBuffer
+
+  fetchAnalyserDataDuringFrames()
+}
+
+defineExpose({
+  analyser: () => analyser.value,
+})
+
+onMounted(async () => {
+  if (!containerRef.value || !canvasElemRef.value)
+    return
+
+  const containerElementBounding = useElementBounding(containerRef.value)
+  containerElementBounding.update()
+
+  initAnalyser()
+
+  canvasElemRef.value.width = containerElementBounding.width.value
+  canvasElemRef.value.height = containerElementBounding.height.value
+})
+</script>
+
+<template>
+  <div ref="containerRef" h="[80px]" w-full>
+    <canvas ref="canvasElemRef" h-full w-full />
+  </div>
+</template>

app/components/BasicTextarea.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts" generic="T extends any, O extends any">
+import type { CSSProperties } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
+
+const events = defineEmits<{
+  (event: 'submit', message: string): void
+}>()
+
+const input = defineModel<string>({
+  default: '',
+})
+
+const textareaRef = ref<HTMLTextAreaElement>()
+const textareaStyle = ref<CSSProperties>({
+  height: 'auto',
+  overflowY: 'hidden',
+})
+
+// javascript - Creating a textarea with auto-resize - Stack Overflow
+// https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
+function onInput(e: Event) {
+  if (!(e.target instanceof HTMLTextAreaElement))
+    return
+
+  e.target.style.height = 'auto'
+  e.target.style.height = `${e.target.scrollHeight}px`
+}
+
+// javascript - How do I detect "shift+enter" and generate a new line in Textarea? - Stack Overflow
+// https://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea
+function onKeyDown(e: KeyboardEvent) {
+  if (!(e.target instanceof HTMLTextAreaElement))
+    return
+
+  if (e.code === 'Enter' && e.shiftKey) {
+    e.preventDefault()
+    const start = e.target?.selectionStart
+    const end = e.target?.selectionEnd
+    input.value = `${input.value.substring(0, start)}\n${input.value.substring(end)}`
+
+    // javascript - height of textarea increases when value increased but does not reduce when value is decreased - Stack Overflow
+    // https://stackoverflow.com/questions/10722058/height-of-textarea-increases-when-value-increased-but-does-not-reduce-when-value
+    textareaStyle.value.height = '0'
+
+    nextTick().then(() => {
+      if (!textareaRef.value)
+        return
+
+      textareaRef.value.selectionStart = textareaRef.value.selectionEnd = start + 1
+      textareaStyle.value.height = `${textareaRef.value.scrollHeight}px`
+    })
+  }
+  else if (e.code === 'Enter') { // block enter
+    e.preventDefault()
+    events('submit', input.value)
+  }
+}
+
+onMounted(() => {
+  if (!textareaRef.value)
+    return
+
+  textareaStyle.value.height = `${textareaRef.value.scrollHeight}px`
+})
+</script>
+
+<template>
+  <textarea
+    ref="textareaRef"
+    v-model="input"
+    :style="textareaStyle"
+    @input="onInput"
+    @keydown="onKeyDown"
+  />
+</template>