From 0ef9d6db02fc4da19bb48a3bf9121859201fbe70 Mon Sep 17 00:00:00 2001
From: Luan Menezes <luanmenezes99@gmail.com>
Date: Wed, 2 Mar 2022 20:26:16 -0300
Subject: [PATCH] adds ts, allow movie to be marked as watched

---
 package-lock.json          | 299 ++++++++++++++++++++++++++++++-------
 package.json               |   7 +-
 src/lib/movie/Movie.svelte |  83 ++++++++++
 src/routes/__layout.svelte |  24 +--
 src/routes/index.svelte    |  78 ++++++----
 src/stores/movies.ts       |  16 ++
 svelte.config.js           |   2 +
 7 files changed, 408 insertions(+), 101 deletions(-)
 create mode 100644 src/stores/movies.ts

diff --git a/package-lock.json b/package-lock.json
index 96b3f40..43cba8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,30 +2,12 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
-    "@fontsource/fira-mono": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/fira-mono/-/fira-mono-4.5.0.tgz",
-      "integrity": "sha512-KE+d3wmgq/YKM0BqgUF7p2yeBNi805Nfof1lC1wJ7E9i2EWoC363sGdKG+MQBVm+ei3GYZu+Bo8Xha1w1pkB7g=="
-    },
     "@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
       "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
       "dev": true
     },
-    "@lukeed/csprng": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.0.1.tgz",
-      "integrity": "sha512-uSvJdwQU5nK+Vdf6zxcWAY2A8r7uqe+gePwLWzJ+fsQehq18pc0I2hJKwypZ2aLM90+Er9u1xn4iLJPZ+xlL4g=="
-    },
-    "@lukeed/uuid": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@lukeed/uuid/-/uuid-2.0.0.tgz",
-      "integrity": "sha512-dUz8OmYvlY5A9wXaroHIMSPASpSYRLCqbPvxGSyHguhtTQIy24lC+EGxQlwv71AhRCO55WOtgwhzQLpw27JaJQ==",
-      "requires": {
-        "@lukeed/csprng": "^1.0.0"
-      }
-    },
     "@rollup/pluginutils": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.2.tgz",
