format

electron.vite.config.1728674597190.mjs

@@ -2,22 +2,21 @@
 import { defineConfig, externalizeDepsPlugin } from "electron-vite";
 import { resolve } from "path";
 import solid from "vite-plugin-solid";
+
 var electron_vite_config_default = defineConfig({
   main: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   preload: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   renderer: {
     resolve: {
       alias: {
-        "@renderer": resolve("src/renderer/src")
-      }
+        "@renderer": resolve("src/renderer/src"),
+      },
+    },
+    plugins: [solid()],
   },
-    plugins: [solid()]
-  }
 });
-export {
-  electron_vite_config_default as default
-};
+export { electron_vite_config_default as default };

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/renderer/src/components/song/context-menu/SongContextMenu.tsx

@@ -69,7 +69,6 @@ const SongContextMenu: Component<SongContextMenuProps> = (props) => {
   );
 };
 
-
 export default SongContextMenu;
 
 export function ignoreClickInContextMenu(fn: (evt: MouseEvent) => any): (evt: MouseEvent) => void {

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

@@ -11,7 +11,11 @@ const SongDetail: Component = () => {
   return (
     <div class="flex flex-col h-full p-8 max-w-2xl w-full">
       <div class="flex-grow mb-8 grid place-items-center">
-        <SongImage src={song().bg} instantLoad={true} class="size-80 bg-cover bg-center object-cover rounded-lg shadow-lg" />
+        <SongImage
+          src={song().bg}
+          instantLoad={true}
+          class="size-80 bg-cover bg-center object-cover rounded-lg shadow-lg"
+        />
       </div>
 
       <div class="space-y-4">

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

@@ -54,7 +54,8 @@ const SongItem: Component<SongItemProps> = ({
 
   return (
     <div
-      class={`relative isolate my-4 select-none rounded-md ${selectedSong().path === song.path
+      class={`relative isolate my-4 select-none rounded-md ${
+        selectedSong().path === song.path
           ? "data-[active=true]:after:bg-black/30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-accent"
           : ""
       } hover:after:bg-overlay`}
@@ -70,7 +71,9 @@ const SongItem: Component<SongItemProps> = ({
       />
 
       <div class="flex flex-col justify-center min-h-[72px] p-3 bg-black/50 overflow-hidden rounded-md">
-        <h3 class="text-[22px] leading-7 font-extrabold text-shadow shadow-black/60">{song.title}</h3>
+        <h3 class="text-[22px] leading-7 font-extrabold text-shadow shadow-black/60">
+          {song.title}
+        </h3>
         <p class="text-base text-subtext">{song.artist}</p>
       </div>
     </div>

src/renderer/src/components/song/song-list-search/SongListSearch.tsx

@@ -74,7 +74,10 @@ const SongListSearch: Component<SearchProps> = (props) => {
             setSongsSearch(e.target.value);
           }}
         />
-        <label class="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-600" for="search_input">
+        <label
+          class="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-600"
+          for="search_input"
+        >
           <i class="ri-search-2-line" />
         </label>
       </div>
@@ -83,10 +86,11 @@ const SongListSearch: Component<SearchProps> = (props) => {
         <SongListSearchOrderBy setOrder={props.setOrder} />
       </div>
     </div>
-  )
-}
+  );
+};
 
-{/* <div class="results row">
+{
+  /* <div class="results row">
         <button
           title={
             props.count() === 0 ? "Can not save results as playlist" : "Save results as playlist"
@@ -99,11 +103,14 @@ const SongListSearch: Component<SearchProps> = (props) => {
           <OrderSelect setOrder={props.setOrder} disabled={props.count() === 0} />
           <TagSelect tags={props.tags} disabled={props.count() === 0} />
         </div>
-      </div> */}
+      </div> */
+}
 
-{/* <div class="error-container" classList={{ 'display-none': !doShowError() }}>
+{
+  /* <div class="error-container" classList={{ 'display-none': !doShowError() }}>
         <p class="message" ref={errorMessage}></p>
         <button class="suggestion" ref={suggestion} classList={{ 'display-none': !doShowSuggestion() }}></button>
-      </div> */}
+      </div> */
+}
 
 export default SongListSearch;

src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx

@@ -74,7 +74,9 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
         </Switch>
       </IconButton>
       <Dropdown isOpen={isOpen} onValueChange={setIsOpen}>
-        <Dropdown.Trigger class="px-3 py-1 bg-thin-material rounded-md">{optionLabel()}</Dropdown.Trigger>
+        <Dropdown.Trigger class="px-3 py-1 bg-thin-material rounded-md">
+          {optionLabel()}
+        </Dropdown.Trigger>
         <Dropdown.List
           class="bg-surface shadow-lg rounded-md overflow-hidden"
           onValueChange={(newSelectedOption) => {
@@ -85,7 +87,10 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
           value={option}
         >
           {orderOptions.map((option) => (
-            <Dropdown.Item class="px-4 py-2 hover:bg-accent/20 transition-colors duration-200" value={option.value}>
+            <Dropdown.Item
+              class="px-4 py-2 hover:bg-accent/20 transition-colors duration-200"
+              value={option.value}
+            >
               {option.text}
             </Dropdown.Item>
           ))}

src/renderer/src/scenes/main-scene/MainScene.tsx

@@ -26,7 +26,11 @@ const MainScene: Component = () => {
       </main>
 
       <div class="absolute inset-0 z-[-1] pointer-events-none opacity-[0.072]">
-        <SongImage src={song().bg} instantLoad={true} class="w-full h-full bg-cover filter blur-xl" />
+        <SongImage
+          src={song().bg}
+          instantLoad={true}
+          class="w-full h-full bg-cover filter blur-xl"
+        />
       </div>
     </div>
   );
@@ -41,7 +45,7 @@ const Nav: Component = () => {
 
       <div class="ml-auto">
         <IconButton
-          class={`text-text-700 ${songQueueModalOpen() ? 'text-text-900' : ''}`}
+          class={`text-text-700 ${songQueueModalOpen() ? "text-text-900" : ""}`}
           onClick={toggleSongQueueModalOpen}
         >
           <i class="ri-stack-fill" />
@@ -58,11 +62,13 @@ const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
   return (
     <button
       class={`flex items-center gap-4 px-4 py-1 rounded-sm hover:bg-surface
-        ${mainActiveTab() === value ? 'bg-surface' : ''}`}
+        ${mainActiveTab() === value ? "bg-surface" : ""}`}
       onclick={() => setMainActiveTab(value)}
     >
-      <i class={`${icon} ${mainActiveTab() === value ? 'text-text-900' : 'text-text-600'}`} />
-      <span class={`text-base font-semibold ${mainActiveTab() === value ? 'text-on-background' : 'text-text-600'}`}>
+      <i class={`${icon} ${mainActiveTab() === value ? "text-text-900" : "text-text-600"}`} />
+      <span
+        class={`text-base font-semibold ${mainActiveTab() === value ? "text-on-background" : "text-text-600"}`}
+      >
         {children}
       </span>
     </button>

tailwind.config.js

@@ -1,23 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
-        'thick-material': 'var(--color-thick-material)',
-        'regular-material': 'var(--color-regular-material)',
-        'text': 'var(--color-text)',
-        'subtext': 'var(--color-subtext)',
-        'stroke': 'var(--color-stroke)',
-        'overlay': 'var(--color-overlay)',
-        'accent': 'var(--color-accent)',
-        'surface': 'var(--color-surface)',
-        'black': 'var(--color-black)',
-        'red': 'var(--color-red)',
-        'green': 'var(--color-green)',
-        'thin-material': 'var(--color-thin-material)',
+        "thick-material": "var(--color-thick-material)",
+        "regular-material": "var(--color-regular-material)",
+        text: "var(--color-text)",
+        subtext: "var(--color-subtext)",
+        stroke: "var(--color-stroke)",
+        overlay: "var(--color-overlay)",
+        accent: "var(--color-accent)",
+        surface: "var(--color-surface)",
+        black: "var(--color-black)",
+        red: "var(--color-red)",
+        green: "var(--color-green)",
+        "thin-material": "var(--color-thin-material)",
       },
     },
   },
@@ -25,5 +23,5 @@ export default {
     extend: {},
   },
   plugins: [],
-  darkMode: 'media', // or 'class' if you prefer manual dark mode switching
-}
+  darkMode: "media", // or 'class' if you prefer manual dark mode switching
+};