Revert "Use modal dialogs for expense creation & edition (#10 )"

This reverts commit 1e66efe516.
2026-02-17 21:16:14 +01:00 · 2023-12-19 09:43:30 -05:00
54 changed files with 461 additions and 3274 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,13 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: ['https://donate.stripe.com/28o3eh96G7hH8k89Ba']
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,36 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: ['main']
-  pull_request:
-    branches: ['main']
-
-jobs:
-  checks:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check out repository
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci --ignore-scripts
-
-      - name: Generate Prisma client
-        run: npx prisma generate
-
-      - name: Check TypeScript types
-        run: npm run check-types
-
-      - name: Check ESLint
-        run: npm run lint
-
-      - name: Check Prettier formatting
-        run: npm run check-formatting
--- a/.gitignore
+++ b/.gitignore
@@ -27,7 +27,7 @@ yarn-error.log*

 # local env files
 .env*.local
-*.env
+.env

 # vercel
 .vercel
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +0,0 @@
-src/components/ui
--- a/17
+++ b/17
@@ -1,17 +0,0 @@
-FROM node:slim
-
-EXPOSE 3000/tcp
-WORKDIR /usr/app
-COPY ./ ./
-
-SHELL ["/bin/bash", "-c"]
-
-RUN apt update && \
-    apt install openssl -y && \
-    apt clean && \
-    apt autoclean && \
-    apt autoremove && \
-    npm install --ignore-scripts && \
-    npm install -g prisma
-
-ENTRYPOINT ["/bin/bash", "-c", "scripts/image-startup.sh"]
--- a/README.md
+++ b/README.md
@@ -10,15 +10,12 @@ Spliit is a free and open source alternative to Splitwise. I created it back in
 - [x] Create reimbursement expenses
 - [x] Progressive Web App
 - [x] Select all/no participant for expenses
- [x] Split expenses unevenly [(#6)](https://github.com/scastiel/spliit2/issues/6)
- [x] Mark a group as favorite [(#29)](https://github.com/scastiel/spliit2/issues/29)
- [x] Tell the application who you are when opening a group [(#7)](https://github.com/scastiel/spliit2/issues/7)
- [x] Assign a category to expenses [(#35)](https://github.com/scastiel/spliit2/issues/35)

 ### Possible incoming features

+- [ ] Tell the application who you are when opening a group [(#7)](https://github.com/scastiel/spliit2/issues/7)
 - [ ] Ability to create recurring expenses [(#5)](https://github.com/scastiel/spliit2/issues/5)
- [ ] Import expenses from Splitwise [(#22)](https://github.com/scastiel/spliit2/issues/22)
+- [ ] Ability to split expenses unevenly [(#6)](https://github.com/scastiel/spliit2/issues/6)

 ## Stack

@@ -32,23 +29,14 @@ Spliit is a free and open source alternative to Splitwise. I created it back in

 The project is open to contributions. Feel free to open an issue or even a pull-request!

-If you want to contribute financially and help us keep the application free and without ads, you can also [make a small one-time donation](https://donate.stripe.com/28o3eh96G7hH8k89Ba) ❤️.
-
 ## Run locally

 1. Clone the repository (or fork it if you intend to contribute)
 2. `npm install`
-3. Start a PostgreSQL server. You can run `./scripts/start-local-db.sh` if you don’t have a server already.
+3. Start a PostgreSQL server. You can run `./start-local-db.sh` if you don’t have a server already.
 4. Copy the file `.env.example` as `.env`
 5. `npm run dev`

-## Run in a container
-
-1. Run `npm run build-image` to build the docker image from the Dockerfile
-2. Copy the file `container.env.example` as `container.env`
-3. Run `npm run start-container` to start the postgres and the spliit2 containers
-4. You can access the app by browsing to http://localhost:3000
-
 ## License

 MIT, see [LICENSE](./LICENSE).
--- a/components.json
+++ b/components.json
@@ -13,4 +13,4 @@
    "components": "@/components",
    "utils": "@/lib/utils"
  }
-}
+}
--- a/compose.yaml
+++ b/compose.yaml
@@ -1,24 +0,0 @@
-services:
-  app:
-    image: spliit2:latest
-    ports:
-      - 3000:3000
-    env_file:
-      - container.env
-    depends_on:
-      db:
-        condition: service_healthy
-
-  db:
-    image: postgres:latest
-    ports:
-      - 5432:5432
-    env_file:
-      - container.env
-    volumes:
-      - /var/lib/postgresql/data:/var/lib/postgresql/data
-    healthcheck:
-      test: ['CMD-SHELL', 'pg_isready -U postgres']
-      interval: 5s
-      timeout: 5s
-      retries: 5
--- a/container.env.example
+++ b/container.env.example
@@ -1,7 +0,0 @@
-# db
-POSTGRES_PASSWORD=1234
-
-# app
-POSTGRES_PRISMA_URL=postgresql://postgres:${POSTGRES_PASSWORD}@db
-POSTGRES_URL_NON_POOLING=postgresql://postgres:${POSTGRES_PASSWORD}@db
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {}

-module.exports = nextConfig
+const { withPlausibleProxy } = require('next-plausible')
+module.exports = withPlausibleProxy()(nextConfig)
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,28 +10,22 @@
      "hasInstallScript": true,
      "dependencies": {
        "@hookform/resolvers": "^3.3.2",
-        "@prisma/client": "^5.6.0",
+        "@prisma/client": "5.6.0",
        "@radix-ui/react-checkbox": "^1.0.4",
-        "@radix-ui/react-collapsible": "^1.0.3",
-        "@radix-ui/react-dialog": "^1.0.5",
        "@radix-ui/react-dropdown-menu": "^2.0.6",
        "@radix-ui/react-hover-card": "^1.0.7",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-popover": "^1.0.7",
-        "@radix-ui/react-radio-group": "^1.1.3",
        "@radix-ui/react-select": "^2.0.0",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-tabs": "^1.0.4",
-        "@radix-ui/react-toast": "^1.1.5",
-        "@tailwindcss/typography": "^0.5.10",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
-        "cmdk": "^0.2.0",
-        "dayjs": "^1.11.10",
        "lucide-react": "^0.290.0",
        "nanoid": "^5.0.4",
        "next": "^14.0.4",
+        "next-plausible": "^3.12.0",
        "next-themes": "^0.2.1",
        "next13-progressbar": "^1.1.1",
        "pg": "^8.11.3",
@@ -40,9 +34,7 @@
        "react-hook-form": "^7.47.0",
        "tailwind-merge": "^1.14.0",
        "tailwindcss-animate": "^1.0.7",
-        "ts-pattern": "^5.0.6",
        "uuid": "^9.0.1",
-        "vaul": "^0.8.0",
        "zod": "^3.22.4"
      },
      "devDependencies": {
@@ -635,36 +627,6 @@
        }
      }
    },
-    "node_modules/@radix-ui/react-collapsible": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
-      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@radix-ui/react-collection": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -726,42 +688,6 @@
        }
      }
    },
-    "node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
-      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -1138,38 +1064,6 @@
        }
      }
    },
-    "node_modules/@radix-ui/react-radio-group": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
-      "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-roving-focus": "1.0.4",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-previous": "1.0.1",
-        "@radix-ui/react-use-size": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@radix-ui/react-roving-focus": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
@@ -1293,40 +1187,6 @@
        }
      }
    },
-    "node_modules/@radix-ui/react-toast": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
-      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-visually-hidden": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@radix-ui/react-use-callback-ref": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -1497,32 +1357,6 @@
        "tslib": "^2.4.0"
      }
    },
-    "node_modules/@tailwindcss/typography": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
-      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
-      "dependencies": {
-        "lodash.castarray": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.merge": "^4.6.2",
-        "postcss-selector-parser": "6.0.10"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
-      }
-    },
-    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/@total-typescript/ts-reset": {
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/@total-typescript/ts-reset/-/ts-reset-0.5.1.tgz",
@@ -2350,252 +2184,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/cmdk": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.0.tgz",
-      "integrity": "sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==",
-      "dependencies": {
-        "@radix-ui/react-dialog": "1.0.0",
-        "command-score": "0.1.2"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
-      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
-      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
-      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
-      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-dismissable-layer": "1.0.0",
-        "@radix-ui/react-focus-guards": "1.0.0",
-        "@radix-ui/react-focus-scope": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-portal": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-slot": "1.0.0",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.4"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
-      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-escape-keydown": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
-      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
-      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
-      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
-      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
-      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
-      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
-      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
-      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
-      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
-      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
-      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/react-remove-scroll": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
-      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2616,11 +2204,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/command-score": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz",
-      "integrity": "sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w=="
-    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2677,11 +2260,6 @@
      "dev": true,
      "license": "BSD-2-Clause"
    },
-    "node_modules/dayjs": {
-      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
-    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4493,20 +4071,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/lodash.castarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
-    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/loose-envify": {
@@ -4674,6 +4243,19 @@
        }
      }
    },
+    "node_modules/next-plausible": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/next-plausible/-/next-plausible-3.12.0.tgz",
+      "integrity": "sha512-SSkEqKQ6PgR8fx3sYfIAT69k2xuCUXO5ngkSS19CjxY97lAoZxsfZpYednxB4zo0mHYv87JzhPynrdBPlCBVHg==",
+      "funding": {
+        "url": "https://github.com/4lejandrito/next-plausible?sponsor=1"
+      },
+      "peerDependencies": {
+        "next": "^11.1.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/next-themes": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
@@ -6167,11 +5749,6 @@
      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
      "license": "Apache-2.0"
    },
-    "node_modules/ts-pattern": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.6.tgz",
-      "integrity": "sha512-Y+jOjihlFriWzcBjncPCf2/am+Hgz7LtsWs77pWg5vQQKLQj07oNrJryo/wK2G0ndNaoVn2ownFMeoeAuReu3Q=="
-    },
    "node_modules/tsconfig-paths": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -6423,18 +6000,6 @@
        "uuid": "dist/bin/uuid"
      }
    },
