fix japanese characters wrapping

package.json

@@ -2,7 +2,7 @@
   "name": "amethyst",
   "author": "amethyst <[email protected]>",
   "productName": "Amethyst",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "main": "./release/dist/main/main.js",
   "licenses": [
     {

src/renderer/app.css

@@ -1,21 +1,31 @@
 @import url(themes/amethyst-light.css);
 @import url(themes/amethyst-dark.css);
 
+@font-face {
+  font-family: "roboto-mono";
+  src: url("../../assets/fonts/roboto-mono.ttf");
+}
+
 @font-face {
   font-family: "cozette-vector";
   src: url("../../assets/fonts/cozette-vector.ttf");
 }
 
+@font-face {
+  font-family: "ark-pixel";
+  src: url("../../assets/fonts/ark-pixel-10px-latin.ttf");
+}
+
 @font-face {
   font-family: "aseprite";
   src: url("../../assets/fonts/aseprite-remix.ttf");
 }
 
-.font-cozette {
-  font-family: "cozette-vector";
+.font-main {
+  font-family: "cozette-vector", "ark-pixel", "aseprite";
 }
 
-.font-aseprite {
+.font-small {
   font-family: "aseprite";
 }
 

src/renderer/components/DbMeter.vue

@@ -88,7 +88,7 @@ onUnmounted(() => shouldFuckOff = true);
 			<div class="bg absolute  top-0 bg-[#202020] h-1.5 w-full" />
 			<div class="clipping absolute  top-0 right-0 bg-[#202020]-clipping h-1.5 w-10/100" />
 
-			<div class="font-aseprite text-7px z-30 absolute flex gap-1">
+			<div class="font-small text-7px z-30 absolute flex gap-1">
 				<p v-if="state.settings.showAverageDecibelValues">{{ channels[i - 1][1].value.toFixed(2) }} dB
 				</p>
 				<p v-if="state.settings.showInstantDecibelValues">{{ channels[i - 1][0].value.toFixed(2) }} dB

src/renderer/components/MenuBar.vue

@@ -15,7 +15,7 @@ const playPop = () => {
 
 <template>
   <div
-    class="bg-[#0D0D0D] borderBottom z-100 font-cozette drag text-12px select-none flex text-white justify-between items-center">
+    class="bg-[#0D0D0D] borderBottom z-100 font-main drag text-12px select-none flex text-white justify-between items-center">
     <div class="flex no-drag h-full items-center">
       <div class="logo px-3 cursor-heart-pointer" @click="playPop">
         <img v-if="state.isDev.value" src="../icon-dev.png">

src/renderer/components/Queue.vue

@@ -39,20 +39,19 @@ const parseTitle = (path: string) => {
 
 <template>
   <div class="flex-col p-2 items-center flex w-64 borderRight">
-    <input v-model="filterText" type="text" class="border-2 z-30 w-full border-gray-400 indent-xs text-xs mb-2" placeholder="artists, title & format...">
+    <input v-model="filterText" type="text" class="border-2 z-30 w-full border-gray-400 indent-xs text-xs mb-2"
+      placeholder="artists, title & format...">
 
     <smooth-scrollable-container class="fixed top-14">
       <!-- TODO: refactor this mess into a component -->
       <li
         v-for="([song, i]) of player.getQueue().map((song, i) => song.toLowerCase().includes(filterText.toLowerCase()) ? [song, i] : undefined).filter(song => !!song) as [string, number][]"
         :key="song"
         :class="[isHoldingControl && 'control-hover', isHoldingControl ? 'cursor-external-pointer' : 'cursor-default', i === player.getCurrentlyPlayingIndex() && 'text-queue-text-active']"
-        class="h-3 -ml-3 mb-1 max-w-56 hover:text-queue-text-hover list-none relative select-none" 
-        @keypress.prevent
+        class="h-3 -ml-3 mb-1 max-w-56 hover:text-queue-text-hover list-none relative select-none" @keypress.prevent
         @mousedown="isHoldingControl ? invoke('show-item', [player.getQueue()[i]]) : player.setCurrentlyPlayingIndex(i)">
 
-        <p 
-          class=" inline align-top text-12px max-w-40 overflow-hidden overflow-ellipsis ">
+        <p class="align-top text-12px overflow-hidden overflow-ellipsis whitespace-nowrap">
           {{ i === player.getCurrentlyPlayingIndex() ? "⏵ " : "" }}{{ trimString(isHoldingAlt ? `${song.substring(0,
               (MAX_CHARS - 3) / 2)}...${song.substring(song.length - (MAX_CHARS - 3) / 2)}` : parseTitle(song), i ===
                 player.getCurrentlyPlayingIndex() || state.state.processQueue.has(song) ? MAX_CHARS - 4 : MAX_CHARS)
@@ -79,6 +78,5 @@ const parseTitle = (path: string) => {
   transform: translateY(-20px);
   opacity: 0;
 }
-
 </style>
-
+ 

src/renderer/components/Settings.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="w-64 borderRight overflow-x-hidden text-12px whitespace-nowrap">
     <div class="p-4 flex flex-col gap-4">
+      <settings-category-splitter text="Queue List" />
+      <settings-modifier text="Smooth scroll speed" :min="0.01" :max="0.5" :step="0.001" :default="0.075"
+        v-model="state.settings.smoothScrollSpeed" />
       <settings-category-splitter text="Spectrum" />
       <settings-binary-switch text="Logarithmic Spectrum" v-model="state.settings.useLogarithmicSpectrum" />
       <settings-modifier text="Vertical zoom" :min="0.5" :max="2" :step="0.1" :default="1.5"

src/renderer/components/SmoothScrollableContainer.vue

@@ -5,18 +5,18 @@
 </template>
 
 <script setup lang="ts">
+import { useState } from '../amethyst.js';
 import { onMounted, Ref, ref } from 'vue';
 const body = document.body;
 const smoothScrollableContainer = ref() as Ref<HTMLDivElement>;
+const state = useState();
 
 let sy = 0;
 let dy = sy;
 
-const DAMPING = 0.075;
-
 function render() {
   //We calculate our container position by linear interpolation method
-  dy = li(dy, sy, DAMPING);
+  dy = li(dy, sy, state.settings.smoothScrollSpeed);
 
   dy = ~~(dy * 100) / 100;
 

src/renderer/components/input/DraggableModifierInput.vue

@@ -1,7 +1,6 @@
 
 <template>
-  <div ref="modifier" class="modifier font-aseprite" @mousedown.passive="onMouseDown"
-    @mouseup.passive="dragging = false">
+  <div ref="modifier" class="modifier font-small" @mousedown.passive="onMouseDown" @mouseup.passive="dragging = false">
     <div :class="{ pop }">
       <h1 class="absolute z-10 top-2px">
         {{ displayValue }}

src/renderer/state.ts

@@ -29,6 +29,9 @@ export default class AppState {
 		spectrumVerticalZoom: 1.5,
 		spectrumFftSize: 8192,
 		spectrumSmoothing: 0.5,
+		smoothScrollSpeed: 0.075,
+	}, {
+		writeDefaults: true,
 	}).value;
 
 	public coverArtCacheSize = computed(() => JSON.stringify(this.state.coverCache).length);

src/renderer/views/Home.vue

@@ -55,12 +55,13 @@ function calculateStars(metadata: IAudioMetadata) {
 </script>
 
 <template>
-  <div class="flex  h-[calc(100%-24px)] text-white bg-[#0D0D0D] font-cozette main">
+  <div class="flex  h-[calc(100%-24px)] text-white bg-[#0D0D0D] font-main main">
     <navigation-bar>
-      <navigation-button :icon="SettingsIcon" :active="isShowingSettings" @click="isShowingSettings = !isShowingSettings" />
+      <navigation-button :icon="SettingsIcon" :active="isShowingSettings"
+        @click="isShowingSettings = !isShowingSettings" />
     </navigation-bar>
     <transition>
-      <settings v-if="isShowingSettings"/>
+      <settings v-if="isShowingSettings" />
     </transition>
     <queue />
     <div class="h-full flex w-full flex-col overflow-x-auto flex-1">