@@ -37,14 +19,14 @@
       }
     },
     "@sveltejs/adapter-auto": {
-      "version": "1.0.0-next.27",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.27.tgz",
-      "integrity": "sha512-0ZmOoVz+nVrWtXLqayCbEhxThQl6f58YetAfT1Q+3msquc0RcbwLoWlygPEhZGjdZ5Cin5le/mGubF2SyInfjA==",
+      "version": "1.0.0-next.30",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.30.tgz",
+      "integrity": "sha512-kKKDvv2bwH66l/A97u26973OG3Zh7V1WlTKgkOr95Koo1/Y6rBhBfkz0Jw+WLzsZ+hcTzgIrcegtWVt+GQRJpw==",
       "dev": true,
       "requires": {
         "@sveltejs/adapter-cloudflare": "1.0.0-next.14",
-        "@sveltejs/adapter-netlify": "1.0.0-next.46",
-        "@sveltejs/adapter-vercel": "1.0.0-next.44"
+        "@sveltejs/adapter-netlify": "1.0.0-next.49",
+        "@sveltejs/adapter-vercel": "1.0.0-next.45"
       }
     },
     "@sveltejs/adapter-cloudflare": {
@@ -57,9 +39,9 @@
       }
     },
     "@sveltejs/adapter-netlify": {
-      "version": "1.0.0-next.46",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.46.tgz",
-      "integrity": "sha512-eXtnNm3k7SfPI5fDEheOWevHNLXtsNaXx27p0UQBqqkE5kY4wvJDDTiTLAbG/B7EMjFcXTj09+l0JVV4m++rcA==",
+      "version": "1.0.0-next.49",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.49.tgz",
+      "integrity": "sha512-EYP0/eK1foC90fBNn6V9fP0ngrMF3MrkaNN+wCnMj0rHGKOKUzXlIeyPtGtQnDL9cqHac39pbPhSyMaMuWZF/w==",
       "dev": true,
       "requires": {
         "@iarna/toml": "^2.2.5",
@@ -68,18 +50,18 @@
       }
     },
     "@sveltejs/adapter-vercel": {
-      "version": "1.0.0-next.44",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.44.tgz",
-      "integrity": "sha512-q0o7JG0pAam2lkkM5XiaLzYBGSRtOogjXpKYwpc7iiMuaSV4nzsnYlLxwbtib7ZJQzE1D32pPZQuvf5pAIqrmQ==",
+      "version": "1.0.0-next.45",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.45.tgz",
+      "integrity": "sha512-WoOMu4FSWjVeRiPq2NKfdZhobfOLmDykObZmm8JHptMDb0/I5SB+6wstzAeaNtQr2ZbQkUy0k7EX95riJifEEQ==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.21"
       }
     },
     "@sveltejs/kit": {
-      "version": "1.0.0-next.285",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.285.tgz",
-      "integrity": "sha512-JwWnCDRJJRWuUWYjvNnjaJjBP4/zarZyL3PnVZQ6cX08CBhd3qfIe+lcdvdUrj+lP+HjSutkX2kEB3dsza9PKg==",
+      "version": "1.0.0-next.289",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.289.tgz",
+      "integrity": "sha512-P84m/yVPxBj5QM7Alk7mC2IW+/Td547Zgu+wuoTaV9JisGWkBRdGbxYeG5u5RZIN2BvkcWRnzl1UYp8mAX+XCg==",
       "dev": true,
       "requires": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
@@ -88,9 +70,9 @@
       }
     },
     "@sveltejs/vite-plugin-svelte": {
-      "version": "1.0.0-next.37",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.37.tgz",
-      "integrity": "sha512-EdSXw2rXeOahNrQfMJVZxa/NxZxW1a0TiBI3s+pVxnxU14hEQtnkLtdbTFhnceu22gJpNPFSIJRcIwRBBDQIeA==",
+      "version": "1.0.0-next.39",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.39.tgz",
+      "integrity": "sha512-gnvvcAW2LK+KnUn8lKb2ypcXKwSp2K57mem5C4VNKfjxdRpM6+XwNavWwVf6otnDhz3qPYl/TKKW6/dRr6eeAw==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^4.1.2",
@@ -100,10 +82,54 @@
         "svelte-hmr": "^0.14.9"
       }
     },
-    "cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
+    "@types/node": {
+      "version": "17.0.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
+      "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
+      "dev": true
+    },
+    "@types/pug": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+      "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+      "dev": true
+    },
+    "@types/sass": {
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+      "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
     },
     "debug": {
       "version": "4.3.3",
@@ -114,6 +140,18 @@
         "ms": "2.1.2"
       }
     },
+    "detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true
+    },
+    "es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=",
+      "dev": true
+    },
     "esbuild": {
       "version": "0.14.23",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.23.tgz",
@@ -280,6 +318,12 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -293,6 +337,20 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
     "globalyzer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
@@ -305,6 +363,12 @@
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
+    "graceful-fs": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
+      "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
+      "dev": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -314,6 +378,22 @@
         "function-bind": "^1.1.1"
       }
     },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
     "is-core-module": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
@@ -330,12 +410,42 @@
       "dev": true
     },
     "magic-string": {
-      "version": "0.25.7",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
-      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.8.tgz",
+      "integrity": "sha512-n9NlSgfkB2rPYjSd/EZDoQcsXzwYAv4CIB/vi3ZSvZ2Tjax5W5Ie1NMy4HG3PVdcL4bBMMR20Ng4UcISMzqRLw==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "dev": true,
       "requires": {
-        "sourcemap-codec": "^1.4.4"
+        "minimist": "^1.2.5"
       }
     },
     "mri": {
@@ -356,11 +466,26 @@
       "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
       "dev": true
     },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
     "open-props": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/open-props/-/open-props-1.3.8.tgz",
       "integrity": "sha512-X51K1puZl78ZRFlaYUozebtnmDgV1qUFgFnkU3V70f7GpNN56LErQyMv/o5228aRdqgtjruOpyJZkG9EXVvYMg=="
     },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -380,12 +505,12 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