-    "node_modules/vaul": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.8.0.tgz",
-      "integrity": "sha512-9nUU2jIObJvJZxeQU1oVr/syKo5XqbRoOMoTEt0hHlWify4QZFlqTh6QSN/yxoKzNrMeEQzxbc3XC/vkPLOIqw==",
-      "dependencies": {
-        "@radix-ui/react-dialog": "^1.0.4"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -7,36 +7,26 @@
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
-    "check-types": "tsc --noEmit",
-    "check-formatting": "prettier -c src",
-    "postinstall": "prisma migrate deploy && prisma generate",
-    "build-image": "./scripts/build-image.sh",
-    "start-container": "docker compose --env-file container.env up"
+    "postinstall": "prisma migrate deploy && prisma generate"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
-    "@prisma/client": "^5.6.0",
+    "@prisma/client": "5.6.0",
    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@tailwindcss/typography": "^0.5.10",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "cmdk": "^0.2.0",
-    "dayjs": "^1.11.10",
    "lucide-react": "^0.290.0",
    "nanoid": "^5.0.4",
    "next": "^14.0.4",
+    "next-plausible": "^3.12.0",
    "next-themes": "^0.2.1",
    "next13-progressbar": "^1.1.1",
    "pg": "^8.11.3",
@@ -45,9 +35,7 @@
    "react-hook-form": "^7.47.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
-    "ts-pattern": "^5.0.6",
    "uuid": "^9.0.1",
-    "vaul": "^0.8.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
--- a/prisma/migrations/20231215203936_add_shares_in_expenses/migration.sql
+++ b/prisma/migrations/20231215203936_add_shares_in_expenses/migration.sql
@@ -1,2 +0,0 @@
-- AlterTable
-ALTER TABLE "ExpensePaidFor" ADD COLUMN     "shares" INTEGER NOT NULL DEFAULT 1;
--- a/prisma/migrations/20231215213409_add_split_mode/migration.sql
+++ b/prisma/migrations/20231215213409_add_split_mode/migration.sql
@@ -1,5 +0,0 @@
-- CreateEnum
-CREATE TYPE "SplitMode" AS ENUM ('EVENLY', 'BY_SHARES', 'BY_PERCENTAGE', 'BY_AMOUNT');
-
-- AlterTable
-ALTER TABLE "Expense" ADD COLUMN     "splitMode" "SplitMode" NOT NULL DEFAULT 'EVENLY';
--- a/prisma/migrations/20240108174319_add_expense_date/migration.sql
+++ b/prisma/migrations/20240108174319_add_expense_date/migration.sql
@@ -1,2 +0,0 @@
-- AlterTable
-ALTER TABLE "Expense" ADD COLUMN     "expenseDate" DATE NOT NULL DEFAULT CURRENT_DATE;
--- a/prisma/migrations/20240108194443_add_categories/migration.sql
+++ b/prisma/migrations/20240108194443_add_categories/migration.sql
@@ -1,65 +0,0 @@
-/*
-  Warnings:
-
-  - Added the required column `categoryId` to the `Expense` table without a default value. This is not possible if the table is not empty.
-
-*/
-- AlterTable
-ALTER TABLE "Expense" ADD COLUMN     "categoryId" INTEGER NOT NULL DEFAULT 0;
-
-- CreateTable
-CREATE TABLE "Category" (
-    "id" SERIAL NOT NULL,
-    "grouping" TEXT NOT NULL,
-    "name" TEXT NOT NULL,
-
-    CONSTRAINT "Category_pkey" PRIMARY KEY ("id")
-);
-
-- Insert categories
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (0, 'Uncategorized', 'General');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (1, 'Uncategorized', 'Payment');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (2, 'Entertainment', 'Entertainment');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (3, 'Entertainment', 'Games');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (4, 'Entertainment', 'Movies');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (5, 'Entertainment', 'Music');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (6, 'Entertainment', 'Sports');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (7, 'Food and Drink', 'Food and Drink');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (8, 'Food and Drink', 'Dining Out');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (9, 'Food and Drink', 'Groceries');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (10, 'Food and Drink', 'Liquor');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (11, 'Home', 'Home');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (12, 'Home', 'Electronics');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (13, 'Home', 'Furniture');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (14, 'Home', 'Household Supplies');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (15, 'Home', 'Maintenance');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (16, 'Home', 'Mortgage');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (17, 'Home', 'Pets');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (18, 'Home', 'Rent');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (19, 'Home', 'Services');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (20, 'Life', 'Childcare');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (21, 'Life', 'Clothing');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (22, 'Life', 'Education');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (23, 'Life', 'Gifts');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (24, 'Life', 'Insurance');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (25, 'Life', 'Medical Expenses');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (26, 'Life', 'Taxes');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (27, 'Transportation', 'Transportation');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (28, 'Transportation', 'Bicycle');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (29, 'Transportation', 'Bus/Train');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (30, 'Transportation', 'Car');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (31, 'Transportation', 'Gas/Fuel');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (32, 'Transportation', 'Hotel');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (33, 'Transportation', 'Parking');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (34, 'Transportation', 'Plane');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (35, 'Transportation', 'Taxi');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (36, 'Utilities', 'Utilities');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (37, 'Utilities', 'Cleaning');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (38, 'Utilities', 'Electricity');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (39, 'Utilities', 'Heat/Gas');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (40, 'Utilities', 'Trash');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (41, 'Utilities', 'TV/Phone/Internet');
-INSERT INTO "Category" ("id", "grouping", "name") VALUES (42, 'Utilities', 'Water');
-
-- AddForeignKey
-ALTER TABLE "Expense" ADD CONSTRAINT "Expense_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -29,43 +29,24 @@ model Participant {
  expensesPaidFor ExpensePaidFor[]
 }

-model Category {
-  id       Int       @id @default(autoincrement())
-  grouping String
-  name     String
-  Expense  Expense[]
-}
-
 model Expense {
  id              String           @id
  group           Group            @relation(fields: [groupId], references: [id], onDelete: Cascade)
-  expenseDate     DateTime         @default(dbgenerated("CURRENT_DATE")) @db.Date
  title           String
-  category        Category?        @relation(fields: [categoryId], references: [id])
-  categoryId      Int              @default(0)
  amount          Int
  paidBy          Participant      @relation(fields: [paidById], references: [id], onDelete: Cascade)
  paidById        String
  paidFor         ExpensePaidFor[]
  groupId         String
  isReimbursement Boolean          @default(false)
-  splitMode       SplitMode        @default(EVENLY)
  createdAt       DateTime         @default(now())
 }

-enum SplitMode {
-  EVENLY
-  BY_SHARES
-  BY_PERCENTAGE
-  BY_AMOUNT
-}
-
 model ExpensePaidFor {
  expense       Expense     @relation(fields: [expenseId], references: [id], onDelete: Cascade)
  participant   Participant @relation(fields: [participantId], references: [id], onDelete: Cascade)
  expenseId     String
  participantId String
-  shares        Int         @default(1)

  @@id([expenseId, participantId])
 }
--- a/scripts/build-image.sh
+++ b/scripts/build-image.sh
@@ -1,8 +0,0 @@
-#!/bin/bash
-
-SPLIIT_APP_NAME=$(node -p -e "require('./package.json').name")
-SPLIIT_VERSION=$(node -p -e "require('./package.json').version")
-
-docker buildx build --no-cache -t ${SPLIIT_APP_NAME}:${SPLIIT_VERSION} -t ${SPLIIT_APP_NAME}:latest .
-
-docker image prune -f
--- a/scripts/image-startup.sh
+++ b/scripts/image-startup.sh
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-prisma migrate deploy
-prisma generate
-npm run dev
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
@@ -1,11 +1,5 @@
 import { ExpenseForm } from '@/components/expense-form'
