Fix broken start screen

package.json

@@ -1,6 +1,6 @@
 {
  "name": "stemroller",
- "version": "2.0.5",
+ "version": "2.0.6",
  "private": true,
  "type": "module",
  "description": "Isolate vocals, drums, bass, and other instrumental stems from any song",

renderer-src/components/SearchAndResults.svelte

@@ -58,15 +58,22 @@
  }
 
  $: {
- if (typeof navigator !== 'undefined' && navigator.platform.toLowerCase().indexOf('mac') !== -1) {
+ if (
+ typeof navigator !== 'undefined' &&
+ navigator.platform.toLowerCase().indexOf('mac') !== -1
+ ) {
  dndFileExplorerName = 'Finder'
  }
  }
 </script>
 
 <div class="grow shrink overflow-hidden flex flex-col bg-slate-900 text-slate-100">
  <div class="relative w-full flex-0 border-solid border-b border-slate-700">
- <input class="w-full px-14 py-4 border-none outline-none bg-slate-900 font-bold" placeholder="Search" on:input={handleSearchInput}>
+ <input
+ class="w-full px-14 py-4 border-none outline-none bg-slate-900 font-bold"
+ placeholder="Search"
+ on:input={handleSearchInput}
+ />
  <div class="absolute top-4 left-4 w-6 h-6 text-slate-500 pointer-events-none">
  <SearchIcon />
  </div>
@@ -78,26 +85,43 @@
  </div>
 
  <div class="grow shrink overflow-x-hidden overflow-y-auto flex flex-col p-6 space-y-6">
- {#if videos && status === null}
- {#each videos as video}
- <ResultCard {video} {onSplitClicked} />
- {/each}
- {:else if status === null && !videos?.length}
- <p class="m-4 text-slate-400 text-center">No video results available.</p>
- {:else if status !== null && status.step === 'error'}
- <p class="m-4 text-slate-400 text-center">An error occurred. Please make sure you&apos;re connected to the internet and try again.</p>
- {:else if !hasQuery}
+ {#if !hasQuery}
  <div class="w-6 h-6 self-center animate-bounce text-slate-500 pointer-events-none">
  <ArrowUpIcon />
  </div>
- <p class="m-4 text-slate-400 text-center">Type any song title in the search bar above,<br />or <button class="text-cyan-500 underline" on:click={handleSelectFile} on:mouseenter={() => dndTipVisible = true} on:mouseleave={() => dndTipVisible = false}>select a local file</button> stored on your device.</p>
+ <p class="m-4 text-slate-400 text-center">
+ Type any song title in the search bar above,<br />or
+ <button
+ class="text-cyan-500 underline"
+ on:click={handleSelectFile}
+ on:mouseenter={() => (dndTipVisible = true)}
+ on:mouseleave={() => (dndTipVisible = false)}>select a local file</button
+ > stored on your device.
+ </p>
 
- <div class={`m-auto max-w-md flex flex-row space-x-2 px-4 py-3 drop-shadow-lg bg-slate-800 text-slate-300 rounded-md border-solid border border-slate-700 transition-opacity ${dndTipVisible ? 'opacity-100' : 'opacity-0'}`}>
+ <div
+ class={`m-auto max-w-md flex flex-row space-x-2 px-4 py-3 drop-shadow-lg bg-slate-800 text-slate-300 rounded-md border-solid border border-slate-700 transition-opacity ${
+ dndTipVisible ? 'opacity-100' : 'opacity-0'
+ }`}
+ >
  <div class="grow-0 shrink-0 w-6 h-6">
  <CursorClickIcon />
  </div>
- <p><span class="font-bold">Pro tip</span>: you can also drag local files from {dndFileExplorerName} and drop them onto this window to split them.</p>
+ <p>
+ <span class="font-bold">Pro tip</span>: you can also drag local files from {dndFileExplorerName}
+ and drop them onto this window to split them.
+ </p>
  </div>
+ {:else if videos && status === null}
+ {#each videos as video}
+ <ResultCard {video} {onSplitClicked} />
+ {/each}
+ {:else if (!videos || videos.length === 0) && status === null}
+ <p class="m-4 text-slate-400 text-center">No video results available.</p>
+ {:else if status !== null && status.step === 'error'}
+ <p class="m-4 text-slate-400 text-center">
+ An error occurred. Please make sure you&apos;re connected to the internet and try again.
+ </p>
  {/if}
  </div>
 </div>