Rename prettier config back to js and format

electron.vite.config.ts

@@ -1,8 +1,8 @@
 import { defineConfig, externalizeDepsPlugin } from "electron-vite";
 import { resolve } from "path";
+import devtools from "solid-devtools/vite";
 import lucidePreprocess from "vite-plugin-lucide-preprocess";
 import solid from "vite-plugin-solid";
-import devtools from "solid-devtools/vite";
 
 export default defineConfig({
   main: {

package.json

@@ -6,7 +6,6 @@
   "author": "@CaptSiro",
   "type": "module",
   "main": "./out/main/index.js",
-  "packageManager": "^bun@1.1.33",
   "scripts": {
     "build": "bun run typecheck && electron-vite build",
     "build:linux": "electron-vite build && electron-builder --linux --config",
@@ -75,5 +74,6 @@
     "vite": "^5.4.8",
     "vite-plugin-lucide-preprocess": "^1.1.1",
     "vite-plugin-solid": "^2.7.0"
-  }
+  },
+  "packageManager": "^bun@1.1.33"
 }

src/renderer/src/App.tsx

@@ -9,9 +9,9 @@ import NoScene from "./scenes/NoScene";
 import DirSelectScene from "./scenes/dir-select-scene/DirSelectScene";
 import LoadingScene from "./scenes/loading-scene/LoadingScene";
 import MainScene from "./scenes/main-scene/MainScene";
+import { sidebarWidth } from "./scenes/main-scene/main.utils";
 import type { JSX } from "solid-js";
 import { createMemo, createSignal, Match, onCleanup, onMount, Show, Switch } from "solid-js";
-import { sidebarWidth } from "./scenes/main-scene/main.utils";
 
 export default function App(): JSX.Element {
   const [scene, setScene] = createSignal<Scenes>("");

src/renderer/src/components/InfiniteScroller.tsx

@@ -224,7 +224,7 @@ const InfiniteScroller: Component<InfinityScrollerProps> = (props) => {
 
   return (
     <div
-      class="grid grid-cols-[repeat(auto-fit,_minmax(340px,_1fr))] gap-4 py-4 items-stretch"
+      class="grid grid-cols-[repeat(auto-fit,_minmax(340px,_1fr))] items-stretch gap-4 py-4"
       ref={container}
       {...rest}
     >

src/renderer/src/components/dropdown-list/DropdownList.tsx

@@ -1,8 +1,8 @@
+import { RawList } from "../raw-list/RawList";
 import DropdownListItem from "./DropdownListItem";
 import { useRovingFocusGroup } from "@renderer/lib/roving-focus-group/rovingFocusGroup";
-import { createContext, createSignal, JSX, ParentComponent, useContext } from "solid-js";
-import { RawList } from "../raw-list/RawList";
 import { TokenNamespace } from "@renderer/lib/tungsten/token";
+import { createContext, createSignal, JSX, ParentComponent, useContext } from "solid-js";
 
 export type Props = JSX.IntrinsicElements["div"];
 

src/renderer/src/components/dropdown-list/DropdownListItem.tsx

@@ -1,7 +1,7 @@
+import { RawList } from "../raw-list/RawList";
 import { useDropdownList } from "./DropdownList";
 import { Component, onCleanup } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
-import { RawList } from "../raw-list/RawList";
 
 export type Props = JSX.IntrinsicElements["button"];
 const DropdownListItem: Component<Props> = (props) => {

src/renderer/src/components/notice/Notice.tsx

@@ -165,7 +165,7 @@ const Notice: Component<NoticeProps> = (props) => {
       </div>
 
       <div
-        class="absolute inset-0 m-px overflow-hidden pointer-events-none"
+        class="pointer-events-none absolute inset-0 m-px overflow-hidden"
         style={{
           "border-radius": "13px",
         }}

src/renderer/src/components/popover/Popover.tsx

@@ -1,9 +1,8 @@
-import { Token, TokenNamespace } from "@renderer/lib/tungsten/token";
+import PopoverAnchor from "./PopoverAnchor";
 import PopoverContent from "./PopoverContent";
 import PopoverOverlay from "./PopoverOverlay";
+import { PopoverPortal, PopoverPortalMountStack } from "./PopoverPortal";
 import PopoverTrigger from "./PopoverTrigger";
-import PopoverAnchor from "./PopoverAnchor";
-
 import "./styles.css";
 import {
   computePosition,
@@ -18,6 +17,7 @@ import {
   ShiftOptions,
 } from "@floating-ui/dom";
 import useControllableState from "@renderer/lib/controllable-state";
+import { Token, TokenNamespace } from "@renderer/lib/tungsten/token";
 import {
   createSignal,
   createContext,
@@ -28,7 +28,6 @@ import {
   onMount,
   onCleanup,
 } from "solid-js";
-import { PopoverPortal, PopoverPortalMountStack } from "./PopoverPortal";
 
 export const DEFAULT_POPOVER_OPEN = false;
 

src/renderer/src/components/popover/PopoverAnchor.tsx

@@ -1,5 +1,5 @@
-import { Component, JSX } from "solid-js";
 import { usePopover } from "./Popover";
+import { Component, JSX } from "solid-js";
 
 export type PopoverAnchorProps = JSX.IntrinsicElements["div"];
 const PopoverAnchor: Component<PopoverAnchorProps> = (props) => {

src/renderer/src/components/popover/PopoverContent.tsx

@@ -1,6 +1,6 @@
-import { cn, sn } from "@renderer/lib/css.utils";
 import { popoverStack, usePopover } from "./Popover";
 import { ComputePositionReturn } from "@floating-ui/dom";
+import { cn, sn } from "@renderer/lib/css.utils";
 import createFocusTrap from "solid-focus-trap";
 import { Component, createMemo, onCleanup, onMount, Show } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
@@ -56,7 +56,7 @@ const PopoverContent: Component<Props> = (props) => {
       <div
         {...props}
         class={cn(
-          "popover-content rounded-lg p-2 border border-stroke bg-thick-material backdrop-blur-md",
+          "popover-content rounded-lg border border-stroke bg-thick-material p-2 backdrop-blur-md",
           props.class,
         )}
         ref={state.setContentRef}

src/renderer/src/components/raw-list/RawList.tsx

@@ -10,7 +10,7 @@ export const RawListItem: Component<JSX.IntrinsicElements["button"]> = (_props)
   return (
     <button
       class={cn(
-        "flex items-center justify-between rounded-md px-2 py-1.5 disabled:opacity-50 disabled:pointer-events-none focus:outline-none",
+        "flex items-center justify-between rounded-md px-2 py-1.5 focus:outline-none disabled:pointer-events-none disabled:opacity-50",
         props.class,
       )}
       {...rest}

src/renderer/src/components/resizable-panel/DragHandler.tsx

@@ -1,6 +1,6 @@
-import { Component } from "solid-js";
 import { useResizablePanel } from "./ResizablePanel";
 import { cn } from "@renderer/lib/css.utils";
+import { Component } from "solid-js";
 
 type DragHandlerProps = {
   class?: string;
@@ -58,11 +58,11 @@ export const DragHandler: Component<DragHandlerProps> = (props) => {
         }
       }}
       class={cn(
-        "opacity-0 hover:opacity-100 focus:opacity-100 h-full w-4 translate-x-[-50%] cursor-w-resize flex flex-col items-center justify-center",
+        "flex h-full w-4 translate-x-[-50%] cursor-w-resize flex-col items-center justify-center opacity-0 hover:opacity-100 focus:opacity-100",
         props.class,
       )}
     >
-      <div class="bg-white/60 flex-1 w-0.5" />
+      <div class="w-0.5 flex-1 bg-white/60" />
     </div>
   );
 };

src/renderer/src/components/resizable-panel/ResizablePanel.tsx

@@ -1,8 +1,8 @@
-import { Accessor, createContext, createMemo, ParentComponent, useContext } from "solid-js";
 import { DragHandler } from "./DragHandler";
 import useControllableState from "@renderer/lib/controllable-state";
-import { DOMElement } from "solid-js/jsx-runtime";
 import { clamp } from "@renderer/lib/tungsten/math";
+import { Accessor, createContext, createMemo, ParentComponent, useContext } from "solid-js";
+import { DOMElement } from "solid-js/jsx-runtime";
 
 const DEFAULT_RESIZABLE_PANEL_VALUE = 100;
 const DEFAULT_MIN = 0;

src/renderer/src/components/select/Select.tsx

@@ -1,12 +1,12 @@
-import { Component, createMemo, ParentComponent, splitProps } from "solid-js";
+import { inputStyles } from "../input/Input";
 import Popover, { Props as PopoverProps, usePopover } from "../popover/Popover";
 import { Props as PopoverTriggerProps } from "../popover/PopoverTrigger";
-import { ChevronsUpDownIcon } from "lucide-solid";
 import SelectableList, { Props as ListProps } from "../selectable-list/SelectableList";
 import SelectableListItem, { Props as ListItemProps } from "../selectable-list/SelectableListItem";
 import { cn } from "@renderer/lib/css.utils";
-import { inputStyles } from "../input/Input";
 import { VariantProps } from "class-variance-authority";
+import { ChevronsUpDownIcon } from "lucide-solid";
+import { Component, createMemo, ParentComponent, splitProps } from "solid-js";
 
 export const SelectContainer: ParentComponent<PopoverProps> = (props) => {
   return (
@@ -28,11 +28,11 @@ export const SelectTrigger: ParentComponent<Props> = (_props) => {
       {...rest}
       class={cn(
         inputStyles({ variant: props.variant, class: props.class }),
-        "flex items-center justify-between gap-2 box-border h-auto min-h-[42px] hover:bg-surface data-[open='true']:bg-surface",
+        "box-border flex h-auto min-h-[42px] items-center justify-between gap-2 hover:bg-surface data-[open='true']:bg-surface",
       )}
     >
       <span class="text-base leading-6">{props.children}</span>
-      <ChevronsUpDownIcon size={20} class="text-subtext flex-shrink-0" />
+      <ChevronsUpDownIcon size={20} class="flex-shrink-0 text-subtext" />
     </Popover.Trigger>
   );
 };

src/renderer/src/components/selectable-list/SelectableList.tsx

@@ -1,8 +1,8 @@
+import { RawList } from "../raw-list/RawList";
 import SelectableListItem from "./SelectableListItem";
+import useControllableState from "@renderer/lib/controllable-state";
 import { useRovingFocusGroup } from "@renderer/lib/roving-focus-group/rovingFocusGroup";
 import { Accessor, createContext, JSX, ParentComponent, splitProps, useContext } from "solid-js";
-import useControllableState from "@renderer/lib/controllable-state";
-import { RawList } from "../raw-list/RawList";
 
 const DEFAULT_SELECTED_VALUE = "";
 

src/renderer/src/components/selectable-list/SelectableListItem.tsx

@@ -1,8 +1,8 @@
+import { RawList } from "../raw-list/RawList";
 import { useSelectableList } from "./SelectableList";
+import { CheckIcon } from "lucide-solid";
 import { Component, createMemo, Show, splitProps } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
-import { CheckIcon } from "lucide-solid";
-import { RawList } from "../raw-list/RawList";
 
 export type Props = JSX.IntrinsicElements["button"] & {
   value: string;

src/renderer/src/components/settings/Settings.tsx

@@ -1,8 +1,8 @@
 import { cn } from "../../lib/css.utils";
+import Select from "../select/Select";
 import { changeAudioDevice } from "@renderer/components/song/song.utils";
 import { GlobeIcon, LucideIcon, Volume2Icon } from "lucide-solid";
 import { Component, createEffect, createSignal, For, JSX, onMount } from "solid-js";
-import Select from "../select/Select";
 
 const Settings: Component = () => {
   return (

src/renderer/src/components/slider/SliderThumb.tsx

@@ -1,5 +1,5 @@
-import { sn } from "@renderer/lib/css.utils";
 import { useSlider } from "./Slider";
+import { sn } from "@renderer/lib/css.utils";
 import { linearScale } from "@renderer/lib/linear-scale";
 import { Component, createMemo, JSX } from "solid-js";
 

src/renderer/src/components/song/song-detail/SongControls.tsx

@@ -1,4 +1,5 @@
 import { isSongUndefined } from "../../../lib/song";
+import Popover from "../../popover/Popover";
 import {
   isPlaying,
   next,
@@ -27,7 +28,6 @@ import {
   VolumeXIcon,
 } from "lucide-solid";
 import { Component, createMemo, createSignal, Match, Show, Switch, For } from "solid-js";
-import Popover from "../../popover/Popover";
 import { ParentComponent } from "solid-js";
 import { Portal } from "solid-js/web";
 
@@ -76,7 +76,7 @@ const SongControls: Component<SongControlsProps> = (props) => {
           </Button>
 
           <button
-            class="flex h-12 w-12 items-center justify-center rounded-full ring-1 ring-stroke bg-surface text-2xl text-thick-material text-white transition-all active:scale-95 shadow-lg"
+            class="flex h-12 w-12 items-center justify-center rounded-full bg-surface text-2xl text-thick-material text-white shadow-lg ring-1 ring-stroke transition-all active:scale-95"
             onClick={() => togglePlay()}
             disabled={disable()}
             title={playHint()}
@@ -214,8 +214,8 @@ const RightPart = () => {
 
         <Portal>
           <Popover.Overlay />
-          <Popover.Content class="flex w-fit min-w-48 flex-col  rounded-xl ring-stroke ring-1 ring-inset bg-thick-material px-1.5 py-3 backdrop-blur-md shadow-xl">
-            <p class="font-medium text-sm text-subtext gap-1 px-2">Custom Speed</p>
+          <Popover.Content class="flex w-fit min-w-48 flex-col rounded-xl bg-thick-material px-1.5 py-3 shadow-xl ring-1 ring-inset ring-stroke backdrop-blur-md">
+            <p class="gap-1 px-2 text-sm font-medium text-subtext">Custom Speed</p>
             <div class="flex flex-col px-2">
               <Slider
                 class="flex h-8 flex-grow items-center"
@@ -230,9 +230,9 @@ const RightPart = () => {
                 </Slider.Track>
                 <Slider.Thumb class="mt-2 block h-4 w-4 rounded-full bg-white" />
               </Slider>
-              <div class="text-xs ">{Math.round(speed() * 100) / 100}x</div>
+              <div class="text-xs">{Math.round(speed() * 100) / 100}x</div>
             </div>
-            <div class="w-full bg-stroke h-px my-2" />
+            <div class="my-2 h-px w-full bg-stroke" />
 
             <For each={PREDEFINED_SPEEDS}>
               {(amount) => <SpeedOption amount={amount}>{amount}</SpeedOption>}
@@ -254,7 +254,7 @@ const SpeedOption: ParentComponent<SpeedOptionProps> = (props) => {
   return (
     <button
       onClick={() => setSpeed(props.amount)}
-      class="flex items-center justify-between rounded-md px-2 py-1.5 disabled:opacity-50 disabled:pointer-events-none focus:outline-none hover:bg-surface"
+      class="flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-surface focus:outline-none disabled:pointer-events-none disabled:opacity-50"
     >
       {props.children}
     </button>

src/renderer/src/components/song/song-detail/SongDetail.tsx

@@ -31,8 +31,8 @@ const SongDetail: Component = () => {
 
       <div class="w-full max-w-[800px] space-y-4">
         <div class="song-detail__texts">
-          <h2 class="text-2xl font-bold select-text">{song().title}</h2>
-          <span class="text-lg select-text">{song().artist}</span>
+          <h2 class="select-text text-2xl font-bold">{song().title}</h2>
+          <span class="select-text text-lg">{song().artist}</span>
         </div>
 
         <ProgressBar averageColor={colorData().primaryColor()} />
@@ -64,7 +64,7 @@ const ProgressBar = (props: ProgressBarProps) => {
     >
       <Slider.Track class="flex h-7 items-center rounded-xl border border-stroke bg-thick-material p-1">
         <Slider.Range
-          class="block h-5 rounded-l-lg ring-inset ring-1 ring-stroke bg-surface shadow-[inset_-20px_0_10px_-10px_#00000033]"
+          class="block h-5 rounded-l-lg bg-surface shadow-[inset_-20px_0_10px_-10px_#00000033] ring-1 ring-inset ring-stroke"
           style={{
             "background-color": props.averageColor,
           }}

src/renderer/src/components/song/song-item/SongItem.tsx

@@ -4,9 +4,9 @@ import SongHint from "../SongHint";
 import SongImage from "../SongImage";
 import { useColorExtractor } from "../color-extractor";
 import { song as selectedSong } from "../song.utils";
-import { transparentize } from "polished";
 import Popover from "@renderer/components/popover/Popover";
 import { EllipsisVerticalIcon } from "lucide-solid";
+import { transparentize } from "polished";
 import { Component, createSignal, JSXElement, onMount, createMemo, Show } from "solid-js";
 import { twMerge } from "tailwind-merge";
 
@@ -103,7 +103,7 @@ const SongItem: Component<SongItemProps> = (props) => {
         onMouseLeave={() => {
           setIsHovering(false);
         }}
-        class="min-h-[72px] rounded-lg py-0.5 pl-1.5 pr-0.5 transition-colors active: group relative isolate overflow-hidden"
+        class="active: group relative isolate min-h-[72px] overflow-hidden rounded-lg py-0.5 pl-1.5 pr-0.5 transition-colors"
         classList={{
           "shadow-glow-blue": isSelected(),
         }}
@@ -117,12 +117,12 @@ const SongItem: Component<SongItemProps> = (props) => {
         }}
       >
         <div
-          class="relative isolate select-none rounded-lg h-full"
+          class="relative isolate h-full select-none rounded-lg"
           ref={item}
           data-url={props.song.bg}
         >
           <SongImage
-            class={`absolute z-[-1] inset-0 h-full w-full rounded-l-[9px] rounded-r-md bg-cover bg-center bg-no-repeat bg-scroll opacity-70 rounded-lg`}
+            class={`absolute inset-0 z-[-1] h-full w-full rounded-lg rounded-l-[9px] rounded-r-md bg-cover bg-scroll bg-center bg-no-repeat opacity-70`}
             classList={{
               "opacity-100": isSelected(),
             }}
@@ -132,12 +132,12 @@ const SongItem: Component<SongItemProps> = (props) => {
           />
 
           <div
-            class="flex flex-col justify-center overflow-hidden rounded-md p-3 pr-10 h-full"
+            class="flex h-full flex-col justify-center overflow-hidden rounded-md p-3 pr-10"
             style={{
               background: backgrund(),
             }}
           >
-            <h3 class="drop-shadow-md text-[22px] font-[740] leading-7">{props.song.title}</h3>
+            <h3 class="text-[22px] font-[740] leading-7 drop-shadow-md">{props.song.title}</h3>
             <p class="text-base text-subtext drop-shadow-sm">{props.song.artist}</p>
           </div>
         </div>
@@ -149,7 +149,7 @@ const SongItem: Component<SongItemProps> = (props) => {
               setMousePos(undefined);
               setLocalShow(true);
             }}
-            class="absolute right-0 top-0 h-full flex items-center text-subtext transition-colors hover:text-text rounded-r-lg animate-song-item-slide-in"
+            class="absolute right-0 top-0 flex h-full animate-song-item-slide-in items-center rounded-r-lg text-subtext transition-colors hover:text-text"
             title="Song options"
             classList={{
               "text-text": localShow(),
@@ -159,7 +159,7 @@ const SongItem: Component<SongItemProps> = (props) => {
             }}
           >
             <div
-              class={twMerge("transition-opacity z-10")}
+              class={twMerge("z-10 transition-opacity")}
               style={{
                 color: isSelected() ? secondaryColor() : undefined,
               }}