-      "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
+      "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.2.0",
+        "nanoid": "^3.3.1",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -401,10 +526,19 @@
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
     },
+    "rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
     "rollup": {
-      "version": "2.68.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.68.0.tgz",
-      "integrity": "sha512-XrMKOYK7oQcTio4wyTz466mucnd8LzkiZLozZ4Rz0zQD+HeX4nUK4B8GrTX/2EvN2/vBF/i2WnaXboPxo0JylA==",
+      "version": "2.69.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.69.0.tgz",
+      "integrity": "sha512-kjER91tHyek8gAkuz7+558vSnTQ+pITEok1P0aNOS45ZXyngaqPsXJmSel4QPQnJo7EJMjXUU1/GErWkWiKORg==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -419,6 +553,30 @@
         "mri": "^1.1.0"
       }
     },
+    "sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha1-dB4kXiMfB8r7b98PEzrfohalAq0=",
+      "dev": true,
+      "requires": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      }
+    },
+    "sorcery": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+      "integrity": "sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0",
+        "sourcemap-codec": "^1.3.0"
+      }
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -431,6 +589,15 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "requires": {
+        "min-indent": "^1.0.0"
+      }
+    },
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -449,6 +616,20 @@
       "integrity": "sha512-bKE9+4qb4sAnA+TKHiYurUl970rjA0XmlP9TEP7K/ncyWz3m81kA4HOgmlZK/7irGK7gzZlaPDI3cmf8fp/+tg==",
       "dev": true
     },
+    "svelte-preprocess": {
+      "version": "4.10.4",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
+      "integrity": "sha512-fuwol0N4UoHsNQolLFbMqWivqcJ9N0vfWO9IuPAiX/5okfoGXURyJ6nECbuEIv0nU3M8Xe2I1ONNje2buk7l6A==",
+      "dev": true,
+      "requires": {
+        "@types/pug": "^2.0.4",
+        "@types/sass": "^1.16.0",
+        "detect-indent": "^6.0.0",
+        "magic-string": "^0.25.7",
+        "sorcery": "^0.10.0",
+        "strip-indent": "^3.0.0"
+      }
+    },
     "tiny-glob": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -459,10 +640,16 @@
         "globrex": "^0.1.2"
       }
     },
+    "typescript": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
+      "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
+      "dev": true
+    },
     "vite": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.8.4.tgz",
-      "integrity": "sha512-GwtOkkaT2LDI82uWZKcrpRQxP5tymLnC7hVHHqNkhFNknYr0hJUlDLfhVRgngJvAy3RwypkDCWtTKn1BjO96Dw==",
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.8.6.tgz",
+      "integrity": "sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.14",
@@ -471,6 +658,12 @@
         "resolve": "^1.22.0",
         "rollup": "^2.59.0"
       }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index 94a2caa..a3dbcbd 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,12 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "svelte": "^3.44.0"
+    "svelte": "^3.44.0",
+    "svelte-preprocess": "^4.10.4",
+    "typescript": "^4.6.2"
   },
   "type": "module",
   "dependencies": {
-    "@fontsource/fira-mono": "^4.5.0",
-    "@lukeed/uuid": "^2.0.0",
-    "cookie": "^0.4.1",
     "open-props": "^1.3.8"
   }
 }
diff --git a/src/lib/movie/Movie.svelte b/src/lib/movie/Movie.svelte
index e69de29..23edb75 100644
--- a/src/lib/movie/Movie.svelte
+++ b/src/lib/movie/Movie.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  interface Movie {
+    title: string;
+    id: string;
+    poster: string;
+  }
+
+  export let movie: Movie;
+  export let watched: boolean = false;
+
+  const dispatch = createEventDispatcher<{ watched: string }>();
+
+  function markFilmAsWatched() {
+    dispatch("watched", movie.id);
+  }
+</script>
+
+<article class="card">
+  <img
+    src={`https://image.tmdb.org/t/p/w300/${movie.poster}`}
+    alt={movie.title}
+  />
+  <h2 class="title"><a href={`movies/${movie.id}`}>{movie.title}</a></h2>
+  <button class:watched on:click={markFilmAsWatched}>watched</button>
+</article>
+
+<style>
+  .card {
+    display: grid;
+    gap: var(--size-2);
+    background: var(--surface-3);
+    border: 1px solid var(--surface-1);
+    padding: var(--size-4);
+    border-radius: var(--radius-3);
+    box-shadow: var(--shadow-2);
+  }
+
+  .title {
+    color: var(--text-1);
+    font-size: var(--size-6);
+    justify-self: start;
+  }
+
+  button {
+    place-self: end;
+    display: inline-flex;
+    white-space: nowrap;
+
+    font-size: var(--font-size-fluid-1);
+    font-weight: var(--font-weight-7);
+
+    padding-inline: var(--size-5);
+    padding-block: var(--size-2);
+
+    color: var(--blue-9);
+    border: var(--border-size-2) solid var(--blue-5);
+    background-color: transparent;
+    border-radius: var(--radius-2);
+
+    border-color: var(--blue-3);
+    color: var(--blue-1);
+  }
+
+  button:hover {
+    cursor: pointer;
+    color: var(--blue-0);
+    background-color: var(--blue-5);
+
+    background-color: var(--blue-3);
+    color: black;
+  }
+
+  button:active {
+    position: relative;
+    inset-block-start: 2px;
+  }
+
+  .watched {
+    background: #000;
+  }
+</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index b4eba2f..763f5f1 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,25 +1,27 @@
 <script>
-	import Header from '$lib/header/Header.svelte';
-	import '../app.css';
+  import Header from "$lib/header/Header.svelte";
+  import "../app.css";
 </script>
 
 <Header />
 
 <main>
-	<slot />
+  <slot />
 </main>
 
 <footer>
-	<p>powered by <a href="https://www.themoviedb.org/">TMDB</a></p>
+  <p>powered by <a href="https://www.themoviedb.org/">TMDB</a></p>
 </footer>
 
 <style>
-	footer {
-		display: flex;
-		justify-content: center;
-	}
+  footer {
+    display: flex;
+    justify-content: center;
+    padding-block: var(--size-4);
+  }
 
-	main {
-		padding: var(--size-fluid-4);
-	}
+  main {
+    padding-block: var(--size-4);
+    padding-inline: clamp(1rem, 14vw, 50rem);
+  }
 </style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 5a4092f..e484aab 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,4 +1,7 @@
