Format files

src/lib/components/ThemePicker.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" context="module">
+<script lang="ts" context="module">
-  export const themes = ["light", "dark"] as const
+  export const themes = ["light", "dark"] as const
-  export type Theme = (typeof themes)[number]
+  export type Theme = (typeof themes)[number]
-</script>
+</script>
-
+
-<script lang="ts">
+<script lang="ts">
-  import { slide } from "svelte/transition"
+  import { slide } from "svelte/transition"
-  let { theme } = $props<{ theme: Theme }>()
+  let { theme } = $props<{ theme: Theme }>()
-
+
-  function toggleTheme() {
+  function toggleTheme() {
-    const currentIndex = themes.indexOf(theme)
+    const currentIndex = themes.indexOf(theme)
-    theme = themes[(currentIndex + 1) % themes.length]
+    theme = themes[(currentIndex + 1) % themes.length]
-  }
+  }
-
+
-  let icon = $derived.by(() => {
+  let icon = $derived.by(() => {
-    if (theme === "light") return "🌞"
+    if (theme === "light") return "🌞"
-    if (theme === "dark") return "🌙"
+    if (theme === "dark") return "🌙"
-  })
+  })
-</script>
+</script>
-
+
-{#key theme}
+{#key theme}
-  <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
+  <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
-    {icon}
+    {icon}
-  </button>
+  </button>
-{/key}
+{/key}
-
+
-<slot />
+<slot />
-
+
-<style lang="postcss">
+<style lang="postcss">
-  button {
+  button {
-    @apply absolute top-0 right-0;
+    @apply absolute top-0 right-0;
-    @apply text-3xl;
+    @apply text-3xl;
-    @apply cursor-pointer;
+    @apply cursor-pointer;
-  }
+  }
-</style>
+</style>

src/routes/+layout.svelte

@@ -24,4 +24,3 @@
     @apply bg-background text-foreground;
   }
 </style>
-

src/routes/+page.svelte

@@ -4,7 +4,7 @@
 </main>
 
 <style lang="postcss">
-main {
+  main {
     @apply text-center;
     @apply mx-auto my-64;
   }

src/routes/timer/+page.svelte

@@ -135,9 +135,7 @@
 
 <main>
   <div>
-    <h1>
+    <h1>Prevent CVS</h1>
-      Prevent CVS
-    </h1>
     {#if $state !== "Ready"}
       <p>{$state}</p>
       <p>Time left until end of break: {$timeLeftDisplay}</p>
@@ -145,14 +143,11 @@
       <p>Time left until break: {$timeLeftDisplay}</p>
     {/if}
     {#if $state !== "Ready"}
-      <button
+      <button on:click={skipBreak}>Skip Break</button>
-        on:click={skipBreak}>Skip Break</button
-      >
     {/if}
   </div>
 </main>
 
-
 <style lang="postcss">
   main {
     @apply text-center;

svelte.config.js

@@ -3,7 +3,6 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-
   // vitePlugin: {
   //     dynamicCompileOptions({filename}){
   //       if(filename.includes('node_modules')){
@@ -13,8 +12,8 @@ const config = {
   // },
 
   // compilerOptions: {
-	// 	runes: true
+  // 	runes: true
-	// },
+  // },
 
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors