fix: wip for ios

feat: media session support

.eslintrc.json

@@ -41,6 +41,8 @@
     "sort-destructure-keys/sort-destructure-keys": "warn",
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/no-noninteractive-tabindex": "off",
+    "jsx-a11y/label-has-associated-control": "off",
     "react/jsx-sort-props": [
       "warn",
       {

.stylelintrc.json

@@ -8,7 +8,8 @@
 
   "rules": {
     "import-notation": "string",
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "no-descending-specificity": null
   },
 
   "overrides": [

README.md

@@ -24,6 +24,7 @@
 1. 📓 Notepad for quick notes.
 1. 🍅 Pomodoro timer.
 1. ✅ Simple to-do list (soon).
+1. ⏯️ Media controls.
 1. ⌨️ Keyboard shortcuts for everything.
 1. 🥷 Privacy focused: no data collection.
 1. 💰 Completely free, open-source, and self-hostable.

package.json

@@ -8,6 +8,7 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "test": "vitest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.astro",
     "lint:fix": "npm run lint -- --fix",
     "lint:style": "stylelint ./**/*.{css,astro,html}",
@@ -23,23 +24,28 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.3",
+    "@astrojs/react": "3.6.0",
     "@floating-ui/react": "0.26.0",
+    "@formkit/auto-animate": "0.8.2",
+    "@radix-ui/react-checkbox": "1.1.4",
     "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-slider": "1.2.3",
     "@radix-ui/react-tooltip": "1.0.7",
     "@types/howler": "2.2.10",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
-    "astro": "4.0.3",
+    "astro": "4.10.3",
     "deepmerge": "4.3.1",
     "focus-trap-react": "10.2.3",
     "framer-motion": "10.16.4",
     "howler": "2.2.4",
+    "js-confetti": "0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "3.2.1",
     "react-icons": "4.11.0",
     "react-wrap-balancer": "1.1.0",
+    "uuid": "10.0.0",
     "zustand": "4.4.3"
   },
   "devDependencies": {
@@ -88,6 +94,7 @@
     "stylelint-config-html": "1.1.0",
     "stylelint-config-recess-order": "4.4.0",
     "stylelint-config-standard": "34.0.0",
-    "stylelint-prettier": "4.0.2"
+    "stylelint-prettier": "4.0.2",
+    "vitest": "1.6.0"
   }
 }

public/favicon.svg

@@ -1,12 +1,11 @@
 <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="128" height="128" rx="25" fill="#09090B"/>
-<path d="M64 19C76.4264 19 86.5 29.0736 86.5 41.5H75.25C75.25 35.2868 70.2132 30.25 64 30.25C57.7868 30.25 52.75 35.2868 52.75 41.5L41.5 41.5C41.5 29.0736 51.5736 19 64 19Z" fill="white"/>
-<path d="M41.5 86.5C29.0736 86.5 19 76.4264 19 64C19 51.5736 29.0736 41.5 41.5 41.5V52.75C35.2868 52.75 30.25 57.7868 30.25 64C30.25 70.2132 35.2868 75.25 41.5 75.25V86.5Z" fill="white"/>
-<path d="M86.5 86.5C86.5 98.9264 76.4264 109 64 109C51.5736 109 41.5 98.9264 41.5 86.5H52.75C52.75 92.7132 57.7868 97.75 64 97.75C70.2132 97.75 75.25 92.7132 75.25 86.5H86.5Z" fill="white"/>
-<path d="M86.5 86.5C98.9264 86.5 109 76.4264 109 64C109 51.5736 98.9264 41.5 86.5 41.5V52.75C92.7132 52.75 97.75 57.7868 97.75 64C97.75 70.2132 92.7132 75.25 86.5 75.25V86.5Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M64 86.5C76.4264 86.5 86.5 76.4264 86.5 64C86.5 51.5736 76.4264 41.5 64 41.5C51.5736 41.5 41.5 51.5736 41.5 64C41.5 76.4264 51.5736 86.5 64 86.5ZM64 75.25C70.2132 75.25 75.25 70.2132 75.25 64C75.25 57.7868 70.2132 52.75 64 52.75C57.7868 52.75 52.75 57.7868 52.75 64C52.75 70.2132 57.7868 75.25 64 75.25Z" fill="white"/>
-<path d="M30.25 41.5C30.25 35.2868 35.2868 30.25 41.5 30.25V19C29.0736 19 19 29.0736 19 41.5H30.25Z" fill="white"/>
-<path d="M97.75 41.5C97.75 35.2868 92.7132 30.25 86.5 30.25V19C98.9264 19 109 29.0736 109 41.5H97.75Z" fill="white"/>
-<path d="M97.75 86.5C97.75 92.7132 92.7132 97.75 86.5 97.75V109C98.9264 109 109 98.9264 109 86.5H97.75Z" fill="white"/>
-<path d="M30.25 86.5C30.25 92.7132 35.2868 97.75 41.5 97.75V109C29.0736 109 19 98.9264 19 86.5H30.25Z" fill="white"/>
+<path d="M64 49.7864C64 47.4488 64.5643 45.2429 65.5642 43.2976L65.5645 43.2971L65.5711 43.2843C66.0791 42.2986 66.6989 41.3799 67.4139 40.5452C68.8566 38.8609 70.6864 37.518 72.7654 36.6545C72.5386 36.3807 72.2969 36.1151 72.0404 35.8586C70.7047 34.5229 69.1194 33.589 67.4346 33.0568C66.4711 33.6789 65.5647 34.382 64.7252 35.1564C64.6766 35.2012 64.6282 35.2463 64.5801 35.2916C64.3829 35.4771 64.1895 35.6667 64 35.86C63.8105 35.6667 63.6171 35.4771 63.4199 35.2916C62.54 34.4636 61.5846 33.7149 60.5653 33.0568C59.5394 32.3945 58.4487 31.8239 57.3048 31.3568C55.0096 30.4195 52.5001 29.8985 49.8702 29.8876C49.8423 29.8875 49.8144 29.8875 49.7864 29.8875C48.4122 29.8875 47.0706 30.0267 45.7748 30.292C38.0036 31.8827 31.8827 38.0036 30.292 45.7748C32.6037 44.0448 35.1703 42.8117 37.8441 42.0757C38.9389 40.3836 40.3836 38.9389 42.0757 37.8442C43.173 37.1342 44.3744 36.5713 45.652 36.1836C46.9602 35.7864 48.3484 35.5729 49.7864 35.5729C50.6505 35.5729 51.4966 35.65 52.3182 35.7977C53.3317 35.9799 54.3079 36.2696 55.2346 36.6545C57.3136 37.518 59.1434 38.8609 60.586 40.5452C61.3042 41.3837 61.9265 42.3069 62.4358 43.2976C62.4924 43.4079 62.5477 43.5189 62.6015 43.6308C63.4978 45.4933 64 47.5812 64 49.7864Z" fill="#FAFAFA"/>
+<path d="M74.0505 53.9495C75.7035 52.2965 77.6623 51.1358 79.7449 50.4673C79.8233 50.4421 79.9019 50.4176 79.9807 50.3938C80.9672 50.096 81.9797 49.9077 82.9991 49.8289C85.2102 49.6581 87.4536 50.0024 89.5343 50.8619C89.5675 50.5079 89.5844 50.1492 89.5844 49.7864C89.5844 47.8975 89.1238 46.1161 88.3088 44.5485C87.1735 44.3041 86.021 44.1598 84.8654 44.1156C84.8136 44.1136 84.7619 44.1119 84.7101 44.1103C84.4395 44.102 84.1687 44.0993 83.898 44.102C83.9007 43.8313 83.898 43.5605 83.8897 43.2899C83.853 42.0823 83.7069 40.8773 83.4515 39.6912C83.1944 38.4974 82.8266 37.3228 82.348 36.1836C81.3878 33.8978 79.9817 31.7549 78.1298 29.8876C78.1102 29.8678 78.0905 29.848 78.0707 29.8283C77.099 28.8566 76.0518 28.0064 74.948 27.2777C68.3281 22.9074 59.6719 22.9074 53.052 27.2777C55.9099 27.689 58.5967 28.6319 61.0079 30.0022C62.9785 29.5798 65.0215 29.5798 66.9921 30.0022C68.2701 30.2761 69.5176 30.7276 70.6952 31.3568C71.9011 32.0011 73.0337 32.8316 74.0505 33.8485C74.6615 34.4595 75.2053 35.1123 75.6818 35.7977C76.2696 36.6432 76.755 37.5383 77.1381 38.4657C77.9976 40.5464 78.3419 42.7898 78.171 45.0009C78.086 46.1017 77.8732 47.1945 77.5327 48.2552C77.4948 48.3732 77.4554 48.4908 77.4143 48.608C76.7311 50.5587 75.6098 52.3902 74.0505 53.9495Z" fill="#FAFAFA"/>
+<path d="M78.2135 64C80.5512 64 82.7571 64.5643 84.7023 65.5642L84.7157 65.5711C85.7014 66.0791 86.6201 66.699 87.4548 67.414C89.1391 68.8566 90.482 70.6864 91.3455 72.7654C91.6193 72.5386 91.8849 72.2969 92.1414 72.0404C93.4771 70.7047 94.411 69.1194 94.9432 67.4347C94.2851 66.4154 93.5363 65.46 92.7084 64.5801C92.5228 64.3829 92.3333 64.1895 92.1399 64C92.3333 63.8105 92.5228 63.6171 92.7084 63.4199C93.5363 62.54 94.2851 61.5846 94.9432 60.5653C95.6055 59.5394 96.1761 58.4487 96.6432 57.3048C97.5805 55.0095 98.1015 52.5 98.1124 49.8702C98.1125 49.8423 98.1125 49.8144 98.1125 49.7864C98.1125 48.4122 97.9732 47.0706 97.708 45.7748C96.1172 38.0036 89.9964 31.8828 82.2252 30.292C83.9552 32.6037 85.1883 35.1703 85.9243 37.8442C87.6164 38.939 89.061 40.3836 90.1558 42.0757C90.8658 43.173 91.4286 44.3744 91.8164 45.652C92.2136 46.9602 92.4271 48.3484 92.4271 49.7864C92.4271 50.6505 92.35 51.4966 92.2023 52.3182C92.0201 53.3317 91.7304 54.3079 91.3455 55.2346C90.482 57.3136 89.1391 59.1434 87.4548 60.586C86.6163 61.3043 85.6931 61.9265 84.7023 62.4358C84.5921 62.4924 84.481 62.5477 84.3691 62.6015C82.5067 63.4978 80.4187 64 78.2135 64Z" fill="#FAFAFA"/>
+<path d="M74.0505 74.0505C75.7035 75.7035 76.8642 77.6623 77.5327 79.7449C77.5579 79.8233 77.5824 79.9019 77.6061 79.9807C77.904 80.9672 78.0923 81.9797 78.171 82.9991C78.3419 85.2102 77.9976 87.4536 77.1381 89.5343C77.4921 89.5675 77.8508 89.5844 78.2135 89.5844C80.1025 89.5844 81.8839 89.1238 83.4515 88.3088C83.6959 87.1735 83.8402 86.021 83.8844 84.8654C83.8864 84.8136 83.8881 84.7619 83.8897 84.7101C83.898 84.4395 83.9007 84.1687 83.898 83.898C84.1687 83.9007 84.4395 83.898 84.7101 83.8897C85.9177 83.853 87.1227 83.7069 88.3088 83.4515C89.5025 83.1944 90.6772 82.8266 91.8164 82.348C94.1022 81.3878 96.2451 79.9818 98.1124 78.1298C98.1322 78.1102 98.152 78.0905 98.1717 78.0707C99.1434 77.099 99.9936 76.0518 100.722 74.948C105.093 68.3281 105.093 59.6719 100.722 53.052C100.311 55.9099 99.368 58.5967 97.9978 61.0078C98.4202 62.9785 98.4202 65.0215 97.9978 66.9922C97.7239 68.2701 97.2724 69.5176 96.6432 70.6952C95.9989 71.9011 95.1684 73.0337 94.1515 74.0505C93.5405 74.6615 92.8877 75.2053 92.2023 75.6818C91.3568 76.2696 90.4617 76.755 89.5343 77.1381C87.4536 77.9976 85.2102 78.3419 82.9991 78.171C81.8983 78.086 80.8055 77.8732 79.7449 77.5327C79.6268 77.4948 79.5092 77.4554 79.392 77.4143C77.4413 76.7311 75.6098 75.6098 74.0505 74.0505Z" fill="#FAFAFA"/>
+<path d="M64 78.2136C64 80.5512 63.4356 82.7571 62.4358 84.7024L62.4289 84.7157C61.9209 85.7014 61.301 86.6201 60.586 87.4548C59.1434 89.1391 57.3136 90.482 55.2346 91.3455C55.4614 91.6193 55.7031 91.8849 55.9596 92.1414C57.2953 93.4771 58.8806 94.411 60.5653 94.9432C61.5791 94.2886 62.5296 93.5445 63.4056 92.7219L63.4199 92.7084C63.6171 92.5229 63.8105 92.3333 64 92.14C64.1895 92.3333 64.3829 92.5229 64.5801 92.7084C65.46 93.5364 66.4153 94.2851 67.4347 94.9432C68.4605 95.6055 69.5512 96.1761 70.6952 96.6432C72.9904 97.5805 75.4999 98.1015 78.1298 98.1124C78.1577 98.1125 78.1856 98.1126 78.2135 98.1126C79.5877 98.1126 80.9294 97.9733 82.2252 97.708C89.9964 96.1172 96.1172 89.9964 97.708 82.2252C95.3963 83.9552 92.8297 85.1883 90.1558 85.9243C89.061 87.6164 87.6164 89.061 85.9243 90.1558C84.827 90.8658 83.6256 91.4286 82.348 91.8164C81.0397 92.2136 79.6516 92.4271 78.2135 92.4271C77.3494 92.4271 76.5034 92.35 75.6818 92.2023C74.6683 92.0201 73.6921 91.7304 72.7654 91.3455C70.6864 90.482 68.8566 89.1391 67.4139 87.4548C66.6957 86.6163 66.0735 85.6931 65.5642 84.7024C65.5075 84.5921 65.4523 84.4811 65.3984 84.3692C64.5022 82.5067 64 80.4188 64 78.2136Z" fill="#FAFAFA"/>
+<path d="M53.9495 74.0505C52.2965 75.7035 50.3377 76.8642 48.2551 77.5327C48.1767 77.5579 48.0981 77.5824 48.0193 77.6061C47.0328 77.904 46.0203 78.0923 45.0009 78.171C42.7898 78.3419 40.5464 77.9976 38.4657 77.1381C38.4325 77.4921 38.4156 77.8508 38.4156 78.2136C38.4156 80.1025 38.8762 81.8839 39.6912 83.4515C40.8773 83.7069 42.0822 83.853 43.2899 83.8897C43.5605 83.898 43.8313 83.9007 44.102 83.898C44.0993 84.1687 44.102 84.4395 44.1103 84.7101C44.147 85.9178 44.2931 87.1227 44.5485 88.3088C44.8056 89.5026 45.1734 90.6773 45.652 91.8164C46.6122 94.1022 48.0183 96.2451 49.8702 98.1124C49.8898 98.1322 49.9095 98.152 49.9293 98.1717C50.901 99.1434 51.9482 99.9936 53.052 100.722C59.6719 105.093 68.3281 105.093 74.948 100.722C72.0901 100.311 69.4033 99.3681 66.9921 97.9978C65.0215 98.4202 62.9785 98.4202 61.0078 97.9978C59.7299 97.7239 58.4824 97.2724 57.3048 96.6432C56.0989 95.9989 54.9663 95.1684 53.9495 94.1515C53.3385 93.5405 52.7947 92.8877 52.3182 92.2023C51.7304 91.3568 51.245 90.4617 50.8619 89.5343C50.0024 87.4536 49.6581 85.2102 49.829 82.9991C49.914 81.8983 50.1268 80.8055 50.4673 79.7449C50.5052 79.6268 50.5446 79.5092 50.5857 79.392C51.2689 77.4413 52.3902 75.6098 53.9495 74.0505Z" fill="#FAFAFA"/>
+<path d="M40.5451 67.414C41.3837 66.6957 42.3068 66.0735 43.2976 65.5642C43.4079 65.5076 43.5189 65.4523 43.6308 65.3985C45.4933 64.5022 47.5812 64 49.7864 64C47.4487 64 45.2429 63.4357 43.2976 62.4358L43.2971 62.4355L43.2843 62.4289C42.2986 61.9209 41.3799 61.301 40.5451 60.586C38.8608 59.1434 37.518 57.3136 36.6544 55.2346C36.3807 55.4614 36.1151 55.7031 35.8586 55.9596C34.5229 57.2953 33.589 58.8806 33.0568 60.5654C33.511 61.2689 34.0084 61.9419 34.5452 62.5807C34.7861 62.8674 35.0351 63.1473 35.2916 63.4199C35.4771 63.6171 35.6666 63.8105 35.86 64C35.6666 64.1895 35.4771 64.3829 35.2916 64.5801C34.4636 65.46 33.7149 66.4153 33.0568 67.4346C32.3945 68.4605 31.8239 69.5512 31.3568 70.6951C30.4194 72.9904 29.8984 75.4999 29.8876 78.1298C29.8875 78.1577 29.8874 78.1856 29.8874 78.2136C29.8874 79.5878 30.0267 80.9294 30.292 82.2252C31.8827 89.9964 38.0036 96.1173 45.7748 97.708C44.0448 95.3963 42.8117 92.8297 42.0757 90.1558C40.3836 89.0611 38.9389 87.6164 37.8441 85.9243C37.1342 84.827 36.5713 83.6256 36.1835 82.348C35.7864 81.0397 35.5729 79.6516 35.5729 78.2136C35.5729 77.3494 35.65 76.5034 35.7977 75.6818C35.9799 74.6683 36.2696 73.6921 36.6544 72.7654C37.518 70.6864 38.8608 68.8566 40.5451 67.414Z" fill="#FAFAFA"/>
+<path d="M45.0009 49.8289C46.1017 49.914 47.1945 50.1268 48.2551 50.4673C48.3732 50.5052 48.4908 50.5446 48.608 50.5857C50.5587 51.2689 52.3902 52.3902 53.9495 53.9495C52.2965 52.2965 51.1358 50.3377 50.4673 48.2552C50.4421 48.1767 50.4176 48.0981 50.3938 48.0193C50.096 47.0328 49.9077 46.0203 49.829 45.0009C49.6581 42.7898 50.0024 40.5464 50.8619 38.4657C50.5079 38.4325 50.1491 38.4156 49.7864 38.4156C47.8975 38.4156 46.1161 38.8762 44.5485 39.6912C44.2931 40.8773 44.147 42.0823 44.1103 43.2899C44.102 43.5605 44.0993 43.8313 44.102 44.102C43.8313 44.0993 43.5605 44.102 43.2899 44.1103C42.0822 44.147 40.8773 44.2931 39.6912 44.5485C38.4974 44.8056 37.3227 45.1734 36.1835 45.652C33.8978 46.6122 31.7549 48.0183 29.8876 49.8702C29.8678 49.8899 29.848 49.9095 29.8283 49.9293C28.8566 50.901 28.0064 51.9482 27.2777 53.052C22.9074 59.6719 22.9074 68.3281 27.2777 74.948C27.689 72.0901 28.6319 69.4033 30.0022 66.9921C29.5798 65.0215 29.5798 62.9785 30.0022 61.0079C30.2761 59.7299 30.7276 58.4824 31.3568 57.3048C32.0011 56.0989 32.8316 54.9663 33.8485 53.9495C34.4595 53.3385 35.1123 52.7947 35.7977 52.3182C36.6432 51.7304 37.5383 51.245 38.4657 50.8619C40.5464 50.0024 42.7898 49.6581 45.0009 49.8289Z" fill="#FAFAFA"/>
 </svg>

public/logo.svg

@@ -1,11 +1,10 @@
 <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M100 150C127.614 150 150 127.614 150 100C150 72.3858 127.614 50 100 50C72.3858 50 50 72.3858 50 100C50 127.614 72.3858 150 100 150ZM100 125C113.807 125 125 113.807 125 100C125 86.1929 113.807 75 100 75C86.1929 75 75 86.1929 75 100C75 113.807 86.1929 125 100 125Z" fill="#FAFAFA"/>
-<path d="M50 50C22.3858 50 2.00172e-06 72.3857 7.94663e-07 100C-4.12393e-07 127.614 22.3858 150 50 150V125C36.1929 125 25 113.807 25 100C25 86.1929 36.1929 75 50 75V50Z" fill="#D4D4D8"/>
-<path d="M150 50C150 22.3858 127.614 2.41411e-06 100 0C72.3858 -2.41411e-06 50 22.3858 50 50L75 50C75 36.1929 86.1929 25 100 25C113.807 25 125 36.1929 125 50H150Z" fill="#D4D4D8"/>
-<path d="M150 150C177.614 150 200 127.614 200 100C200 72.3858 177.614 50 150 50V75C163.807 75 175 86.1929 175 100C175 113.807 163.807 125 150 125V150Z" fill="#D4D4D8"/>
-<path d="M50 150C50 177.614 72.3857 200 100 200C127.614 200 150 177.614 150 150H125C125 163.807 113.807 175 100 175C86.1929 175 75 163.807 75 150H50Z" fill="#D4D4D8"/>
-<path d="M25 50C25 36.1929 36.1929 25 50 25V1.39091e-06C22.3858 1.83851e-07 2.00172e-06 22.3857 7.94663e-07 50H25Z" fill="#A1A1AA"/>
-<path d="M150 25C163.807 25 175 36.1929 175 50H200C200 22.3858 177.614 3.24858e-06 150 8.34465e-07L150 25Z" fill="#A1A1AA"/>
-<path d="M175 150C175 163.807 163.807 175 150 175V200C177.614 200 200 177.614 200 150H175Z" fill="#A1A1AA"/>
-<path d="M50 175C36.1929 175 25 163.807 25 150H0C0 177.614 22.3857 200 50 200V175Z" fill="#A1A1AA"/>
+<path d="M100 64.4661C100 58.6219 101.411 53.1072 103.911 48.2441L103.911 48.2429L103.928 48.2107C105.198 45.7464 106.747 43.4498 108.535 41.3629C112.141 37.1521 116.716 33.7949 121.914 31.6361C121.346 30.9518 120.742 30.2877 120.101 29.6465C116.762 26.3072 112.799 23.9724 108.587 22.642C106.178 24.1973 103.912 25.9549 101.813 27.891C101.691 28.0031 101.571 28.1157 101.45 28.229C100.957 28.6929 100.474 29.1667 100 29.6501C99.5262 29.1667 99.0427 28.6929 98.5497 28.229C96.3499 26.1591 93.9616 24.2873 91.4133 22.642C88.8486 20.9862 86.1219 19.5598 83.2621 18.392C77.5239 16.0487 71.2502 14.7462 64.6755 14.7191C64.6057 14.7188 64.5359 14.7186 64.4661 14.7186C61.0306 14.7186 57.6765 15.0669 54.4371 15.73C35.009 19.7068 19.7068 35.009 15.7299 54.4371C21.5092 50.112 27.9257 47.0293 34.6104 45.1892C37.3473 40.959 40.9589 37.3474 45.1892 34.6104C47.9325 32.8355 50.936 31.4284 54.1299 30.4589C57.4006 29.4661 60.871 28.9322 64.4661 28.9322C66.6264 28.9322 68.7416 29.125 70.7956 29.4943C73.3293 29.9498 75.7698 30.6739 78.0864 31.6362C83.2841 33.795 87.8585 37.1521 91.4651 41.3629C93.2606 43.4592 94.8163 45.7672 96.0894 48.2441C96.2311 48.5197 96.3692 48.7973 96.5039 49.0771C98.7445 53.7333 100 58.9531 100 64.4661Z" fill="#FAFAFA"/>
+<path d="M125.126 74.8737C129.259 70.7413 134.156 67.8394 139.362 66.1682C139.558 66.1053 139.755 66.0441 139.952 65.9846C142.418 65.2401 144.949 64.7693 147.498 64.5724C153.025 64.1451 158.634 65.0059 163.836 67.1547C163.919 66.2697 163.961 65.3729 163.961 64.4661C163.961 59.7437 162.81 55.2903 160.772 51.3713C157.934 50.7602 155.053 50.3994 152.163 50.289C152.034 50.2841 151.905 50.2796 151.775 50.2757C151.099 50.2551 150.422 50.2482 149.745 50.2551C149.752 49.5783 149.745 48.9014 149.724 48.2248C149.632 45.2056 149.267 42.1933 148.629 39.228C147.986 36.2436 147.067 33.3069 145.87 30.4589C143.47 24.7444 139.954 19.3872 135.325 14.7191C135.275 14.6695 135.226 14.6201 135.177 14.5707C132.748 12.1414 130.13 10.0159 127.37 8.1942C110.82 -2.7314 89.1798 -2.7314 72.63 8.19421C79.7748 9.2225 86.4918 11.5799 92.5196 15.0055C97.4462 13.9496 102.554 13.9496 107.48 15.0055C110.675 15.6902 113.794 16.8191 116.738 18.3919C119.753 20.0027 122.584 22.0791 125.126 24.6212C126.654 26.1487 128.013 27.7808 129.204 29.4942C130.674 31.608 131.888 33.8457 132.845 36.1642C134.994 41.366 135.855 46.9746 135.428 52.5022C135.215 55.2542 134.683 57.9862 133.832 60.6379C133.737 60.9329 133.638 61.2269 133.536 61.5199C131.828 66.3968 129.025 70.9754 125.126 74.8737Z" fill="#FAFAFA"/>
+<path d="M135.534 100C141.378 100 146.893 101.411 151.756 103.911L151.789 103.928C154.254 105.198 156.55 106.747 158.637 108.535C162.848 112.141 166.205 116.716 168.364 121.914C169.048 121.346 169.712 120.742 170.354 120.101C173.693 116.762 176.028 112.799 177.358 108.587C175.713 106.038 173.841 103.65 171.771 101.45C171.307 100.957 170.833 100.474 170.35 100C170.833 99.5263 171.307 99.0427 171.771 98.5497C173.841 96.3499 175.713 93.9616 177.358 91.4133C179.014 88.8486 180.44 86.1218 181.608 83.262C183.951 77.5238 185.254 71.2501 185.281 64.6754C185.281 64.6057 185.281 64.5359 185.281 64.4661C185.281 61.0306 184.933 57.6764 184.27 54.437C180.293 35.009 164.991 19.7069 145.563 15.73C149.888 21.5092 152.971 27.9258 154.811 34.6104C159.041 37.3474 162.653 40.959 165.39 45.1892C167.165 47.9325 168.572 50.936 169.541 54.1299C170.534 57.4006 171.068 60.871 171.068 64.4661C171.068 66.6264 170.875 68.7416 170.506 70.7955C170.05 73.3293 169.326 75.7697 168.364 78.0864C166.205 83.2841 162.848 87.8586 158.637 91.4651C156.541 93.2607 154.233 94.8163 151.756 96.0894C151.48 96.2311 151.203 96.3693 150.923 96.5039C146.267 98.7445 141.047 100 135.534 100Z" fill="#FAFAFA"/>
+<path d="M125.126 125.126C129.259 129.259 132.161 134.156 133.832 139.362C133.895 139.558 133.956 139.755 134.015 139.952C134.76 142.418 135.231 144.949 135.428 147.498C135.855 153.025 134.994 158.634 132.845 163.836C133.73 163.919 134.627 163.961 135.534 163.961C140.256 163.961 144.71 162.81 148.629 160.772C149.24 157.934 149.601 155.052 149.711 152.163C149.716 152.034 149.72 151.905 149.724 151.775C149.745 151.099 149.752 150.422 149.745 149.745C150.422 149.752 151.099 149.745 151.775 149.724C154.794 149.632 157.807 149.267 160.772 148.629C163.756 147.986 166.693 147.066 169.541 145.87C175.256 143.47 180.613 139.954 185.281 135.325C185.33 135.275 185.38 135.226 185.429 135.177C187.859 132.748 189.984 130.13 191.806 127.37C202.731 110.82 202.731 89.1797 191.806 72.6299C190.777 79.7747 188.42 86.4917 184.995 92.5196C186.05 97.4462 186.05 102.554 184.995 107.48C184.31 110.675 183.181 113.794 181.608 116.738C179.997 119.753 177.921 122.584 175.379 125.126C173.851 126.654 172.219 128.013 170.506 129.204C168.392 130.674 166.154 131.888 163.836 132.845C158.634 134.994 153.025 135.855 147.498 135.428C144.746 135.215 142.014 134.683 139.362 133.832C139.067 133.737 138.773 133.638 138.48 133.536C133.603 131.828 129.025 129.025 125.126 125.126Z" fill="#FAFAFA"/>
+<path d="M100 135.534C100 141.378 98.5891 146.893 96.0894 151.756L96.0723 151.789C94.8023 154.254 93.2526 156.55 91.4651 158.637C87.8585 162.848 83.284 166.205 78.0864 168.364C78.6536 169.048 79.2578 169.712 79.899 170.354C83.2382 173.693 87.2014 176.028 91.4133 177.358C93.9478 175.722 96.324 173.861 98.514 171.805L98.5497 171.771C99.0427 171.307 99.5262 170.833 100 170.35C100.474 170.833 100.957 171.307 101.45 171.771C103.65 173.841 106.038 175.713 108.587 177.358C111.151 179.014 113.878 180.44 116.738 181.608C122.476 183.951 128.75 185.254 135.325 185.281C135.394 185.281 135.464 185.281 135.534 185.281C138.969 185.281 142.324 184.933 145.563 184.27C164.991 180.293 180.293 164.991 184.27 145.563C178.491 149.888 172.074 152.971 165.39 154.811C162.653 159.041 159.041 162.653 154.811 165.39C152.068 167.164 149.064 168.572 145.87 169.541C142.599 170.534 139.129 171.068 135.534 171.068C133.374 171.068 131.258 170.875 129.204 170.506C126.671 170.05 124.23 169.326 121.914 168.364C116.716 166.205 112.141 162.848 108.535 158.637C106.739 156.541 105.184 154.233 103.911 151.756C103.769 151.48 103.631 151.203 103.496 150.923C101.255 146.267 100 141.047 100 135.534Z" fill="#FAFAFA"/>
+<path d="M74.8737 125.126C70.7413 129.259 65.8442 132.161 60.6379 133.832C60.4418 133.895 60.2453 133.956 60.0483 134.015C57.582 134.76 55.0507 135.231 52.5022 135.428C46.9745 135.855 41.366 134.994 36.1642 132.845C36.0813 133.73 36.0389 134.627 36.0389 135.534C36.0389 140.256 37.1904 144.71 39.2279 148.629C42.1932 149.267 45.2056 149.632 48.2247 149.724C48.9013 149.745 49.5783 149.752 50.2551 149.745C50.2483 150.422 50.2551 151.099 50.2757 151.775C50.3676 154.794 50.7328 157.807 51.3714 160.772C52.014 163.756 52.9335 166.693 54.1299 169.541C56.5304 175.256 60.0456 180.613 64.6755 185.281C64.7246 185.33 64.7739 185.38 64.8232 185.429C67.2525 187.859 69.8705 189.984 72.63 191.806C89.1798 202.731 110.82 202.731 127.37 191.806C120.225 190.778 113.508 188.42 107.48 184.995C102.554 186.05 97.4462 186.05 92.5196 184.994C89.3248 184.31 86.206 183.181 83.2621 181.608C80.2473 179.997 77.4159 177.921 74.8737 175.379C73.3462 173.851 71.9868 172.219 70.7956 170.506C69.3261 168.392 68.1125 166.154 67.1547 163.836C65.0059 158.634 64.1451 153.025 64.5724 147.498C64.7851 144.746 65.317 142.014 66.1682 139.362C66.2629 139.067 66.3616 138.773 66.4642 138.48C68.1723 133.603 70.9755 129.025 74.8737 125.126Z" fill="#FAFAFA"/>
+<path d="M41.3629 108.535C43.4592 106.739 45.7671 105.184 48.2441 103.911C48.5197 103.769 48.7973 103.631 49.0771 103.496C53.7333 101.255 58.9531 100 64.4661 100C58.6219 100 53.1072 98.5891 48.2441 96.0894L48.2428 96.0888L48.2107 96.0723C45.7464 94.8023 43.4498 93.2526 41.3629 91.4651C37.1521 87.8586 33.7949 83.2841 31.6361 78.0864C30.9517 78.6536 30.2877 79.2578 29.6465 79.899C26.3072 83.2382 23.9724 87.2015 22.642 91.4134C23.7775 93.1722 25.021 94.8547 26.363 96.4517C26.9654 97.1686 27.5877 97.8682 28.2289 98.5498C28.6928 99.0427 29.1666 99.5263 29.6501 100C29.1666 100.474 28.6928 100.957 28.2289 101.45C26.1591 103.65 24.2873 106.038 22.642 108.587C20.9862 111.151 19.5598 113.878 18.3919 116.738C16.0486 122.476 14.7461 128.75 14.719 135.324C14.7187 135.394 14.7186 135.464 14.7186 135.534C14.7186 138.969 15.0668 142.324 15.7299 145.563C19.7068 164.991 35.009 180.293 54.437 184.27C50.112 178.491 47.0293 172.074 45.1892 165.39C40.959 162.653 37.3474 159.041 34.6104 154.811C32.8354 152.067 31.4283 149.064 30.4588 145.87C29.466 142.599 28.9321 139.129 28.9321 135.534C28.9321 133.374 29.1249 131.258 29.4942 129.204C29.9498 126.671 30.6739 124.23 31.6361 121.914C33.7949 116.716 37.1521 112.141 41.3629 108.535Z" fill="#FAFAFA"/>
+<path d="M52.5022 64.5724C55.2542 64.7851 57.9862 65.317 60.6379 66.1682C60.9329 66.2629 61.227 66.3616 61.5199 66.4642C66.3968 68.1723 70.9755 70.9754 74.8737 74.8737C70.7413 70.7413 67.8394 65.8442 66.1682 60.6379C66.1053 60.4418 66.0441 60.2453 65.9846 60.0483C65.2401 57.582 64.7694 55.0507 64.5724 52.5022C64.1451 46.9746 65.0059 41.366 67.1547 36.1642C66.2697 36.0813 65.3729 36.039 64.4661 36.039C59.7437 36.039 55.2903 37.1904 51.3714 39.2279C50.7328 42.1933 50.3676 45.2056 50.2757 48.2248C50.2551 48.9014 50.2483 49.5783 50.2551 50.2551C49.5783 50.2482 48.9014 50.2551 48.2248 50.2757C45.2056 50.3676 42.1933 50.7328 39.2279 51.3714C36.2435 52.014 33.3068 52.9335 30.4589 54.1299C24.7444 56.5305 19.3872 60.0457 14.719 64.6755C14.6695 64.7246 14.6201 64.7739 14.5707 64.8232C12.1414 67.2525 10.0159 69.8705 8.19417 72.63C-2.73139 89.1798 -2.73139 110.82 8.19418 127.37C9.22247 120.225 11.5798 113.508 15.0055 107.48C13.9496 102.554 13.9496 97.4463 15.0055 92.5197C15.6902 89.3248 16.8191 86.2061 18.3919 83.2621C20.0027 80.2473 22.0791 77.4159 24.6212 74.8737C26.1487 73.3462 27.7807 71.9868 29.4942 70.7956C31.6079 69.3261 33.8457 68.1125 36.1642 67.1547C41.366 65.0059 46.9745 64.1451 52.5022 64.5724Z" fill="#FAFAFA"/>
 </svg>

src/components/about.astro

@@ -18,10 +18,6 @@ const paragraphs = [
     body: 'The beauty of Moodist lies in its simplicity and customization. No complex menus or confusing options – just choose your desired sounds, adjust the volume balance, and hit play. Want to blend the gentle chirping of birds with the soothing sound of rain? No problem! Layer as many sounds as you like to create your personalized soundscape oasis.',
     title: 'Create Your Soundscape',
   },
-  // {
-  //   body: 'Moodist goes beyond just ambient sounds by offering a suite of productivity tools to help you stay organized and focused. Utilize the built-in pomodoro timer to structure your workday in focused intervals, jot down thoughts and ideas in the simple notepad, and keep track of your tasks with the handy to-do list. These tools seamlessly integrate with the ambient soundscapes, allowing you to create a personalized environment that fosters both focus and relaxation.',
-  //   title: 'A Productivity Toolbox',
-  // },
   {
     body: "Whether you're looking to unwind after a long day, enhance your focus during work, or lull yourself into a peaceful sleep, Moodist has the perfect soundscape waiting for you. The best part? It's completely free and open-source, so you can enjoy its benefits without any strings attached. Start using Moodist today and discover your new haven of tranquility and focus!",
     title: 'Sounds for Every Moment',

src/components/app/app.tsx

@@ -3,7 +3,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
 import { Howler } from 'howler';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 
 import { Container } from '@/components/container';
 import { StoreConsumer } from '@/components/store-consumer';
@@ -12,6 +12,7 @@ import { Categories } from '@/components/categories';
 import { SharedModal } from '@/components/modals/shared';
 import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
+import { MediaControls } from '@/components/media-controls';
 
 import { sounds } from '@/data/sounds';
 import { FADE_OUT } from '@/constants/events';
@@ -19,6 +20,77 @@ import { FADE_OUT } from '@/constants/events';
 import type { Sound } from '@/data/types';
 import { subscribe } from '@/lib/event';
 
+/**
+ * =========================================
+ */
+declare global {
+  interface Window {
+    __howlerStreamPatched?: boolean;
+  }
+}
+
+/**
+ * Patches Howler's master gain node to route its output into a hidden HTML audio element.
+ * An intermediate splitter node is used in an attempt to reduce the banging noise observed on iOS.
+ * Also adds a listener to resume the AudioContext when the document becomes visible.
+ */
+export function setupAudioStream(): void {
+  if (
+    typeof window !== 'undefined' &&
+    Howler.ctx &&
+    !window.__howlerStreamPatched
+  ) {
+    const audioCtx = Howler.ctx;
+
+    // Create a MediaStream destination node to capture the output.
+    const streamDestination = audioCtx.createMediaStreamDestination();
+
+    // Create a splitter gain node to help split the signal cleanly.
+    const splitter = audioCtx.createGain();
+
+    // Disconnect the master gain.
+    Howler.masterGain.disconnect();
+
+    // Reconnect masterGain: one branch to the AudioContext's default destination,
+    // and one branch through the splitter to the MediaStream destination.
+    Howler.masterGain.connect(audioCtx.destination);
+    Howler.masterGain.connect(splitter);
+    splitter.connect(streamDestination);
+
+    // Create a hidden HTML audio element to play the captured stream.
+    const audioElement = document.createElement('audio');
+    audioElement.setAttribute('playsinline', 'true'); // crucial for iOS playback
+    audioElement.srcObject = streamDestination.stream;
+    audioElement.style.display = 'none';
+    document.body.appendChild(audioElement);
+
+    // Attempt to start playback (must be triggered by a user gesture).
+    audioElement.play().catch((err: unknown) => {
+      console.error('Failed to play background stream:', err);
+    });
+
+    // Listen for visibility changes: if the document becomes visible and the AudioContext is suspended, resume it.
+    document.addEventListener('visibilitychange', () => {
+      if (
+        document.visibilityState === 'visible' &&
+        audioCtx.state === 'suspended'
+      ) {
+        audioCtx
+          .resume()
+          .catch((err: unknown) =>
+            console.error('Error resuming AudioContext:', err),
+          );
+      }
+    });
+
+    window.__howlerStreamPatched = true;
+  }
+}
+
+/**
+ * =========================================
+ */
+
 export function App() {
   const categories = useMemo(() => sounds.categories, []);
 
@@ -85,9 +157,23 @@ export function App() {
     return [...favorites, ...categories];
   }, [favoriteSounds, categories]);
 
+  useEffect(() => {
+    const handleUserInteraction = () => {
+      setupAudioStream();
+      document.removeEventListener('click', handleUserInteraction);
+    };
+
+    document.addEventListener('click', handleUserInteraction);
+
+    return () => {
+      document.removeEventListener('click', handleUserInteraction);
+    };
+  }, []);
+
   return (
     <SnackbarProvider>
       <StoreConsumer>
+        <MediaControls />
         <Container>
           <div id="app" />
           <Buttons />

src/components/binary.tsx

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+import { generateRandomBinaryString } from '@/helpers/binary';
+
+export function Binary() {
+  const [binary, setBinary] = useState('');
+
+  useEffect(() => {
+    setBinary(generateRandomBinaryString(1000));
+
+    setInterval(() => {
+      setBinary(generateRandomBinaryString(1000));
+    }, 200);
+  }, []);
+
+  return <span>{binary}</span>;
+}

src/components/buttons/play/play.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect } from 'react';
 import { BiPause, BiPlay } from 'react-icons/bi/index';
+import { useHotkeys } from 'react-hotkeys-hook';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 import { useSnackbar } from '@/contexts/snackbar';
 import { cn } from '@/helpers/styles';
 
@@ -28,17 +29,7 @@ export function PlayButton() {
     if (isPlaying && noSelected) pause();
   }, [isPlaying, pause, noSelected]);
 
-  useEffect(() => {
-    const listener = (e: KeyboardEvent) => {
-      if (e.shiftKey && e.key === ' ') {
-        handleToggle();
-      }
-    };
-
-    document.addEventListener('keydown', listener);
-
-    return () => document.removeEventListener('keydown', listener);
-  }, [handleToggle]);
+  useHotkeys('shift+space', handleToggle, {}, [handleToggle]);
 
   return (
     <button
@@ -48,14 +39,14 @@ export function PlayButton() {
     >
       {isPlaying ? (
         <>
-          <span>
+          <span aria-hidden="true">
             <BiPause />
           </span>{' '}
           Pause
         </>
       ) : (
         <>
-          <span>
+          <span aria-hidden="true">
             <BiPlay />
           </span>{' '}
           Play

src/components/buttons/unselect/unselect.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import { BiUndo, BiTrash } from 'react-icons/bi/index';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 import { Tooltip } from '@/components/tooltip';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';
 import { fade, mix, slideX } from '@/lib/motion';
 
@@ -28,17 +29,7 @@ export function UnselectButton() {
     else if (!noSelected) unselectAll(true);
   }, [hasHistory, noSelected, unselectAll, restoreHistory, locked]);
 
-  useEffect(() => {
-    const listener = (e: KeyboardEvent) => {
-      if (e.shiftKey && e.key === 'R') {
-        handleToggle();
-      }
-    };
-
-    document.addEventListener('keydown', listener);
-
-    return () => document.removeEventListener('keydown', listener);
-  }, [handleToggle]);
+  useHotkeys('shift+r', handleToggle, {}, [handleToggle]);
 
   return (
     <>

src/components/categories/categories.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence } from 'framer-motion';
 
-import { Category } from '@/components/category';
+import { Category } from './category';
 import { Donate } from './donate';
 
 import type { Categories } from '@/data/types';

src/components/categories/category/category.module.css

@@ -22,7 +22,10 @@
       width: 45px;
       height: 45px;
       font-size: var(--font-md);
-      background-color: var(--color-neutral-100);
+      background: linear-gradient(
+        var(--color-neutral-50),
+        var(--color-neutral-100)
+      );
       border: 1px solid var(--color-neutral-300);
       border-radius: 50%;
     }

src/components/categories/category/category.tsx

@@ -16,10 +16,12 @@ export function Category({
   title,
 }: CategoryProps) {
   return (
-    <div className={styles.category}>
+    <div className={styles.category} id={`category-${id}`}>
       <div className={styles.iconContainer}>
         <div className={styles.tail} />
-        <div className={styles.icon}>{icon}</div>
+        <div aria-hidden="true" className={styles.icon}>
+          {icon}
+        </div>
       </div>
 
       <div className={styles.title}>{title}</div>

src/components/categories/donate/donate.module.css

@@ -20,7 +20,10 @@
       width: 45px;
       height: 45px;
       font-size: var(--font-md);
-      background-color: var(--color-neutral-100);
+      background: linear-gradient(
+        var(--color-neutral-50),
+        var(--color-neutral-100)
+      );
       border: 1px solid var(--color-neutral-300);
       border-radius: 50%;
     }
@@ -31,6 +34,16 @@
     font-size: var(--font-lg);
     font-weight: 600;
     text-align: center;
+
+    & span {
+      background: linear-gradient(
+        135deg,
+        var(--color-foreground),
+        var(--color-foreground-subtle)
+      );
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
   }
 
   & .desc {

src/components/categories/donate/donate.tsx

@@ -9,12 +9,14 @@ export function Donate() {
     <div className={styles.donate}>
       <div className={styles.iconContainer}>
         <div className={styles.tail} />
-        <div className={styles.icon}>
+        <div aria-hidden="true" className={styles.icon}>
           <FaCoffee />
         </div>
       </div>
 
-      <div className={styles.title}>Support Me</div>
+      <div className={styles.title}>
+        <span>Support Me</span>
+      </div>
       <p className={styles.desc}>Help me keep Moodist ad-free.</p>
       <SpecialButton
         className={styles.button}

src/components/checkbox/checkbox.module.css

@@ -0,0 +1,23 @@
+.checkboxRoot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  background: var(--color-neutral-100);
+  border: 2px solid var(--color-neutral-300);
+  border-radius: 4px;
+  transition: 0.2s;
+}
+
+.checkboxRoot[data-state='checked'] {
+  background: var(--color-neutral-950);
+  border: 2px solid var(--color-neutral-950);
+}
+
+.checkboxIndicator {
+  font-size: var(--font-2xsm);
+  color: var(--color-neutral-50);
+  transform: translateY(2px);
+}

src/components/checkbox/checkbox.tsx

@@ -0,0 +1,38 @@
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { FaCheck } from 'react-icons/fa6/index';
+
+import styles from './checkbox.module.css';
+
+type CheckboxInputProps = {
+  checked?: boolean;
+  className?: string;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+};
+
+export function Checkbox({
+  checked,
+  className,
+  defaultChecked = false,
+  disabled = false,
+  onChange,
+}: CheckboxInputProps) {
+  const handleCheckedChange = (checked: boolean) => {
+    if (onChange) onChange(checked);
+  };
+
+  return (
+    <RadixCheckbox.Root
+      checked={checked}
+      className={`${styles.checkboxRoot} ${className}`}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      onCheckedChange={handleCheckedChange}
+    >
+      <RadixCheckbox.Indicator className={styles.checkboxIndicator}>
+        <FaCheck />
+      </RadixCheckbox.Indicator>
+    </RadixCheckbox.Root>
+  );
+}

src/components/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox';

src/components/cipher.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+
+interface CipherTextProps {
+  interval?: number;
+  text: string;
+}
+
+const chars = '-_~`!@#$%^&*()+=[]{}|;:,.<>?';
+
+export function CipherText({ interval = 50, text }: CipherTextProps) {
+  const [outputText, setOutputText] = useState('');
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (outputText !== text) {
+      timer = setInterval(() => {
+        if (outputText.length < text.length) {
+          setOutputText(prev => prev + text[prev.length]);
+        } else {
+          clearInterval(timer);
+        }
+      }, interval);
+    }
+
+    return () => clearInterval(timer);
+  }, [text, interval, outputText]);
+
+  useEffect(() => {
+    if (outputText === text) {
+      setTimeout(() => setOutputText(''), 6000);
+    }
+  }, [outputText, text]);
+
+  const remainder =
+    outputText.length < text.length
+      ? text
+          .slice(outputText.length)
+          .split('')
+          .map(() => chars[Math.floor(Math.random() * chars.length)])
+          .join('')
+      : '';
+
+  if (!isMounted) {
+    return <span>{text}</span>;
+  }
+
+  return (
+    <span className="text-white">
+      {outputText}
+      {remainder}
+    </span>
+  );
+}

src/components/hero.astro

@@ -2,6 +2,7 @@
 import { BsSoundwave } from 'react-icons/bs/index';
 
 import { Container } from './container';
+import { CipherText } from './cipher';
 
 import { count as soundCount } from '@/lib/sounds';
 
@@ -11,24 +12,25 @@ const count = soundCount();
 <div class="hero">
   <Container>
     <div class="wrapper">
+      <div class="pattern"></div>
       <img
         alt="Faded Moodist Logo"
+        aria-hidden="true"
         class="logo"
         height={45}
         src="/logo.svg"
         width={45}
       />
 
-      <div class="title">
-        <div class="left"></div>
-        <h2>Moodist</h2>
-        <div class="right"></div>
-      </div>
-
-      <h1 class="desc">Ambient sounds for focus and calm.</h1>
+      <h1 class="title">
+        Ambient Sounds<span class="line">For Focus and Calm</span>
+      </h1>
+      <h2 class="desc">
+        Free and <CipherText client:load text="Open-Source" />.
+      </h2>
 
       <p class="sounds">
-        <span class="icon">
+        <span aria-hidden="true" class="icon">
           <BsSoundwave />
         </span>
         <span>{count} Sounds</span>
@@ -43,54 +45,66 @@ const count = soundCount();
 
     .wrapper {
       position: relative;
-      padding: 100px 0 80px;
+      padding: 120px 0 80px;
+
+      & .pattern {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background-image: radial-gradient(
+          var(--color-neutral-500) 5%,
+          transparent 5%
+        );
+        background-position: top center;
+        background-size: 21px 21px;
+        opacity: 0.8;
+        mask-image: linear-gradient(#fff, transparent, transparent);
+      }
     }
 
     & .logo {
       display: block;
       width: 45px;
-      margin: 0 auto 12px;
+      margin: 0 auto 16px;
+      animation-name: logo;
+      animation-duration: 45s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
     }
 
     & .title {
-      display: flex;
-      column-gap: 15px;
-      align-items: center;
+      font-family: var(--font-display);
+      font-size: var(--font-xlg);
+      font-weight: 600;
+      line-height: 1;
 
-      & div {
-        flex-grow: 1;
-        height: 1px;
+      /* & .gradient {
+        background: linear-gradient(
+          135deg,
+          var(--color-foreground),
+          var(--color-foreground-subtle)
+        );
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      } */
 
-        &.left {
-          background: linear-gradient(
-            90deg,
-            transparent,
-            transparent,
-            var(--color-neutral-200),
-            var(--color-neutral-300)
-          );
-        }
-
-        &.right {
-          background: linear-gradient(
-            90deg,
-            var(--color-neutral-300),
-            var(--color-neutral-200),
-            transparent,
-            transparent
-          );
-        }
-      }
-
-      & h2 {
-        font-family: var(--font-display);
-        font-size: var(--font-2xlg);
-        font-weight: 600;
+      & .line {
+        display: block;
+        margin-top: 2px;
+        background: linear-gradient(
+          var(--color-foreground-subtler),
+          var(--color-foreground-subtle)
+        );
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
       }
     }
 
     & .desc {
-      margin-top: 5px;
+      margin-top: 12px;
       line-height: 1.6;
       color: var(--color-foreground-subtle);
     }
@@ -139,4 +153,14 @@ const count = soundCount();
       }
     }
   }
+
+  @keyframes logo {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 </style>

src/components/media-controls/index.ts

@@ -0,0 +1 @@
+export { MediaControls } from './media-controls';

src/components/media-controls/media-controls.tsx

@@ -0,0 +1,20 @@
+import { MediaSessionTrack } from './media-session-track';
+import { useEffect, useState } from 'react';
+import { useSSR } from '@/hooks/use-ssr';
+
+export function MediaControls() {
+  const [mediaControlsEnabled, setMediaControlsEnabled] = useState(false);
+  const { isBrowser } = useSSR();
+
+  useEffect(() => {
+    if (!isBrowser) return;
+
+    setMediaControlsEnabled('mediaSession' in navigator);
+  }, [isBrowser]);
+
+  if (!mediaControlsEnabled) {
+    return null;
+  }
+
+  return <MediaSessionTrack />;
+}

src/components/media-controls/media-session-track.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { getSilenceDataURL } from '@/helpers/sound';
+import { BrowserDetect } from '@/helpers/browser-detect';
+
+import { useSoundStore } from '@/stores/sound';
+
+import { useSSR } from '@/hooks/use-ssr';
+import { useDarkTheme } from '@/hooks/use-dark-theme';
+
+const metadata: MediaMetadataInit = {
+  artist: 'Moodist',
+  title: 'Ambient Sounds for Focus and Calm',
+};
+
+export function MediaSessionTrack() {
+  const { isBrowser } = useSSR();
+  const isDarkTheme = useDarkTheme();
+  const [isGenerated, setIsGenerated] = useState(false);
+  const isPlaying = useSoundStore(state => state.isPlaying);
+  const play = useSoundStore(state => state.play);
+  const pause = useSoundStore(state => state.pause);
+  const masterAudioSoundRef = useRef<HTMLAudioElement>(null);
+  const artworkURL = isDarkTheme ? '/logo-dark.png' : '/logo-light.png';
+
+  const generateSilence = useCallback(async () => {
+    if (!masterAudioSoundRef.current) return;
+    masterAudioSoundRef.current.src = await getSilenceDataURL();
+    setIsGenerated(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isBrowser || !isPlaying || !isGenerated) return;
+
+    navigator.mediaSession.metadata = new MediaMetadata({
+      ...metadata,
+      artwork: [
+        {
+          sizes: '200x200',
+          src: artworkURL,
+          type: 'image/png',
+        },
+      ],
+    });
+  }, [artworkURL, isBrowser, isDarkTheme, isGenerated, isPlaying]);
+
+  useEffect(() => {
+    generateSilence();
+  }, [generateSilence]);
+
+  const startMasterAudio = useCallback(async () => {
+    if (!masterAudioSoundRef.current) return;
+    if (!masterAudioSoundRef.current.paused) return;
+
+    try {
+      await masterAudioSoundRef.current.play();
+
+      navigator.mediaSession.playbackState = 'playing';
+      navigator.mediaSession.setActionHandler('play', play);
+      navigator.mediaSession.setActionHandler('pause', pause);
+    } catch {
+      // Do nothing
+    }
+  }, [pause, play]);
+
+  const stopMasterAudio = useCallback(() => {
+    if (!masterAudioSoundRef.current) return;
+    /**
+     * Otherwise in Safari we cannot play the audio again
+     * through the media session controls
+     */
+    if (BrowserDetect.isSafari()) {
+      masterAudioSoundRef.current.load();
+    } else {
+      masterAudioSoundRef.current.pause();
+    }
+    navigator.mediaSession.playbackState = 'paused';
+  }, []);
+
+  useEffect(() => {
+    if (!isGenerated) return;
+    if (!masterAudioSoundRef.current) return;
+
+    if (isPlaying) {
+      startMasterAudio();
+    } else {
+      stopMasterAudio();
+    }
+  }, [isGenerated, isPlaying, startMasterAudio, stopMasterAudio]);
+
+  useEffect(() => {
+    const masterAudioSound = masterAudioSoundRef.current;
+
+    return () => {
+      masterAudioSound?.pause();
+
+      navigator.mediaSession.setActionHandler('play', null);
+      navigator.mediaSession.setActionHandler('pause', null);
+      navigator.mediaSession.playbackState = 'none';
+    };
+  }, []);
+
+  return <audio id="media-session-track" loop ref={masterAudioSoundRef} />;
+}

src/components/modal/modal.tsx

@@ -14,14 +14,18 @@ interface ModalProps {
   children: React.ReactNode;
   lockBody?: boolean;
   onClose: () => void;
+  persist?: boolean;
   show: boolean;
   wide?: boolean;
 }
 
+const TRANSITION_DURATION = 300;
+
 export function Modal({
   children,
   lockBody = true,
   onClose,
+  persist = false,
   show,
   wide,
 }: ModalProps) {
@@ -32,9 +36,12 @@ export function Modal({
 
   useEffect(() => {
     if (show && lockBody) {
-      document.body.style.overflow = 'hidden';
+      document.body.style.overflowY = 'hidden';
     } else if (lockBody) {
-      document.body.style.overflow = 'auto';
+      // Wait for transition to finish before allowing scrollbar to return
+      setTimeout(() => {
+        document.body.style.overflowY = 'auto';
+      }, TRANSITION_DURATION);
     }
   }, [show, lockBody]);
 
@@ -50,40 +57,51 @@ export function Modal({
     return () => document.removeEventListener('keydown', keyListener);
   }, [onClose, show]);
 
+  const animationProps = persist
+    ? {
+        animate: show ? 'show' : 'hidden',
+      }
+    : {
+        animate: 'show',
+        exit: 'hidden',
+        initial: 'hidden',
+      };
+
+  const content = (
+    <FocusTrap active={show}>
+      <div>
+        <motion.div
+          {...animationProps}
+          className={styles.overlay}
+          transition={{ duration: TRANSITION_DURATION / 1000 }}
+          variants={variants.overlay}
+          onClick={onClose}
+          onKeyDown={onClose}
+        />
+        <div className={styles.modal}>
+          <motion.div
+            {...animationProps}
+            className={cn(styles.content, wide && styles.wide)}
+            transition={{ duration: TRANSITION_DURATION / 1000 }}
+            variants={variants.modal}
+          >
+            <button className={styles.close} onClick={onClose}>
+              <IoClose />
+            </button>
+            {children}
+          </motion.div>
+        </div>
+      </div>
+    </FocusTrap>
+  );
+
   return (
     <Portal>
-      <AnimatePresence>
-        {show && (
-          <FocusTrap>
-            <div>
-              <motion.div
-                animate="show"
-                className={styles.overlay}
-                exit="hidden"
-                initial="hidden"
-                variants={variants.overlay}
-                onClick={onClose}
-                onKeyDown={onClose}
-              />
-              <div className={styles.modal}>
-                <motion.div
-                  animate="show"
-                  className={cn(styles.content, wide && styles.wide)}
-                  exit="hidden"
-                  initial="hidden"
-                  variants={variants.modal}
-                >
-                  <button className={styles.close} onClick={onClose}>
-                    <IoClose />
-                  </button>
-
-                  {children}
-                </motion.div>
-              </div>
-            </div>
-          </FocusTrap>
-        )}
-      </AnimatePresence>
+      {persist ? (
+        <div style={{ display: show ? 'block' : 'none' }}>{content}</div>
+      ) : (
+        <AnimatePresence>{show && content}</AnimatePresence>
+      )}
     </Portal>
   );
 }

src/components/modals/binaural/binaural.module.css

@@ -0,0 +1,76 @@
+.header {
+  margin-bottom: 16px;
+
+  & .title {
+    margin-bottom: 4px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+  }
+}
+
+.fieldWrapper {
+  margin-bottom: 12px;
+
+  & label {
+    display: block;
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+
+    & input,
+    select {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: 45px;
+      padding: 0 8px;
+      margin-top: 4px;
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 8px;
+      outline: none;
+    }
+
+    & .volume {
+      margin-top: 4px;
+    }
+  }
+}
+
+.buttons {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  margin-top: 12px;
+
+  & button {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-weight: 500;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: none;
+    border-radius: 8px;
+    outline: none;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+
+    &.primary {
+      color: var(--color-neutral-50);
+      background-color: var(--color-neutral-950);
+    }
+  }
+}

src/components/modals/binaural/binaural.tsx

@@ -0,0 +1,223 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+
+import { Modal } from '@/components/modal';
+import { Slider } from '@/components/slider';
+
+import styles from './binaural.module.css';
+
+interface BinauralProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+interface Preset {
+  baseFrequency: number;
+  beatFrequency: number;
+  name: string;
+}
+
+const presets: Preset[] = [
+  { baseFrequency: 100, beatFrequency: 2, name: 'Delta (Deep Sleep) 2 Hz' },
+  { baseFrequency: 100, beatFrequency: 5, name: 'Theta (Meditation) 5 Hz' },
+  { baseFrequency: 100, beatFrequency: 10, name: 'Alpha (Relaxation) 10 Hz' },
+  { baseFrequency: 100, beatFrequency: 20, name: 'Beta (Focus) 20 Hz' },
+  { baseFrequency: 100, beatFrequency: 40, name: 'Gamma (Cognition) 40 Hz' },
+  { baseFrequency: 440, beatFrequency: 10, name: 'Custom' },
+];
+
+export function BinauralModal({ onClose, show }: BinauralProps) {
+  const [baseFrequency, setBaseFrequency] = useState<number>(440); // Default to A4 note
+  const [beatFrequency, setBeatFrequency] = useState<number>(10); // Default to 10 Hz difference
+  const [volume, setVolume] = useState<number>(0.5); // Default volume at 50%
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [selectedPreset, setSelectedPreset] = useState<string>('Custom');
+
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const leftOscillatorRef = useRef<OscillatorNode | null>(null);
+  const rightOscillatorRef = useRef<OscillatorNode | null>(null);
+  const gainNodeRef = useRef<GainNode | null>(null);
+
+  const startSound = () => {
+    if (isPlaying) return;
+
+    // Initialize the AudioContext
+    audioContextRef.current = new window.AudioContext();
+    const audioContext = audioContextRef.current;
+
+    if (!audioContext) return;
+
+    // Create a gain node for volume control
+    gainNodeRef.current = audioContext.createGain();
+    gainNodeRef.current.gain.value = volume; // Set volume based on state
+
+    // Create oscillators for left and right channels
+    leftOscillatorRef.current = audioContext.createOscillator();
+    rightOscillatorRef.current = audioContext.createOscillator();
+
+    if (
+      !leftOscillatorRef.current ||
+      !rightOscillatorRef.current ||
+      !gainNodeRef.current
+    )
+      return;
+
+    leftOscillatorRef.current.frequency.value =
+      baseFrequency - beatFrequency / 2;
+    rightOscillatorRef.current.frequency.value =
+      baseFrequency + beatFrequency / 2;
+
+    // Pan oscillators to left and right
+    const leftPanner = audioContext.createStereoPanner();
+    leftPanner.pan.value = -1;
+
+    const rightPanner = audioContext.createStereoPanner();
+    rightPanner.pan.value = 1;
+
+    // Connect nodes
+    leftOscillatorRef.current.connect(leftPanner).connect(gainNodeRef.current);
+    rightOscillatorRef.current
+      .connect(rightPanner)
+      .connect(gainNodeRef.current);
+    gainNodeRef.current.connect(audioContext.destination);
+
+    // Start oscillators
+    leftOscillatorRef.current.start();
+    rightOscillatorRef.current.start();
+
+    setIsPlaying(true);
+  };
+
+  const stopSound = useCallback(() => {
+    if (!isPlaying) return;
+
+    leftOscillatorRef.current?.stop();
+    rightOscillatorRef.current?.stop();
+    audioContextRef.current?.close();
+
+    setIsPlaying(false);
+  }, [isPlaying]);
+
+  useEffect(() => {
+    // Update gain node when volume changes
+    if (gainNodeRef.current) {
+      gainNodeRef.current.gain.value = volume;
+    }
+  }, [volume]);
+
+  useEffect(() => {
+    // Cleanup when component unmounts
+    return () => {
+      if (isPlaying) {
+        stopSound();
+      }
+    };
+  }, [isPlaying, stopSound]);
+
+  useEffect(() => {
+    // Update frequencies when a preset is selected
+    if (selectedPreset !== 'Custom') {
+      const preset = presets.find(p => p.name === selectedPreset);
+      if (preset) {
+        setBaseFrequency(preset.baseFrequency);
+        setBeatFrequency(preset.beatFrequency);
+      }
+    }
+  }, [selectedPreset]);
+
+  const handlePresetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = e.target.value;
+    setSelectedPreset(selected);
+
+    if (selected === 'Custom') {
+      // Allow user to input custom frequencies
+      return;
+    }
+
+    const preset = presets.find(p => p.name === selected);
+    if (preset) {
+      setBaseFrequency(preset.baseFrequency);
+      setBeatFrequency(preset.beatFrequency);
+    }
+  };
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Binaural Beat</h2>
+        <p className={styles.desc}>Binaural beat generator.</p>
+      </header>
+
+      <div className={styles.fieldWrapper}>
+        <label>
+          Presets:
+          <select value={selectedPreset} onChange={handlePresetChange}>
+            {presets.map(preset => (
+              <option key={preset.name} value={preset.name}>
+                {preset.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      {selectedPreset === 'Custom' && (
+        <>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Base Frequency (Hz):
+              <input
+                max="1500"
+                min="20"
+                step="0.1"
+                type="number"
+                value={baseFrequency}
+                onChange={e =>
+                  setBaseFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Beat Frequency (Hz):
+              <input
+                max="40"
+                min="0.1"
+                step="0.1"
+                type="number"
+                value={beatFrequency}
+                onChange={e =>
+                  setBeatFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+        </>
+      )}
+      <div className={styles.fieldWrapper}>
+        <label>
+          Volume:
+          <Slider
+            className={styles.volume}
+            max={1}
+            min={0}
+            step={0.01}
+            value={volume}
+            onChange={value => setVolume(value)}
+          />
+        </label>
+      </div>
+      <div className={styles.buttons}>
+        <button
+          className={styles.primary}
+          disabled={isPlaying}
+          onClick={startSound}
+        >
+          Start
+        </button>
+        <button disabled={!isPlaying} onClick={stopSound}>
+          Stop
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/modals/binaural/index.ts

@@ -0,0 +1 @@
+export { BinauralModal } from './binaural';

src/components/modals/breathing/breathing.module.css

@@ -0,0 +1 @@
+/* WIP */

src/components/modals/breathing/breathing.tsx

@@ -0,0 +1,18 @@
+import { Modal } from '@/components/modal';
+import { Exercise } from './exercise';
+
+import styles from './breathing.module.css';
+
+interface TimerProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function BreathingExerciseModal({ onClose, show }: TimerProps) {
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h2 className={styles.title}>Breathing Exercise</h2>
+      <Exercise />
+    </Modal>
+  );
+}

src/components/modals/breathing/exercise/exercise.module.css

@@ -0,0 +1,91 @@
+.exercise {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 75px 0;
+  margin-top: 12px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  & .timer {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    padding: 4px 12px;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+    background: linear-gradient(
+      var(--color-neutral-100),
+      var(--color-neutral-50)
+    );
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 4px;
+  }
+
+  & .phase {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+  }
+
+  & .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: -1;
+    height: 55%;
+    aspect-ratio: 1 / 1;
+    background-image: radial-gradient(
+      var(--color-neutral-50),
+      var(--color-neutral-100)
+    );
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.selectWrapper {
+  position: relative;
+  width: 100%;
+  height: 45px;
+  padding: 0 12px;
+  margin-top: 8px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  &::before {
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-300),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+
+  & .selectBox {
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    font-size: var(--font-sm);
+    color: var(--color-foreground);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    & option {
+      color: var(--color-neutral-50);
+    }
+  }
+}

src/components/modals/breathing/exercise/exercise.tsx

@@ -0,0 +1,126 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { motion } from 'framer-motion';
+
+import { padNumber } from '@/helpers/number';
+
+import styles from './exercise.module.css';
+
+type Exercise = 'Box Breathing' | 'Resonant Breathing' | '4-7-8 Breathing';
+type Phase = 'inhale' | 'exhale' | 'holdInhale' | 'holdExhale';
+
+const EXERCISE_PHASES: Record<Exercise, Phase[]> = {
+  '4-7-8 Breathing': ['inhale', 'holdInhale', 'exhale'],
+  'Box Breathing': ['inhale', 'holdInhale', 'exhale', 'holdExhale'],
+  'Resonant Breathing': ['inhale', 'exhale'],
+};
+
+const EXERCISE_DURATIONS: Record<Exercise, Partial<Record<Phase, number>>> = {
+  '4-7-8 Breathing': { exhale: 8, holdInhale: 7, inhale: 4 },
+  'Box Breathing': { exhale: 4, holdExhale: 4, holdInhale: 4, inhale: 4 },
+  'Resonant Breathing': { exhale: 5, inhale: 5 }, // No holdExhale
+};
+
+const PHASE_LABELS: Record<Phase, string> = {
+  exhale: 'Exhale',
+  holdExhale: 'Hold',
+  holdInhale: 'Hold',
+  inhale: 'Inhale',
+};
+
+export function Exercise() {
+  const [selectedExercise, setSelectedExercise] =
+    useState<Exercise>('4-7-8 Breathing');
+  const [phaseIndex, setPhaseIndex] = useState(0);
+
+  const phases = useMemo(
+    () => EXERCISE_PHASES[selectedExercise],
+    [selectedExercise],
+  );
+  const durations = useMemo(
+    () => EXERCISE_DURATIONS[selectedExercise],
+    [selectedExercise],
+  );
+
+  const currentPhase = phases[phaseIndex];
+
+  const animationVariants = useMemo(
+    () => ({
+      exhale: {
+        transform: 'translate(-50%, -50%) scale(1)',
+        transition: { duration: durations.exhale },
+      },
+      holdExhale: {
+        transform: 'translate(-50%, -50%) scale(1)',
+        transition: { duration: durations.holdExhale },
+      },
+      holdInhale: {
+        transform: 'translate(-50%, -50%) scale(1.5)',
+        transition: { duration: durations.holdInhale },
+      },
+      inhale: {
+        transform: 'translate(-50%, -50%) scale(1.5)',
+        transition: { duration: durations.inhale },
+      },
+    }),
+    [durations],
+  );
+
+  const resetExercise = useCallback(() => {
+    setPhaseIndex(0);
+  }, []);
+
+  const updatePhase = useCallback(() => {
+    setPhaseIndex(prevIndex => (prevIndex + 1) % phases.length);
+  }, [phases.length]);
+
+  useEffect(() => {
+    resetExercise();
+  }, [selectedExercise, resetExercise]);
+
+  useEffect(() => {
+    const intervalDuration = (durations[currentPhase] || 4) * 1000;
+    const interval = setInterval(updatePhase, intervalDuration);
+
+    return () => clearInterval(interval);
+  }, [currentPhase, durations, updatePhase]);
+
+  const [timer, setTimer] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTimer(prev => prev + 1), 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <div className={styles.exercise}>
+        <div className={styles.timer}>
+          {padNumber(Math.floor(timer / 60))}:{padNumber(timer % 60)}
+        </div>
+
+        <motion.div
+          animate={currentPhase}
+          className={styles.circle}
+          key={selectedExercise}
+          variants={animationVariants}
+        />
+        <p className={styles.phase}>{PHASE_LABELS[currentPhase]}</p>
+      </div>
+
+      <div className={styles.selectWrapper}>
+        <select
+          className={styles.selectBox}
+          value={selectedExercise}
+          onChange={e => setSelectedExercise(e.target.value as Exercise)}
+        >
+          {Object.keys(EXERCISE_PHASES).map(exercise => (
+            <option key={exercise} value={exercise}>
+              {exercise}
+            </option>
+          ))}
+        </select>
+      </div>
+    </>
+  );
+}

src/components/modals/breathing/exercise/index.ts

@@ -0,0 +1 @@
+export { Exercise } from './exercise';

src/components/modals/breathing/index.ts

@@ -0,0 +1 @@
+export { BreathingExerciseModal } from './breathing';

src/components/modals/isochronic/index.ts

@@ -0,0 +1 @@
+export { IsochronicModal } from './isochronic';

src/components/modals/isochronic/isochornic.module.css

@@ -0,0 +1,76 @@
+.header {
+  margin-bottom: 16px;
+
+  & .title {
+    margin-bottom: 4px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+  }
+}
+
+.fieldWrapper {
+  margin-bottom: 12px;
+
+  & label {
+    display: block;
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+
+    & input,
+    select {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: 45px;
+      padding: 0 8px;
+      margin-top: 4px;
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 8px;
+      outline: none;
+    }
+
+    & .volume {
+      margin-top: 4px;
+    }
+  }
+}
+
+.buttons {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  margin-top: 12px;
+
+  & button {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-weight: 500;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: none;
+    border-radius: 8px;
+    outline: none;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+
+    &.primary {
+      color: var(--color-neutral-50);
+      background-color: var(--color-neutral-950);
+    }
+  }
+}

src/components/modals/isochronic/isochronic.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+
+import { Modal } from '@/components/modal';
+import { Slider } from '@/components/slider';
+
+import styles from './isochornic.module.css';
+
+interface IsochronicProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+interface Preset {
+  baseFrequency: number;
+  beatFrequency: number;
+  name: string;
+}
+
+const presets: Preset[] = [
+  { baseFrequency: 100, beatFrequency: 2, name: 'Delta (Deep Sleep) 2 Hz' },
+  { baseFrequency: 100, beatFrequency: 5, name: 'Theta (Meditation) 5 Hz' },
+  { baseFrequency: 100, beatFrequency: 10, name: 'Alpha (Relaxation) 10 Hz' },
+  { baseFrequency: 100, beatFrequency: 20, name: 'Beta (Focus) 20 Hz' },
+  { baseFrequency: 100, beatFrequency: 40, name: 'Gamma (Cognition) 40 Hz' },
+  { baseFrequency: 440, beatFrequency: 10, name: 'Custom' },
+];
+
+export function IsochronicModal({ onClose, show }: IsochronicProps) {
+  const [baseFrequency, setBaseFrequency] = useState<number>(440); // Default A4 note
+  const [beatFrequency, setBeatFrequency] = useState<number>(10); // Default 10 Hz beat
+  const [volume, setVolume] = useState<number>(0.5); // Default volume at 50%
+  const [waveform] = useState<OscillatorType>('sine'); // Default waveform
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [selectedPreset, setSelectedPreset] = useState<string>('Custom');
+
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const oscillatorRef = useRef<OscillatorNode | null>(null);
+  const gainNodeRef = useRef<GainNode | null>(null);
+  const beatGainRef = useRef<GainNode | null>(null);
+  const modulatorRef = useRef<OscillatorNode | null>(null);
+
+  const startSound = () => {
+    if (isPlaying) return;
+
+    audioContextRef.current = new window.AudioContext();
+    const audioContext = audioContextRef.current;
+
+    if (!audioContext) return;
+
+    // Main gain node for volume control
+    gainNodeRef.current = audioContext.createGain();
+    gainNodeRef.current.gain.value = volume;
+
+    // Oscillator for the base tone
+    oscillatorRef.current = audioContext.createOscillator();
+    oscillatorRef.current.frequency.value = baseFrequency;
+    oscillatorRef.current.type = waveform;
+
+    // Gain node to create isochronic beats
+    beatGainRef.current = audioContext.createGain();
+    beatGainRef.current.gain.value = 0; // Start with silence
+
+    // Oscillator for modulation
+    modulatorRef.current = audioContext.createOscillator();
+    modulatorRef.current.frequency.value = beatFrequency;
+    modulatorRef.current.type = 'square'; // Square wave for on/off effect
+
+    // Modulator gain to adjust modulation depth
+    const modulatorGain = audioContext.createGain();
+    modulatorGain.gain.value = 0.5; // Modulation depth
+
+    // Connect modulator to the beat gain node
+    modulatorRef.current
+      .connect(modulatorGain)
+      .connect(beatGainRef.current.gain);
+
+    // Connect oscillator through beat gain and main gain to destination
+    oscillatorRef.current
+      .connect(beatGainRef.current)
+      .connect(gainNodeRef.current)
+      .connect(audioContext.destination);
+
+    // Start oscillators
+    oscillatorRef.current.start();
+    modulatorRef.current.start();
+
+    setIsPlaying(true);
+  };
+
+  const stopSound = useCallback(() => {
+    if (!isPlaying) return;
+
+    oscillatorRef.current?.stop();
+    modulatorRef.current?.stop();
+    audioContextRef.current?.close();
+
+    setIsPlaying(false);
+  }, [isPlaying]);
+
+  useEffect(() => {
+    // Update gain when volume changes
+    if (gainNodeRef.current) {
+      gainNodeRef.current.gain.value = volume;
+    }
+  }, [volume]);
+
+  useEffect(() => {
+    // Update base frequency when it changes
+    if (oscillatorRef.current) {
+      oscillatorRef.current.frequency.value = baseFrequency;
+    }
+  }, [baseFrequency]);
+
+  useEffect(() => {
+    // Update beat frequency when it changes
+    if (modulatorRef.current) {
+      modulatorRef.current.frequency.value = beatFrequency;
+    }
+  }, [beatFrequency]);
+
+  useEffect(() => {
+    // Update waveform when it changes
+    if (oscillatorRef.current) {
+      oscillatorRef.current.type = waveform;
+    }
+  }, [waveform]);
+
+  useEffect(() => {
+    // Cleanup when component unmounts
+    return () => {
+      if (isPlaying) {
+        stopSound();
+      }
+    };
+  }, [isPlaying, stopSound]);
+
+  useEffect(() => {
+    // Update frequencies when a preset is selected
+    if (selectedPreset !== 'Custom') {
+      const preset = presets.find(p => p.name === selectedPreset);
+      if (preset) {
+        setBaseFrequency(preset.baseFrequency);
+        setBeatFrequency(preset.beatFrequency);
+      }
+    }
+  }, [selectedPreset]);
+
+  const handlePresetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = e.target.value;
+    setSelectedPreset(selected);
+
+    if (selected === 'Custom') {
+      // Allow user to input custom frequencies
+      return;
+    }
+
+    const preset = presets.find(p => p.name === selected);
+    if (preset) {
+      setBaseFrequency(preset.baseFrequency);
+      setBeatFrequency(preset.beatFrequency);
+    }
+  };
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Isochronic Tone</h2>
+        <p className={styles.desc}>Isochronic tone generator.</p>
+      </header>
+
+      <div className={styles.fieldWrapper}>
+        <label>
+          Presets:
+          <select value={selectedPreset} onChange={handlePresetChange}>
+            {presets.map(preset => (
+              <option key={preset.name} value={preset.name}>
+                {preset.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      {selectedPreset === 'Custom' && (
+        <>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Base Frequency (Hz):
+              <input
+                max="2000"
+                min="20"
+                step="0.1"
+                type="number"
+                value={baseFrequency}
+                onChange={e =>
+                  setBaseFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Tone Frequency (Hz):
+              <input
+                max="40"
+                min="0.1"
+                step="0.1"
+                type="number"
+                value={beatFrequency}
+                onChange={e =>
+                  setBeatFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+          {/* <div className={styles.fieldWrapper}>
+            <label>
+              Waveform:
+              <select
+                value={waveform}
+                onChange={e => setWaveform(e.target.value as OscillatorType)}
+              >
+                <option value="sine">Sine</option>
+                <option value="square">Square</option>
+                <option value="sawtooth">Sawtooth</option>
+                <option value="triangle">Triangle</option>
+              </select>
+            </label>
+          </div> */}
+        </>
+      )}
+      <div className={styles.fieldWrapper}>
+        <label>
+          Volume:
+          <Slider
+            className={styles.volume}
+            max={1}
+            min={0}
+            step={0.01}
+            value={volume}
+            onChange={value => setVolume(value)}
+          />
+        </label>
+      </div>
+      <div className={styles.buttons}>
+        <button
+          className={styles.primary}
+          disabled={isPlaying}
+          onClick={startSound}
+        >
+          Start
+        </button>
+        <button disabled={!isPlaying} onClick={stopSound}>
+          Stop
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/modals/presets/list/list.tsx

@@ -2,7 +2,8 @@ import { FaPlay, FaRegTrashAlt } from 'react-icons/fa/index';
 
 import styles from './list.module.css';
 
-import { usePresetStore, useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
+import { usePresetStore } from '@/stores/preset';
 
 interface ListProps {
   close: () => void;
@@ -25,15 +26,15 @@ export function List({ close }: ListProps) {
         <p className={styles.empty}>You don&apos;t have any presets yet.</p>
       )}
 
-      {presets.map((preset, index) => (
-        <div className={styles.preset} key={index}>
+      {presets.map(preset => (
+        <div className={styles.preset} key={preset.id}>
           <input
             placeholder="Untitled"
             type="text"
             value={preset.label}
-            onChange={e => changeName(index, e.target.value)}
+            onChange={e => changeName(preset.id, e.target.value)}
           />
-          <button onClick={() => deletePreset(index)}>
+          <button onClick={() => deletePreset(preset.id)}>
             <FaRegTrashAlt />
           </button>
           <button

src/components/modals/presets/new/new.tsx

@@ -1,7 +1,8 @@
 import { useState, type FormEvent } from 'react';
 
 import { cn } from '@/helpers/styles';
-import { useSoundStore, usePresetStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
+import { usePresetStore } from '@/stores/preset';
 
 import styles from './new.module.css';
 

src/components/modals/share-link/share-link.tsx

@@ -4,7 +4,7 @@ import { IoCopyOutline, IoCheckmark } from 'react-icons/io5/index';
 import { Modal } from '@/components/modal';
 
 import { useCopy } from '@/hooks/use-copy';
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 
 import styles from './share-link.module.css';
 

src/components/modals/shared/shared.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import { Modal } from '@/components/modal';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 import { useSnackbar } from '@/contexts/snackbar';
 import { useCloseListener } from '@/hooks/use-close-listener';
 import { cn } from '@/helpers/styles';

src/components/modals/shortcuts/shortcuts.module.css

@@ -18,7 +18,7 @@
   justify-content: space-between;
 
   & .label {
-    font-weight: 500;
+    font-size: var(--font-sm);
     color: var(--color-foreground-subtle);
   }
 

src/components/modals/shortcuts/shortcuts.tsx

@@ -21,17 +21,29 @@ export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) {
       keys: ['Shift', 'S'],
       label: 'Share Sounds',
     },
+    {
+      keys: ['Shift', 'Alt', 'T'],
+      label: 'Sleep Timer',
+    },
+    {
+      keys: ['Shift', 'C'],
+      label: 'Countdown Timer',
+    },
+    {
+      keys: ['Shift', 'P'],
+      label: 'Pomodoro',
+    },
     {
       keys: ['Shift', 'N'],
       label: 'Notepad',
     },
     {
-      keys: ['Shift', 'P'],
-      label: 'Pomodoro Timer',
+      keys: ['Shift', 'T'],
+      label: 'Todo Checklist',
     },
     {
-      keys: ['Shift', 'T'],
-      label: 'Sleep Timer',
+      keys: ['Shift', 'B'],
+      label: 'Breathing Exercise',
     },
     {
       keys: ['Shift', 'Space'],

src/components/modals/sleep-timer/sleep-timer.module.css

@@ -1,5 +1,5 @@
 .header {
-  margin-bottom: 16px;
+  margin-bottom: 28px;
 
   & .title {
     margin-bottom: 8px;
@@ -28,6 +28,7 @@
       & .label {
         display: block;
         margin-bottom: 4px;
+        font-size: var(--font-sm);
         font-weight: 500;
       }
 
@@ -42,6 +43,11 @@
         border: 1px solid var(--color-neutral-200);
         border-radius: 4px;
         outline: none;
+
+        &:focus-visible {
+          outline: 2px solid var(--color-neutral-400);
+          outline-offset: 2px;
+        }
       }
     }
   }

src/components/modals/sleep-timer/sleep-timer.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState, useRef, useMemo } from 'react';
 
 import { Modal } from '@/components/modal';
-import { Timer } from '@/components/timer';
+import { Timer } from './timer';
 import { dispatch } from '@/lib/event';
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';
 import { FADE_OUT } from '@/constants/events';
+import { useSleepTimerStore } from '@/stores/sleep-timer';
 
 import styles from './sleep-timer.module.css';
 
@@ -15,8 +16,13 @@ interface SleepTimerModalProps {
 }
 
 export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
+  const setActive = useSleepTimerStore(state => state.set);
+  const noSelected = useSoundStore(state => state.noSelected());
+
   const [running, setRunning] = useState(false);
 
+  useEffect(() => setActive(running), [running, setActive]);
+
   const [hours, setHours] = useState<string>('0');
   const [minutes, setMinutes] = useState<string>('10');
 
@@ -42,6 +48,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
 
   const handleStart = () => {
     if (timerId.current) clearInterval(timerId.current);
+    if (noSelected) return;
     if (!isPlaying) play();
 
     if (totalSeconds > 0) {
@@ -58,7 +65,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
   useEffect(() => {
     if (timeLeft === 0) {
       setRunning(false);
-      // pause();
+
       dispatch(FADE_OUT, { duration: 1000 });
 
       setTimeSpent(0);
@@ -102,7 +109,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
             )}
           </div>
 
-          {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
+          {running ? <Timer reverse={timeSpent} timer={timeLeft} /> : null}
 
           <div className={styles.buttons}>
             {running && (

src/components/modals/sleep-timer/timer/reverse/index.ts

@@ -0,0 +1 @@
+export { Reverse } from './reverse';

src/components/modals/sleep-timer/timer/reverse/reverse.module.css

@@ -0,0 +1,30 @@
+.reverse {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 4px 8px;
+  font-size: var(--font-2xsm);
+  color: var(--color-foreground-subtle);
+  background: linear-gradient(
+    var(--color-neutral-50),
+    var(--color-neutral-100)
+  );
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+
+  &::after {
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 75%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-300),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+}

src/components/modals/sleep-timer/timer/reverse/reverse.tsx

@@ -0,0 +1,27 @@
+import { padNumber } from '@/helpers/number';
+
+import styles from './reverse.module.css';
+
+interface ReverseProps {
+  time: number;
+}
+
+export function Reverse({ time }: ReverseProps) {
+  let hours = Math.floor(time / 3600);
+  let minutes = Math.floor((time % 3600) / 60);
+  let seconds = time % 60;
+
+  hours = isNaN(hours) ? 0 : hours;
+  minutes = isNaN(minutes) ? 0 : minutes;
+  seconds = isNaN(seconds) ? 0 : seconds;
+
+  const formattedHours = padNumber(hours);
+  const formattedMinutes = padNumber(minutes);
+  const formattedSeconds = padNumber(seconds);
+
+  return (
+    <div className={styles.reverse}>
+      - {formattedHours}:{formattedMinutes}:{formattedSeconds}
+    </div>
+  );
+}

src/components/modals/sleep-timer/timer/timer.module.css

@@ -0,0 +1,29 @@
+.timer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 48px 0;
+  font-size: var(--font-xlg);
+  font-weight: 500;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 12px;
+
+  &::after {
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 75%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-400),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+}

src/components/modals/sleep-timer/timer/timer.tsx

@@ -1,13 +1,15 @@
+import { Reverse } from './reverse';
+
 import { padNumber } from '@/helpers/number';
 
 import styles from './timer.module.css';
 
 interface TimerProps {
-  displayHours?: boolean;
+  reverse: number;
   timer: number;
 }
 
-export function Timer({ displayHours = false, timer }: TimerProps) {
+export function Timer({ reverse, timer }: TimerProps) {
   let hours = Math.floor(timer / 3600);
   let minutes = Math.floor((timer % 3600) / 60);
   let seconds = timer % 60;
@@ -22,15 +24,8 @@ export function Timer({ displayHours = false, timer }: TimerProps) {
 
   return (
     <div className={styles.timer}>
-      {displayHours ? (
-        <>
-          {formattedHours}:{formattedMinutes}:{formattedSeconds}
-        </>
-      ) : (
-        <>
-          {formattedMinutes}:{formattedSeconds}
-        </>
-      )}
+      <Reverse time={reverse} />
+      {formattedHours}:{formattedMinutes}:{formattedSeconds}
     </div>
   );
 }

src/components/shuffle/shuffle.tsx

@@ -1,7 +1,7 @@
 import { BiShuffle } from 'react-icons/bi/index';
 
 import { Tooltip } from '@/components/tooltip';
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 
 import styles from './shuffle.module.css';
 

src/components/slider/index.ts

@@ -0,0 +1 @@
+export { Slider } from './slider';

src/components/slider/slider.module.css

@@ -0,0 +1,42 @@
+.sliderRoot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 20px;
+  touch-action: none;
+}
+
+.sliderTrack {
+  position: relative;
+  flex-grow: 1;
+  height: 4px;
+  background: var(--color-neutral-200);
+  border-radius: 9999px;
+}
+
+.sliderRange {
+  position: absolute;
+  height: 100%;
+  background: var(--color-neutral-800);
+  border-radius: 9999px;
+}
+
+.sliderThumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  background: var(--color-neutral-950);
+  border-radius: 50%;
+  box-shadow: 0 0 3px var(--color-neutral-50);
+}
+
+.sliderThumb:hover {
+  background: var(--color-neutral-800);
+}
+
+.sliderThumb:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-neutral-400);
+}

src/components/slider/slider.tsx

@@ -0,0 +1,46 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import styles from './slider.module.css';
+
+type SliderProps = {
+  className?: string;
+  defaultValue?: number;
+  disabled?: boolean;
+  max?: number;
+  min?: number;
+  onChange?: (value: number) => void;
+  step?: number;
+  value?: number;
+};
+
+export function Slider({
+  className,
+  defaultValue = 50,
+  disabled = false,
+  max = 100,
+  min = 0,
+  onChange,
+  step = 1,
+  value,
+}: SliderProps) {
+  const handleValueChange = (values: number[]) => {
+    if (onChange) onChange(values[0]);
+  };
+
+  return (
+    <RadixSlider.Root
+      className={`${styles.sliderRoot} ${className}`}
+      defaultValue={[defaultValue]}
+      disabled={disabled}
+      max={max}
+      min={min}
+      step={step}
+      value={value !== undefined ? [value] : undefined}
+      onValueChange={handleValueChange}
+    >
+      <RadixSlider.Track className={styles.sliderTrack}>
+        <RadixSlider.Range className={styles.sliderRange} />
+      </RadixSlider.Track>
+      <RadixSlider.Thumb className={styles.sliderThumb} />
+    </RadixSlider.Root>
+  );
+}

src/components/sounds/sound/favorite/favorite.tsx

@@ -1,13 +1,14 @@
 import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';
 import { fade } from '@/lib/motion';
 
 import styles from './favorite.module.css';
 
 import { useKeyboardButton } from '@/hooks/use-keyboard-button';
+import { waitUntil } from '@/helpers/wait';
 
 interface FavoriteProps {
   id: string;
@@ -18,11 +19,25 @@ export function Favorite({ id, label }: FavoriteProps) {
   const isFavorite = useSoundStore(state => state.sounds[id].isFavorite);
   const toggleFavorite = useSoundStore(state => state.toggleFavorite);
 
+  const handleToggle = async () => {
+    toggleFavorite(id);
+
+    // Check if false -> true
+    if (!isFavorite) {
+      await waitUntil(
+        () => !!document.getElementById('category-favorites'),
+        50,
+      );
+
+      document
+        .getElementById('category-favorites')
+        ?.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   const variants = fade();
 
-  const handleKeyDown = useKeyboardButton(() => {
-    toggleFavorite(id);
-  });
+  const handleKeyDown = useKeyboardButton(handleToggle);
 
   return (
     <AnimatePresence initial={false} mode="wait">
@@ -36,11 +51,12 @@ export function Favorite({ id, label }: FavoriteProps) {
         onKeyDown={handleKeyDown}
         onClick={e => {
           e.stopPropagation();
-          toggleFavorite(id);
+          handleToggle();
         }}
       >
         <motion.span
           animate="show"
+          aria-hidden="true"
           exit="hidden"
           initial="hidden"
           key={isFavorite ? `${id}-is-favorite` : `${id}-not-favorite`}

src/components/sounds/sound/range/range.tsx

@@ -1,4 +1,4 @@
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 
 import styles from './range.module.css';
 

src/components/sounds/sound/sound.module.css

@@ -47,6 +47,10 @@
     color: var(--color-foreground-subtler);
     transition: 0.2s;
 
+    & span {
+      line-height: 0;
+    }
+
     &::after {
       position: absolute;
       top: 0;

src/components/sounds/sound/sound.tsx

@@ -1,11 +1,12 @@
-import { useCallback, useEffect, forwardRef } from 'react';
+import { useCallback, useEffect, forwardRef, useMemo } from 'react';
 import { ImSpinner9 } from 'react-icons/im/index';
 
 import { Range } from './range';
 import { Favorite } from './favorite';
 
 import { useSound } from '@/hooks/use-sound';
-import { useSoundStore, useLoadingStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
+import { useLoadingStore } from '@/stores/loading';
 import { cn } from '@/helpers/styles';
 
 import styles from './sound.module.css';
@@ -30,13 +31,19 @@ export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
   const selectSound = useSoundStore(state => state.select);
   const unselectSound = useSoundStore(state => state.unselect);
   const setVolume = useSoundStore(state => state.setVolume);
-  const volume = useSoundStore(state => state.sounds[id].volume);
   const isSelected = useSoundStore(state => state.sounds[id].isSelected);
   const locked = useSoundStore(state => state.locked);
 
+  const volume = useSoundStore(state => state.sounds[id].volume);
+  const globalVolume = useSoundStore(state => state.globalVolume);
+  const adjustedVolume = useMemo(
+    () => volume * globalVolume,
+    [volume, globalVolume],
+  );
+
   const isLoading = useLoadingStore(state => state.loaders[src]);
 
-  const sound = useSound(src, { loop: true, volume });
+  const sound = useSound(src, { loop: true, volume: adjustedVolume });
 
   useEffect(() => {
     if (locked) return;
@@ -96,11 +103,11 @@ export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
       <Favorite id={id} label={label} />
       <div className={styles.icon}>
         {isLoading ? (
-          <span className={styles.spinner}>
+          <span aria-hidden="true" className={styles.spinner}>
             <ImSpinner9 />
           </span>
         ) : (
-          icon
+          <span aria-hidden="true">{icon}</span>
         )}
       </div>
       <div className={styles.label} id={id}>

src/components/sounds/sounds.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { Sound } from '@/components/sound';
+import { Sound } from './sound';
 import { useLocalStorage } from '@/hooks/use-local-storage';
 import { cn } from '@/helpers/styles';
 import { fade, scale, mix } from '@/lib/motion';

src/components/source.astro

@@ -3,6 +3,7 @@ import { FaGithub } from 'react-icons/fa/index';
 
 import { SpecialButton } from './special-button';
 import { Container } from './container';
+import { Binary } from './binary';
 ---
 
 <div class="source">
@@ -15,7 +16,7 @@ import { Container } from './container';
         </div>
       </div>
 
-      <h2 class="title">Open Source</h2>
+      <h2 class="title"><span>Open Source</span></h2>
       <p class="desc">Moodist is free and open-source!</p>
 
       <div class="button">
@@ -23,6 +24,8 @@ import { Container } from './container';
           Source Code
         </SpecialButton>
       </div>
+
+      <div class="binary"><Binary client:load /></div>
     </div>
   </Container>
 </div>
@@ -34,9 +37,28 @@ import { Container } from './container';
     & .wrapper {
       position: relative;
       padding: 0 20px 40px;
+      overflow: hidden;
       background: linear-gradient(transparent, rgb(24 24 27 / 70%));
       border-radius: 0 0 20px 20px;
 
+      & .binary {
+        position: absolute;
+        bottom: -2.1rem;
+        left: 50%;
+        width: calc(100% + 10px);
+        height: 200px;
+        overflow: hidden;
+        font-family: 'Nimbus Mono PS', 'Courier New', monospace;
+        color: var(--color-foreground-subtler);
+        word-break: break-all;
+        pointer-events: none;
+        cursor: default;
+        user-select: none;
+        opacity: 0.35;
+        mask-image: linear-gradient(transparent, #000);
+        transform: translateX(-50%);
+      }
+
       &::after {
         position: absolute;
         bottom: 0;
@@ -73,7 +95,10 @@ import { Container } from './container';
         width: 45px;
         height: 45px;
         font-size: var(--font-md);
-        background-color: var(--color-neutral-100);
+        background: linear-gradient(
+          var(--color-neutral-50),
+          var(--color-neutral-100)
+        );
         border: 1px solid var(--color-neutral-300);
         border-radius: 50%;
       }
@@ -84,6 +109,16 @@ import { Container } from './container';
       font-size: var(--font-lg);
       font-weight: 600;
       text-align: center;
+
+      & span {
+        background: linear-gradient(
+          135deg,
+          var(--color-foreground),
+          var(--color-foreground-subtle)
+        );
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
     }
 
     & .desc {

src/components/special-button/special-button.tsx

@@ -6,19 +6,20 @@ interface SpecialButtonProps {
   children: React.ReactNode;
   className?: string;
   href: string;
+  internal?: boolean;
 }
 
 export function SpecialButton({
   children,
   className,
   href,
+  internal,
 }: SpecialButtonProps) {
   return (
     <a
       className={cn(styles.button, className)}
       href={href}
-      rel="noreferrer"
-      target="_blank"
+      {...(!internal ? { rel: 'noreferrer', target: '_blank' } : {})}
     >
       {children}
     </a>

src/components/store-consumer/store-consumer.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from 'react';
 
-import { useSoundStore, useNoteStore, usePresetStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
+import { useNoteStore } from '@/stores/note';
+import { usePresetStore } from '@/stores/preset';
+import { useTodoStore } from '@/stores/todo';
 
 interface StoreConsumerProps {
   children: React.ReactNode;
@@ -11,6 +14,7 @@ export function StoreConsumer({ children }: StoreConsumerProps) {
     useSoundStore.persist.rehydrate();
     useNoteStore.persist.rehydrate();
     usePresetStore.persist.rehydrate();
+    useTodoStore.persist.rehydrate();
   }, []);
 
   return <>{children}</>;

src/components/timer/timer.module.css

@@ -1,12 +0,0 @@
-.timer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 30px 0;
-  font-size: var(--font-xlg);
-  font-weight: 500;
-  background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 8px;
-}

src/components/toolbar/menu/items/binaural.tsx

@@ -0,0 +1,13 @@
+import { FaHeadphonesAlt } from 'react-icons/fa/index';
+
+import { Item } from '../item';
+
+interface BinauralProps {
+  open: () => void;
+}
+
+export function Binaural({ open }: BinauralProps) {
+  return (
+    <Item icon={<FaHeadphonesAlt />} label="Binaural Beats" onClick={open} />
+  );
+}

src/components/toolbar/menu/items/breathing-exercise.tsx

@@ -0,0 +1,18 @@
+import { IoMdFlower } from 'react-icons/io/index';
+
+import { Item } from '../item';
+
+interface BreathingExerciseProps {
+  open: () => void;
+}
+
+export function BreathingExercise({ open }: BreathingExerciseProps) {
+  return (
+    <Item
+      icon={<IoMdFlower />}
+      label="Breathing Exercise"
+      shortcut="Shift + B"
+      onClick={open}
+    />
+  );
+}

src/components/toolbar/menu/items/countdown.tsx

@@ -2,12 +2,17 @@ import { MdOutlineTimer } from 'react-icons/md/index';
 
 import { Item } from '../item';
 
-export function CountdownTimer() {
+interface CountdownProps {
+  open: () => void;
+}
+
+export function Countdown({ open }: CountdownProps) {
   return (
     <Item
-      href="https://timesy.app"
       icon={<MdOutlineTimer />}
       label="Countdown Timer"
+      shortcut="Shift + C"
+      onClick={open}
     />
   );
 }

src/components/toolbar/menu/items/index.ts

@@ -1,10 +1,14 @@
 export { Shuffle as ShuffleItem } from './shuffle';
 export { Share as ShareItem } from './share';
 export { Donate as DonateItem } from './donate';
-export { Notepad as NotepadItem } from './notepad';
 export { Source as SourceItem } from './source';
-export { Pomodoro as PomodoroItem } from './pomodoro';
 export { Presets as PresetsItem } from './presets';
 export { Shortcuts as ShortcutsItem } from './shortcuts';
 export { SleepTimer as SleepTimerItem } from './sleep-timer';
-export { CountdownTimer as CountdownTimerItem } from './countdown-timer';
+export { BreathingExercise as BreathingExerciseItem } from './breathing-exercise';
+export { Pomodoro as PomodoroItem } from './pomodoro';
+export { Notepad as NotepadItem } from './notepad';
+export { Todo as TodoItem } from './todo';
+export { Countdown as CountdownItem } from './countdown';
+export { Binaural as BinauralItem } from './binaural';
+export { Isochronic as IsochronicItem } from './isochronic';

src/components/toolbar/menu/items/isochronic.tsx

@@ -0,0 +1,11 @@
+import { TbWaveSine } from 'react-icons/tb/index';
+
+import { Item } from '../item';
+
+interface IsochronicProps {
+  open: () => void;
+}
+
+export function Isochronic({ open }: IsochronicProps) {
+  return <Item icon={<TbWaveSine />} label="Isochronic Tones" onClick={open} />;
+}

src/components/toolbar/menu/items/notepad.tsx

@@ -2,7 +2,7 @@ import { MdNotes } from 'react-icons/md/index';
 
 import { Item } from '../item';
 
-import { useNoteStore } from '@/store';
+import { useNoteStore } from '@/stores/note';
 
 interface NotepadProps {
   open: () => void;

src/components/toolbar/menu/items/pomodoro.tsx

@@ -2,7 +2,7 @@ import { MdOutlineAvTimer } from 'react-icons/md/index';
 
 import { Item } from '../item';
 
-import { usePomodoroStore } from '@/store';
+import { usePomodoroStore } from '@/stores/pomodoro';
 
 interface PomodoroProps {
   open: () => void;