chore(release): 1.2.0

Add github action to build docker image and docker-compose support

.eslintrc.json

@@ -21,6 +21,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:typescript-sort-keys/recommended",
     "plugin:import/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
@@ -32,15 +33,18 @@
 
   "plugins": [
     "@typescript-eslint",
+    "typescript-sort-keys",
     "sort-keys-fix",
     "sort-destructure-keys",
     "prettier"
   ],
 
   "rules": {
+    "@typescript-eslint/ban-ts-comment": "off",
     "prettier/prettier": "error",
     "sort-keys-fix/sort-keys-fix": ["warn", "asc"],
     "sort-destructure-keys/sort-destructure-keys": "warn",
+    "jsx-a11y/no-static-element-interactions": "off",
     "react/jsx-sort-props": [
       "warn",
       {
@@ -82,7 +86,8 @@
 
       "rules": {
         "prettier/prettier": "error",
-        "react/no-unknown-property": "off"
+        "react/no-unknown-property": "off",
+        "react/jsx-key": "off"
       },
 
       "globals": {

.github/workflows/build_docker.yml

@@ -0,0 +1,34 @@
+name: Build and push main image
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  push-store-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 'Checkout GitHub Action'
+        uses: actions/checkout@main
+
+      - name: 'Login to GitHub Container Registry'
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{github.actor}}
+          password: ${{secrets.ACCESS_TOKEN}}
+
+      - name: 'Build Inventory Image'
+        run: |
+          IMAGE_NAME="ghcr.io/remvze/moodist"
+
+          GIT_TAG=${{ github.ref }}
+          GIT_TAG=${GIT_TAG#refs/tags/}
+
+          docker build . --tag $IMAGE_NAME:latest
+          docker push $IMAGE_NAME:latest
+
+          docker build . --tag $IMAGE_NAME:$GIT_TAG
+          docker push $IMAGE_NAME:$GIT_TAG

.lintstagedrc.json

@@ -1,6 +1,5 @@
 {
-  "*.{ts,tsx}": ["eslint --fix", "tsc-files --noEmit"],
-  "*.{js,jsx}": "eslint --fix",
+  "*.{ts,tsx,js,jsx}": "eslint --fix",
   "*.{json,md}": "prettier --write",
   "*.css": "stylelint --fix",
   "*.astro": ["eslint --fix", "stylelint --fix"],

.stylelintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-idiomatic-order",
+    "stylelint-config-recess-order",
     "stylelint-config-html",
     "stylelint-prettier/recommended"
   ],

.vscode/settings.json

@@ -11,8 +11,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "[javascript][javascriptreact][typescript][typescriptreact][astro]": {
     "editor.formatOnSave": false

CHANGELOG.md

@@ -2,6 +2,236 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.2.0](https://github.com/remvze/moodist/compare/v1.1.0...v1.2.0) (2024-01-04)
+
+
+### ♻️ Code Refactoring
+
+* better item structure for menu ([26bf016](https://github.com/remvze/moodist/commit/26bf01690cfcc105b661951bcb2347394a67fb68))
+* rewrite menu with floating ui ([8beb42c](https://github.com/remvze/moodist/commit/8beb42cb1b92c99aa9656b35cd7d82094e5baf72))
+
+
+### 🐛 Bug Fixes
+
+* stringify dependency ([1a23e00](https://github.com/remvze/moodist/commit/1a23e004a65960ce169990211f150db25762fead))
+
+
+### ✨ Features
+
+* add animation to menu box ([17027e2](https://github.com/remvze/moodist/commit/17027e299bb9bf958aebaf735c40e7664ad71e8b))
+* add disabled state ([ff26597](https://github.com/remvze/moodist/commit/ff26597d22d444d18d2874a5c278eccc288972de))
+* add menu button ([184bb09](https://github.com/remvze/moodist/commit/184bb09f5ab09fcf877e6a904023d9de72be9a89))
+* add share modal ([35e3215](https://github.com/remvze/moodist/commit/35e32152b153f4dfaf9e071f526f6d7602ea97fc))
+* add share placeholder ([fe2357c](https://github.com/remvze/moodist/commit/fe2357c995713cd0fb8335b325266859dc47a769))
+* basic structure for share link ([ef81f19](https://github.com/remvze/moodist/commit/ef81f198baeb927e3b1768570f75e6638a7bd0b6))
+* **docker:** add dockerfile ([a234bc1](https://github.com/remvze/moodist/commit/a234bc17a66331acbbc1d980cd1f53d58646f534))
+* implement override feature ([0f62f07](https://github.com/remvze/moodist/commit/0f62f0795c5a9e06fa4e62b6b7b1e6c0774dfe0f))
+* implement sharing URL ([93ff72a](https://github.com/remvze/moodist/commit/93ff72a052484b36c9ac821b94b632865b4a3550))
+
+
+### 💄 Styling
+
+* add animation to modal ([7823dc7](https://github.com/remvze/moodist/commit/7823dc7ff473278ef8ee401e69796c17b33da794))
+* add icon to menu items ([131ab29](https://github.com/remvze/moodist/commit/131ab296215812e45a0c60486d75683f3de25d16))
+* change border color ([85b627e](https://github.com/remvze/moodist/commit/85b627ecb96a4f52ecacdb53ed4484c050adba5e))
+* change copy ([c51acd6](https://github.com/remvze/moodist/commit/c51acd62618cc705902dc01f0574a2c9124264c5))
+* change to primary color ([c8e5122](https://github.com/remvze/moodist/commit/c8e51226e57bfa72ad91318de25fc5f9b5751634))
+* widen the menu ([37a0736](https://github.com/remvze/moodist/commit/37a0736a0e7edd09c33940099c884e5b48afbbf1))
+
+
+### 🚚 Chores
+
+* change docker workflow ([cb4bfea](https://github.com/remvze/moodist/commit/cb4bfea5ab4326dee17c78554f12a08ffcb9dd0e))
+* change docker-compose file ([660ee07](https://github.com/remvze/moodist/commit/660ee07a2359ec77c9d56bbe552541246e0f79c5))
+* update GitHub action ([ee60613](https://github.com/remvze/moodist/commit/ee606139a80121fd6ee1b8233f82af994c4e1178))
+
+## [1.1.0](https://github.com/remvze/moodist/compare/v1.0.0...v1.1.0) (2023-12-29)
+
+
+### ♻️ Code Refactoring
+
+* change ordering config ([a43c679](https://github.com/remvze/moodist/commit/a43c679e214b24c7f547e182aea6e2fbf826228f))
+
+
+### 🐛 Bug Fixes
+
+* change icon path ([28c3c40](https://github.com/remvze/moodist/commit/28c3c404ad790869b13731e4c3622abe33f1dda2))
+
+
+### 🚚 Chores
+
+* add more sounds ([e3864be](https://github.com/remvze/moodist/commit/e3864bede129c102ef5b7258b4688d9177dd284c))
+* add more sounds ([55e7f05](https://github.com/remvze/moodist/commit/55e7f05892f6d3200b56a7e06b371bed4b4c4554))
+* add more sounds ([318e87c](https://github.com/remvze/moodist/commit/318e87c9f1f3e2509c2b8eeb3a7f6875dd1c02fd))
+* add places category ([5970012](https://github.com/remvze/moodist/commit/5970012fa6cbd8222c2be8ce426065f928d81b2b))
+* add transport category ([c1c3945](https://github.com/remvze/moodist/commit/c1c3945d43e84e3011de52bffa5116d58283c473))
+* change heartbeat audio ([f43a378](https://github.com/remvze/moodist/commit/f43a378697437f671c0c33122b1c9ec5a1e173ff))
+* relocate underwater audio ([37bad81](https://github.com/remvze/moodist/commit/37bad8149e1f5170426dc745322c0e65cb9a41ff))
+* remove heartbeat audio ([121a8f2](https://github.com/remvze/moodist/commit/121a8f204c6b61490a7ab0e732779031278e6e8c))
+
+
+### 💄 Styling
+
+* add hover states ([2c74dd0](https://github.com/remvze/moodist/commit/2c74dd0d604af86f99edcba2eb573641ac2010fd))
+* change button style ([8efb1ce](https://github.com/remvze/moodist/commit/8efb1cee00ec0e0dcd9677729d9136ca8d69073f))
+* change sound counter ([00fc5f3](https://github.com/remvze/moodist/commit/00fc5f3a872be51eb875744e254c75ea58e93281))
+* change theme ([bd517f8](https://github.com/remvze/moodist/commit/bd517f88c01202eb7e7e5acf70bf4af2e6f91d75))
+
+## [1.0.0](https://github.com/remvze/moodist/compare/v0.0.1...v1.0.0) (2023-12-09)
+
+
+### ✨ Features
+
+* add about section ([4e84419](https://github.com/remvze/moodist/commit/4e84419ab19f4f0c129a76a91be194bbab7f6b11))
+* add aria-disabled to play button ([f390f38](https://github.com/remvze/moodist/commit/f390f3801604c49799078298637ea63a06eb9721))
+* add auto pause to play button ([7c901b2](https://github.com/remvze/moodist/commit/7c901b2bdc525d02b80a0c42eb2f81f766947ca3))
+* add auto play on select ([17d1b23](https://github.com/remvze/moodist/commit/17d1b23c8f1a6c717d846c12d38945e7d3b47be1))
+* add basic animations with Framer Motion ([fa7b90e](https://github.com/remvze/moodist/commit/fa7b90eeec5b697446fa5871f8b499a85d0d150f))
+* add basic audio player ([5a7a58e](https://github.com/remvze/moodist/commit/5a7a58e883fbb0122d8d6e2c777049a8fc0d9609))
+* add basic categories ([8d7e4d2](https://github.com/remvze/moodist/commit/8d7e4d26fd7b53a16f7ce39551b31484eefbe461))
+* add basic sound components ([4adb8bf](https://github.com/remvze/moodist/commit/4adb8bfdbc86a475d59e1d636927539592ec4b6c))
+* add basic sounds for prototyping ([5791346](https://github.com/remvze/moodist/commit/5791346a881a9f451b967f782257317d8fb04d63))
+* add color noise ([7363e8d](https://github.com/remvze/moodist/commit/7363e8d51a347adf3c53cbef9ec3e181912ecc6b))
+* add deep merge to Zustand Persist ([01f4031](https://github.com/remvze/moodist/commit/01f40318124ad1e6e09b1f0572f623900192ba9d))
+* add footer component ([262bb1a](https://github.com/remvze/moodist/commit/262bb1a9c6153a53e259e5bd9123b8035bd6b6d1))
+* add gradient line decoration ([5559152](https://github.com/remvze/moodist/commit/5559152a8492dac335f0e6620ca4ca2d9233c889))
+* add help text ([c3521a7](https://github.com/remvze/moodist/commit/c3521a798611aa0ad7297493aa5a790a27bbc991))
+* add hero section ([dc33c2c](https://github.com/remvze/moodist/commit/dc33c2cf9cdcb251b7a0cc4dabdd7aafae154aa9))
+* add hidden selection indicator ([e2cd75a](https://github.com/remvze/moodist/commit/e2cd75a332fab318a529f4f6e04ecf1867be7fd1))
+* add Howler for sounds ([735d9eb](https://github.com/remvze/moodist/commit/735d9ebebfa36dd3e7596e70a0549b24b7b9fc4d))
+* add icon for sounds ([1994004](https://github.com/remvze/moodist/commit/199400446cc241fb66722c79e74f882a7ef6a26c))
+* add link to reasons ([e2b6eaf](https://github.com/remvze/moodist/commit/e2b6eaf8f3278768ce142ed58594958dcc7821ad))
+* add loading state for sounds ([aaccbee](https://github.com/remvze/moodist/commit/aaccbee3d7dd1d4469ee26cea14df7132e8e9e0d))
+* add local storage support ([856b3e6](https://github.com/remvze/moodist/commit/856b3e668ed6f24c8aefe532ac673af5e99141d1))
+* add more and less button for sounds ([13cd72a](https://github.com/remvze/moodist/commit/13cd72a0655d90f0a6b7658b3357d1e8902f8fb7))
+* add more sounds ([0888aaa](https://github.com/remvze/moodist/commit/0888aaa0f09ed549afdb21166ad6d2f048604275))
+* add more sounds ([63ed396](https://github.com/remvze/moodist/commit/63ed396a5a74ed2b6e25882a72511ee93935fe04))
+* add new sounds ([759e6b0](https://github.com/remvze/moodist/commit/759e6b0ce8f0acc3eb0eed508f7c587804097748))
+* add play button ([31c087e](https://github.com/remvze/moodist/commit/31c087ebc8e66220d488226029dcc1435667ce04))
+* add ready section ([e372d2f](https://github.com/remvze/moodist/commit/e372d2f398dbdcfad1069b50911ba840f0c9a1fe))
+* add scroll to top component ([3c1c27b](https://github.com/remvze/moodist/commit/3c1c27b2fd378eb0f7351a3f511375cbc62f2a7b))
+* add simple tooltip ([f2efe3c](https://github.com/remvze/moodist/commit/f2efe3c490ab5429824d10e97979694a4de11dd4))
+* add singing bowl sound ([0b49f66](https://github.com/remvze/moodist/commit/0b49f66e5879642da10054046700a160411448a3))
+* add sound count to hero ([42ccc7a](https://github.com/remvze/moodist/commit/42ccc7ada780fd5db5c038fa9210ec0e3e75be6e))
+* add tooltip to scroll button ([d4401fa](https://github.com/remvze/moodist/commit/d4401faaffcb4351be1a152b89f94c9db63ca213))
+* add why section ([3ed610b](https://github.com/remvze/moodist/commit/3ed610bb468293f6b08c2b2444bc47cd570383eb))
+* change sound count from round to exact ([8c49453](https://github.com/remvze/moodist/commit/8c49453011d127669774f46720ce6e98ca01aa13))
+* complete meta tags ([1cfbf0d](https://github.com/remvze/moodist/commit/1cfbf0dd092d35d2f098c29baf6d6adbc1107cc0))
+* create reusable tooltip ([c637e2d](https://github.com/remvze/moodist/commit/c637e2d63109e12886b6f688c643146707967c7a))
+* implement basic snackbar ([8090599](https://github.com/remvze/moodist/commit/8090599f2bc9ce58cdb36a6a04555afdb7af2bb2))
+* implement basic Zustand store ([22bb65d](https://github.com/remvze/moodist/commit/22bb65de0d4ea9f485e4923b9c8715233df3114e))
+* implement favorite sounds functionality ([cb34b59](https://github.com/remvze/moodist/commit/cb34b59d864fb80b930c0c9e1c1269bb7e9c2b18))
+* implement shuffle functionality ([26ba017](https://github.com/remvze/moodist/commit/26ba017815d7338f49d2017eda75f86f493bf050))
+* implement shuffling functionality ([3ac211e](https://github.com/remvze/moodist/commit/3ac211e3554d26c48fb8e0a588a67f1a4901e9b9))
+* implement unselect all functionality ([8966d59](https://github.com/remvze/moodist/commit/8966d59d758496cc94247364833788dcc555ce8b))
+* reorder sounds in favorites ([dc9da85](https://github.com/remvze/moodist/commit/dc9da85e6825b3cb70e2e6ad4f35c0db3aeb26c2))
+
+
+### 💄 Styling
+
+* add animation to more/less button ([b849b3a](https://github.com/remvze/moodist/commit/b849b3aecd6178114b3b27a2daa014b0795ddf42))
+* add base and global styles ([05d68e4](https://github.com/remvze/moodist/commit/05d68e4de6f55ebbc08817ed553f7760f570208b))
+* add gradient background ([77fed03](https://github.com/remvze/moodist/commit/77fed0308ad55ca32f07b4f30e7a7936063d842a))
+* add gradient line ([ea722ea](https://github.com/remvze/moodist/commit/ea722eabd24cb966c65fa45d41f55e1e1a049939))
+* add line to titles ([ec1def0](https://github.com/remvze/moodist/commit/ec1def041934d8a9f98084299a0606c5690ef23d))
+* add more icons ([41c5ae5](https://github.com/remvze/moodist/commit/41c5ae5db8e72f15f5cc1b7501f397239ba9368a))
+* add new font weight for links ([287d7b3](https://github.com/remvze/moodist/commit/287d7b33fb107e81034a17a60e1cd6cd5d40d935))
+* add smooth transition ([3b33e09](https://github.com/remvze/moodist/commit/3b33e095479340496a7a11b057daef029f40b70a))
+* add smooth transition ([e7fc951](https://github.com/remvze/moodist/commit/e7fc9513109ae48ce407745549085c9449cf3324))
+* add text animation ([7810d21](https://github.com/remvze/moodist/commit/7810d212259cfe19befafab33d51110126089a83))
+* add theme color ([6de1394](https://github.com/remvze/moodist/commit/6de1394628ccb6b58aec02bcd164e56e9ca0f30a))
+* add wrap balancer to desc ([276639b](https://github.com/remvze/moodist/commit/276639b0d3a70ead87dc61e2c8cb7cd621261c3e))
+* better line alignment ([1f24812](https://github.com/remvze/moodist/commit/1f24812efa3b64fdbfc794bcb546226cc2ef07d4))
+* change border to shadow ([a53800c](https://github.com/remvze/moodist/commit/a53800c6b194e7520d2e7ee13c5e00f77db9f5f7))
+* change button animation ([6983559](https://github.com/remvze/moodist/commit/6983559032d731ad6264ad56f0786b1a84f7cf4e))
+* change button animation ([c44a863](https://github.com/remvze/moodist/commit/c44a86361ebf3a77d68148564a2983e60b522c29))
+* change copy ([6242308](https://github.com/remvze/moodist/commit/624230843c3328fdfb42e0e2f23084cef4dec614))
+* change favicon ([a82dc3f](https://github.com/remvze/moodist/commit/a82dc3f36af098071b6be09491e9e25bda190b74))
+* change icon backgrounds ([ef825ca](https://github.com/remvze/moodist/commit/ef825cae68f3cd4ef58016212a45820d3b272f96))
+* change icon color on selection ([e6abca6](https://github.com/remvze/moodist/commit/e6abca61fe9eb36ca6968339a4cb67beeb5f8fdc))
+* change label cursor ([15953ef](https://github.com/remvze/moodist/commit/15953ef8565a27da2b41330753fbc40931987aa7))
+* change like color ([d8c9806](https://github.com/remvze/moodist/commit/d8c9806a1964042b787baabf43e2852bab23dcfa))
+* change logo ([9f702db](https://github.com/remvze/moodist/commit/9f702dbfa74b524b4553bd1686532bc7d35d9985))
+* change primary color ([ed9a027](https://github.com/remvze/moodist/commit/ed9a0271f7c49b499ab07487072cfd7bab5277db))
+* change reason copy ([69c4ec1](https://github.com/remvze/moodist/commit/69c4ec150849a15e2aa222ac4b6f2982cc9536df))
+* change spacing ([cc26f68](https://github.com/remvze/moodist/commit/cc26f68097bd137bea1f62a9eba566844b1cb069))
+* change tagline ([f3603e8](https://github.com/remvze/moodist/commit/f3603e84318a9b69145ae69d3aa02447ed1235e6))
+* decrease gradient shine ([8f58794](https://github.com/remvze/moodist/commit/8f587944fd1ad5e11bb6bc3afc7e9380afa43a6c))
+* decrease margin ([d700195](https://github.com/remvze/moodist/commit/d7001952f9ce323d746118583e0b34e001a8a517))
+* decrease scale animation ([7e668e5](https://github.com/remvze/moodist/commit/7e668e5b393c7df71bec8bf11696acbae22d70e4))
+* fix margins ([99775b7](https://github.com/remvze/moodist/commit/99775b7c6487b009bbf87fbd834ed8730508d1ce))
+* fix snackbar pointer ([14c9e88](https://github.com/remvze/moodist/commit/14c9e88bfbef4b68dce0a1a8e570c1a9d9894dfd))
+* fix tooltip z-index ([fb061c3](https://github.com/remvze/moodist/commit/fb061c3d66d3fa7c3fce63bae1e04e502fcbb891))
+* fix z-index ([fa71709](https://github.com/remvze/moodist/commit/fa71709f897cc2b7a5ba03dbc1cb60a3198bf9f4))
+* increase padding ([eedbf53](https://github.com/remvze/moodist/commit/eedbf53e0e07ba75161e9f397dc0554204bc004a))
+* increase sounds per row ([cd8ec5e](https://github.com/remvze/moodist/commit/cd8ec5e8649f8808d0a89a74c1426b92628efbc7))
+* relocate the play button ([403a755](https://github.com/remvze/moodist/commit/403a755ca7a9d93ef6940d1954fcde058505c1b8))
+* remove extra colors ([38f05a3](https://github.com/remvze/moodist/commit/38f05a3e757ab0c8d91b1f84938bfb8443450769))
+* remove gradient line ([de03cac](https://github.com/remvze/moodist/commit/de03cac6b374e836da65d00b7fe732bf17600554))
+* remove gradient line ([6720e86](https://github.com/remvze/moodist/commit/6720e86a0af14c8c05d73f305ee12664f3b264b7))
+* remove layout animation ([ef952d0](https://github.com/remvze/moodist/commit/ef952d0a03b2cc3490b65535f1c5707b6578836d))
+* remove layout animation ([efd6f99](https://github.com/remvze/moodist/commit/efd6f9941d1483e6a6df8db861ba221084a1f298))
+* remove opacity effect on disabled ([4266557](https://github.com/remvze/moodist/commit/4266557366977534a4fba24922904ac51aaae74d))
+* reverse gradient line ([87f3a2b](https://github.com/remvze/moodist/commit/87f3a2b51104d635dcaf6e48281b99193a7d931a))
+* widen the container ([e7c786f](https://github.com/remvze/moodist/commit/e7c786f25986436606fa723441338588a84b00b3))
+
+
+### 🐛 Bug Fixes
+
+* add aria label to shuffle button ([6d02cfb](https://github.com/remvze/moodist/commit/6d02cfb134bc925b9824040307b1b40626312fd1))
+* add aria labels ([85768d8](https://github.com/remvze/moodist/commit/85768d8bca10f2732e98d138a3d83ec3116816d4))
+* add keys to filler elements ([b7c7d40](https://github.com/remvze/moodist/commit/b7c7d40bf9c47c4a2793335e406ac4173d98a1e0))
+* change icon path ([8cceb6e](https://github.com/remvze/moodist/commit/8cceb6ecd1d0183e0d5f0aeb7af4d80b2dc41b34))
+* change icon path ([dc6a9e1](https://github.com/remvze/moodist/commit/dc6a9e120a0617761c9a36a3f1268c50d4a1b7c5))
+* change icon path ([c184246](https://github.com/remvze/moodist/commit/c184246a1280e9e8cf85c77d1de8d32bf1d7592b))
+* change link address ([1b4d216](https://github.com/remvze/moodist/commit/1b4d216b0813f8d336fba93c2e3bb794a988f834))
+* change page title ([3bebb3e](https://github.com/remvze/moodist/commit/3bebb3e9d259dd7f87d17f29ea85df67c5e2ada5))
+* fix icon imports ([a3eb479](https://github.com/remvze/moodist/commit/a3eb47914024eb7b9493adae95f916be591bb748))
+* fix some animation issues ([eccba87](https://github.com/remvze/moodist/commit/eccba87557e0f444adb740e8d6488adad8a2ce42))
+* fix some types ([04061e2](https://github.com/remvze/moodist/commit/04061e23c3063279afa493a1e120817f80447840))
+* make sound count dynamic ([79458bb](https://github.com/remvze/moodist/commit/79458bba54189147af8b8e3f38b34c756d4bd58e))
+* rehydrate store only on mount ([2c443d3](https://github.com/remvze/moodist/commit/2c443d3f33d9d9f4d00ed1e99a8b092597abce97))
+* remove extra play calls ([e0164c3](https://github.com/remvze/moodist/commit/e0164c362d72fea7587f67470e4d295007e5ad5e))
+* remove history on favorite toggle ([190f06a](https://github.com/remvze/moodist/commit/190f06aa78b1aff931348a65da864404b2d0f4d5))
+* remove history on select ([5bd1dd3](https://github.com/remvze/moodist/commit/5bd1dd3016cf97ad397b4371015605473c55dee8))
+* remove tooltip ([b634d6f](https://github.com/remvze/moodist/commit/b634d6f3c354a51e4403374b2e3505e4f2c09351))
+* rotate the spinner when unselected ([cf7600e](https://github.com/remvze/moodist/commit/cf7600e6c72d9d9638c3a9ad0513675d353422cd))
+* set aria label to ID ([7e0a9af](https://github.com/remvze/moodist/commit/7e0a9afb179d228301effe00575c2f67b426e3da))
+* typo ([5cfb9a8](https://github.com/remvze/moodist/commit/5cfb9a8293a215b83a826c403d996d00108d49b5))
+
+
+### 🚚 Chores
+
+* add more sounds ([eed5a13](https://github.com/remvze/moodist/commit/eed5a1329d6fc36d1e6375feaeaf2bba26167bf5))
+* add more sounds ([5a7936f](https://github.com/remvze/moodist/commit/5a7936f11c4510886d14400e088ac0d8977a4806))
+* add more sounds ([8c75f87](https://github.com/remvze/moodist/commit/8c75f875f0e39d392f8394d67b64d3d6d4e6f4a0))
+* add robots.txt file ([6bdf28a](https://github.com/remvze/moodist/commit/6bdf28afdcf218c02f3bddc2a55fc1b6b88ebcff))
+* change README banner ([c450028](https://github.com/remvze/moodist/commit/c450028ac7e58e961204de4789231d357d129ca1))
+* change README file ([85e42f3](https://github.com/remvze/moodist/commit/85e42f3606f9fba281f2177d0dbffc86851603f9))
+* upgrade Astro ([72fa516](https://github.com/remvze/moodist/commit/72fa516316cf1077cf5ab09bc59b76de147c6d38))
+
+
+### ♻️ Code Refactoring
+
+* better tooltip ([5fecd38](https://github.com/remvze/moodist/commit/5fecd383aaf757dbb563a1abd7eee0e64905902c))
+* change data file structure ([c9e8bd4](https://github.com/remvze/moodist/commit/c9e8bd41fd79f6c73c11e6fcdbe8b24c6c0bbeb4))
+* relocate sections ([d672bf6](https://github.com/remvze/moodist/commit/d672bf6f85fe7b3a5c20fc53668705ab3d7827c5))
+* remove seperate favorite store ([d7fd17e](https://github.com/remvze/moodist/commit/d7fd17ea8bb79ab44220bedfd62c98f9abf1d9f6))
+* remove seperate playing context ([daee746](https://github.com/remvze/moodist/commit/daee7465bc4460a11b6aa5885cbd0eb7191c0026))
+* rename component ([f5cdb8c](https://github.com/remvze/moodist/commit/f5cdb8c06b44f9cdde27e6e7c7e3d4d156c21dca))
+* separate sounds ([a1ea9a1](https://github.com/remvze/moodist/commit/a1ea9a19e64f062c1d63ecef7fb200fbba063fe4))
+* seperate buttons ([b117a4b](https://github.com/remvze/moodist/commit/b117a4b495bed8d7b034c42a70e080bc062ad672))
+* seperate common types ([bad2d31](https://github.com/remvze/moodist/commit/bad2d31b2dfa6a1f01c1c9cd767209c2c6f58f5c))
+* seperate favorite button ([4124beb](https://github.com/remvze/moodist/commit/4124beb5b4818f1eee322fa6a4777f2e422d04ba))
+* seperate irrelevant logic ([f1688cb](https://github.com/remvze/moodist/commit/f1688cb53ccf7199759b8a60f1d05787edd05790))
+* seperate motion variants ([7fce9e1](https://github.com/remvze/moodist/commit/7fce9e1dff3dfe2b17a92872125bb29f61fee23f))
+* seperate range input ([89149dc](https://github.com/remvze/moodist/commit/89149dca78069affadb5633ba1354dd50fb616ae))
+* sort interface keys ([c5240ff](https://github.com/remvze/moodist/commit/c5240ff507fba8d979ef842ceba05b712b76220d))
+* turn footer into Astro component ([a67083c](https://github.com/remvze/moodist/commit/a67083c0e9812acc1dd71fade41a81f307669116))
+* turn hero into Astro component ([77f9fcc](https://github.com/remvze/moodist/commit/77f9fcc50e54cecb31877eaccb3a578c291f99fe))
+* turn sections into Astro components ([9398ae0](https://github.com/remvze/moodist/commit/9398ae0eddb4fac9695569a97a829bd518500363))
+* use scrollIntoView instead of link ([4d2645f](https://github.com/remvze/moodist/commit/4d2645f06c846eea791f182224be0bc6e3db76dc))
+
 ### 0.0.1 (2023-10-05)
 
 

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine3.18 AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 8080

README.md

@@ -1,54 +1,6 @@
-# Astro Starter Kit: Basics
-
-```sh
-npm create astro@latest -- --template basics
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+<div align="center">
+  <img src="/assets/banner.svg" alt="Moodist Logo Banner" />
+  <h2>Moodist 🌲</h2>
+  <p>Ambient sounds for focus and calm.</p>
+  <a href="https://moodist.app">Visit <strong>Moodist</strong> →</a>
+</div>

assets/banner.svg

@@ -0,0 +1,40 @@
+<svg width="1200" height="400" viewBox="0 0 1200 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1200" height="400" rx="25" fill="#09090B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M600 237.5C620.711 237.5 637.5 220.711 637.5 200C637.5 179.289 620.711 162.5 600 162.5C579.289 162.5 562.5 179.289 562.5 200C562.5 220.711 579.289 237.5 600 237.5ZM600 218.75C610.355 218.75 618.75 210.355 618.75 200C618.75 189.645 610.355 181.25 600 181.25C589.645 181.25 581.25 189.645 581.25 200C581.25 210.355 589.645 218.75 600 218.75Z" fill="#FAFAFA"/>
+<path d="M562.5 162.5C541.789 162.5 525 179.289 525 200C525 220.711 541.789 237.5 562.5 237.5L562.5 218.75C552.145 218.75 543.75 210.355 543.75 200C543.75 189.645 552.145 181.25 562.5 181.25L562.5 162.5Z" fill="#D4D4D8"/>
+<path d="M637.5 162.5C637.5 141.789 620.711 125 600 125C579.289 125 562.5 141.789 562.5 162.5L581.25 162.5C581.25 152.145 589.645 143.75 600 143.75C610.355 143.75 618.75 152.145 618.75 162.5L637.5 162.5Z" fill="#D4D4D8"/>
+<path d="M637.5 237.5C658.211 237.5 675 220.711 675 200C675 179.289 658.211 162.5 637.5 162.5L637.5 181.25C647.855 181.25 656.25 189.645 656.25 200C656.25 210.355 647.855 218.75 637.5 218.75L637.5 237.5Z" fill="#D4D4D8"/>
+<path d="M562.5 237.5C562.5 258.211 579.289 275 600 275C620.711 275 637.5 258.211 637.5 237.5H618.75C618.75 247.855 610.355 256.25 600 256.25C589.645 256.25 581.25 247.855 581.25 237.5H562.5Z" fill="#D4D4D8"/>
+<path d="M543.75 162.5C543.75 152.145 552.145 143.75 562.5 143.75L562.5 125C541.789 125 525 141.789 525 162.5L543.75 162.5Z" fill="#A1A1AA"/>
+<path d="M637.5 143.75C647.855 143.75 656.25 152.145 656.25 162.5L675 162.5C675 141.789 658.211 125 637.5 125L637.5 143.75Z" fill="#A1A1AA"/>
+<path d="M656.25 237.5C656.25 247.855 647.855 256.25 637.5 256.25L637.5 275C658.211 275 675 258.211 675 237.5L656.25 237.5Z" fill="#A1A1AA"/>
+<path d="M562.5 256.25C552.145 256.25 543.75 247.855 543.75 237.5H525C525 258.211 541.789 275 562.5 275V256.25Z" fill="#A1A1AA"/>
+<path d="M693.75 237.5C693.75 247.855 685.355 256.25 675 256.25L675 275C695.711 275 712.5 258.211 712.5 237.5L693.75 237.5Z" fill="#18181B"/>
+<path d="M656.25 275C656.25 285.355 647.855 293.75 637.5 293.75L637.5 312.5C658.211 312.5 675 295.711 675 275L656.25 275Z" fill="#18181B"/>
+<path d="M525 256.25C514.645 256.25 506.25 247.855 506.25 237.5H487.5C487.5 258.211 504.289 275 525 275V256.25Z" fill="#18181B"/>
+<path d="M562.5 293.75C552.145 293.75 543.75 285.355 543.75 275H525C525 295.711 541.789 312.5 562.5 312.5V293.75Z" fill="#18181B"/>
+<path d="M562.5 331.25C552.145 331.25 543.75 322.855 543.75 312.5H525C525 333.211 541.789 350 562.5 350V331.25Z" fill="#18181B"/>
+<path d="M525 293.75C514.645 293.75 506.25 285.355 506.25 275H487.5C487.5 295.711 504.289 312.5 525 312.5V293.75Z" fill="#18181B"/>
+<path d="M487.5 256.25C477.145 256.25 468.75 247.855 468.75 237.5H450C450 258.211 466.789 275 487.5 275V256.25Z" fill="#18181B"/>
+<path d="M543.75 125C543.75 114.645 552.145 106.25 562.5 106.25L562.5 87.5C541.789 87.5 525 104.289 525 125L543.75 125Z" fill="#18181B"/>
+<path d="M506.25 162.5C506.25 152.145 514.645 143.75 525 143.75L525 125C504.289 125 487.5 141.789 487.5 162.5L506.25 162.5Z" fill="#18181B"/>
+<path d="M468.75 162.5C468.75 152.145 477.145 143.75 487.5 143.75L487.5 125C466.789 125 450 141.789 450 162.5L468.75 162.5Z" fill="#18181B"/>
+<path d="M506.25 125C506.25 114.645 514.645 106.25 525 106.25L525 87.5C504.289 87.5 487.5 104.289 487.5 125L506.25 125Z" fill="#18181B"/>
+<path d="M543.75 87.5C543.75 77.1447 552.145 68.75 562.5 68.75L562.5 50C541.789 50 525 66.7893 525 87.5L543.75 87.5Z" fill="#18181B"/>
+<path d="M675 143.75C685.355 143.75 693.75 152.145 693.75 162.5L712.5 162.5C712.5 141.789 695.711 125 675 125L675 143.75Z" fill="#18181B"/>
+<path d="M637.5 106.25C647.855 106.25 656.25 114.645 656.25 125L675 125C675 104.289 658.211 87.5 637.5 87.5L637.5 106.25Z" fill="#18181B"/>
+<path d="M637.5 68.75C647.855 68.75 656.25 77.1447 656.25 87.5L675 87.5C675 66.7893 658.211 50 637.5 50L637.5 68.75Z" fill="#18181B"/>
+<path d="M675 106.25C685.355 106.25 693.75 114.645 693.75 125L712.5 125C712.5 104.289 695.711 87.5 675 87.5L675 106.25Z" fill="#18181B"/>
+<path d="M712.5 143.75C722.855 143.75 731.25 152.145 731.25 162.5L750 162.5C750 141.789 733.211 125 712.5 125L712.5 143.75Z" fill="#18181B"/>
+<path d="M693.75 275C693.75 285.355 685.355 293.75 675 293.75L675 312.5C695.711 312.5 712.5 295.711 712.5 275L693.75 275Z" fill="#18181B"/>
+<path d="M731.25 237.5C731.25 247.855 722.855 256.25 712.5 256.25L712.5 275C733.211 275 750 258.211 750 237.5L731.25 237.5Z" fill="#18181B"/>
+<path d="M656.25 312.5C656.25 322.855 647.855 331.25 637.5 331.25L637.5 350C658.211 350 675 333.211 675 312.5L656.25 312.5Z" fill="#18181B"/>
+<path d="M525 162.5C504.289 162.5 487.5 179.289 487.5 200C487.5 220.711 504.289 237.5 525 237.5L525 218.75C514.645 218.75 506.25 210.355 506.25 200C506.25 189.645 514.645 181.25 525 181.25L525 162.5Z" fill="#18181B"/>
+<path d="M487.5 162.5C466.789 162.5 450 179.289 450 200C450 220.711 466.789 237.5 487.5 237.5L487.5 218.75C477.145 218.75 468.75 210.355 468.75 200C468.75 189.645 477.145 181.25 487.5 181.25L487.5 162.5Z" fill="#18181B"/>
+<path d="M637.5 125C637.5 104.289 620.711 87.5 600 87.5C579.289 87.5 562.5 104.289 562.5 125L581.25 125C581.25 114.645 589.645 106.25 600 106.25C610.355 106.25 618.75 114.645 618.75 125L637.5 125Z" fill="#18181B"/>
+<path d="M637.5 87.5C637.5 66.7893 620.711 50 600 50C579.289 50 562.5 66.7893 562.5 87.5L581.25 87.5C581.25 77.1447 589.645 68.75 600 68.75C610.355 68.75 618.75 77.1447 618.75 87.5L637.5 87.5Z" fill="#18181B"/>
+<path d="M675 237.5C695.711 237.5 712.5 220.711 712.5 200C712.5 179.289 695.711 162.5 675 162.5L675 181.25C685.355 181.25 693.75 189.645 693.75 200C693.75 210.355 685.355 218.75 675 218.75L675 237.5Z" fill="#18181B"/>
+<path d="M712.5 237.5C733.211 237.5 750 220.711 750 200C750 179.289 733.211 162.5 712.5 162.5L712.5 181.25C722.855 181.25 731.25 189.645 731.25 200C731.25 210.355 722.855 218.75 712.5 218.75L712.5 237.5Z" fill="#18181B"/>
+<path d="M562.5 275C562.5 295.711 579.289 312.5 600 312.5C620.711 312.5 637.5 295.711 637.5 275H618.75C618.75 285.355 610.355 293.75 600 293.75C589.645 293.75 581.25 285.355 581.25 275H562.5Z" fill="#18181B"/>
+<path d="M562.5 312.5C562.5 333.211 579.289 350 600 350C620.711 350 637.5 333.211 637.5 312.5H618.75C618.75 322.855 610.355 331.25 600 331.25C589.645 331.25 581.25 322.855 581.25 312.5H562.5Z" fill="#18181B"/>
+</svg>

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.9'
+services:
+  moodist:
+    image: ghcr.io/remvze/moodist
+    logging:
+      options:
+        max-size: 1g
+    restart: always
+    ports:
+      - '8080:8080'

docker/nginx/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name   _;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    error_page 404 /404.html;
+    location = /404.html {
+            root /usr/share/nginx/html;
+            internal;
+    }
+
+    location / {
+            try_files $uri $uri/index.html =404;
+    }
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "moodist",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.2.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -22,11 +22,19 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.0.3",
+    "@floating-ui/react": "0.26.0",
+    "@types/howler": "2.2.10",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
-    "astro": "^3.2.3",
+    "astro": "4.0.3",
+    "deepmerge": "4.3.1",
+    "framer-motion": "10.16.4",
+    "howler": "2.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "4.11.0",
+    "react-wrap-balancer": "1.1.0",
+    "zustand": "4.4.3"
   },
   "devDependencies": {
     "@commitlint/cli": "17.7.2",
@@ -49,6 +57,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sort-destructure-keys": "1.5.0",
     "eslint-plugin-sort-keys-fix": "1.1.2",
+    "eslint-plugin-typescript-sort-keys": "3.1.0",
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
     "postcss-html": "1.5.0",
@@ -58,9 +67,8 @@
     "standard-version": "9.5.0",
     "stylelint": "15.10.3",
     "stylelint-config-html": "1.1.0",
-    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-recess-order": "4.4.0",
     "stylelint-config-standard": "34.0.0",
-    "stylelint-prettier": "4.0.2",
-    "tsc-files": "1.1.4"
+    "stylelint-prettier": "4.0.2"
   }
 }

public/favicon.svg

@@ -1,9 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
+<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"/>
 </svg>

public/logo.svg

@@ -0,0 +1,11 @@
+<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"/>
+</svg>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/components/Card.astro

@@ -1,61 +0,0 @@
----
-interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>

src/components/app/app.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { BiSolidHeart } from 'react-icons/bi/index';
+
+import { useSoundStore } from '@/store';
+
+import { Container } from '@/components/container';
+import { StoreConsumer } from '@/components/store-consumer';
+import { Buttons } from '@/components/buttons';
+import { Categories } from '@/components/categories';
+import { ScrollToTop } from '@/components/scroll-to-top';
+import { SharedModal } from '@/components/modals/shared';
+import { Menu } from '@/components/menu/menu';
+import { SnackbarProvider } from '@/contexts/snackbar';
+
+import { sounds } from '@/data/sounds';
+
+import type { Sound } from '@/data/types';
+
+export function App() {
+  const categories = useMemo(() => sounds.categories, []);
+
+  const favorites = useSoundStore(useShallow(state => state.getFavorites()));
+
+  const favoriteSounds = useMemo(() => {
+    const favoriteSounds = categories
+      .map(category => category.sounds)
+      .flat()
+      .filter(sound => favorites.includes(sound.id));
+
+    /**
+     * Reorder based on the order of favorites
+     */
+    return favorites.map(favorite =>
+      favoriteSounds.find(sound => sound.id === favorite),
+    );
+  }, [favorites, categories]);
+
+  const allCategories = useMemo(() => {
+    const favorites = [];
+
+    if (favoriteSounds.length) {
+      favorites.push({
+        icon: <BiSolidHeart />,
+        id: 'favorites',
+        sounds: favoriteSounds as Array<Sound>,
+        title: 'Favorites',
+      });
+    }
+
+    return [...favorites, ...categories];
+  }, [favoriteSounds, categories]);
+
+  return (
+    <SnackbarProvider>
+      <StoreConsumer>
+        <Container>
+          <div id="app" />
+          <Buttons />
+          <Categories categories={allCategories} />
+        </Container>
+
+        <ScrollToTop />
+        <Menu />
+        <SharedModal />
+      </StoreConsumer>
+    </SnackbarProvider>
+  );
+}

src/components/app/index.ts

@@ -0,0 +1 @@
+export { App } from './app';

src/components/buttons/buttons.module.css

@@ -0,0 +1,11 @@
+.buttons {
+  position: sticky;
+  top: 30px;
+  z-index: 10;
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  margin: 0 auto;
+}

src/components/buttons/buttons.tsx

@@ -0,0 +1,13 @@
+import { PlayButton } from './play';
+import { UnselectButton } from './unselect';
+
+import styles from './buttons.module.css';
+
+export function Buttons() {
+  return (
+    <div className={styles.buttons}>
+      <PlayButton />
+      <UnselectButton />
+    </div>
+  );
+}

src/components/buttons/index.ts

@@ -0,0 +1 @@
+export { Buttons } from './buttons';

src/components/buttons/play/index.ts

@@ -0,0 +1 @@
+export { PlayButton } from './play';

src/components/buttons/play/play.module.css

@@ -0,0 +1,30 @@
+.playButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 150px;
+  height: 45px;
+  font-family: var(--font-heading);
+  font-size: var(--font-base);
+  line-height: 0;
+  color: var(--color-neutral-200);
+  cursor: pointer;
+  background-color: var(--color-neutral-950);
+  border: 1px solid var(--color-neutral-50);
+  border-radius: 100px;
+  outline: none;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: var(--color-neutral-800);
+  }
+
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  & span {
+    font-size: var(--font-lg);
+  }
+}

src/components/buttons/play/play.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { BiPause, BiPlay } from 'react-icons/bi/index';
+
+import { useSoundStore } from '@/store';
+import { useSnackbar } from '@/contexts/snackbar';
+import { cn } from '@/helpers/styles';
+
+import styles from './play.module.css';
+
+export function PlayButton() {
+  const isPlaying = useSoundStore(state => state.isPlaying);
+  const pause = useSoundStore(state => state.pause);
+  const toggle = useSoundStore(state => state.togglePlay);
+  const noSelected = useSoundStore(state => state.noSelected());
+
+  const showSnackbar = useSnackbar();
+
+  const handleClick = () => {
+    if (noSelected) return showSnackbar('Please first select a sound to play.');
+
+    toggle();
+  };
+
+  useEffect(() => {
+    if (isPlaying && noSelected) pause();
+  }, [isPlaying, pause, noSelected]);
+
+  return (
+    <button
+      aria-disabled={noSelected}
+      className={cn(styles.playButton, noSelected && styles.disabled)}
+      onClick={handleClick}
+    >
+      {isPlaying ? (
+        <>
+          <span>
+            <BiPause />
+          </span>{' '}
+          Pause
+        </>
+      ) : (
+        <>
+          <span>
+            <BiPlay />
+          </span>{' '}
+          Play
+        </>
+      )}
+    </button>
+  );
+}

src/components/buttons/unselect/index.ts

@@ -0,0 +1 @@
+export { UnselectButton } from './unselect';

src/components/buttons/unselect/unselect.module.css

@@ -0,0 +1,34 @@
+.unselectButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 45px;
+  height: 45px;
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  line-height: 0;
+  color: var(--color-foreground);
+  cursor: pointer;
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 100px;
+  outline: none;
+  transition: 0.2s;
+
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    background-color: var(--color-neutral-200);
+  }
+}
+
+.tooltip {
+  padding: 6px 12px;
+  font-size: var(--font-xsm);
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 100px;
+}

src/components/buttons/unselect/unselect.tsx

@@ -0,0 +1,66 @@
+import { BiUndo, BiTrash } from 'react-icons/bi/index';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { Tooltip } from '@/components/tooltip';
+
+import { useSoundStore } from '@/store';
+import { cn } from '@/helpers/styles';
+import { fade, mix, slideX } from '@/lib/motion';
+
+import styles from './unselect.module.css';
+
+export function UnselectButton() {
+  const noSelected = useSoundStore(state => state.noSelected());
+  const restoreHistory = useSoundStore(state => state.restoreHistory);
+  const hasHistory = useSoundStore(state => !!state.history);
+  const unselectAll = useSoundStore(state => state.unselectAll);
+
+  const variants = {
+    ...mix(fade(), slideX(15)),
+    exit: { opacity: 0 },
+  };
+
+  return (
+    <>
+      <AnimatePresence mode="wait">
+        {(!noSelected || hasHistory) && (
+          <motion.div
+            animate="show"
+            exit="exit"
+            initial="hidden"
+            variants={variants}
+          >
+            <Tooltip
+              hideDelay={0}
+              showDelay={0}
+              content={
+                hasHistory
+                  ? 'Restore unselected sounds.'
+                  : 'Unselect all sounds.'
+              }
+            >
+              <button
+                disabled={noSelected && !hasHistory}
+                aria-label={
+                  hasHistory
+                    ? 'Restore Unselected Sounds'
+                    : 'Unselect All Sounds'
+                }
+                className={cn(
+                  styles.unselectButton,
+                  noSelected && !hasHistory && styles.disabled,
+                )}
+                onClick={() => {
+                  if (hasHistory) restoreHistory();
+                  else if (!noSelected) unselectAll(true);
+                }}
+              >
+                {hasHistory ? <BiUndo /> : <BiTrash />}
+              </button>
+            </Tooltip>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

src/components/categories/categories.tsx

@@ -0,0 +1,23 @@
+import { AnimatePresence } from 'framer-motion';
+
+import { Category } from '@/components/category';
+
+import type { Categories } from '@/data/types';
+
+interface CategoriesProps {
+  categories: Categories;
+}
+
+export function Categories({ categories }: CategoriesProps) {
+  return (
+    <AnimatePresence initial={false}>
+      {categories.map(category => (
+        <Category
+          functional={category.id !== 'favorites'}
+          {...category}
+          key={category.id}
+        />
+      ))}
+    </AnimatePresence>
+  );
+}

src/components/categories/index.ts

@@ -0,0 +1 @@
+export { Categories } from './categories';

src/components/category/category.module.css

@@ -0,0 +1,37 @@
+.category {
+  &:not(:last-of-type) {
+    margin-bottom: 20px;
+  }
+
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+}

src/components/category/category.tsx

@@ -0,0 +1,30 @@
+import { Sounds } from '@/components/sounds';
+
+import styles from './category.module.css';
+
+import type { Category } from '@/data/types';
+
+interface CategoryProps extends Category {
+  functional?: boolean;
+}
+
+export function Category({
+  functional = true,
+  icon,
+  id,
+  sounds,
+  title,
+}: CategoryProps) {
+  return (
+    <div className={styles.category}>
+      <div className={styles.iconContainer}>
+        <div className={styles.tail} />
+        <div className={styles.icon}>{icon}</div>
+      </div>
+
+      <h2 className={styles.title}>{title}</h2>
+
+      <Sounds functional={functional} id={id} sounds={sounds} />
+    </div>
+  );
+}

src/components/category/index.ts

@@ -0,0 +1 @@
+export { Category } from './category';

src/components/container/container.module.css

@@ -0,0 +1,5 @@
+.container {
+  width: 90%;
+  max-width: 600px;
+  margin: 0 auto;
+}

src/components/container/container.tsx

@@ -0,0 +1,9 @@
+import styles from './container.module.css';
+
+interface ContainerProps {
+  children: React.ReactNode;
+}
+
+export function Container({ children }: ContainerProps) {
+  return <div className={styles.container}>{children}</div>;
+}

src/components/container/index.ts

@@ -0,0 +1 @@
+export { Container } from './container';

src/components/footer.astro

@@ -0,0 +1,38 @@
+---
+import { Container } from '@/components/container';
+---
+
+<footer class="footer">
+  <Container>
+    <p>
+      Created by{' '}
+      <a href="https://twitter.com/remvze">
+        Maze <span>✦</span>
+      </a>
+    </p>
+  </Container>
+</footer>
+
+<style>
+  .footer {
+    display: flex;
+    align-items: center;
+    height: 100px;
+
+    & p {
+      font-size: var(--font-sm);
+      color: var(--color-foreground-subtle);
+      text-align: center;
+
+      & a {
+        font-weight: 500;
+        color: var(--color-foreground);
+        text-decoration: none;
+
+        & span {
+          color: #c0eb75;
+        }
+      }
+    }
+  }
+</style>

src/components/hero.astro

@@ -0,0 +1,131 @@
+---
+import { Balancer } from 'react-wrap-balancer';
+import { BsSoundwave } from 'react-icons/bs/index';
+
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+const count = soundCount();
+---
+
+<div class="hero">
+  <Container>
+    <img
+      alt="Faded Moodist Logo"
+      class="logo"
+      height={45}
+      src="/logo.svg"
+      width={45}
+    />
+
+    <div class="title">
+      <div class="left"></div>
+      <h1>Moodist</h1>
+      <div class="right"></div>
+    </div>
+
+    <p class="desc">
+      <Balancer>Ambient sounds for focus and calm.</Balancer>
+    </p>
+
+    <p class="sounds">
+      <span class="icon"><BsSoundwave /></span>
+      <span>{count} Sounds</span>
+    </p>
+  </Container>
+</div>
+
+<style>
+  .hero {
+    padding: 140px 0 60px;
+    text-align: center;
+
+    & .logo {
+      display: block;
+      width: 45px;
+      margin: 0 auto 12px;
+    }
+
+    & .title {
+      display: flex;
+      column-gap: 15px;
+      align-items: center;
+
+      & div {
+        flex-grow: 1;
+        height: 1px;
+
+        &.left {
+          background: linear-gradient(
+            90deg,
+            transparent,
+            var(--color-neutral-300)
+          );
+        }
+
+        &.right {
+          background: linear-gradient(
+            90deg,
+            var(--color-neutral-300),
+            transparent
+          );
+        }
+      }
+
+      & h1 {
+        font-family: var(--font-display);
+        font-size: var(--font-2xlg);
+        font-weight: 600;
+      }
+    }
+
+    & .desc {
+      margin-top: 5px;
+      line-height: 1.6;
+      color: var(--color-foreground-subtle);
+    }
+
+    & .sounds {
+      position: relative;
+      display: flex;
+      column-gap: 8px;
+      align-items: center;
+      justify-content: center;
+      width: max-content;
+      height: 28px;
+      padding-right: 12px;
+      margin: 20px auto 0;
+      font-size: var(--font-xsm);
+      color: var(--color-foreground-subtle);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 100px;
+
+      & .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 0 8px 0 12px;
+        color: var(--color-foreground);
+        border-right: 1px solid var(--color-neutral-200);
+      }
+
+      &::before {
+        position: absolute;
+        top: -1px;
+        left: 50%;
+        width: 70%;
+        height: 1px;
+        content: '';
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--color-neutral-400),
+          transparent
+        );
+        transform: translateX(-50%);
+      }
+    }
+  }
+</style>

src/components/menu/index.ts

@@ -0,0 +1 @@
+export { Menu } from './menu';

src/components/menu/item/index.ts

@@ -0,0 +1 @@
+export { Item } from './item';