-<script>
+<script lang="ts">
+  import Movie from "$lib/movie/Movie.svelte";
+  import { watchedMovies } from "../stores/movies";
+
   export const movies = [
     {
       title: "BELFAST",
@@ -6,19 +9,47 @@
       poster: "/3mInLZyPOVLsZRsBwNHi3UJXXnm.jpg",
     },
     { title: "CODA", id: "776503", poster: "/BzVjmm8l23rPsijLiNLUzuQtyd.jpg" },
-    { title: "DON'T LOOK UP", id: "646380", poster: "/th4E1yqsE8DGpAseLiUrI60Hf8V.jpg" },
-    { title: "DRIVE MY CAR", id: "758866", poster: "/xlEnJ6O2xIlcJPvo23PWUiiSS21.jpg" },
+    {
+      title: "DON'T LOOK UP",
+      id: "646380",
+      poster: "/th4E1yqsE8DGpAseLiUrI60Hf8V.jpg",
+    },
+    {
+      title: "DRIVE MY CAR",
+      id: "758866",
+      poster: "/xlEnJ6O2xIlcJPvo23PWUiiSS21.jpg",
+    },
     { title: "DUNE", id: "438631", poster: "/d5NXSklXo0qyIYkgV94XAgMIckC.jpg" },
-    { title: "KING RICHARD", id: "614917", poster: "/2dfujXrxePtYJPiPHj1HkAFQvpu.jpg" },
-    { title: "LICORICE PIZZA", id: "718032", poster: "/jD98aUKHQZNAmrk0wQQ9wmNQPnP.jpg" },
-    { title: "NIGHTMARE ALLEY", id: "597208", poster: "/m1N0rVpG9BiCnbOHXlUHrq3zp1Z.jpg" },
+    {
+      title: "KING RICHARD",
+      id: "614917",
+      poster: "/2dfujXrxePtYJPiPHj1HkAFQvpu.jpg",
+    },
+    {
+      title: "LICORICE PIZZA",
+      id: "718032",
+      poster: "/jD98aUKHQZNAmrk0wQQ9wmNQPnP.jpg",
+    },
+    {
+      title: "NIGHTMARE ALLEY",
+      id: "597208",
+      poster: "/m1N0rVpG9BiCnbOHXlUHrq3zp1Z.jpg",
+    },
     {
       title: "THE POWER OF THE DOG",
       id: "600583",
       poster: "/kEy48iCzGnp0ao1cZbNeWR6yIhC.jpg",
     },
-    { title: "WEST SIDE STORY", id: "511809", poster: "/zeAZTPxV5xZRNEX3rZotnsp7IVo.jpg" },
+    {
+      title: "WEST SIDE STORY",
+      id: "511809",
+      poster: "/zeAZTPxV5xZRNEX3rZotnsp7IVo.jpg",
+    },
   ];
+
+  function markFilmAsWatched(e: CustomEvent<string>) {
+    watchedMovies.update((ar) => [...ar, e.detail]);
+  }
 </script>
 
 <svelte:head>
@@ -27,37 +58,18 @@
 
 <section>
   {#each movies as movie}
-    <article class="card">
-      <img
-      src={`https://image.tmdb.org/t/p/w300/${movie.poster}`}
-      alt={movie.title}
-      />
-      <h2>{movie.title}</h2>
-      <a href={`movies/${movie.id}`}>details</a>
-    </article>
+    <Movie
+      {movie}
+      on:watched={markFilmAsWatched}
+      watched={$watchedMovies.includes(movie.id)}
+    />
   {/each}
 </section>
 
 <style>
   section {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-    grid-gap: 1rem;
-  }
-
-  .card {
-    flex-basis: var(--size-content-1);
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-2);
-    background: var(--surface-3);
-    border: 1px solid var(--surface-1);
-    padding: var(--size-4);
-    border-radius: var(--radius-3);
-    box-shadow: var(--shadow-2);
-  }
-
-  .card h2 {
-    font-size: var(--size-6);
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+    grid-gap: 2rem;
   }
 </style>
diff --git a/src/stores/movies.ts b/src/stores/movies.ts
new file mode 100644
index 0000000..c352957
--- /dev/null
+++ b/src/stores/movies.ts
@@ -0,0 +1,16 @@
+import { browser } from "$app/env";
+import { writable } from "svelte/store";
+
+let initialValue = [];
+
+if (browser) {
+  initialValue = JSON.parse(localStorage.getItem("movies")) || [];
+}
+
+export const watchedMovies = writable<string[]>(initialValue);
+
+if (browser) {
+  watchedMovies.subscribe((value) => {
+    localStorage.setItem("movies", JSON.stringify(value));
+  });
+}
diff --git a/svelte.config.js b/svelte.config.js
index 1cc76be..65144c4 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,10 +1,12 @@
 import adapter from "@sveltejs/adapter-auto";
+import sveltePreprocess from "svelte-preprocess";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   kit: {
     adapter: adapter(),
   },
+  preprocess: sveltePreprocess(),
 };
 
 export default config;