-import {
-  deleteExpense,
-  getCategories,
-  getExpense,
-  getGroup,
-  updateExpense,
-} from '@/lib/api'
+import { deleteExpense, getExpense, getGroup, updateExpense } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -19,7 +13,6 @@ export default async function EditExpensePage({
 }: {
  params: { groupId: string; expenseId: string }
 }) {
-  const categories = await getCategories()
  const group = await getGroup(groupId)
  if (!group) notFound()
  const expense = await getExpense(groupId, expenseId)
@@ -42,7 +35,6 @@ export default async function EditExpensePage({
    <ExpenseForm
      group={group}
      expense={expense}
-      categories={categories}
      onSubmit={updateExpenseAction}
      onDelete={deleteExpenseAction}
    />
--- a/src/app/groups/[groupId]/expenses/active-user-modal.tsx
+++ b/src/app/groups/[groupId]/expenses/active-user-modal.tsx
@@ -1,134 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from '@/components/ui/drawer'
-import { Label } from '@/components/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { getGroup } from '@/lib/api'
-import { useMediaQuery } from '@/lib/hooks'
-import { cn } from '@/lib/utils'
-import { ComponentProps, useEffect, useState } from 'react'
-
-type Props = {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-}
-
-export function ActiveUserModal({ group }: Props) {
-  const [open, setOpen] = useState(false)
-  const isDesktop = useMediaQuery('(min-width: 768px)')
-
-  useEffect(() => {
-    const tempUser = localStorage.getItem(`newGroup-activeUser`)
-    const activeUser = localStorage.getItem(`${group.id}-activeUser`)
-    if (!tempUser && !activeUser) {
-      setOpen(true)
-    }
-  }, [group])
-
-  function updateOpen(open: boolean) {
-    if (!open && !localStorage.getItem(`${group.id}-activeUser`)) {
-      localStorage.setItem(`${group.id}-activeUser`, 'None')
-    }
-    setOpen(open)
-  }
-
-  if (isDesktop) {
-    return (
-      <Dialog open={open} onOpenChange={updateOpen}>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Who are you?</DialogTitle>
-            <DialogDescription>
-              Tell us which participant you are to let us customize how the
-              information is displayed.
-            </DialogDescription>
-          </DialogHeader>
-          <ActiveUserForm group={group} close={() => setOpen(false)} />
-          <DialogFooter className="sm:justify-center">
-            <p className="text-sm text-center text-muted-foreground">
-              This setting can be changed later in the group settings.
-            </p>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    )
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={updateOpen}>
-      <DrawerContent>
-        <DrawerHeader className="text-left">
-          <DrawerTitle>Who are you?</DrawerTitle>
-          <DrawerDescription>
-            Tell us which participant you are to let us customize how the
-            information is displayed.
-          </DrawerDescription>
-        </DrawerHeader>
-        <ActiveUserForm
-          className="px-4"
-          group={group}
-          close={() => setOpen(false)}
-        />
-        <DrawerFooter className="pt-2">
-          <p className="text-sm text-center text-muted-foreground">
-            This setting can be changed later in the group settings.
-          </p>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-function ActiveUserForm({
-  group,
-  close,
-  className,
-}: ComponentProps<'form'> & { group: Props['group']; close: () => void }) {
-  const [selected, setSelected] = useState('None')
-
-  return (
-    <form
-      className={cn('grid items-start gap-4', className)}
-      onSubmit={(event) => {
-        event.preventDefault()
-        localStorage.setItem(`${group.id}-activeUser`, selected)
-        close()
-      }}
-    >
-      <RadioGroup defaultValue="none" onValueChange={setSelected}>
-        <div className="flex flex-col gap-4 my-4">
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="none" id="none" />
-            <Label htmlFor="none" className="italic font-normal flex-1">
-              I don’t want to select anyone
-            </Label>
-          </div>
-          {group.participants.map((participant) => (
-            <div key={participant.id} className="flex items-center space-x-2">
-              <RadioGroupItem value={participant.id} id={participant.id} />
-              <Label htmlFor={participant.id} className="flex-1">
-                {participant.name}
-              </Label>
-            </div>
-          ))}
-        </div>
-      </RadioGroup>
-      <Button type="submit">Save changes</Button>
-    </form>
-  )
-}
--- a/src/app/groups/[groupId]/expenses/category-icon.tsx
+++ b/src/app/groups/[groupId]/expenses/category-icon.tsx
@@ -1,144 +0,0 @@
-import { Category } from '@prisma/client'
-import {
-  Armchair,
-  Baby,
-  Banknote,
-  Bike,
-  Bus,
-  Car,
-  CarTaxiFront,
-  Cat,
-  Clapperboard,
-  CupSoda,
-  Dices,
-  Dumbbell,
-  Eraser,
-  FerrisWheel,
-  Fuel,
-  Gift,
-  Home,
-  Hotel,
-  Lamp,
-  Landmark,
-  LibraryBig,
-  LucideIcon,
-  LucideProps,
-  Martini,
-  Music,
-  ParkingMeter,
-  Phone,
-  PiggyBank,
-  Plane,
-  Plug,
-  PlugZap,
-  Shirt,
-  ShoppingCart,
-  Stethoscope,
-  ThermometerSun,
-  Train,
-  Trash,
-  Utensils,
-  Wine,
-  Wrench,
-} from 'lucide-react'
-
-export function CategoryIcon({
-  category,
-  ...props
-}: { category: Category | null } & LucideProps) {
-  const Icon = getCategoryIcon(`${category?.grouping}/${category?.name}`)
-  return <Icon {...props} />
-}
-
-function getCategoryIcon(category: string): LucideIcon {
-  switch (category) {
-    case 'Uncategorized/General':
-      return Banknote
-    case 'Uncategorized/Payment':
-      return Banknote
-    case 'Entertainment/Entertainment':
-      return FerrisWheel
-    case 'Entertainment/Games':
-      return Dices
-    case 'Entertainment/Movies':
-      return Clapperboard
-    case 'Entertainment/Music':
-      return Music
-    case 'Entertainment/Sports':
-      return Dumbbell
-    case 'Food and Drink/Food and Drink':
-      return Utensils
-    case 'Food and Drink/Dining Out':
-      return Martini
-    case 'Food and Drink/Groceries':
-      return ShoppingCart
-    case 'Food and Drink/Liquor':
-      return Wine
-    case 'Home/Home':
-      return Home
-    case 'Home/Electronics':
-      return Plug
-    case 'Home/Furniture':
-      return Armchair
-    case 'Home/Household Supplies':
-      return Lamp
-    case 'Home/Maintenance':
-      return Wrench
-    case 'Home/Mortgage':
-      return Landmark
-    case 'Home/Pets':
-      return Cat
-    case 'Home/Rent':
-      return PiggyBank
-    case 'Home/Services':
-      return Wrench
-    case 'Life/Childcare':
-      return Baby
-    case 'Life/Clothing':
-      return Shirt
-    case 'Life/Education':
-      return LibraryBig
-    case 'Life/Gifts':
-      return Gift
-    case 'Life/Insurance':
-      return Landmark
-    case 'Life/Medical Expenses':
-      return Stethoscope
-    case 'Life/Taxes':
-      return Banknote
-    case 'Transportation/Transportation':
-      return Bus
-    case 'Transportation/Bicycle':
-      return Bike
-    case 'Transportation/Bus/Train':
-      return Train
-    case 'Transportation/Car':
-      return Car
-    case 'Transportation/Gas/Fuel':
-      return Fuel
-    case 'Transportation/Hotel':
-      return Hotel
-    case 'Transportation/Parking':
-      return ParkingMeter
-    case 'Transportation/Plane':
-      return Plane
-    case 'Transportation/Taxi':
-      return CarTaxiFront
-    case 'Utilities/Utilities':
-      return Banknote
-    case 'Utilities/Cleaning':
-      return Eraser
-    case 'Utilities/Electricity':
-      return PlugZap
-    case 'Utilities/Heat/Gas':
-      return ThermometerSun
-    case 'Utilities/Trash':
-      return Trash
-    case 'Utilities/TV/Phone/Internet':
-      return Phone
-    case 'Utilities/Water':
-      return CupSoda
-    default:
-      return Banknote
-  }
-}
--- a/src/app/groups/[groupId]/expenses/create/page.tsx
+++ b/src/app/groups/[groupId]/expenses/create/page.tsx
@@ -1,5 +1,5 @@
 import { ExpenseForm } from '@/components/expense-form'
-import { createExpense, getCategories, getGroup } from '@/lib/api'
+import { createExpense, getGroup } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -13,7 +13,6 @@ export default async function ExpensePage({
 }: {
  params: { groupId: string }
 }) {
-  const categories = await getCategories()
  const group = await getGroup(groupId)
  if (!group) notFound()

@@ -24,11 +23,5 @@ export default async function ExpensePage({
    redirect(`/groups/${groupId}`)
  }

-  return (
-    <ExpenseForm
-      group={group}
-      categories={categories}
-      onSubmit={createExpenseAction}
-    />
-  )
+  return <ExpenseForm group={group} onSubmit={createExpenseAction} />
 }
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -1,14 +1,12 @@
 'use client'
-import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
 import { Button } from '@/components/ui/button'
 import { getGroupExpenses } from '@/lib/api'
 import { cn } from '@/lib/utils'
-import { Expense, Participant } from '@prisma/client'
-import dayjs, { type Dayjs } from 'dayjs'
+import { Participant } from '@prisma/client'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { Fragment, useEffect } from 'react'
+import { Fragment } from 'react'

 type Props = {
  expenses: Awaited<ReturnType<typeof getGroupExpenses>>
@@ -17,155 +15,64 @@ type Props = {
  groupId: string
 }

-const EXPENSE_GROUPS = {
-  THIS_WEEK: 'This week',
-  EARLIER_THIS_MONTH: 'Earlier this month',
-  LAST_MONTH: 'Last month',
-  EARLIER_THIS_YEAR: 'Earlier this year',
-  LAST_YEAR: 'Last year',
-  OLDER: 'Older',
-}
-
-function getExpenseGroup(date: Dayjs, today: Dayjs) {
-  if (today.isSame(date, 'week')) {
-    return EXPENSE_GROUPS.THIS_WEEK
-  } else if (today.isSame(date, 'month')) {
-    return EXPENSE_GROUPS.EARLIER_THIS_MONTH
-  } else if (today.subtract(1, 'month').isSame(date, 'month')) {
-    return EXPENSE_GROUPS.LAST_MONTH
-  } else if (today.isSame(date, 'year')) {
-    return EXPENSE_GROUPS.EARLIER_THIS_YEAR
-  } else if (today.subtract(1, 'year').isSame(date, 'year')) {
-    return EXPENSE_GROUPS.LAST_YEAR
-  } else {
-    return EXPENSE_GROUPS.OLDER
-  }
-}
-
-function getGroupedExpensesByDate(
-  expenses: Awaited<ReturnType<typeof getGroupExpenses>>,
-) {
-  const today = dayjs()
-  return expenses.reduce(
-    (result: { [key: string]: Expense[] }, expense: Expense) => {
-      const expenseGroup = getExpenseGroup(dayjs(expense.expenseDate), today)
-      result[expenseGroup] = result[expenseGroup] ?? []
-      result[expenseGroup].push(expense)
-      return result
-    },
-    {},
-  )
-}
-
 export function ExpenseList({
  expenses,
  currency,
  participants,
  groupId,
 }: Props) {
-  useEffect(() => {
-    const activeUser = localStorage.getItem('newGroup-activeUser')
-    const newUser = localStorage.getItem(`${groupId}-newUser`)
-    if (activeUser || newUser) {
-      localStorage.removeItem('newGroup-activeUser')
-      localStorage.removeItem(`${groupId}-newUser`)
-      if (activeUser === 'None') {
-        localStorage.setItem(`${groupId}-activeUser`, 'None')
-      } else {
-        const userId = participants.find(
-          (p) => p.name === (activeUser || newUser),
-        )?.id
-        if (userId) {
-          localStorage.setItem(`${groupId}-activeUser`, userId)
-        }
-      }
-    }
-  }, [groupId, participants])
-
  const getParticipant = (id: string) => participants.find((p) => p.id === id)
  const router = useRouter()

-  const groupedExpensesByDate = getGroupedExpensesByDate(expenses)
-
  return expenses.length > 0 ? (
-    Object.values(EXPENSE_GROUPS).map((expenseGroup: string) => {
-      const groupExpenses = groupedExpensesByDate[expenseGroup]
-      if (!groupExpenses) return null
-      return (
-        <div key={expenseGroup}>
-          <div
-            className={
-              'text-muted-foreground text-xs pl-4 sm:pl-6 py-1 font-semibold sticky top-16 bg-white dark:bg-[#1b1917]'
-            }
-          >
-            {expenseGroup}
+    expenses.map((expense) => (
+      <div
+        key={expense.id}
+        className={cn(
+          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-accent',
+          expense.isReimbursement && 'italic',
+        )}
+        onClick={() => {
+          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
+        }}
+      >
+        <div>
+          <div className={cn('mb-1', expense.isReimbursement && 'italic')}>
+            {expense.title}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
+            for{' '}
+            {expense.paidFor.map((paidFor, index) => (
+              <Fragment key={index}>
+                {index !== 0 && <>, </>}
+                <strong>
+                  {
+                    participants.find((p) => p.id === paidFor.participantId)
+                      ?.name
+                  }
+                </strong>
+              </Fragment>
+            ))}
          </div>
-          {groupExpenses.map((expense: any) => (
-            <div
-              key={expense.id}
-              className={cn(
-                'flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
-                expense.isReimbursement && 'italic',
-              )}
-              onClick={() => {
-                router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
-              }}
-            >
-              <CategoryIcon
-                category={expense.category}
-                className="w-4 h-4 mr-2 mt-0.5 text-muted-foreground"
-              />
-              <div className="flex-1">
-                <div
-                  className={cn('mb-1', expense.isReimbursement && 'italic')}
-                >
-                  {expense.title}
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  Paid by{' '}
-                  <strong>{getParticipant(expense.paidById)?.name}</strong> for{' '}
-                  {expense.paidFor.map((paidFor: any, index: number) => (
-                    <Fragment key={index}>
-                      {index !== 0 && <>, </>}
-                      <strong>
-                        {
-                          participants.find(
-                            (p) => p.id === paidFor.participantId,
-                          )?.name
-                        }
-                      </strong>
-                    </Fragment>
-                  ))}
-                </div>
-              </div>
-              <div className="flex flex-col justify-between items-end">
-                <div
-                  className={cn(
-                    'tabular-nums whitespace-nowrap',
-                    expense.isReimbursement ? 'italic' : 'font-bold',
-                  )}
-                >
-                  {currency} {(expense.amount / 100).toFixed(2)}
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  {formatDate(expense.expenseDate)}
-                </div>
-              </div>
-              <Button
-                size="icon"
-                variant="link"
-                className="self-center hidden sm:flex"
-                asChild
-              >
-                <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
-                  <ChevronRight className="w-4 h-4" />
-                </Link>
-              </Button>
-            </div>
-          ))}
        </div>
-      )
-    })
+        <div className="flex items-center">
+          <div
+            className={cn(
+              'tabular-nums whitespace-nowrap',
+              expense.isReimbursement ? 'italic' : 'font-bold',
+            )}
+          >
+            {currency} {(expense.amount / 100).toFixed(2)}
+          </div>
+          <Button size="icon" variant="link" className="-my-2" asChild>
+            <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
+              <ChevronRight className="w-4 h-4" />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    ))
  ) : (
    <p className="px-6 text-sm py-6">
      Your group doesn’t contain any expense yet.{' '}
@@ -177,10 +84,3 @@ export function ExpenseList({
    </p>
  )
 }
-
-function formatDate(date: Date) {
-  return date.toLocaleDateString('en-US', {
-    dateStyle: 'medium',
-    timeZone: 'UTC',
-  })
-}
--- a/src/app/groups/[groupId]/expenses/export/json/route.ts
+++ b/src/app/groups/[groupId]/expenses/export/json/route.ts
@@ -1,39 +0,0 @@
-import { getPrisma } from '@/lib/prisma'
-import { NextResponse } from 'next/server'
-
-export async function GET(
-  req: Request,
-  { params: { groupId } }: { params: { groupId: string } },
-) {
-  console.log({ groupId })
-  const prisma = await getPrisma()
-  const group = await prisma.group.findUnique({
-    where: { id: groupId },
-    select: {
-      id: true,
-      name: true,
-      currency: true,
-      expenses: {
-        select: {
-          expenseDate: true,
-          title: true,
-          category: { select: { grouping: true, name: true } },
-          amount: true,
-          paidById: true,
-          paidFor: { select: { participantId: true, shares: true } },
-          isReimbursement: true,
-          splitMode: true,
-        },
-      },
-      participants: { select: { id: true, name: true } },
-    },
-  })
-  if (!group)
-    return NextResponse.json({ error: 'Invalid group ID' }, { status: 404 })
-  return NextResponse.json(group, {
-    headers: {
-      'content-type': 'application/json',
-      'content-disposition': `attachment; filename="${group.name}.json"`,
-    },
-  })
-}
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -1,4 +1,3 @@
-import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
 import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
 import {
@@ -10,7 +9,7 @@ import {
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getGroup, getGroupExpenses } from '@/lib/api'
-import { Download, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -25,60 +24,45 @@ export default async function GroupExpensesPage({
 }: {
  params: { groupId: string }
 }) {
-  const group = await getGroup(groupId)
-  if (!group) notFound()
-
  return (
-    <>
-      <Card className="mb-4 rounded-none -mx-4 border-x-0 sm:border-x sm:rounded-lg sm:mx-0">
-        <div className="flex flex-1">
-          <CardHeader className="flex-1 p-4 sm:p-6">
-            <CardTitle>Expenses</CardTitle>
-            <CardDescription>
-              Here are the expenses that you created for your group.
-            </CardDescription>
-          </CardHeader>
-          <CardHeader className="p-4 sm:p-6 flex flex-row space-y-0 gap-2">
-            <Button variant="secondary" size="icon" asChild>
-              <Link
-                href={`/groups/${groupId}/expenses/export/json`}
-                target="_blank"
-              >
-                <Download className="w-4 h-4" />
-              </Link>
-            </Button>
-            <Button asChild size="icon">
-              <Link href={`/groups/${groupId}/expenses/create`}>
-                <Plus className="w-4 h-4" />
-              </Link>
-            </Button>
-          </CardHeader>
-        </div>
+    <Card className="mb-4">
+      <div className="flex flex-1">
+        <CardHeader className="flex-1">
+          <CardTitle>Expenses</CardTitle>
+          <CardDescription>
+            Here are the expenses that you created for your group.
+          </CardDescription>
+        </CardHeader>
+        <CardHeader>
+          <Button asChild size="icon">
+            <Link href={`/groups/${groupId}/expenses/create`}>
+              <Plus />
+            </Link>
+          </Button>
+        </CardHeader>
+      </div>

-        <CardContent className="p-0 pt-2 pb-4 sm:pb-6 flex flex-col gap-4 relative">
-          <Suspense
-            fallback={[0, 1, 2].map((i) => (
-              <div
-                key={i}
-                className="border-t flex justify-between items-center px-6 py-4 text-sm"
-              >
-                <div className="flex flex-col gap-2">
-                  <Skeleton className="h-4 w-16 rounded-full" />
-                  <Skeleton className="h-4 w-32 rounded-full" />
-                </div>
-                <div>
-                  <Skeleton className="h-4 w-16 rounded-full" />
-                </div>
+      <CardContent className="p-0">
+        <Suspense
+          fallback={[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              className="border-t flex justify-between items-center px-6 py-4 text-sm"
+            >
+              <div className="flex flex-col gap-2">
+                <Skeleton className="h-4 w-16 rounded-full" />
+                <Skeleton className="h-4 w-32 rounded-full" />
              </div>
-            ))}
-          >
-            <Expenses groupId={groupId} />
-          </Suspense>
-        </CardContent>
-      </Card>
-
-      <ActiveUserModal group={group} />
-    </>
+              <div>
+                <Skeleton className="h-4 w-16 rounded-full" />
+              </div>
+            </div>
+          ))}
+        >
+          <Expenses groupId={groupId} />
+        </Suspense>
+      </CardContent>
+    </Card>
  )
 }

--- a/src/app/groups/actions.ts
+++ b/src/app/groups/actions.ts
@@ -1,5 +1,5 @@
 'use server'
-import { getGroups } from '@/lib/api'
+import { getGroups } from "@/lib/api"

 export async function getGroupsAction(groupIds: string[]) {
  'use server'
--- a/src/app/groups/layout.tsx
+++ b/src/app/groups/layout.tsx
@@ -2,10 +2,8 @@ import { PropsWithChildren } from 'react'

 export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
  return (
-    <>
-      <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
-        {children}
-      </main>
-    </>
+    <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
+      {children}
+    </main>
  )
 }
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -11,19 +11,18 @@ export const metadata: Metadata = {
 export default async function GroupsPage() {
  return (
    <>
-      <div className="flex justify-between items-center gap-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 items-start">
        <h1 className="font-bold text-2xl">
-          <Link href="/groups">My groups</Link>
+          <Link href="/groups">Recently visited groups</Link>
        </h1>
-        <Button asChild size="icon">
+        <Button asChild>
          <Link href="/groups/create">
-            <Plus className="w-4 h-4" />
+            <Plus className="w-4 h-4 mr-2" />
+            Create group
          </Link>
        </Button>
      </div>
-      <div>
-        <RecentGroupList />
-      </div>
+      <RecentGroupList />
    </>
  )
 }
--- a/src/app/groups/recent-group-list-card.tsx
+++ b/src/app/groups/recent-group-list-card.tsx
@@ -1,185 +0,0 @@
-'use client'
-import { RecentGroupsState } from '@/app/groups/recent-group-list'
-import {
-  RecentGroup,
-  archiveGroup,
-  deleteRecentGroup,
-  getArchivedGroups,
-  getStarredGroups,
-  saveRecentGroup,
-  starGroup,
-  unarchiveGroup,
-  unstarGroup,
-} from '@/app/groups/recent-groups-helpers'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Skeleton } from '@/components/ui/skeleton'
-import { ToastAction } from '@/components/ui/toast'
-import { useToast } from '@/components/ui/use-toast'
-import { StarFilledIcon } from '@radix-ui/react-icons'
-import { Calendar, MoreHorizontal, Star, Users } from 'lucide-react'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { SetStateAction } from 'react'
-
-export function RecentGroupListCard({
-  group,
-  state,
-  setState,
-}: {
-  group: RecentGroup
-  state: RecentGroupsState
-  setState: (state: SetStateAction<RecentGroupsState>) => void
-}) {
-  const router = useRouter()
-  const toast = useToast()
-
-  const details =
-    state.status === 'complete'
-      ? state.groupsDetails.find((d) => d.id === group.id)
-      : null
-
-  if (state.status === 'pending') return null
-
-  const refreshGroupsFromStorage = () =>
-    setState({
-      ...state,
-      starredGroups: getStarredGroups(),
-      archivedGroups: getArchivedGroups(),
-    })
-
-  const isStarred = state.starredGroups.includes(group.id)
-  const isArchived = state.archivedGroups.includes(group.id)
-
-  return (
-    <li key={group.id}>
-      <Button variant="outline" className="h-fit w-full py-3" asChild>
-        <div
-          className="text-base"
-          onClick={() => router.push(`/groups/${group.id}`)}
-        >
-          <div className="w-full flex flex-col gap-1">
-            <div className="text-base flex gap-2 justify-between">
-              <Link
-                href={`/groups/${group.id}`}
-                className="flex-1 overflow-hidden text-ellipsis"
-              >
-                {group.name}
-              </Link>
-              <span className="flex-shrink-0">
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="-my-3 -ml-3 -mr-1.5"
-                  onClick={(event) => {
-                    event.stopPropagation()
-                    if (isStarred) {
-                      unstarGroup(group.id)
-                    } else {
-                      starGroup(group.id)
-                      unarchiveGroup(group.id)
-                    }
-                    refreshGroupsFromStorage()
-                  }}
-                >
-                  {isStarred ? (
-                    <StarFilledIcon className="w-4 h-4 text-orange-400" />
-                  ) : (
-                    <Star className="w-4 h-4 text-muted-foreground" />
-                  )}
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="-my-3 -mr-3 -ml-1.5"
-                    >
-                      <MoreHorizontal className="w-4 h-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      className="text-destructive"
-                      onClick={(event) => {
-                        event.stopPropagation()
-                        deleteRecentGroup(group)
-                        setState({
-                          ...state,
-                          groups: state.groups.filter((g) => g.id !== group.id),
-                        })
-                        toast.toast({
-                          title: 'Group has been removed',
-                          description:
-                            'The group was removed from your recent groups list.',
-                          action: (
-                            <ToastAction
-                              altText="Undo group removal"
-                              onClick={() => {
-                                saveRecentGroup(group)
-                                setState({
-                                  ...state,
-                                  groups: state.groups,
-                                })
-                              }}
-                            >
-                              Undo
-                            </ToastAction>
-                          ),
-                        })
-                      }}
-                    >
-                      Remove from recent groups
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={(event) => {
-                        event.stopPropagation()
-                        if (isArchived) {
-                          unarchiveGroup(group.id)
-                        } else {
-                          archiveGroup(group.id)
-                          unstarGroup(group.id)
-                        }
-                        refreshGroupsFromStorage()
-                      }}
-                    >
-                      {isArchived ? <>Unarchive group</> : <>Archive group</>}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </span>
-            </div>
-            <div className="text-muted-foreground font-normal text-xs">
-              {details ? (
-                <div className="w-full flex items-center justify-between">
-                  <div className="flex items-center">
-                    <Users className="w-3 h-3 inline mr-1" />
-                    <span>{details._count.participants}</span>
-                  </div>
-                  <div className="flex items-center">
-                    <Calendar className="w-3 h-3 inline mx-1" />
-                    <span>
-                      {new Date(details.createdAt).toLocaleDateString('en-US', {
-                        dateStyle: 'medium',
-                      })}
-                    </span>
-                  </div>
-                </div>
-              ) : (
-                <div className="flex justify-between">
-                  <Skeleton className="h-4 w-6 rounded-full" />
-                  <Skeleton className="h-4 w-24 rounded-full" />
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </Button>
-    </li>
-  )
-}
--- a/src/app/groups/recent-group-list.tsx
+++ b/src/app/groups/recent-group-list.tsx
@@ -1,77 +1,43 @@
 'use client'
 import { getGroupsAction } from '@/app/groups/actions'
-import {
-  RecentGroups,
-  getArchivedGroups,
-  getRecentGroups,
-  getStarredGroups,
-} from '@/app/groups/recent-groups-helpers'
+import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
 import { getGroups } from '@/lib/api'
-import { Loader2 } from 'lucide-react'
+import { Calendar, Loader2, Users } from 'lucide-react'
 import Link from 'next/link'
-import { SetStateAction, useEffect, useState } from 'react'
-import { RecentGroupListCard } from './recent-group-list-card'
+import { useEffect, useState } from 'react'
+import { z } from 'zod'

-export type RecentGroupsState =
+const recentGroupsSchema = z.array(
+  z.object({
+    id: z.string().min(1),
+    name: z.string(),
+  }),
+)
+type RecentGroups = z.infer<typeof recentGroupsSchema>
+
+type State =
  | { status: 'pending' }
-  | {
-      status: 'partial'
-      groups: RecentGroups
-      starredGroups: string[]
-      archivedGroups: string[]
-    }
+  | { status: 'partial'; groups: RecentGroups }
  | {
      status: 'complete'
      groups: RecentGroups
      groupsDetails: Awaited<ReturnType<typeof getGroups>>
-      starredGroups: string[]
-      archivedGroups: string[]
    }

-function sortGroups(
-  state: RecentGroupsState & { status: 'complete' | 'partial' },
-) {
-  const starredGroupInfo = []
-  const groupInfo = []
-  const archivedGroupInfo = []
-  for (const group of state.groups) {
-    if (state.starredGroups.includes(group.id)) {
-      starredGroupInfo.push(group)
-    } else if (state.archivedGroups.includes(group.id)) {
-      archivedGroupInfo.push(group)
-    } else {
-      groupInfo.push(group)
-    }
-  }
-  return {
-    starredGroupInfo,
-    groupInfo,
-    archivedGroupInfo,
-  }
+type Props = {
+  getGroupsAction: (groupIds: string[]) => ReturnType<typeof getGroups>
 }

 export function RecentGroupList() {
-  const [state, setState] = useState<RecentGroupsState>({ status: 'pending' })
+  const [state, setState] = useState<State>({ status: 'pending' })

  useEffect(() => {
    const groupsInStorage = getRecentGroups()
-    const starredGroups = getStarredGroups()
-    const archivedGroups = getArchivedGroups()
-    setState({
-      status: 'partial',
-      groups: groupsInStorage,
-      starredGroups,
-      archivedGroups,
-    })
+    setState({ status: 'partial', groups: groupsInStorage })
    getGroupsAction(groupsInStorage.map((g) => g.id)).then((groupsDetails) => {
-      setState({
-        status: 'complete',
-        groups: groupsInStorage,
-        groupsDetails,
-        starredGroups,
-        archivedGroups,
-      })
+      setState({ status: 'complete', groups: groupsInStorage, groupsDetails })
    })
  }, [])

@@ -98,63 +64,51 @@ export function RecentGroupList() {
    )
  }

-  const { starredGroupInfo, groupInfo, archivedGroupInfo } = sortGroups(state)
-
-  return (
-    <>
-      {starredGroupInfo.length > 0 && (
-        <>
-          <h2 className="mb-2">Starred groups</h2>
-          <GroupList
-            groups={starredGroupInfo}
-            state={state}
-            setState={setState}
-          />
-        </>
-      )}
-
-      {groupInfo.length > 0 && (
-        <>
-          <h2 className="mt-6 mb-2">Recent groups</h2>
-          <GroupList groups={groupInfo} state={state} setState={setState} />
-        </>
-      )}
-
-      {archivedGroupInfo.length > 0 && (
-        <>
-          <h2 className="mt-6 mb-2 opacity-50">Archived groups</h2>
-          <div className="opacity-50">
-            <GroupList
-              groups={archivedGroupInfo}
-              state={state}
-              setState={setState}
-            />
-          </div>
-        </>
-      )}
-    </>
-  )
-}
-
-function GroupList({
-  groups,
-  state,
-  setState,
-}: {
-  groups: RecentGroups
-  state: RecentGroupsState
-  setState: (state: SetStateAction<RecentGroupsState>) => void
-}) {
  return (
    <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
-      {groups.map((group) => (
-        <RecentGroupListCard
-          key={group.id}
-          group={group}
-          state={state}
-          setState={setState}
-        />
-      ))}
+      {state.groups.map((group) => {
+        const details =
+          state.status === 'complete'
+            ? state.groupsDetails.find((d) => d.id === group.id)
+            : null
+        return (
+          <li key={group.id}>
+            <Button variant="outline" className="h-fit w-full py-3" asChild>
+              <Link href={`/groups/${group.id}`} className="text-base">
+                <div className="w-full flex flex-col gap-1">
+                  <div className="text-base">{group.name}</div>
+                  <div className="text-muted-foreground font-normal text-xs">
+                    {details ? (
+                      <div className="w-full flex items-center justify-between">
+                        <div className="flex items-center">
+                          <Users className="w-3 h-3 inline mr-1" />
+                          <span>{details._count.participants}</span>
+                        </div>
+                        <div className="flex items-center">
+                          <Calendar className="w-3 h-3 inline mx-1" />
+                          <span>
+                            {new Date(details.createdAt).toLocaleDateString(
+                              'en-US',
+                              {
+                                dateStyle: 'medium',
+                              },
+                            )}
+                          </span>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex justify-between">
+                        <Skeleton className="h-4 w-6 rounded-full" />
+                        <Skeleton className="h-4 w-24 rounded-full" />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </Link>
+            </Button>
+          </li>
+        )
+      })}
    </ul>
  )
 }
--- a/src/app/groups/recent-groups-helpers.ts
+++ b/src/app/groups/recent-groups-helpers.ts
@@ -7,15 +7,10 @@ export const recentGroupsSchema = z.array(
  }),
 )

-export const starredGroupsSchema = z.array(z.string())
-export const archivedGroupsSchema = z.array(z.string())
-
 export type RecentGroups = z.infer<typeof recentGroupsSchema>
 export type RecentGroup = RecentGroups[number]

 const STORAGE_KEY = 'recentGroups'
-const STARRED_GROUPS_STORAGE_KEY = 'starredGroups'
-const ARCHIVED_GROUPS_STORAGE_KEY = 'archivedGroups'

 export function getRecentGroups() {
  const groupsInStorageJson = localStorage.getItem(STORAGE_KEY)
@@ -33,61 +28,3 @@ export function saveRecentGroup(group: RecentGroup) {
    JSON.stringify([group, ...recentGroups.filter((rg) => rg.id !== group.id)]),
  )
 }
-
-export function deleteRecentGroup(group: RecentGroup) {
-  const recentGroups = getRecentGroups()
-  localStorage.setItem(
-    STORAGE_KEY,
-    JSON.stringify(recentGroups.filter((rg) => rg.id !== group.id)),
-  )
-}
-
-export function getStarredGroups() {
-  const starredGroupsJson = localStorage.getItem(STARRED_GROUPS_STORAGE_KEY)
-  const starredGroupsRaw = starredGroupsJson
-    ? JSON.parse(starredGroupsJson)
-    : []
-  const parseResult = starredGroupsSchema.safeParse(starredGroupsRaw)
-  return parseResult.success ? parseResult.data : []
-}
-
-export function starGroup(groupId: string) {
-  const starredGroups = getStarredGroups()
-  localStorage.setItem(
-    STARRED_GROUPS_STORAGE_KEY,
-    JSON.stringify([...starredGroups, groupId]),
-  )
-}
-
-export function unstarGroup(groupId: string) {
-  const starredGroups = getStarredGroups()
-  localStorage.setItem(
-    STARRED_GROUPS_STORAGE_KEY,
-    JSON.stringify(starredGroups.filter((g) => g !== groupId)),
-  )
-}
-
-export function getArchivedGroups() {
-  const archivedGroupsJson = localStorage.getItem(ARCHIVED_GROUPS_STORAGE_KEY)
-  const archivedGroupsRaw = archivedGroupsJson
-    ? JSON.parse(archivedGroupsJson)
-    : []
-  const parseResult = archivedGroupsSchema.safeParse(archivedGroupsRaw)
-  return parseResult.success ? parseResult.data : []
-}
-
-export function archiveGroup(groupId: string) {
-  const archivedGroups = getArchivedGroups()
-  localStorage.setItem(
-    ARCHIVED_GROUPS_STORAGE_KEY,
-    JSON.stringify([...archivedGroups, groupId]),
-  )
-}
-
-export function unarchiveGroup(groupId: string) {
-  const archivedGroups = getArchivedGroups()
-  localStorage.setItem(
-    ARCHIVED_GROUPS_STORAGE_KEY,
-    JSON.stringify(archivedGroups.filter((g) => g !== groupId)),
-  )
-}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,9 +2,9 @@ import { ProgressBar } from '@/components/progress-bar'
 import { ThemeProvider } from '@/components/theme-provider'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { Button } from '@/components/ui/button'
-import { Toaster } from '@/components/ui/toaster'
 import { env } from '@/lib/env'
 import type { Metadata, Viewport } from 'next'
+import PlausibleProvider from 'next-plausible'
 import Image from 'next/image'
 import Link from 'next/link'
 import './globals.css'
@@ -64,6 +64,9 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en" suppressHydrationWarning>
+      {env.PLAUSIBLE_DOMAIN && (
+        <PlausibleProvider domain={env.PLAUSIBLE_DOMAIN} trackOutboundLinks />
+      )}
      <body className="pt-16 min-h-[100dvh] flex flex-col items-stretch bg-slate-50 bg-opacity-30 dark:bg-background">
        <ThemeProvider
          attribute="class"
@@ -72,7 +75,7 @@ export default function RootLayout({
          disableTransitionOnChange
        >
          <ProgressBar />
-          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50">
+          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
            <Link
              className="flex items-center gap-2 hover:scale-105 transition-transform"
              href="/"
@@ -105,41 +108,30 @@ export default function RootLayout({
            </div>
          </header>

-          <div className="flex-1 flex flex-col">{children}</div>
+          {children}

-          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col sm:flex-row sm:justify-between gap-4 text-xs [&_a]:underline">
-            <div className="flex flex-col space-y-2">
-              <div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
-                <Link className="flex items-center gap-2" href="/">
-                  <Image
-                    src="/logo-with-text.png"
-                    className="m-1 h-auto"
-                    width={(35 * 522) / 180}
-                    height={35}
-                    alt="Spliit"
-                  />
-                </Link>
-              </div>
-              <div className="flex flex-col space-y a--no-underline-text-white">
-                <span>Made in Montréal, Québec 🇨🇦</span>
-                <span>
-                  Built by{' '}
-                  <a href="https://scastiel.dev" target="_blank" rel="noopener">
-                    Sebastien Castiel
-                  </a>{' '}
-                  and{' '}
-                  <a
-                    href="https://github.com/scastiel/spliit2/graphs/contributors"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    contributors
-                  </a>
-                </span>
-              </div>
+          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col space-y-2 text-xs [&_a]:underline">
+            <div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
+              <Link className="flex items-center gap-2" href="/">
+                <Image
+                  src="/logo-with-text.png"
+                  className="m-1 h-auto"
+                  width={(35 * 522) / 180}
+                  height={35}
+                  alt="Spliit"
+                />
+              </Link>
+            </div>
+            <div className="flex flex-col space-y a--no-underline-text-white">
+              <span>Made in Montréal, Québec 🇨🇦</span>
+              <span>
+                Built by{' '}
+                <a href="https://scastiel.dev" target="_blank" rel="noopener">
+                  Sebastien Castiel
+                </a>
+              </span>
            </div>
          </footer>
-          <Toaster />
        </ThemeProvider>
      </body>
    </html>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,17 @@
 import { Button } from '@/components/ui/button'
-import { Github, LucideIcon } from 'lucide-react'
+import {
+  BarChartHorizontalBig,
+  CircleDollarSign,
+  Github,
+  List,
+  LucideIcon,
+  Share,
+  ShieldX,
+  Users,
+} from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode } from 'react'

-// FIX for https://github.com/vercel/next.js/issues/58615
-export const dynamic = 'force-dynamic'
-
 export default function HomePage() {
  return (
    <main>
@@ -16,18 +22,91 @@ export default function HomePage() {
            & <strong>Family</strong>
          </h1>
          <p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
-            Welcome to your new <strong>Spliit</strong> instance! <br />
-            Customize this page by editing <em>src/app/page.tsx</em>.
+            No ads. No account. <br className="sm:hidden" /> Open Source.
+            Forever Free.
          </p>
          <div className="flex gap-2">
-            <Button asChild>
-              <Link href="/groups">Go to groups</Link>
+            <Button asChild size="lg">
+              <Link
+                className="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8 rounded-md"
+                href="/groups/create"
+              >
+                Create a group
+              </Link>
            </Button>
-            <Button asChild variant="secondary">
-              <Link href="https://github.com/spliit-app/spliit">
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-slate-50 dark:bg-card py-16 md:py-24 lg:py-32">
+        <div className="p-4 flex mx-auto max-w-screen-md flex-col items-center text-center">
+          <h2 className="font-bold text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
+            Features
+          </h2>
+          <p
+            className="mt-2 md:mt-3 leading-normal text-muted-foreground sm:text-lg sm:leading-7"
+            style={{ textWrap: 'balance' } as any}
+          >
+            Spliit is a minimalist application to track and share expenses with
+            your friends and family.
+          </p>
+          <div className="mt-8 md:mt-6 w-full grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-4 text-left">
+            <Feature
+              Icon={Users}
+              name="Groups"
+              description="Create a group for a travel, an event, a gift…"
+            />
+            <Feature
+              Icon={List}
+              name="Expenses"
+              description="Create and list expenses in your group."
+            />
+            <Feature
+              Icon={Share}
+              name="Share"
+              description="Send the group link to participants."
+            />
+            <Feature
+              Icon={BarChartHorizontalBig}
+              name="Balances"
+              description="Visualize how much each participant spent."
+            />
+            <Feature
+              Icon={CircleDollarSign}
+              name="Reimbursements"
+              description="Optimize money transfers between participants."
+            />
+            <Feature
+              Icon={ShieldX}
+              name="No ads"
+              description="No account. No limitation. No problem."
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 md:py-24 lg:py-32">
+        <div className="container flex max-w-screen-md flex-col items-center text-center">
+          <h2 className="font-bold text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
+            Proudly Open Source
+          </h2>
+          <p
+            className="mt-2 leading-normal text-muted-foreground sm:text-lg sm:leading-7"
+            style={{ textWrap: 'balance' } as any}
+          >
+            Spliit is open source and powered by open source software. Feel free
+            to contribute!
+          </p>
+          <div className="mt-4 md:mt-6">
+            <Button asChild variant="secondary" size="lg">
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href="https://github.com/scastiel/spliit2"
+              >
                <Github className="w-4 h-4 mr-2" />
                GitHub
-              </Link>
+              </a>
            </Button>
          </div>
        </div>
--- a/src/components/category-selector.tsx
+++ b/src/components/category-selector.tsx
@@ -1,152 +0,0 @@
-import { ChevronDown } from 'lucide-react'
-
-import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
-import { Button, ButtonProps } from '@/components/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@/components/ui/command'
-import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { useMediaQuery } from '@/lib/hooks'
-import { Category } from '@prisma/client'
-import { forwardRef, useState } from 'react'
-
-type Props = {
-  categories: Category[]
-  onValueChange: (categoryId: Category['id']) => void
-  defaultValue: Category['id']
-}
-
-export function CategorySelector({
-  categories,
-  onValueChange,
-  defaultValue,
-}: Props) {
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState<number>(defaultValue)
-  const isDesktop = useMediaQuery('(min-width: 768px)')
-
-  const selectedCategory =
-    categories.find((category) => category.id === value) ?? categories[0]
-
-  if (isDesktop) {
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <CategoryButton category={selectedCategory} open={open} />
-        </PopoverTrigger>
-        <PopoverContent className="p-0" align="start">
-          <CategoryCommand
-            categories={categories}
-            onValueChange={(id) => {
-              setValue(id)
-              onValueChange(id)
-              setOpen(false)
-            }}
-          />
-        </PopoverContent>
-      </Popover>
-    )
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>
-        <CategoryButton category={selectedCategory} open={open} />
-      </DrawerTrigger>
-      <DrawerContent className="p-0">
-        <CategoryCommand
-          categories={categories}
-          onValueChange={(id) => {
-            setValue(id)
-            onValueChange(id)
-            setOpen(false)
-          }}
-        />
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-function CategoryCommand({
-  categories,
-  onValueChange,
-}: {
-  categories: Category[]
-  onValueChange: (categoryId: Category['id']) => void
-}) {
-  const categoriesByGroup = categories.reduce<Record<string, Category[]>>(
-    (acc, category) => ({
-      ...acc,
-      [category.grouping]: [...(acc[category.grouping] ?? []), category],
-    }),
-    {},
-  )
-
-  return (
-    <Command>
-      <CommandInput placeholder="Search category..." className="text-base" />
-      <CommandEmpty>No category found.</CommandEmpty>
-      <div className="w-full max-h-[300px] overflow-y-auto">
-        {Object.entries(categoriesByGroup).map(
-          ([group, groupCategories], index) => (
-            <CommandGroup key={index} heading={group}>
-              {groupCategories.map((category) => (
-                <CommandItem
-                  key={category.id}
-                  value={`${category.id} ${category.grouping} ${category.name}`}
-                  onSelect={(currentValue) => {
-                    const id = Number(currentValue.split(' ')[0])
-                    onValueChange(id)
-                  }}
-                >
-                  <CategoryLabel category={category} />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          ),
-        )}
-      </div>
-    </Command>
-  )
-}
-
-type CategoryButtonProps = {
-  category: Category
-  open: boolean
-}
-const CategoryButton = forwardRef<HTMLButtonElement, CategoryButtonProps>(
-  ({ category, open, ...props }: ButtonProps & CategoryButtonProps, ref) => {
-    return (
-      <Button
-        variant="outline"
-        role="combobox"
-        aria-expanded={open}
-        className="flex w-full justify-between"
-        ref={ref}
-        {...props}
-      >
-        <CategoryLabel category={category} />
-        <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </Button>
-    )
-  },
-)
-CategoryButton.displayName = 'CategoryButton'
-
-function CategoryLabel({ category }: { category: Category }) {
-  return (
-    <div className="flex items-center gap-3">
-      <CategoryIcon category={category} className="w-4 h-4" />
-      {category.name}
-    </div>
-  )
-}
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -1,21 +1,15 @@
 'use client'
 import { AsyncButton } from '@/components/async-button'
-import { CategorySelector } from '@/components/category-selector'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
 import {
  Card,
  CardContent,
-  CardDescription,
+  CardFooter,
  CardHeader,
  CardTitle,
 } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/components/ui/collapsible'
 import {
  Form,
  FormControl,
@@ -33,84 +27,43 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select'
-import { getCategories, getExpense, getGroup } from '@/lib/api'
+import { getExpense, getGroup } from '@/lib/api'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
-import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Save, Trash2 } from 'lucide-react'
 import { useSearchParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
-import { match } from 'ts-pattern'

 export type Props = {
  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
  expense?: NonNullable<Awaited<ReturnType<typeof getExpense>>>
-  categories: NonNullable<Awaited<ReturnType<typeof getCategories>>>
  onSubmit: (values: ExpenseFormValues) => Promise<void>
  onDelete?: () => Promise<void>
 }

-export function ExpenseForm({
-  group,
-  expense,
-  categories,
-  onSubmit,
-  onDelete,
-}: Props) {
+export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
  const isCreate = expense === undefined
  const searchParams = useSearchParams()
-  const getSelectedPayer = (field?: { value: string }) => {
-    if (isCreate && typeof window !== 'undefined') {
-      const activeUser = localStorage.getItem(`${group.id}-activeUser`)
-      if (activeUser && activeUser !== 'None') {
-        return activeUser
-      }
-    }
-    return field?.value
-  }
  const form = useForm<ExpenseFormValues>({
    resolver: zodResolver(expenseFormSchema),
    defaultValues: expense
      ? {
          title: expense.title,
-          expenseDate: expense.expenseDate ?? new Date(),
          amount: String(expense.amount / 100) as unknown as number, // hack
-          category: expense.categoryId,
          paidBy: expense.paidById,
-          paidFor: expense.paidFor.map(({ participantId, shares }) => ({
-            participant: participantId,
-            shares: String(shares / 100) as unknown as number,
-          })),
-          splitMode: expense.splitMode,
+          paidFor: expense.paidFor.map(({ participantId }) => participantId),
          isReimbursement: expense.isReimbursement,
        }
      : searchParams.get('reimbursement')
      ? {
          title: 'Reimbursement',
-          expenseDate: new Date(),
          amount: String(
            (Number(searchParams.get('amount')) || 0) / 100,
          ) as unknown as number, // hack
-          category: 1, // category with Id 1 is Payment
          paidBy: searchParams.get('from') ?? undefined,
-          paidFor: [
-            searchParams.get('to')
-              ? { participant: searchParams.get('to')!, shares: 1 }
-              : undefined,
-          ],
+          paidFor: [searchParams.get('to') ?? undefined],
          isReimbursement: true,
-          splitMode: 'EVENLY',
        }
-      : {
-          title: '',
-          expenseDate: new Date(),
-          amount: 0,
-          category: 0, // category with Id 0 is General
-          paidFor: [],
-          paidBy: getSelectedPayer(),
-          isReimbursement: false,
-          splitMode: 'EVENLY',
-        },
+      : { title: '', amount: 0, paidFor: [], isReimbursement: false },
  })

  return (
@@ -122,12 +75,12 @@ export function ExpenseForm({
              {isCreate ? <>Create expense</> : <>Edit expense</>}
            </CardTitle>
          </CardHeader>
-          <CardContent className="grid sm:grid-cols-2 gap-6">
+          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
-                <FormItem className="">
+                <FormItem className="order-1">
                  <FormLabel>Expense title</FormLabel>
                  <FormControl>
                    <Input
@@ -146,22 +99,27 @@ export function ExpenseForm({

            <FormField
              control={form.control}
-              name="expenseDate"
+              name="paidBy"
              render={({ field }) => (
-                <FormItem className="sm:order-1">
-                  <FormLabel>Expense date</FormLabel>
-                  <FormControl>
-                    <Input
-                      className="date-base"
-                      type="date"
-                      defaultValue={formatDate(field.value)}
-                      onChange={(event) => {
-                        return field.onChange(new Date(event.target.value))
-                      }}
-                    />
-                  </FormControl>
+                <FormItem className="order-3 sm:order-2">
+                  <FormLabel>Paid by</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a participant" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {group.participants.map(({ id, name }) => (
+                        <SelectItem key={id} value={id}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                  <FormDescription>
-                    Enter the date the expense was made.
+                    Select the participant who paid the expense.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
@@ -172,7 +130,7 @@ export function ExpenseForm({
              control={form.control}
              name="amount"
              render={({ field }) => (
-                <FormItem className="sm:order-3">
+                <FormItem className="order-2 sm:order-3">
                  <FormLabel>Amount</FormLabel>
                  <div className="flex items-baseline gap-2">
                    <span>{group.currency}</span>
@@ -210,101 +168,44 @@ export function ExpenseForm({
              )}
            />

-            <FormField
-              control={form.control}
-              name="category"
-              render={({ field }) => (
-                <FormItem className="order-3 sm:order-2">
-                  <FormLabel>Category</FormLabel>
-                  <CategorySelector
-                    categories={categories}
-                    defaultValue={field.value}
-                    onValueChange={field.onChange}
-                  />
-                  <FormDescription>
-                    Select the expense category.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="paidBy"
-              render={({ field }) => (
-                <FormItem className="sm:order-5">
-                  <FormLabel>Paid by</FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={getSelectedPayer(field)}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a participant" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {group.participants.map(({ id, name }) => (
-                        <SelectItem key={id} value={id}>
-                          {name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    Select the participant who paid the expense.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="mt-4">
-          <CardHeader>
-            <CardTitle className="flex justify-between">
-              <span>Paid for</span>
-              <Button
-                variant="link"
-                type="button"
-                className="-my-2 -mx-4"
-                onClick={() => {
-                  const paidFor = form.getValues().paidFor
-                  const allSelected =
-                    paidFor.length === group.participants.length
-                  const newPaidFor = allSelected
-                    ? []
-                    : group.participants.map((p) => ({
-                        participant: p.id,
-                        shares:
-                          paidFor.find((pfor) => pfor.participant === p.id)
-                            ?.shares ?? ('1' as unknown as number),
-                      }))
-                  form.setValue('paidFor', newPaidFor, {
-                    shouldDirty: true,
-                    shouldTouch: true,
-                    shouldValidate: true,
-                  })
-                }}
-              >
-                {form.getValues().paidFor.length ===
-                group.participants.length ? (
-                  <>Select none</>
-                ) : (
-                  <>Select all</>
-                )}
-              </Button>
-            </CardTitle>
-            <CardDescription>
-              Select who the expense was paid for.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
            <FormField
              control={form.control}
              name="paidFor"
              render={() => (
-                <FormItem className="sm:order-4 row-span-2 space-y-0">
+                <FormItem className="order-5">
+                  <div className="mb-4">
+                    <FormLabel>
+                      Paid for
+                      <Button
+                        variant="link"
+                        type="button"
+                        className="-m-2"
+                        onClick={() => {
+                          const paidFor = form.getValues().paidFor
+                          const allSelected =
+                            paidFor.length === group.participants.length
+                          const newPairFor = allSelected
+                            ? []
+                            : group.participants.map((p) => p.id)
+                          form.setValue('paidFor', newPairFor, {
+                            shouldDirty: true,
+                            shouldTouch: true,
+                            shouldValidate: true,
+                          })
+                        }}
+                      >
+                        {form.getValues().paidFor.length ===
+                        group.participants.length ? (
+                          <>Select none</>
+                        ) : (
+                          <>Select all</>
+                        )}
+                      </Button>
+                    </FormLabel>
+                    <FormDescription>
+                      Select who the expense was paid for.
+                    </FormDescription>
+                  </div>
                  {group.participants.map(({ id, name }) => (
                    <FormField
                      key={id}
@@ -312,133 +213,28 @@ export function ExpenseForm({
                      name="paidFor"
                      render={({ field }) => {
                        return (
-                          <div
-                            data-id={`${id}/${form.getValues().splitMode}/${
-                              group.currency
-                            }`}
-                            className="flex items-center border-t last-of-type:border-b last-of-type:!mb-4 -mx-6 px-6 py-3"
+                          <FormItem
+                            key={id}
+                            className="flex flex-row items-start space-x-3 space-y-0"
                          >
-                            <FormItem className="flex-1 flex flex-row items-start space-x-3 space-y-0">
-                              <FormControl>
-                                <Checkbox
-                                  checked={field.value?.some(
-                                    ({ participant }) => participant === id,
-                                  )}
-                                  onCheckedChange={(checked) => {
-                                    return checked
-                                      ? field.onChange([
-                                          ...field.value,
-                                          {
-                                            participant: id,
-                                            shares: '1',
-                                          },
-                                        ])
-                                      : field.onChange(
-                                          field.value?.filter(
-                                            (value) => value.participant !== id,
-                                          ),
-                                        )
-                                  }}
-                                />
-                              </FormControl>
-                              <FormLabel className="text-sm font-normal flex-1">
-                                {name}
-                              </FormLabel>
-                            </FormItem>
-                            {form.getValues().splitMode !== 'EVENLY' && (
-                              <FormField
-                                name={`paidFor[${field.value.findIndex(
-                                  ({ participant }) => participant === id,
-                                )}].shares`}
-                                render={() => {
-                                  const sharesLabel = (
-                                    <span
-                                      className={cn('text-sm', {
-                                        'text-muted': !field.value?.some(
-                                          ({ participant }) =>
-                                            participant === id,
+                            <FormControl>
+                              <Checkbox
+                                checked={field.value?.includes(id)}
+                                onCheckedChange={(checked) => {
+                                  return checked
+                                    ? field.onChange([...field.value, id])
+                                    : field.onChange(
+                                        field.value?.filter(
+                                          (value) => value !== id,
                                        ),
-                                      })}
-                                    >
-                                      {match(form.getValues().splitMode)
-                                        .with('BY_SHARES', () => <>share(s)</>)
-                                        .with('BY_PERCENTAGE', () => <>%</>)
-                                        .with('BY_AMOUNT', () => (
-                                          <>{group.currency}</>
-                                        ))
-                                        .otherwise(() => (
-                                          <></>
-                                        ))}
-                                    </span>
-                                  )
-                                  return (
-                                    <div>
-                                      <div className="flex gap-1 items-center">
-                                        {form.getValues().splitMode ===
-                                          'BY_AMOUNT' && sharesLabel}
-                                        <FormControl>
-                                          <Input
-                                            key={String(
-                                              !field.value?.some(
-                                                ({ participant }) =>
-                                                  participant === id,
-                                              ),
-                                            )}
-                                            className="text-base w-[80px] -my-2"
-                                            type="number"
-                                            disabled={
-                                              !field.value?.some(
-                                                ({ participant }) =>
-                                                  participant === id,
-                                              )
-                                            }
-                                            value={
-                                              field.value?.find(
-                                                ({ participant }) =>
-                                                  participant === id,
-                                              )?.shares
-                                            }
-                                            onChange={(event) =>
-                                              field.onChange(
-                                                field.value.map((p) =>
-                                                  p.participant === id
-                                                    ? {
-                                                        participant: id,
-                                                        shares:
-                                                          event.target.value,
-                                                      }
-                                                    : p,
-                                                ),
-                                              )
-                                            }
-                                            inputMode={
-                                              form.getValues().splitMode ===
-                                              'BY_AMOUNT'
-                                                ? 'decimal'
-                                                : 'numeric'
-                                            }
-                                            step={
-                                              form.getValues().splitMode ===
-                                              'BY_AMOUNT'
-                                                ? 0.01
-                                                : 1
-                                            }
-                                          />
-                                        </FormControl>
-                                        {[
-                                          'BY_SHARES',
-                                          'BY_PERCENTAGE',
-                                        ].includes(
-                                          form.getValues().splitMode,
-                                        ) && sharesLabel}
-                                      </div>
-                                      <FormMessage className="float-right" />
-                                    </div>
-                                  )
+                                      )
                                }}
                              />
-                            )}
-                          </div>
+                            </FormControl>
+                            <FormLabel className="text-sm font-normal">
+                              {name}
+                            </FormLabel>
+                          </FormItem>
                        )
                      }}
                    />
@@ -447,86 +243,27 @@ export function ExpenseForm({
                </FormItem>
              )}
            />
-
-            <Collapsible className="mt-5">
-              <CollapsibleTrigger asChild>
-                <Button variant="link" className="-mx-4">
-                  Advanced splitting options…
-                </Button>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <div className="grid sm:grid-cols-2 gap-6 pt-3">
-                  <FormField
-                    control={form.control}
-                    name="splitMode"
-                    render={({ field }) => (
-                      <FormItem className="sm:order-2">
-                        <FormLabel>Split mode</FormLabel>
-                        <FormControl>
-                          <Select
-                            onValueChange={(value) => {
-                              form.setValue('splitMode', value as any, {
-                                shouldDirty: true,
-                                shouldTouch: true,
-                                shouldValidate: true,
-                              })
-                            }}
-                            defaultValue={field.value}
-                          >
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="EVENLY">Evenly</SelectItem>
-                              <SelectItem value="BY_SHARES">
-                                Unevenly – By shares
-                              </SelectItem>
-                              <SelectItem value="BY_PERCENTAGE">
-                                Unevenly – By percentage
-                              </SelectItem>
-                              <SelectItem value="BY_AMOUNT">
-                                Unevenly – By amount
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </FormControl>
-                        <FormDescription>
-                          Select how to split the expense.
-                        </FormDescription>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
          </CardContent>
-        </Card>

-        <div className="flex mt-4 gap-2">
-          <SubmitButton
-            loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
-          >
-            <Save className="w-4 h-4 mr-2" />
-            {isCreate ? <>Create</> : <>Save</>}
-          </SubmitButton>
-          {!isCreate && onDelete && (
-            <AsyncButton
-              type="button"
-              variant="destructive"
-              loadingContent="Deleting…"
-              action={onDelete}
+          <CardFooter className="gap-2">
+            <SubmitButton
+              loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
            >
-              <Trash2 className="w-4 h-4 mr-2" />
-              Delete
-            </AsyncButton>
-          )}
-        </div>
+              {isCreate ? <>Create</> : <>Save</>}
+            </SubmitButton>
+            {!isCreate && onDelete && (
+              <AsyncButton
+                type="button"
+                variant="destructive"
+                loadingContent="Deleting…"
+                action={onDelete}
+              >
+                Delete
+              </AsyncButton>
+            )}
+          </CardFooter>
+        </Card>
      </form>
    </Form>
  )
 }
-
-function formatDate(date?: Date) {
-  if (!date || isNaN(date as any)) date = new Date()
-  return date.toISOString().substring(0, 10)
-}
--- a/src/components/group-form.tsx
+++ b/src/components/group-form.tsx
@@ -24,13 +24,6 @@ import {
  HoverCardTrigger,
 } from '@/components/ui/hover-card'
 import { Input } from '@/components/ui/input'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import { getGroup } from '@/lib/api'
 import { GroupFormValues, groupFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -68,21 +61,6 @@ export function GroupForm({
    keyName: 'key',
  })

-  let activeUser = 'None'
-
-  const updateActiveUser = () => {
-    if (group?.id) {
-      const participant = group.participants.find((p) => p.name === activeUser)
-      if (participant?.id) {
-        localStorage.setItem(`${group.id}-activeUser`, participant.id)
-      } else {
-        localStorage.setItem(`${group.id}-newUser`, activeUser)
-      }
-    } else {
-      localStorage.setItem('newGroup-activeUser', activeUser)
-    }
-  }
-
  return (
    <Form {...form}>
      <form
@@ -218,57 +196,9 @@ export function GroupForm({
          </CardFooter>
        </Card>

-        <Card className="mb-4">
-          <CardHeader>
-            <CardTitle>Local settings</CardTitle>
-            <CardDescription>
-              These settings are set per-device, and are used to customize your
-              experience.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid sm:grid-cols-2 gap-4">
-              <FormItem>
-                <FormLabel>Active user</FormLabel>
-                <FormControl>
-                  <Select
-                    onValueChange={(value) => {
-                      activeUser = value
-                    }}
-                    defaultValue={
-                      fields.find(
-                        (f) =>
-                          f.id ===
-                          localStorage.getItem(`${group?.id}-activeUser`),
-                      )?.name || 'None'
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a participant" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {[{ name: 'None' }, ...form.watch('participants')]
-                        .filter((item) => item.name.length > 0)
-                        .map(({ name }) => (
-                          <SelectItem key={name} value={name}>
-                            {name}
-                          </SelectItem>
-                        ))}
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-                <FormDescription>
-                  User used as default for paying expenses.
-                </FormDescription>
-              </FormItem>
-            </div>
-          </CardContent>
-        </Card>
-
        <SubmitButton
          size="lg"
          loadingContent={group ? 'Saving…' : 'Creating…'}
-          onClick={updateActiveUser}
        >
          <Save className="w-4 h-4 mr-2" /> {group ? <>Save</> : <> Create</>}
        </SubmitButton>
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -1,11 +0,0 @@
-"use client"
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-const Collapsible = CollapsiblePrimitive.Root
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,155 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,122 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,118 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
-
-const DrawerTrigger = DrawerPrimitive.Trigger
-
-const DrawerPortal = DrawerPrimitive.Portal
-
-const DrawerClose = DrawerPrimitive.Close
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,44 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,24 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
-
-export { Textarea }
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,127 +0,0 @@
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,35 +0,0 @@
-"use client"
-
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -1,192 +0,0 @@
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -36,7 +36,7 @@ export async function createExpense(

  for (const participant of [
    expenseFormValues.paidBy,
-    ...expenseFormValues.paidFor.map((p) => p.participant),
+    ...expenseFormValues.paidFor,
  ]) {
    if (!group.participants.some((p) => p.id === participant))
      throw new Error(`Invalid participant ID: ${participant}`)
@@ -47,17 +47,13 @@ export async function createExpense(
    data: {
      id: randomId(),
      groupId,
-      expenseDate: expenseFormValues.expenseDate,
-      categoryId: expenseFormValues.category,
      amount: expenseFormValues.amount,
      title: expenseFormValues.title,
      paidById: expenseFormValues.paidBy,
-      splitMode: expenseFormValues.splitMode,
      paidFor: {
        createMany: {
          data: expenseFormValues.paidFor.map((paidFor) => ({
-            participantId: paidFor.participant,
-            shares: paidFor.shares,
+            participantId: paidFor,
          })),
        },
      },
@@ -88,14 +84,12 @@ export async function getGroupExpensesParticipants(groupId: string) {

 export async function getGroups(groupIds: string[]) {
  const prisma = await getPrisma()
-  return (
-    await prisma.group.findMany({
-      where: { id: { in: groupIds } },
-      include: { _count: { select: { participants: true } } },
-    })
-  ).map((group) => ({
+  return (await prisma.group.findMany({
+    where: { id: { in: groupIds } },
+    include: { _count: { select: { participants: true } } },
+  })).map(group => ({
    ...group,
-    createdAt: group.createdAt.toISOString(),
+    createdAt: group.createdAt.toISOString()
  }))
 }

@@ -112,7 +106,7 @@ export async function updateExpense(

  for (const participant of [
    expenseFormValues.paidBy,
-    ...expenseFormValues.paidFor.map((p) => p.participant),
+    ...expenseFormValues.paidFor,
  ]) {
    if (!group.participants.some((p) => p.id === participant))
      throw new Error(`Invalid participant ID: ${participant}`)
@@ -122,39 +116,20 @@ export async function updateExpense(
  return prisma.expense.update({
    where: { id: expenseId },
    data: {
-      expenseDate: expenseFormValues.expenseDate,
      amount: expenseFormValues.amount,
      title: expenseFormValues.title,
-      categoryId: expenseFormValues.category,
      paidById: expenseFormValues.paidBy,
-      splitMode: expenseFormValues.splitMode,
      paidFor: {
-        create: expenseFormValues.paidFor
-          .filter(
-            (p) =>
-              !existingExpense.paidFor.some(
-                (pp) => pp.participantId === p.participant,
-              ),
-          )
-          .map((paidFor) => ({
-            participantId: paidFor.participant,
-            shares: paidFor.shares,
-          })),
-        update: expenseFormValues.paidFor.map((paidFor) => ({
+        connectOrCreate: expenseFormValues.paidFor.map((paidFor) => ({
          where: {
-            expenseId_participantId: {
-              expenseId,
-              participantId: paidFor.participant,
-            },
-          },
-          data: {
-            shares: paidFor.shares,
+            expenseId_participantId: { expenseId, participantId: paidFor },
          },
+          create: { participantId: paidFor },
        })),
        deleteMany: existingExpense.paidFor.filter(
          (paidFor) =>
            !expenseFormValues.paidFor.some(
-              (pf) => pf.participant === paidFor.participantId,
+              (pf) => pf === paidFor.participantId,
            ),
        ),
      },
@@ -209,21 +184,12 @@ export async function getGroup(groupId: string) {
  })
 }

-export async function getCategories() {
-  const prisma = await getPrisma()
-  return prisma.category.findMany()
-}
-
 export async function getGroupExpenses(groupId: string) {
  const prisma = await getPrisma()
  return prisma.expense.findMany({
    where: { groupId },
-    include: {
-      paidFor: { include: { participant: true } },
-      paidBy: true,
-      category: true,
-    },
-    orderBy: { expenseDate: 'desc' },
+    include: { paidFor: { include: { participant: true } }, paidBy: true },
+    orderBy: { createdAt: 'desc' },
  })
 }

@@ -231,6 +197,6 @@ export async function getExpense(groupId: string, expenseId: string) {
  const prisma = await getPrisma()
  return prisma.expense.findUnique({
    where: { id: expenseId },
-    include: { paidBy: true, paidFor: true, category: true },
+    include: { paidBy: true, paidFor: true },
  })
 }
--- a/src/lib/balances.ts
+++ b/src/lib/balances.ts
@@ -1,6 +1,5 @@
 import { getGroupExpenses } from '@/lib/api'
 import { Participant } from '@prisma/client'
-import { match } from 'ts-pattern'

 export type Balances = Record<
  Participant['id'],
@@ -20,42 +19,34 @@ export function getBalances(

  for (const expense of expenses) {
    const paidBy = expense.paidById
-    const paidFors = expense.paidFor
+    const paidFors = expense.paidFor.map((p) => p.participantId)

    if (!balances[paidBy]) balances[paidBy] = { paid: 0, paidFor: 0, total: 0 }
    balances[paidBy].paid += expense.amount
    balances[paidBy].total += expense.amount
-
-    const totalPaidForShares = paidFors.reduce(
-      (sum, paidFor) => sum + paidFor.shares,
-      0,
-    )
-    let remaining = expense.amount
    paidFors.forEach((paidFor, index) => {
-      if (!balances[paidFor.participantId])
-        balances[paidFor.participantId] = { paid: 0, paidFor: 0, total: 0 }
+      if (!balances[paidFor])
+        balances[paidFor] = { paid: 0, paidFor: 0, total: 0 }

-      const isLast = index === paidFors.length - 1
-
-      const [shares, totalShares] = match(expense.splitMode)
-        .with('EVENLY', () => [1, paidFors.length])
-        .with('BY_SHARES', () => [paidFor.shares, totalPaidForShares])
-        .with('BY_PERCENTAGE', () => [paidFor.shares, totalPaidForShares])
-        .with('BY_AMOUNT', () => [paidFor.shares, totalPaidForShares])
-        .exhaustive()
-
-      const dividedAmount = isLast
-        ? remaining
-        : Math.floor((expense.amount * shares) / totalShares)
-      remaining -= dividedAmount
-      balances[paidFor.participantId].paidFor += dividedAmount
-      balances[paidFor.participantId].total -= dividedAmount
+      const dividedAmount = divide(
+        expense.amount,
+        paidFors.length,
+        index === paidFors.length - 1,
+      )
+      balances[paidFor].paidFor += dividedAmount
+      balances[paidFor].total -= dividedAmount
    })
  }

  return balances
 }

+function divide(total: number, count: number, isLast: boolean): number {
+  if (!isLast) return Math.floor(total / count)
+
+  return total - divide(total, count, false) * (count - 1)
+}
+
 export function getSuggestedReimbursements(
  balances: Balances,
 ): Reimbursement[] {
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -4,6 +4,7 @@ const envSchema = z.object({
  NEXT_PUBLIC_BASE_URL: z.string().url(),
  POSTGRES_URL_NON_POOLING: z.string().url(),
  POSTGRES_PRISMA_URL: z.string().url(),
+  PLAUSIBLE_DOMAIN: z.string().optional(),
 })

 export const env = envSchema.parse(process.env)
--- a/src/lib/hooks.ts
+++ b/src/lib/hooks.ts
@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export function useMediaQuery(query: string): boolean {
-  const getMatches = (query: string): boolean => {
-    // Prevents SSR issues
-    if (typeof window !== 'undefined') {
-      return window.matchMedia(query).matches
-    }
-    return false
-  }
-
-  const [matches, setMatches] = useState<boolean>(getMatches(query))
-
-  function handleChange() {
-    setMatches(getMatches(query))
-  }
-
-  useEffect(() => {
-    const matchMedia = window.matchMedia(query)
-
-    // Triggered at the first client-side load and if query changes
-    handleChange()
-
-    // Listen matchMedia
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange)
-    } else {
-      matchMedia.addEventListener('change', handleChange)
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange)
-      } else {
-        matchMedia.removeEventListener('change', handleChange)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query])
-
-  return matches
-}
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -1,4 +1,3 @@
-import { SplitMode } from '@prisma/client'
 import * as z from 'zod'

 export const groupFormSchema = z
@@ -39,113 +38,36 @@ export const groupFormSchema = z

 export type GroupFormValues = z.infer<typeof groupFormSchema>

-export const expenseFormSchema = z
-  .object({
-    expenseDate: z.coerce.date(),
-    title: z
-      .string({ required_error: 'Please enter a title.' })
-      .min(2, 'Enter at least two characters.'),
-    category: z.coerce.number().default(0),
-    amount: z
-      .union(
-        [
-          z.number(),
-          z.string().transform((value, ctx) => {
-            const valueAsNumber = Number(value)
-            if (Number.isNaN(valueAsNumber))
-              ctx.addIssue({
-                code: z.ZodIssueCode.custom,
-                message: 'Invalid number.',
-              })
-            return Math.round(valueAsNumber * 100)
-          }),
-        ],
-        { required_error: 'You must enter an amount.' },
-      )
-      .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
-      .refine(
-        (amount) => amount <= 10_000_000_00,
-        'The amount must be lower than 10,000,000.',
-      ),
-    paidBy: z.string({ required_error: 'You must select a participant.' }),
-    paidFor: z
-      .array(
-        z.object({
-          participant: z.string(),
-          shares: z.union([
-            z.number(),
-            z.string().transform((value, ctx) => {
-              const valueAsNumber = Number(value)
-              if (Number.isNaN(valueAsNumber))
-                ctx.addIssue({
-                  code: z.ZodIssueCode.custom,
-                  message: 'Invalid number.',
-                })
-              return Math.round(valueAsNumber * 100)
-            }),
-          ]),
-        }),
-      )
-      .min(1, 'The expense must be paid for at least one participant.')
-      .superRefine((paidFor, ctx) => {
-        let sum = 0
-        for (const { shares } of paidFor) {
-          sum += shares
-          if (shares < 1) {
+export const expenseFormSchema = z.object({
+  title: z
+    .string({ required_error: 'Please enter a title.' })
+    .min(2, 'Enter at least two characters.'),
+  amount: z
+    .union(
+      [
+        z.number(),
+        z.string().transform((value, ctx) => {
+          const valueAsNumber = Number(value)
+          if (Number.isNaN(valueAsNumber))
            ctx.addIssue({
              code: z.ZodIssueCode.custom,
-              message: 'All shares must be higher than 0.',
+              message: 'Invalid number.',
            })
-          }
-        }
-      }),
-    splitMode: z
-      .enum<SplitMode, [SplitMode, ...SplitMode[]]>(
-        Object.values(SplitMode) as any,
-      )
-      .default('EVENLY'),
-    isReimbursement: z.boolean(),
-  })
-  .superRefine((expense, ctx) => {
-    let sum = 0
-    for (const { shares } of expense.paidFor) {
-      sum +=
-        typeof shares === 'number' ? shares : Math.round(Number(shares) * 100)
-    }
-    switch (expense.splitMode) {
-      case 'EVENLY':
-        break // noop
-      case 'BY_SHARES':
-        break // noop
-      case 'BY_AMOUNT': {
-        if (sum !== expense.amount) {
-          const detail =
-            sum < expense.amount
-              ? `${((expense.amount - sum) / 100).toFixed(2)} missing`
-              : `${((sum - expense.amount) / 100).toFixed(2)} surplus`
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Sum of amounts must equal the expense amount (${detail}).`,
-            path: ['paidFor'],
-          })
-        }
-        break
-      }
-      case 'BY_PERCENTAGE': {
-        if (sum !== 10000) {
-          const detail =
-            sum < 10000
-              ? `${((10000 - sum) / 100).toFixed(0)}% missing`
-              : `${((sum - 10000) / 100).toFixed(0)}% surplus`
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Sum of percentages must equal 100 (${detail})`,
-            path: ['paidFor'],
-          })
-        }
-        break
-      }
-    }
-  })
+          return Math.round(valueAsNumber * 100)
+        }),
+      ],
+      { required_error: 'You must enter an amount.' },
+    )
+    .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
+    .refine(
+      (amount) => amount <= 10_000_000_00,
+      'The amount must be lower than 10,000,000.',
+    ),
+  paidBy: z.string({ required_error: 'You must select a participant.' }),
+  paidFor: z
+    .array(z.string())
+    .min(1, 'The expense must be paid for at least one participant.'),
+  isReimbursement: z.boolean(),
+})

 export type ExpenseFormValues = z.infer<typeof expenseFormSchema>
--- a/src/scripts/migrate.ts
+++ b/src/scripts/migrate.ts
@@ -80,8 +80,6 @@ async function main() {
          amount: Math.round(expenseRow.amount * 100),
          groupId: groupRow.id,
          title: expenseRow.description,
-          categoryId: 1,
-          expenseDate: new Date(expenseRow.created_at.toDateString()),
          createdAt: expenseRow.created_at,
          isReimbursement: expenseRow.is_reimbursement === true,
          paidById: participantIdsMapping[expenseRow.paid_by_participant_id],
--- a/scripts/start-local-db.sh
+++ b/scripts/start-local-db.sh
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -89,5 +89,5 @@ module.exports = {
      },
    },
  },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [require('tailwindcss-animate')],
 }