v2.1.0

So the version string doesn't need to overflow when it includes the `-dev` affix

.eslintrc.cjs

@@ -1,27 +1,27 @@
 module.exports = {
-  root: true,
-  parser: "@typescript-eslint/parser",
-  extends: ["plugin:svelte/recommended"],
-  plugins: ["@typescript-eslint"],
-  ignorePatterns: ["*.cjs", "*.config.js"],
-  overrides: [
-    {
-      files: ["*.svelte"],
-      parser: "svelte-eslint-parser",
-      parserOptions: {
-        parser: "@typescript-eslint/parser"
-      }
-    }
-  ],
-  parserOptions: {
-    project: "./tsconfig.json",
-    extraFileExtensions: [".svelte"],
-    sourceType: "module",
-    ecmaVersion: 2020
-  },
-  env: {
-    browser: true,
-    es2017: true,
-    node: false
-  }
+	root: true,
+	parser: "@typescript-eslint/parser",
+	extends: ["plugin:svelte/recommended"],
+	plugins: ["@typescript-eslint"],
+	ignorePatterns: ["*.cjs", "*.config.js"],
+	overrides: [
+		{
+			files: ["*.svelte"],
+			parser: "svelte-eslint-parser",
+			parserOptions: {
+				parser: "@typescript-eslint/parser",
+			},
+		},
+	],
+	parserOptions: {
+		project: "./tsconfig.json",
+		extraFileExtensions: [".svelte"],
+		sourceType: "module",
+		ecmaVersion: 2020,
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: false,
+	},
 };

.github/ISSUE_TEMPLATE/01-bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: bug
+assignees: ""
+---
+
+<!-- It's harder to track bugs when multiple are reported in one issue. If you have more than one (unrelated) bugs to report, please make one issue per bug. -->
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Platform (please complete the following information):**
+
+- OS: [e.g. Linux, Windows, Android, iOS]
+- Browser (latest version): [e.g. chrome, safari, firefox]
+- Watcharr Version: [e.g. v1.45.0]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/02-feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: enhancement
+assignees: ""
+---
+
+<!-- Feature requests can be hard to track when two or more unrelated ideas are included in one issue. Please make a new issue for each idea (make as many as you need to). -->
+
+**Idea Overview**
+A quick overview of the idea you are proposing.
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/documentation.md

@@ -0,0 +1,15 @@
+---
+name: Documentation
+about: Help us with our documentation. Is something important missing?
+title: ""
+labels: documentation
+assignees: IRHM
+---
+
+<!-- Did you know: You can click `Edit this page` at the bottom of any page on the docs to propose exact changes? If this doesn't apply to you, continue below and fill out the issue. -->
+
+**What is missing or needs updating on the documentation site?**
+Please describe in detail what is missing or needs updating on the documentation site.
+
+**(optional) How would you write/update this doc?**
+How would you write out this documentation?

.github/workflows/container-dev.yml

@@ -41,7 +41,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Dockerfile

.github/workflows/container-release.yml

@@ -48,7 +48,7 @@ jobs:
             ghcr.io/${{ env.image }}
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Dockerfile

.github/workflows/test-pr-server.yml

@@ -0,0 +1,31 @@
+name: Test PR (server)
+
+on:
+  pull_request:
+    branches:
+      - "**"
+    tags-ignore:
+      - v*
+    paths:
+      - ".github/workflows/test-pr-server.yml"
+      - "server/**"
+
+jobs:
+  format_check_go:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
+
+      - name: gofmt test
+        run: |
+          outp=$(gofmt -l .)
+          if [ -n "$outp" ]; then
+            echo "Need to fix formatting!"
+            echo "$outp"
+            exit 1
+          else
+            echo "Everything looks formatted"
+            exit 0
+          fi

.github/workflows/test-pr-web.yml

@@ -1,4 +1,4 @@
-name: Test PR Changes
+name: Test PR (web)
 
 on:
   pull_request:
@@ -6,6 +6,14 @@ on:
       - "**"
     tags-ignore:
       - v*
+    paths:
+      - ".github/workflows/test-pr-web.yml"
+      - "package*.json"
+      - "svelte.config.json"
+      - "vite.config.json"
+      - "tsconfig.json"
+      - ".prettier*"
+      - "src/**"
 
 jobs:
   linter_check:

.prettierignore

@@ -6,6 +6,10 @@ node_modules
 .env
 .env.*
 !.env.example
+/.vscode
+
+doc/.docusaurus/
+doc/build/
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

.prettierrc

@@ -1,18 +1,18 @@
 {
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": false,
-  "printWidth": 100,
-  "useTabs": false,
-  "trailingComma": "none",
-  "arrowParens": "always",
-  "plugins": ["prettier-plugin-svelte"],
-  "overrides": [
-    {
-      "files": "*.svelte",
-      "options": {
-        "parser": "svelte"
-      }
-    }
-  ]
+	"tabWidth": 2,
+	"semi": true,
+	"singleQuote": false,
+	"printWidth": 80,
+	"useTabs": true,
+	"trailingComma": "all",
+	"arrowParens": "always",
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

.vscode/launch.json

@@ -1,15 +1,15 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Launch Package",
-      "type": "go",
-      "request": "launch",
-      "mode": "auto",
-      "program": "${fileDirname}"
-    }
-  ]
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch Package",
+			"type": "go",
+			"request": "launch",
+			"mode": "auto",
+			"program": "${fileDirname}"
+		}
+	]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"editor.insertSpaces": false
+}

ATTRIBUTION.md

@@ -0,0 +1,28 @@
+# Attribution
+
+We haven't rebuilt the wheel from scratch, here are the tools that have helped this project come to fruition.
+
+(I am creating this file a bit late, some tools may be missing, hopefully over time I can get everything listed here).
+
+## Web Client
+
+Look at our [package.json](./package.json) for the packages we directly use.
+
+- [Ionicons](https://ionic.io/ionicons) When looking for high quality icons, I go here first. Most of the icons in Watcharr are from here.
+- [Wikimedia Commons](https://commons.wikimedia.org) For [Streaming provider icons](https://commons.wikimedia.org/wiki/Category:SVG_logos_of_video_streaming_services).
+- [Penpot](https://github.com/penpot/penpot) For initial UI design and creating the logo.
+- [Google Fonts](https://fonts.google.com/) For custom fonts and for a few icons too. Don't worry though, fonts/icons are included in the Watcharr download, there are **no** requests made to google.
+
+## Server
+
+Look at our [go.mod](./server/go.mod) for the packages we use.
+
+- [TMDB](https://developer.themoviedb.org) Movie/show data.
+- [IGDB](https://www.igdb.com/api) Game data.
+
+## README.md
+
+The tools I have used to create the projects README.
+
+- [deviceframes](https://deviceframes.com)
+  Created the devices mockup preview image with this tool (and GIMP).

Dockerfile

@@ -1,5 +1,7 @@
+#
 # Backend
-FROM golang:1.21-alpine AS server
+#
+FROM golang:1.24-alpine AS server
 
 WORKDIR /server
 COPY server/*.go server/go.* ./
@@ -12,7 +14,9 @@ RUN apk update && apk add --no-cache musl-dev gcc build-base
 # CGO_CFLAGS: https://github.com/mattn/go-sqlite3/issues/1164#issuecomment-1635253695
 RUN go mod download && GOOS=linux CGO_ENABLED=1 CGO_CFLAGS="-D_LARGEFILE64_SOURCE" go build -o ./watcharr
 
+#
 # Frontend
+#
 FROM node:20-alpine AS ui
 
 WORKDIR /app
@@ -22,13 +26,19 @@ COPY ./static ./static
 
 RUN npm install && npm run build
 
+#
 # Production
+#
 FROM node:20-alpine AS runner
 
 COPY --from=server /server/watcharr /
 COPY --from=ui /app/build /ui
 COPY --from=ui /app/package.json /app/package-lock.json /ui
-RUN cd /ui && npm ci --omit=dev
+
+# Install just the prod dependencies for final step.
+# We --ignore-scripts, to stop the `prepare` script from auto-
+# running, which is only meant for development (will error).
+RUN cd /ui && npm ci --omit=dev --ignore-scripts=true
 
 EXPOSE 3080
 

README.md

@@ -18,34 +18,37 @@ I am built with Go and Svelte(Kit).
 
 Feel free to abuse this demo instance (nicely), which runs on the latest `dev` build (there may be bugs, as new features are tested on here too): [https://beta.watcharr.app/](https://beta.watcharr.app/)
 
-[Track Progress Until Next Version](https://github.com/orgs/sbondCo/projects/9/views/3)
+[Track progress for the next version](https://github.com/orgs/sbondCo/projects/9/views/3).
 
 ### Contents
 
 - [Screenshots](#screenshots)
-- [Setup](#set-up)
-- [Contributing](CONTRIBUTING.md)
+- [Set Up](#set-up)
+- [Community Made Tools](#community-made-tools)
 - [Getting Help](#getting-help)
+- [Contributing](#contributing)
 
 # Screenshots
 
 <p align="center">
 
-| Homepage                                                   | Watched Show Hover                                                      |
-| ---------------------------------------------------------- | ----------------------------------------------------------------------- |
-| <img src="./screenshot/homepage.png" alt="Watched List" /> | <img src="./screenshot/homepage-poster-hover.png" alt="Watched List" /> |
+<img src="./screenshot/devices-mock.png" alt="Overview" />
 
-| Watched Show Status Change                                                              | Movie Details                                                                  |
-| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| <img src="./screenshot/homepage-poster-change-status.png" alt="Changing Show Status" /> | <img src="./screenshot/content-details-page.png" alt="Content Details Page" /> |
+| Homepage                                                       | Watched Show Hover                                                          |
+| -------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| <img src="./screenshot/homepage.png?v=2" alt="Watched List" /> | <img src="./screenshot/homepage-poster-hover.png?v=2" alt="Watched List" /> |
 
-| User Profile                                                        | Discover                                                         |
-| ------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| <img src="./screenshot/user-profile.png" alt="User Profile Page" /> | <img src="./screenshot/discover-page.png" alt="Discover Page" /> |
+| Watched Show Status Change                                                                  | Movie Details                                                                      |
+| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| <img src="./screenshot/homepage-poster-change-status.png?v=2" alt="Changing Show Status" /> | <img src="./screenshot/content-details-page.png?v=2" alt="Content Details Page" /> |
 
-| Dark Homepage                                                          | Dark Content Details                                                                   |
-| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| <img src="./screenshot/homepage-dark.png" alt="Dark Theme Homepage" /> | <img src="./screenshot/content-details-page-dark.png" alt="Dark Theme Content Page" /> |
+| User Profile                                                            | Discover                                                             |
+| ----------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| <img src="./screenshot/user-profile.png?v=2" alt="User Profile Page" /> | <img src="./screenshot/discover-page.png?v=2" alt="Discover Page" /> |
+
+| Dark Homepage                                                              | Dark Content Details                                                                       |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| <img src="./screenshot/homepage-dark.png?v=2" alt="Dark Theme Homepage" /> | <img src="./screenshot/content-details-page-dark.png?v=2" alt="Dark Theme Content Page" /> |
 
 </p>
 
@@ -53,8 +56,22 @@ Feel free to abuse this demo instance (nicely), which runs on the latest `dev` b
 
 [Checkout our documentation](https://watcharr.app/docs/category/installation) for an up to date guide on setup! If you hate manuals, but love docker, this [docker-compose.yml](./docker-compose.yml) file is your friend.
 
+# Community Made Tools
+
+Third-party tools made by the community for enhancing your Watcharr experience!
+
+- [Kodi Plugin](https://github.com/airdogvan/watcharr_kodi) by [airdogvan](https://github.com/airdogvan) for automatically tracking your watched shows/movies.
+
+Thanks to anyone that has made a script or tool for Watcharr. Feel free to add your own to the list if you have one!
+
+**Note:** I cannot provide any assurances for these tools or stay on top of them (code review, etc), if you have any problems please open an issue in the project for the tool so that they can stay organized.
+
 # Getting Help
 
 If something isn't working for you or you are stuck, [creating an issue](https://github.com/sbondCo/Watcharr/issues/new) is the best way to get help! Every type of issue is accepted, so don't be afraid to ask anything!
 
 You can also [join our space on Matrix](https://matrix.to/#/#watcharr:matrix.org) for support.
+
+# Contributing
+
+Please continue to our [contributing guide](CONTRIBUTING.md).

SECURITY.md

@@ -0,0 +1,7 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+You can reach out directly to [@irhm:matrix.org](https://matrix.to/#/@irhm:matrix.org) on matrix to discuss the vulnerability or you may [draft a new security advisory on this repository](https://github.com/sbondCo/Watcharr/security/advisories/new).

doc/README.md

@@ -1,4 +1,6 @@
-# Website
+# Watcharr Docs
+
+View the live site at [watcharr.app](https://watcharr.app/).
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 

doc/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve("@docusaurus/core/lib/babel/preset")]
+	presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };

doc/docs/importing/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "Importing",
-  "position": 3,
-  "link": {
-    "type": "generated-index",
-    "description": "Guides for importing your data from other services."
-  }
+	"label": "Importing",
+	"position": 3,
+	"link": {
+		"type": "generated-index",
+		"description": "Guides for importing your data from other services."
+	}
 }

doc/docs/importing/myanimelist.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # MyAnimeList

doc/docs/importing/text-file.md

@@ -0,0 +1,30 @@
+---
+sidebar_position: 1
+---
+
+# Text File (.txt list)
+
+:::info Backup?
+You may consider a backup of your server before starting any import. They are not easily reversible, though we do our best to ensure they are accurate and bug free!
+:::
+
+The text file (.txt) import is of an arbitrary format (the one I used for years before creating Watcharr).
+
+Hopefully it is useful for others with similar files or in scenarios where its the easiest to generate for an import (though if possible, when generating a backup from another service data manually, matching a Watcharr export would enable keeping more data).
+
+## Format
+
+Each line is a new entry. The name of the content (show/movie) must be provided, the year can be optionally provided surrounded by brackets. Doesn't support specifying if name is for a show or movie, the importer will only automatically match on full search matches, if there are multiple results, you will be asked to pick the correct one.
+
+```
+<name> [(<year>)]
+```
+
+## An example
+
+```
+The Terminator (1984)
+Breaking Bad
+A Fistful of Dollars
+Reacher (2022)
+```

doc/docs/importing/trakt.md

@@ -0,0 +1,16 @@
+---
+sidebar_position: 3
+---
+
+# Trakt
+
+:::info Backup?
+You may consider a backup of your server before starting any import. They are not easily reversible, though we do our best to ensure they are accurate and bug free!
+:::
+
+**Note:** Your Trakt profile must be public _during_ this process. You are free to private it again once it completes.
+
+1. Provide your Trakt username in the text box.
+2. Press `Start Import`.
+
+This will be a long process, possibly a couple hours depending on how large of a Trakt history you have. If you think it has frozen or isn't working, try checking your server logs to see if it is doing anything.

doc/docs/importing/watcharr.md

@@ -0,0 +1,16 @@
+---
+sidebar_position: 0
+---
+
+# Watcharr
+
+:::info Backup?
+You may consider a backup of your server before starting any import. They are not easily reversible, though we do our best to ensure they are accurate and bug free!
+:::
+
+:::warning May not be what you want
+Watcharr import/export is a feature intended for end users. If you are the server admin, it is recommended that you copy your server files directly to any new server you are creating (it'll be much faster and easier). [See backup guide](/docs/server_config/backup).
+:::
+
+1. Provide the Watcharr export file (that you generated from your profile page).
+2. Review the import table, if everything looks good, start the import.

doc/docs/installation/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "Installation",
-  "position": 2,
-  "link": {
-    "type": "generated-index",
-    "description": "Choose how you would like to install Watcharr."
-  }
+	"label": "Installation",
+	"position": 2,
+	"link": {
+		"type": "generated-index",
+		"description": "Choose how you would like to install Watcharr."
+	}
 }

doc/docs/server_config/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "Server Configuration",
-  "position": 2,
-  "link": {
-    "type": "generated-index",
-    "description": "Learn how to configure your server."
-  }
+	"label": "Server Configuration",
+	"position": 2,
+	"link": {
+		"type": "generated-index",
+		"description": "Learn how to configure your server."
+	}
 }

doc/docs/server_config/backup.md

@@ -0,0 +1,41 @@
+---
+sidebar_position: 100
+description: Backing up your server.
+---
+
+# Backing Up
+
+Watcharr cannot handle backing up for you, but its simple structure should make it easy to slide it into your existing backup routine.
+
+Once you have created your first backup, it's recommended that you try restoring from that backup to make sure everything is correct and will work in case you need to restore from it in the future.
+
+:::danger Shutdown your server!
+Always shutdown Watcharr before backing up its data, otherwise you run the risk of corrupting files (mainly your database).
+:::
+
+## Simple Steps
+
+:::success Recommended
+This is the recommended way to backup.
+:::
+
+Here are the steps that are run daily for the `beta.watcharr.app` instance.
+
+1. Shutdown Watcharr.
+2. Copy and backup the entire `data` folder (default location is `./data`, backup whichever folder your server is configured to store its data in).
+3. Start Watcharr.
+
+I call these the simple steps because they simply backup your entire server, if you ever need to restore your server, it will start up from its exact state at backup.
+
+## Advanced Steps
+
+:::danger Discouraged
+Backing up this way is discouraged because new important files could be added later and missed.
+:::
+
+If you don't care about the warning not to backup this way, here are the "important" files that you can single out for backup:
+
+- `watcharr.db` Your database, holds all users, their watchlists, etc.
+- `watcharr.json` Server config.
+- `img/up` Profile picture uploads.
+- `img/games` Game posters (not exactly important, but scenarios in which this folder is not backed up have not been tested, only relevant for servers with game support enabled).

doc/docs/usage/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "Usage",
-  "position": 3,
-  "link": {
-    "type": "generated-index",
-    "description": "Hopefully Watcharr is easy enough to get started with and use, but incase you are stuck, one of these usage guides may help."
-  }
+	"label": "Usage",
+	"position": 3,
+	"link": {
+		"type": "generated-index",
+		"description": "Hopefully Watcharr is easy enough to get started with and use, but incase you are stuck, one of these usage guides may help."
+	}
 }

doc/docusaurus.config.js

@@ -7,104 +7,104 @@ const darkTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Watcharr Docs",
-  tagline:
-    "Open source, self-hostable watched list for all your content with user authentication, modern and clean UI and a very simple setup. ",
-  favicon: "img/favicon.png",
+	title: "Watcharr Docs",
+	tagline:
+		"Open source, self-hostable watched list for all your content with user authentication, modern and clean UI and a very simple setup. ",
+	favicon: "img/favicon.png",
 
-  // Set the production url of your site here
-  url: "https://watcharr.app",
-  // Set the /<baseUrl>/ pathname under which your site is served
-  // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
+	// Set the production url of your site here
+	url: "https://watcharr.app",
+	// Set the /<baseUrl>/ pathname under which your site is served
+	// For GitHub pages deployment, it is often '/<projectName>/'
+	baseUrl: "/",
 
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: "sbondCo", // Usually your GitHub org/user name.
-  projectName: "Watcharr", // Usually your repo name.
+	// GitHub pages deployment config.
+	// If you aren't using GitHub pages, you don't need these.
+	organizationName: "sbondCo", // Usually your GitHub org/user name.
+	projectName: "Watcharr", // Usually your repo name.
 
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
+	onBrokenLinks: "throw",
+	onBrokenMarkdownLinks: "warn",
 
-  trailingSlash: false,
+	trailingSlash: false,
 
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: "en",
-    locales: ["en"]
-  },
+	// Even if you don't use internalization, you can use this field to set useful
+	// metadata like html lang. For example, if your site is Chinese, you may want
+	// to replace "en" with "zh-Hans".
+	i18n: {
+		defaultLocale: "en",
+		locales: ["en"],
+	},
 
-  presets: [
-    [
-      "classic",
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/sbondCo/Watcharr/tree/dev/doc"
-        },
-        blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/sbondCo/Watcharr/tree/dev/doc"
-        },
-        theme: {
-          customCss: [
-            "./node_modules/viewerjs/dist/viewer.css",
-            require.resolve("./src/css/custom.css")
-          ]
-        }
-      })
-    ]
-  ],
+	presets: [
+		[
+			"classic",
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			({
+				docs: {
+					sidebarPath: require.resolve("./sidebars.js"),
+					// Please change this to your repo.
+					// Remove this to remove the "edit this page" links.
+					editUrl: "https://github.com/sbondCo/Watcharr/tree/dev/doc",
+				},
+				blog: {
+					showReadingTime: true,
+					// Please change this to your repo.
+					// Remove this to remove the "edit this page" links.
+					editUrl: "https://github.com/sbondCo/Watcharr/tree/dev/doc",
+				},
+				theme: {
+					customCss: [
+						"./node_modules/viewerjs/dist/viewer.css",
+						require.resolve("./src/css/custom.css"),
+					],
+				},
+			}),
+		],
+	],
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      image: "img/social-card.png",
-      navbar: {
-        title: "Watcharr",
-        logo: {
-          alt: "Watcharr Logo",
-          src: "img/favicon.png"
-        },
-        items: [
-          {
-            type: "docSidebar",
-            sidebarId: "tutorialSidebar",
-            position: "left",
-            label: "Docs"
-          },
-          {
-            type: "docsVersionDropdown"
-          },
-          {
-            href: "https://beta.watcharr.app",
-            label: "Demo",
-            position: "right"
-          },
-          {
-            href: "https://github.com/sbondCo/Watcharr",
-            label: "GitHub",
-            position: "right"
-          }
-        ]
-      },
-      prism: {
-        theme: lightTheme,
-        darkTheme: darkTheme
-      },
-      colorMode: {
-        defaultMode: "light",
-        // Dark theme currently disabled.. no time to fix the icons etc.
-        disableSwitch: true
-      }
-    })
+	themeConfig:
+		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+		({
+			image: "img/social-card.png",
+			navbar: {
+				title: "Watcharr",
+				logo: {
+					alt: "Watcharr Logo",
+					src: "img/favicon.png",
+				},
+				items: [
+					{
+						type: "docSidebar",
+						sidebarId: "tutorialSidebar",
+						position: "left",
+						label: "Docs",
+					},
+					{
+						type: "docsVersionDropdown",
+					},
+					{
+						href: "https://beta.watcharr.app",
+						label: "Demo",
+						position: "right",
+					},
+					{
+						href: "https://github.com/sbondCo/Watcharr",
+						label: "GitHub",
+						position: "right",
+					},
+				],
+			},
+			prism: {
+				theme: lightTheme,
+				darkTheme: darkTheme,
+			},
+			colorMode: {
+				defaultMode: "light",
+				// Dark theme currently disabled.. no time to fix the icons etc.
+				disableSwitch: true,
+			},
+		}),
 };
 
 module.exports = config;

doc/package.json

@@ -1,44 +1,44 @@
 {
-  "name": "watcharr-doc",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
-  },
-  "dependencies": {
-    "@docusaurus/core": "3.1.1",
-    "@docusaurus/preset-classic": "3.1.1",
-    "@mdx-js/react": "^3.0.0",
-    "clsx": "^2.1.0",
-    "prism-react-renderer": "^2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "viewerjs": "^1.11.6"
-  },
-  "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.1.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.5%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "engines": {
-    "node": ">=18.0"
-  }
+	"name": "watcharr-doc",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"docusaurus": "docusaurus",
+		"start": "docusaurus start",
+		"build": "docusaurus build",
+		"swizzle": "docusaurus swizzle",
+		"deploy": "docusaurus deploy",
+		"clear": "docusaurus clear",
+		"serve": "docusaurus serve",
+		"write-translations": "docusaurus write-translations",
+		"write-heading-ids": "docusaurus write-heading-ids"
+	},
+	"dependencies": {
+		"@docusaurus/core": "3.1.1",
+		"@docusaurus/preset-classic": "3.1.1",
+		"@mdx-js/react": "^3.0.0",
+		"clsx": "^2.1.0",
+		"prism-react-renderer": "^2.3.1",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"viewerjs": "^1.11.6"
+	},
+	"devDependencies": {
+		"@docusaurus/module-type-aliases": "3.1.1"
+	},
+	"browserslist": {
+		"production": [
+			">0.5%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"engines": {
+		"node": ">=18.0"
+	}
 }

doc/sidebars.js

@@ -13,11 +13,11 @@
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "." }]
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
 
-  // But you can create a sidebar manually
-  /*
+	// But you can create a sidebar manually
+	/*
   tutorialSidebar: [
     'intro',
     'hello',

doc/src/components/HomepageFeatures/index.js

@@ -3,59 +3,62 @@ import clsx from "clsx";
 import styles from "./styles.module.css";
 
 const FeatureList = [
-  {
-    title: "Free and Open",
-    Svg: require("@site/static/img/icon/code-slash.svg").default,
-    description: (
-      <>
-        Watcharr is free and open source software distributed under the MIT license. Feel free to
-        browse, modify or contribute!
-      </>
-    )
-  },
-  {
-    title: "Simple",
-    Svg: require("@site/static/img/icon/happy.svg").default,
-    description: (
-      <>
-        Watcharr is incredibly easy to dive into. Install without hassle and get started with the
-        seamless and intuitive user experience.
-      </>
-    )
-  },
-  {
-    title: "Built With Go and Svelte",
-    Svg: require("@site/static/img/icon/go.svg").default,
-    description: (
-      <>Don't know what else to add here, so now you know Watcharr is built with Go and Svelte.</>
-    )
-  }
+	{
+		title: "Free and Open",
+		Svg: require("@site/static/img/icon/code-slash.svg").default,
+		description: (
+			<>
+				Watcharr is free and open source software distributed under the MIT
+				license. Feel free to browse, modify or contribute!
+			</>
+		),
+	},
+	{
+		title: "Simple",
+		Svg: require("@site/static/img/icon/happy.svg").default,
+		description: (
+			<>
+				Watcharr is incredibly easy to dive into. Install without hassle and get
+				started with the seamless and intuitive user experience.
+			</>
+		),
+	},
+	{
+		title: "Built With Go and Svelte",
+		Svg: require("@site/static/img/icon/go.svg").default,
+		description: (
+			<>
+				Don't know what else to add here, so now you know Watcharr is built with
+				Go and Svelte.
+			</>
+		),
+	},
 ];
 
 function Feature({ Svg, title, description }) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
+	return (
+		<div className={clsx("col col--4")}>
+			<div className="text--center">
+				<Svg className={styles.featureSvg} role="img" />
+			</div>
+			<div className="text--center padding-horiz--md">
+				<h3>{title}</h3>
+				<p>{description}</p>
+			</div>
+		</div>
+	);
 }
 
 export default function HomepageFeatures() {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					{FeatureList.map((props, idx) => (
+						<Feature key={idx} {...props} />
+					))}
+				</div>
+			</div>
+		</section>
+	);
 }

doc/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,11 @@
 .features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+	height: 200px;
+	width: 200px;
 }

doc/src/components/TwoColFeat/index.js

@@ -4,68 +4,68 @@ import clsx from "clsx";
 import Viewer from "viewerjs";
 
 function TwoColFeat({ title, description, imgSrc }) {
-  return (
-    <div className={clsx(styles.twoCol)}>
-      <div>
-        <h2>{title}</h2>
-        <p>{description}</p>
-      </div>
-      <div>
-        <img src={imgSrc} alt="" loading="lazy" />
-      </div>
-    </div>
-  );
+	return (
+		<div className={clsx(styles.twoCol)}>
+			<div>
+				<h2>{title}</h2>
+				<p>{description}</p>
+			</div>
+			<div>
+				<img src={imgSrc} alt="" loading="lazy" />
+			</div>
+		</div>
+	);
 }
 
 export function HomepageTwoColFeats() {
-  useEffect(() => {
-    const ctr = document.getElementById("homepage-two-col-feats");
-    console.debug("Starting image viewer", ctr);
-    new Viewer(ctr, {
-      navbar: 0,
-      toolbar: {
-        zoomIn: 2,
-        zoomOut: 2,
-        next: 2,
-        prev: 2
-      },
-      title: 0,
-      className: "twoColViewer"
-    });
-  }, []);
+	useEffect(() => {
+		const ctr = document.getElementById("homepage-two-col-feats");
+		console.debug("Starting image viewer", ctr);
+		new Viewer(ctr, {
+			navbar: 0,
+			toolbar: {
+				zoomIn: 2,
+				zoomOut: 2,
+				next: 2,
+				prev: 2,
+			},
+			title: 0,
+			className: "twoColViewer",
+		});
+	}, []);
 
-  return (
-    <section id="homepage-two-col-feats" className={styles.twoColFeats}>
-      <TwoColFeat
-        title="Neat UI"
-        description="We just look lightweight."
-        imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/homepage.png"
-      />
-      <TwoColFeat
-        title="Easy To Use"
-        description="Not much to it, other than ease of use."
-        imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/homepage-poster-change-status.png"
-      />
-      <TwoColFeat
-        title="In-Depth Details"
-        description="About your favourite content."
-        imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/content-details-page.png"
-      />
-      <TwoColFeat
-        title="Personal Stats and Configuration"
-        description="Make it how you like."
-        imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/user-profile.png"
-      />
-      <TwoColFeat
-        title="Discovery"
-        description="Find the latest trending content."
-        imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/discover-page.png"
-      />
-      <TwoColFeat
-        title="Dark Theme"
-        description="For you who are still unsatisfied. ;("
-        imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/content-details-page-dark.png"
-      />
-    </section>
-  );
+	return (
+		<section id="homepage-two-col-feats" className={styles.twoColFeats}>
+			<TwoColFeat
+				title="Neat UI"
+				description="We just look lightweight."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/homepage.png?v=2"
+			/>
+			<TwoColFeat
+				title="Easy To Use"
+				description="Not much to it, other than ease of use."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/homepage-poster-change-status.png?v=2"
+			/>
+			<TwoColFeat
+				title="In-Depth Details"
+				description="About your favourite content."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/content-details-page.png?v=2"
+			/>
+			<TwoColFeat
+				title="Personal Stats and Configuration"
+				description="Make it how you like."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/user-profile.png?v=2"
+			/>
+			<TwoColFeat
+				title="Discovery"
+				description="Find the latest trending content."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/discover-page.png?v=2"
+			/>
+			<TwoColFeat
+				title="Dark Theme"
+				description="For you who are still unsatisfied. ;("
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/content-details-page-dark.png?v=2"
+			/>
+		</section>
+	);
 }

doc/src/components/TwoColFeat/styles.module.css

@@ -1,53 +1,53 @@
 .twoColFeats {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  margin-right: auto;
-  flex-flow: column;
-  width: 100%;
-  max-width: 1300px;
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	flex-flow: column;
+	width: 100%;
+	max-width: 1300px;
 }
 
 .twoCol {
-  display: flex;
-  flex-flow: row;
-  width: 100%;
-  padding: 2.5rem 5rem;
-  gap: 50px;
-  background-color: rgb(236, 236, 236);
+	display: flex;
+	flex-flow: row;
+	width: 100%;
+	padding: 2.5rem 5rem;
+	gap: 50px;
+	background-color: rgb(236, 236, 236);
 }
 
 .twoCol:nth-child(even) {
-  flex-flow: row-reverse;
-  background-color: transparent;
+	flex-flow: row-reverse;
+	background-color: transparent;
 }
 
 .twoCol > div {
-  width: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
+	width: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-flow: column;
 }
 
 .twoCol > div > img {
-  width: 100%;
-  border-radius: 12px;
-  box-shadow: 0px 0px 5px rgb(121, 121, 121);
-  cursor: pointer;
+	width: 100%;
+	border-radius: 12px;
+	box-shadow: 0px 0px 5px rgb(121, 121, 121);
+	cursor: pointer;
 }
 
 @media screen and (max-width: 850px) {
-  .twoCol,
-  .twoCol:nth-child(even) {
-    flex-flow: column;
-  }
+	.twoCol,
+	.twoCol:nth-child(even) {
+		flex-flow: column;
+	}
 
-  .twoCol > div {
-    width: 100%;
-  }
+	.twoCol > div {
+		width: 100%;
+	}
 
-  .twoCol > div > img {
-    max-width: 500px;
-  }
+	.twoCol > div > img {
+		max-width: 500px;
+	}
 }

doc/src/css/custom.css

@@ -6,39 +6,39 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+	--ifm-color-primary: #2e8555;
+	--ifm-color-primary-dark: #29784c;
+	--ifm-color-primary-darker: #277148;
+	--ifm-color-primary-darkest: #205d3b;
+	--ifm-color-primary-light: #33925d;
+	--ifm-color-primary-lighter: #359962;
+	--ifm-color-primary-lightest: #3cad6e;
+	--ifm-code-font-size: 95%;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+	--ifm-color-primary: #25c2a0;
+	--ifm-color-primary-dark: #21af90;
+	--ifm-color-primary-darker: #1fa588;
+	--ifm-color-primary-darkest: #1a8870;
+	--ifm-color-primary-light: #29d5b0;
+	--ifm-color-primary-lighter: #32d8b4;
+	--ifm-color-primary-lightest: #4fddbf;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 .twoColViewer .viewer-close {
-  right: 10px;
-  top: 10px;
-  width: 50px;
-  height: 50px;
+	right: 10px;
+	top: 10px;
+	width: 50px;
+	height: 50px;
 }
 
 /* Stupid poopin fix for viewerjs because whatever is bundling the css
 isn't keeping the order of this correctly. All this time wasted and it
 was just opaque ;( BUT ONLY IN THE BUILD AAAAAAAAAAAAAAAAAAAAAA */
 .viewer-in {
-  opacity: 1 !important;
+	opacity: 1 !important;
 }

doc/src/pages/index.js

@@ -10,44 +10,47 @@ import clsx from "clsx";
 import { HomepageTwoColFeats } from "../components/TwoColFeat";
 
 function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className="hero shadow--lw">
-      <div className={styles.heroContainer}>
-        <div className={styles.heroWrapper}>
-          <img src={LogoCol} />
-          <h1 className="hero__title">{siteConfig.title}</h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link className="button button--secondary button--lg" to="/docs/introduction">
-              Get Started
-            </Link>
-            <Link
-              className="button button--secondary button--outline button--lg"
-              to="https://beta.watcharr.app"
-              target="_blank"
-            >
-              Demo
-            </Link>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<header className="hero shadow--lw">
+			<div className={styles.heroContainer}>
+				<div className={styles.heroWrapper}>
+					<img src={LogoCol} />
+					<h1 className="hero__title">{siteConfig.title}</h1>
+					<p className="hero__subtitle">{siteConfig.tagline}</p>
+					<div className={styles.buttons}>
+						<Link
+							className="button button--secondary button--lg"
+							to="/docs/introduction"
+						>
+							Get Started
+						</Link>
+						<Link
+							className="button button--secondary button--outline button--lg"
+							to="https://beta.watcharr.app"
+							target="_blank"
+						>
+							Demo
+						</Link>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
 }
 
 export default function Home() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
-    >
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-        <HomepageTwoColFeats />
-      </main>
-    </Layout>
-  );
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<Layout
+			title={`${siteConfig.title}`}
+			description="Description will go into a meta tag in <head />"
+		>
+			<HomepageHeader />
+			<main>
+				<HomepageFeatures />
+				<HomepageTwoColFeats />
+			</main>
+		</Layout>
+	);
 }

doc/src/pages/index.module.css

@@ -4,31 +4,31 @@
  */
 
 .heroContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
 }
 
 .heroWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
-  max-width: 600px;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-flow: column;
+	max-width: 600px;
+	padding-left: 2rem;
+	padding-right: 2rem;
+	text-align: center;
 }
 
 .heroWrapper img {
-  width: 30vh;
-  max-width: 250px;
+	width: 30vh;
+	max-width: 250px;
 }
 
 .buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
 }

package.json

@@ -1,41 +1,42 @@
 {
-  "name": "watcharr",
-  "version": "1.40.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "server": "cd ./server && MODE=DEV go run ."
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-node": "^5.0.1",
-    "@sveltejs/kit": "^2.5.10",
-    "@types/papaparse": "^5.3.14",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "@vite-pwa/sveltekit": "^0.5.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.39.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.3",
-    "svelte": "^4.2.17",
-    "svelte-check": "^3.7.1",
-    "svelte-eslint-parser": "^0.36.0",
-    "svelte-preprocess": "^5.1.4",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11"
-  },
-  "type": "module",
-  "dependencies": {
-    "axios": "^1.7.2",
-    "blurhash": "^2.0.5",
-    "papaparse": "^5.4.1"
-  }
+	"name": "watcharr",
+	"version": "2.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"prepare": "svelte-kit sync",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"server": "cd ./server && MODE=DEV go run ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/kit": "^2.21.0",
+		"@types/papaparse": "^5.3.15",
+		"@typescript-eslint/eslint-plugin": "^8.32.1",
+		"@typescript-eslint/parser": "^8.32.1",
+		"@vite-pwa/sveltekit": "^0.6.6",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^10.1.2",
+		"eslint-plugin-svelte": "^2.45.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"sass": "^1.89.0",
+		"svelte": "^5.17.3",
+		"svelte-check": "^4.1.3",
+		"svelte-eslint-parser": "^0.42.0",
+		"svelte-preprocess": "^6.0.3",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5"
+	},
+	"type": "module",
+	"dependencies": {
+		"axios": "^1.9.0",
+		"blurhash": "^2.0.5",
+		"papaparse": "^5.4.1"
+	}
 }

screenshot/retired-19-01-25/README.md

@@ -0,0 +1 @@
+These screenshots were first uploaded Dec 10, 2023. They were retired on Jan 19, 2025.

server/auth.go

@@ -13,7 +13,6 @@ import (
 	"log/slog"
 	"net/http"
 	"net/url"
-	"os"
 	"strconv"
 	"strings"
 	"time"
@@ -27,9 +26,11 @@ import (
 type UserType uint8
 
 var (
-	// Assume watcharr user if none of these...
+	WATCHARR_USER UserType = 0
 	JELLYFIN_USER UserType = 1
 	PLEX_USER     UserType = 2
+	// Registered via trusted header auth
+	PROXY_USER UserType = 3
 )
 
 // User Perms
@@ -62,7 +63,10 @@ type User struct {
 	// Users third party integrations (minus jellyfin for now)
 	UserServices []UserServices `json:"-"`
 	Watched      []Watched
-	Permissions  int `gorm:"default:1" json:"-"`
+	// All Tags
+	Tags []Tag `json:"-"`
+	// Users permissions
+	Permissions int `gorm:"default:1" json:"-"`
 	// All user settings cols, in another struct for reusability
 	UserSettings
 }
@@ -93,6 +97,11 @@ type UserSettings struct {
 	Country *string `gorm:"default:'US'" json:"country"`
 	// Does the user want show, season and episode automations enabled.
 	AutomateShowStatuses *bool `gorm:"default:true" json:"automateShowStatuses"`
+	// Rating system user wants to use (frontend only).
+	// RatingSystem enum in frontend maxes out at 3, so just max=3 on this and we should be gut.
+	RatingSystem *int `json:"ratingSystem" binding:"omitempty,max=3"`
+	// Rating step for supported rating systems (frontend only, enum goes up to 2).
+	RatingStep *int `json:"ratingStep" binding:"omitempty,max=2"`
 }
 
 // Holds third party service auth tokens for users.
@@ -153,6 +162,7 @@ type AvailableAuthProvidersResponse struct {
 	SignupEnabled          bool     `json:"signupEnabled"`
 	IsInSetup              bool     `json:"isInSetup"`
 	UseEmby                bool     `json:"useEmby"`
+	HeaderAuthAutoLogin    bool     `json:"headerAuthAutoLogin"`
 }
 
 type ArgonParams struct {
@@ -199,7 +209,7 @@ func AuthRequired(db *gorm.DB) gin.HandlerFunc {
 		}
 		// Parse token
 		token, err := jwt.ParseWithClaims(atoken, &TokenClaims{}, func(token *jwt.Token) (interface{}, error) {
-			return []byte(os.Getenv("JWT_SECRET")), nil
+			return []byte(Config.JWT_SECRET), nil
 		})
 		if err != nil {
 			slog.Error("AuthRequired failed to parse token", "error", err)
@@ -579,7 +589,7 @@ func signJWT(user *User) (token string, err error) {
 	})
 
 	// Sign and get the complete encoded token as a string using the secret
-	return jwt.SignedString([]byte(os.Getenv("JWT_SECRET")))
+	return jwt.SignedString([]byte(Config.JWT_SECRET))
 }
 
 func hashPassword(password string, p *ArgonParams) (encodedHash string, err error) {

server/auth_proxy.go

@@ -0,0 +1,93 @@
+// auth_proxy contains the logic for Trusted Header Authentication/SSO.
+//
+// This code is inherently dangerous since we are implicitly trusting
+// a header for auth, so this should only be configured if you are
+// certain your watcharr instance is only available behind your proxy.
+
+package main
+
+import (
+	"errors"
+	"log/slog"
+
+	"gorm.io/gorm"
+)
+
+type TrustedHeaderAuthSetting struct {
+	// Required: Should header auth be enabled?
+	// This bool exists so header auth can be toggled
+	// easily without having to remove configuration.
+	// To be actually enabled, HEADER_NAME must also
+	// be set.
+	Enabled bool `json:"enabled"`
+	// Required: What is the name of the trusted header
+	// that will contain the logged in users username?
+	HeaderName string `json:"headerName"`
+	// Should the frontend attempt auto login if
+	// trusted header auth is enabled.
+	AutoLogin bool `json:"autoLogin"`
+	// Where can we redirect the user to logout
+	// of the auth service?
+	LogoutUrl string `json:"logoutUrl"`
+}
+
+type TrustedHeaderAuthLogoutDetailsResponse struct {
+	LogoutUrl string `json:"logoutUrl,omitempty"`
+}
+
+// Is trusted header auth configured on this server?
+func trustedHeaderAuthIsEnabled() bool {
+	return Config.HEADER_AUTH.Enabled && Config.HEADER_AUTH.HeaderName != ""
+}
+
+func setTrustedHeaderAuthSetting(has TrustedHeaderAuthSetting) error {
+	slog.Debug("setTrustedHeaderAuthSetting: Attempting to update to new provided value", "new_value", has)
+	Config.HEADER_AUTH = has
+	err := writeConfig()
+	if err != nil {
+		slog.Error("setTrustedHeaderAuthSetting: Failed to write updated config!", "error", err)
+		return errors.New("failed to write config")
+	}
+	return nil
+}
+
+// Gets proxy logout details.
+// Details are accessible to any user for the logout flow.
+// If proxy configured should be checked before using this.
+func getTrustedHeaderAuthLogoutDetails() *TrustedHeaderAuthLogoutDetailsResponse {
+	return &TrustedHeaderAuthLogoutDetailsResponse{
+		LogoutUrl: Config.HEADER_AUTH.LogoutUrl,
+	}
+}
+
+// Login via header sso
+func loginTrustedHeaderAuth(user *User, db *gorm.DB) (AuthResponse, error) {
+	slog.Debug("loginTrustedHeaderAuth: A user is logging in", "username_from_header", user.Username)
+	dbUser := new(User)
+	res := db.Where("username = ? AND type = ?", user.Username, PROXY_USER).Take(&dbUser)
+	if res.Error != nil {
+		if errors.Is(res.Error, gorm.ErrRecordNotFound) {
+			slog.Info("loginTrustedHeaderAuth: Creating new User from authentication header", "username_from_header", user.Username)
+			// Record not found, so we should create the user (if configured to do so)
+			// dbUser will be empty, so we can just reuse it for this purpose.
+			dbUser.Username = user.Username
+			dbUser.Type = PROXY_USER
+			dbUser.Country = &Config.DEFAULT_COUNTRY
+
+			res = db.Create(&dbUser)
+			if res.Error != nil {
+				slog.Error("loginTrustedHeaderAuth: Failed to create new user in db", "error", res.Error)
+				return AuthResponse{}, errors.New("failed to create new user")
+			}
+		} else {
+			slog.Error("loginTrustedHeaderAuth: An error occurred when looking up user in db", "error", res.Error)
+			return AuthResponse{}, errors.New("error locating user in db")
+		}
+	}
+	token, err := signJWT(dbUser)
+	if err != nil {
+		slog.Error("loginTrustedHeaderAuth: Failed to sign new jwt", "error", err)
+		return AuthResponse{}, errors.New("failed to get auth token")
+	}
+	return AuthResponse{Token: token}, nil
+}

server/config.go

@@ -54,6 +54,10 @@ type ServerConfig struct {
 	// Will be fetched automatically when PLEX_HOST is provided via web ui.
 	PLEX_MACHINE_ID string `json:",omitempty"`
 
+	// Optional: Trusted header authentication configuration.
+	// VERY DANGEROUS if access is not controlled correctly!
+	HEADER_AUTH TrustedHeaderAuthSetting `json:",omitempty"`
+
 	SONARR []SonarrSettings `json:",omitempty"`
 	RADARR []RadarrSettings `json:",omitempty"`
 	TWITCH game.IGDB        `json:",omitempty"`
@@ -93,6 +97,35 @@ func (c *ServerConfig) GetSafe() ServerConfig {
 	}
 }
 
+type ServerConfigGetByName struct {
+	Value any `json:"value"`
+}
+
+// Get config item by name.
+func (c *ServerConfig) Get(s string) (ServerConfigGetByName, error) {
+	switch s {
+	case "DEFAULT_COUNTRY":
+		return ServerConfigGetByName{Value: c.DEFAULT_COUNTRY}, nil
+	case "JELLYFIN_HOST":
+		return ServerConfigGetByName{Value: c.JELLYFIN_HOST}, nil
+	case "USE_EMBY":
+		return ServerConfigGetByName{Value: c.USE_EMBY}, nil
+	case "SIGNUP_ENABLED":
+		return ServerConfigGetByName{Value: c.SIGNUP_ENABLED}, nil
+	case "TMDB_KEY":
+		return ServerConfigGetByName{Value: c.TMDB_KEY}, nil
+	case "PLEX_HOST":
+		return ServerConfigGetByName{Value: c.PLEX_HOST}, nil
+	case "PLEX_MACHINE_ID":
+		return ServerConfigGetByName{Value: c.PLEX_MACHINE_ID}, nil
+	case "HEADER_AUTH":
+		return ServerConfigGetByName{Value: c.HEADER_AUTH}, nil
+	case "DEBUG":
+		return ServerConfigGetByName{Value: c.DEBUG}, nil
+	}
+	return ServerConfigGetByName{}, errors.New("invalid setting")
+}
+
 var (
 	// Our server config.. `readConfig` will overwrite from watcharr.json cfg file.
 	Config = ServerConfig{}
@@ -171,7 +204,12 @@ func updateConfig(k string, v any) error {
 	} else {
 		return errors.New("invalid setting")
 	}
-	return writeConfig()
+	err := writeConfig()
+	if err != nil {
+		slog.Error("updateConfig: Failed to write updated config!", "error", err)
+		return errors.New("failed to write config")
+	}
+	return nil
 }
 
 // Write current Config to file

server/content.go

@@ -18,6 +18,8 @@ type ContentType string
 const (
 	MOVIE ContentType = "movie"
 	SHOW  ContentType = "tv"
+	// Show episode
+	SHOW_EPISODE ContentType = "tv_episode"
 )
 
 var ContentStore = persistence.NewInMemoryStore(time.Hour * 24)
@@ -90,7 +92,7 @@ func saveContent(db *gorm.DB, c *Content, onlyUpdate bool) error {
 	// If row created, download the image
 	if res.RowsAffected > 0 {
 		slog.Debug("saveContent: Downloading poster.")
-		err := download("https://image.tmdb.org/t/p/w500"+c.PosterPath, path.Join(DataPath, "img", c.PosterPath))
+		err := download("https://image.tmdb.org/t/p/w500"+c.PosterPath, path.Join(DataPath, "img", c.PosterPath), false)
 		if err != nil {
 			slog.Error("saveContent: Failed to download content image!", "error", err.Error())
 		}
@@ -243,9 +245,12 @@ func transformProviders(c *interface{}, country string) {
 	}
 }
 
-func searchContent(query string) (TMDBSearchMultiResponse, error) {
+func searchContent(query string, pageNum int) (TMDBSearchMultiResponse, error) {
 	resp := new(TMDBSearchMultiResponse)
-	err := tmdbRequest("/search/multi", map[string]string{"query": query, "page": "1"}, &resp)
+	if pageNum == 0 {
+		pageNum = 1
+	}
+	err := tmdbRequest("/search/multi", map[string]string{"query": query, "page": strconv.Itoa(pageNum)}, &resp)
 	if err != nil {
 		slog.Error("Failed to complete multi search request!", "error", err.Error())
 		return TMDBSearchMultiResponse{}, errors.New("failed to complete multi search request")
@@ -253,6 +258,81 @@ func searchContent(query string) (TMDBSearchMultiResponse, error) {
 	return *resp, nil
 }
 
+func searchMovies(query string, pageNum int) (TMDBSearchMoviesResponse, error) {
+	resp := new(TMDBSearchMoviesResponse)
+	if pageNum == 0 {
+		pageNum = 1
+	}
+	err := tmdbRequest("/search/movie", map[string]string{"query": query, "page": strconv.Itoa(pageNum)}, &resp)
+	if err != nil {
+		slog.Error("Failed to complete movie search request!", "error", err.Error())
+		return TMDBSearchMoviesResponse{}, errors.New("failed to complete movie search request")
+	}
+	for i := range resp.Results {
+		resp.Results[i].MediaType = "movie"
+	}
+	return *resp, nil
+}
+
+func searchTv(query string, pageNum int) (TMDBSearchShowsResponse, error) {
+	resp := new(TMDBSearchShowsResponse)
+	if pageNum == 0 {
+		pageNum = 1
+	}
+	err := tmdbRequest("/search/tv", map[string]string{"query": query, "page": strconv.Itoa(pageNum)}, &resp)
+	if err != nil {
+		slog.Error("Failed to complete tv search request!", "error", err.Error())
+		return TMDBSearchShowsResponse{}, errors.New("failed to complete tv search request")
+	}
+	for i := range resp.Results {
+		resp.Results[i].MediaType = "tv"
+	}
+	return *resp, nil
+}
+
+func searchPeople(query string, pageNum int) (TMDBSearchPeopleResponse, error) {
+	resp := new(TMDBSearchPeopleResponse)
+	if pageNum == 0 {
+		pageNum = 1
+	}
+	err := tmdbRequest("/search/person", map[string]string{"query": query, "page": strconv.Itoa(pageNum)}, &resp)
+	if err != nil {
+		slog.Error("Failed to complete people search request!", "error", err.Error())
+		return TMDBSearchPeopleResponse{}, errors.New("failed to complete people search request")
+	}
+	for i := range resp.Results {
+		resp.Results[i].MediaType = "person"
+	}
+	return *resp, nil
+}
+
+// Search for content by an external id (imdb, etc).
+// Defaults to imdb if no source if provided (probably most common).
+func searchByExternalId(id string, source string) (TMDBSearchMultiResponse, error) {
+	resp := new(TMDBFindByExternalIdResponse)
+	if source == "" {
+		source = "imdb"
+	}
+	err := tmdbRequest("/find/"+id, map[string]string{"external_source": source + "_id"}, &resp)
+	if err != nil {
+		slog.Error("Failed to complete find/external_id request!", "error", err.Error())
+		return TMDBSearchMultiResponse{}, errors.New("failed to complete find/external_id request")
+	}
+	comb := []TMDBSearchMultiResults{}
+	comb = append(comb, resp.MovieResults...)
+	comb = append(comb, resp.TvResults...)
+	comb = append(comb, resp.PersonResults...)
+	comb = append(comb, resp.TvSeasonResults...)
+	comb = append(comb, resp.TvEpisodeResults...)
+	return TMDBSearchMultiResponse{TMDBSearchResponse: TMDBSearchResponse[TMDBSearchMultiResults]{
+		Results:      comb,
+		TotalResults: len(comb),
+		// Just providing these so we don't break frontend pagination logic.
+		TotalPages: 1,
+		Page:       1,
+	}}, nil
+}
+
 func movieDetails(db *gorm.DB, id string, country string, rParams map[string]string) (TMDBMovieDetails, error) {
 	resp := new(TMDBMovieDetails)
 	err := tmdbRequest("/movie/"+id, rParams, &resp)

server/follow.go

@@ -28,7 +28,7 @@ type FollowThoughts struct {
 	FollowedUser PublicUser    `json:"followedUser"`
 	Thoughts     string        `json:"thoughts"`
 	Status       WatchedStatus `json:"status"`
-	Rating       int8          `json:"rating"`
+	Rating       float64       `json:"rating"`
 }
 
 func followUser(db *gorm.DB, currentUserId uint, toFollowUserId uint) (FollowPublic, error) {

server/game/game.go

@@ -33,6 +33,8 @@ func (i *IGDB) req(host string, ep string, p map[string]string, b string, resp i
 		return errors.New("using igdbHost without a clientID or accessToken")
 	}
 
+	slog.Debug("IGDB->req: Creating a request.", "ep", ep, "body", b)
+
 	base, err := url.Parse(host)
 	if err != nil {
 		return errors.New("failed to parse api uri")
@@ -181,6 +183,24 @@ func (i *IGDB) Search(q string) (GameSearchResponse, error) {
 	return resp, nil
 }
 
+// Should return same details as `Search`, we both are for search page only minimal details required.
+func (i *IGDB) SearchById(id string) (GameSearchResponse, error) {
+	slog.Debug("IGDB Search called", "id", id)
+	var resp GameSearchResponse
+	err := i.req(
+		igdbHost,
+		"/games",
+		map[string]string{},
+		"fields name, cover.image_id, version_title, summary, first_release_date; where id = "+id+";",
+		&resp,
+	)
+	if err != nil {
+		slog.Error("IGDB Search request failed!", "error", err)
+		return GameSearchResponse{}, errors.New("request failed")
+	}
+	return resp, nil
+}
+
 func (i *IGDB) GameDetails(id string) (GameDetailsResponse, error) {
 	slog.Debug("IGDB GameDetails called", "id", id)
 	var resp []GameDetailsResponse

server/games.go

@@ -38,7 +38,7 @@ type Game struct {
 
 type PlayedAddRequest struct {
 	Status WatchedStatus `json:"status"`
-	Rating int8          `json:"rating" binding:"max=10"`
+	Rating float64       `json:"rating" binding:"max=10"`
 	IgdbID int           `json:"igdbId" binding:"required"`
 }
 

server/go.mod

@@ -1,57 +1,55 @@
 module github.com/sbondCo/Watcharr
 
-go 1.21
+go 1.24
 
 require (
 	github.com/buckket/go-blurhash v1.1.0
-	github.com/gin-contrib/cache v1.3.0
-	github.com/gin-contrib/cors v1.7.2
+	github.com/gin-contrib/cache v1.3.1
+	github.com/gin-contrib/cors v1.7.5
 	github.com/gin-gonic/gin v1.10.0
-	github.com/go-co-op/gocron/v2 v2.5.0
-	github.com/golang-jwt/jwt/v5 v5.2.1
+	github.com/go-co-op/gocron/v2 v2.16.2
+	github.com/golang-jwt/jwt/v5 v5.2.2
 	github.com/joho/godotenv v1.5.1
-	golang.org/x/crypto v0.23.0
+	golang.org/x/crypto v0.38.0
 	gopkg.in/natefinch/lumberjack.v2 v2.2.1
-	gorm.io/driver/sqlite v1.5.5
-	gorm.io/gorm v1.25.10
+	gorm.io/driver/sqlite v1.5.7
+	gorm.io/gorm v1.25.12
 )
 
 require (
 	github.com/bradfitz/gomemcache v0.0.0-20230905024940-24af94b03874 // indirect
-	github.com/bytedance/sonic v1.11.6 // indirect
-	github.com/bytedance/sonic/loader v0.1.1 // indirect
-	github.com/cloudwego/base64x v0.1.4 // indirect
-	github.com/cloudwego/iasm v0.2.0 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.3 // indirect
-	github.com/gin-contrib/sse v0.1.0 // indirect
+	github.com/bytedance/sonic v1.13.2 // indirect
+	github.com/bytedance/sonic/loader v0.2.4 // indirect
+	github.com/cloudwego/base64x v0.1.5 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.8 // indirect
+	github.com/gin-contrib/sse v1.0.0 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/go-playground/validator/v10 v10.20.0 // indirect
-	github.com/goccy/go-json v0.10.2 // indirect
-	github.com/gomodule/redigo v1.8.9 // indirect
-	github.com/google/go-cmp v0.5.9 // indirect
+	github.com/go-playground/validator/v10 v10.26.0 // indirect
+	github.com/goccy/go-json v0.10.5 // indirect
+	github.com/gomodule/redigo v1.9.2 // indirect
+	github.com/google/go-cmp v0.6.0 // indirect
 	github.com/google/uuid v1.6.0 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
-	github.com/jonboulle/clockwork v0.4.0 // indirect
+	github.com/jonboulle/clockwork v0.5.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
-	github.com/klauspost/cpuid/v2 v2.2.7 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.10 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/mattn/go-sqlite3 v1.14.17 // indirect
+	github.com/mattn/go-sqlite3 v1.14.22 // indirect
 	github.com/memcachier/mc/v3 v3.0.3 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/pelletier/go-toml/v2 v2.2.2 // indirect
+	github.com/pelletier/go-toml/v2 v2.2.3 // indirect
 	github.com/robfig/cron/v3 v3.0.1 // indirect
 	github.com/robfig/go-cache v0.0.0-20130306151617-9fc39e0dbf62 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.12 // indirect
-	golang.org/x/arch v0.8.0 // indirect
-	golang.org/x/exp v0.0.0-20240416160154-fe59bbe5cc7f // indirect
-	golang.org/x/net v0.25.0 // indirect
-	golang.org/x/sys v0.20.0 // indirect
-	golang.org/x/text v0.15.0 // indirect
-	google.golang.org/protobuf v1.34.1 // indirect
+	golang.org/x/arch v0.15.0 // indirect
+	golang.org/x/net v0.38.0 // indirect
+	golang.org/x/sys v0.33.0 // indirect
+	golang.org/x/text v0.25.0 // indirect
+	google.golang.org/protobuf v1.36.6 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

server/go.sum

@@ -2,45 +2,45 @@ github.com/bradfitz/gomemcache v0.0.0-20230905024940-24af94b03874 h1:N7oVaKyGp8b
 github.com/bradfitz/gomemcache v0.0.0-20230905024940-24af94b03874/go.mod h1:r5xuitiExdLAJ09PR7vBVENGvp4ZuTBeWTGtxuX3K+c=
 github.com/buckket/go-blurhash v1.1.0 h1:X5M6r0LIvwdvKiUtiNcRL2YlmOfMzYobI3VCKCZc9Do=
 github.com/buckket/go-blurhash v1.1.0/go.mod h1:aT2iqo5W9vu9GpyoLErKfTHwgODsZp3bQfXjXJUxNb8=
-github.com/bytedance/sonic v1.11.6 h1:oUp34TzMlL+OY1OUWxHqsdkgC/Zfc85zGqw9siXjrc0=
-github.com/bytedance/sonic v1.11.6/go.mod h1:LysEHSvpvDySVdC2f87zGWf6CIKJcAvqab1ZaiQtds4=
-github.com/bytedance/sonic/loader v0.1.1 h1:c+e5Pt1k/cy5wMveRDyk2X4B9hF4g7an8N3zCYjJFNM=
+github.com/bytedance/sonic v1.13.2 h1:8/H1FempDZqC4VqjptGo14QQlJx8VdZJegxs6wwfqpQ=
+github.com/bytedance/sonic v1.13.2/go.mod h1:o68xyaF9u2gvVBuGHPlUVCy+ZfmNNO5ETf1+KgkJhz4=
 github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
-github.com/cloudwego/base64x v0.1.4 h1:jwCgWpFanWmN8xoIUHa2rtzmkd5J2plF/dnLS6Xd/0Y=
-github.com/cloudwego/base64x v0.1.4/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
-github.com/cloudwego/iasm v0.2.0 h1:1KNIy1I1H9hNNFEEH3DVnI4UujN+1zjpuk6gwHLTssg=
+github.com/bytedance/sonic/loader v0.2.4 h1:ZWCw4stuXUsn1/+zQDqeE7JKP+QO47tz7QCNan80NzY=
+github.com/bytedance/sonic/loader v0.2.4/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
+github.com/cloudwego/base64x v0.1.5 h1:XPciSp1xaq2VCSt6lF0phncD4koWyULpl5bUxbfCyP4=
+github.com/cloudwego/base64x v0.1.5/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
 github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/gabriel-vasile/mimetype v1.4.3 h1:in2uUcidCuFcDKtdcBxlR0rJ1+fsokWf+uqxgUFjbI0=
-github.com/gabriel-vasile/mimetype v1.4.3/go.mod h1:d8uq/6HKRL6CGdk+aubisF/M5GcPfT7nKyLpA0lbSSk=
-github.com/gin-contrib/cache v1.3.0 h1:wEEw38uvb4rTraQJVpd9ex4ZotXNlc0fSaSUsuPXS/w=
-github.com/gin-contrib/cache v1.3.0/go.mod h1:EA63LrWGI5vwSI95TS5fgBrtxZ1tM2NKx+NrEeyEDcU=
-github.com/gin-contrib/cors v1.7.2 h1:oLDHxdg8W/XDoN/8zamqk/Drgt4oVZDvaV0YmvVICQw=
-github.com/gin-contrib/cors v1.7.2/go.mod h1:SUJVARKgQ40dmrzgXEVxj2m7Ig1v1qIboQkPDTQ9t2E=
-github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
-github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
+github.com/gabriel-vasile/mimetype v1.4.8 h1:FfZ3gj38NjllZIeJAmMhr+qKL8Wu+nOoI3GqacKw1NM=
+github.com/gabriel-vasile/mimetype v1.4.8/go.mod h1:ByKUIKGjh1ODkGM1asKUbQZOLGrPjydw3hYPU2YU9t8=
+github.com/gin-contrib/cache v1.3.1 h1:EWjkOaLocs5fGt9feQaI7rt1GZbDyatFXEUh2/s3ZI8=
+github.com/gin-contrib/cache v1.3.1/go.mod h1:6Tme0p3QEF/Ck/KUcq7h/OAqZvUDjHRH1DtQbNgfIX0=
+github.com/gin-contrib/cors v1.7.5 h1:cXC9SmofOrRg0w9PigwGlHG3ztswH6bqq4vJVXnvYMk=
+github.com/gin-contrib/cors v1.7.5/go.mod h1:4q3yi7xBEDDWKapjT2o1V7mScKDDr8k+jZ0fSquGoy0=
+github.com/gin-contrib/sse v1.0.0 h1:y3bT1mUWUxDpW4JLQg/HnTqV4rozuW4tC9eFKTxYI9E=
+github.com/gin-contrib/sse v1.0.0/go.mod h1:zNuFdwarAygJBht0NTKiSi3jRf6RbqeILZ9Sp6Slhe0=
 github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
 github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
-github.com/go-co-op/gocron/v2 v2.5.0 h1:ff/TJX9GdTJBDL1il9cyd/Sj3WnS+BB7ZzwHKSNL5p8=
-github.com/go-co-op/gocron/v2 v2.5.0/go.mod h1:ckPQw96ZuZLRUGu88vVpd9a6d9HakI14KWahFZtGvNw=
+github.com/go-co-op/gocron/v2 v2.16.2 h1:r08P663ikXiulLT9XaabkLypL/W9MoCIbqgQoAutyX4=
+github.com/go-co-op/gocron/v2 v2.16.2/go.mod h1:4YTLGCCAH75A5RlQ6q+h+VacO7CgjkgP0EJ+BEOXRSI=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
 github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
 github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
 github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
-github.com/go-playground/validator/v10 v10.20.0 h1:K9ISHbSaI0lyB2eWMPJo+kOS/FBExVwjEviJTixqxL8=
-github.com/go-playground/validator/v10 v10.20.0/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
-github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
-github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
-github.com/golang-jwt/jwt/v5 v5.2.1 h1:OuVbFODueb089Lh128TAcimifWaLhJwVflnrgM17wHk=
-github.com/golang-jwt/jwt/v5 v5.2.1/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/gomodule/redigo v1.8.9 h1:Sl3u+2BI/kk+VEatbj0scLdrFhjPmbxOc1myhDP41ws=
-github.com/gomodule/redigo v1.8.9/go.mod h1:7ArFNvsTjH8GMMzB4uy1snslv2BwmginuMs06a1uzZE=
-github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
-github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/go-playground/validator/v10 v10.26.0 h1:SP05Nqhjcvz81uJaRfEV0YBSSSGMc/iMaVtFbr3Sw2k=
+github.com/go-playground/validator/v10 v10.26.0/go.mod h1:I5QpIEbmr8On7W0TktmJAumgzX4CA1XNl4ZmDuVHKKo=
+github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
+github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
+github.com/golang-jwt/jwt/v5 v5.2.2 h1:Rl4B7itRWVtYIHFrSNd7vhTiz9UpLdi6gZhZ3wEeDy8=
+github.com/golang-jwt/jwt/v5 v5.2.2/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/gomodule/redigo v1.9.2 h1:HrutZBLhSIU8abiSfW8pj8mPhOyMYjZT/wcA4/L9L9s=
+github.com/gomodule/redigo v1.9.2/go.mod h1:KsU3hiK/Ay8U42qpaJk+kuNa3C+spxapWpM+ywhcgtw=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
@@ -50,13 +50,13 @@ github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
 github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
 github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
-github.com/jonboulle/clockwork v0.4.0 h1:p4Cf1aMWXnXAUh8lVfewRBx1zaTSYKrKMF2g3ST4RZ4=
-github.com/jonboulle/clockwork v0.4.0/go.mod h1:xgRqUGwRcjKCO1vbZUEtSLrqKoPSsUpK7fnezOII0kc=
+github.com/jonboulle/clockwork v0.5.0 h1:Hyh9A8u51kptdkR+cqRpT1EebBwTn1oK9YfGYbdFz6I=
+github.com/jonboulle/clockwork v0.5.0/go.mod h1:3mZlmanh0g2NDKO5TWZVJAfofYk64M7XN3SzBPjZF60=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
-github.com/klauspost/cpuid/v2 v2.2.7 h1:ZWSB3igEs+d0qvnxR/ZBzXVmxkgt8DdzP6m9pfuVLDM=
-github.com/klauspost/cpuid/v2 v2.2.7/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/klauspost/cpuid/v2 v2.2.10 h1:tBs3QSyvjDyFTq3uoc/9xFpCuOsJQFNPiAhYdw2skhE=
+github.com/klauspost/cpuid/v2 v2.2.10/go.mod h1:hqwkgyIinND0mEev00jJYCxPNVRVXFQeu1XKlok6oO0=
 github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
 github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
 github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
@@ -66,8 +66,8 @@ github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
 github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.17 h1:mCRHCLDUBXgpKAqIKsaAaAsrAlbkeomtRFKXh2L6YIM=
-github.com/mattn/go-sqlite3 v1.14.17/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
+github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
+github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/memcachier/mc/v3 v3.0.3 h1:qii+lDiPKi36O4Xg+HVKwHu6Oq+Gt17b+uEiA0Drwv4=
 github.com/memcachier/mc/v3 v3.0.3/go.mod h1:GzjocBahcXPxt2cmqzknrgqCOmMxiSzhVKPOe90Tpug=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -75,8 +75,8 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
 github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
-github.com/pelletier/go-toml/v2 v2.2.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
-github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
+github.com/pelletier/go-toml/v2 v2.2.3 h1:YmeHyLY8mFWbdkNWwpr+qIL2bEqT0o95WSdkNHvL12M=
+github.com/pelletier/go-toml/v2 v2.2.3/go.mod h1:MfCQTFTvCcUyyvvwm1+G6H/jORL20Xlb6rzQu9GuUkc=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/robfig/cron/v3 v3.0.1 h1:WdRxkvbJztn8LMz/QEvLN5sBU+xKpSqwwUO1Pjr4qDs=
@@ -95,31 +95,27 @@ github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
-github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
-github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
 github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
 go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
 go.uber.org/goleak v1.3.0/go.mod h1:CoHD4mav9JJNrW/WLlf7HGZPjdw8EucARQHekz1X6bE=
-golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
-golang.org/x/arch v0.8.0 h1:3wRIsP3pM4yUptoR96otTUOXI367OS0+c9eeRi9doIc=
-golang.org/x/arch v0.8.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
-golang.org/x/crypto v0.23.0 h1:dIJU/v2J8Mdglj/8rJ6UUOM3Zc9zLZxVZwwxMooUSAI=
-golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
-golang.org/x/exp v0.0.0-20240416160154-fe59bbe5cc7f h1:99ci1mjWVBWwJiEKYY6jWa4d2nTQVIEhZIptnrVb1XY=
-golang.org/x/exp v0.0.0-20240416160154-fe59bbe5cc7f/go.mod h1:/lliqkxwWAhPjf5oSOIJup2XcqJaw8RGS6k3TGEc7GI=
-golang.org/x/net v0.25.0 h1:d/OCCoBEUq33pjydKrGQhw7IlUPI2Oylr+8qLx49kac=
-golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
-golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/arch v0.15.0 h1:QtOrQd0bTUnhNVNndMpLHNWrDmYzZ2KDqSrEymqInZw=
+golang.org/x/arch v0.15.0/go.mod h1:JmwW7aLIoRUKgaTzhkiEFxvcEiQGyOg9BMonBJUS7EE=
+golang.org/x/crypto v0.38.0 h1:jt+WWG8IZlBnVbomuhg2Mdq0+BBQaHbtqHEFEigjUV8=
+golang.org/x/crypto v0.38.0/go.mod h1:MvrbAqul58NNYPKnOra203SB9vpuZW0e+RRZV+Ggqjw=
+golang.org/x/net v0.38.0 h1:vRMAPTMaeGqVhG5QyLJHqNDwecKTomGeqbnfZyKlBI8=
+golang.org/x/net v0.38.0/go.mod h1:ivrbrMbzFq5J41QOQh0siUuly180yBYtLp+CKbEaFx8=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
-golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.15.0 h1:h1V/4gjBv8v9cjcR6+AR5+/cIYK5N/WAgiv4xlsEtAk=
-golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
-google.golang.org/protobuf v1.34.1 h1:9ddQBjfCyZPOHPUiPxpYESBLc+T8P3E+Vo4IbKZgFWg=
-google.golang.org/protobuf v1.34.1/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
+golang.org/x/sys v0.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw=
+golang.org/x/sys v0.33.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/text v0.25.0 h1:qVyWApTSYLk/drJRO5mDlNYskwQznZmkpV2c8q9zls4=
+golang.org/x/text v0.25.0/go.mod h1:WEdwpYrmk1qmdHvhkSTNPm3app7v4rsT8F2UD6+VHIA=
+google.golang.org/protobuf v1.36.6 h1:z1NpPI8ku2WgiWnf+t9wTPsn6eP1L7ksHUlkfLvd9xY=
+google.golang.org/protobuf v1.36.6/go.mod h1:jduwjTPXsFjZGTmRluh+L6NjiWu7pchiJ2/5YcXBHnY=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
@@ -128,9 +124,8 @@ gopkg.in/natefinch/lumberjack.v2 v2.2.1/go.mod h1:YD8tP3GAjkrDg1eZH7EGmyESg/lsYs
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gorm.io/driver/sqlite v1.5.5 h1:7MDMtUZhV065SilG62E0MquljeArQZNfJnjd9i9gx3E=
-gorm.io/driver/sqlite v1.5.5/go.mod h1:6NgQ7sQWAIFsPrJJl1lSNSu2TABh0ZZ/zm5fosATavE=
-gorm.io/gorm v1.25.10 h1:dQpO+33KalOA+aFYGlK+EfxcI5MbO7EP2yYygwh9h+s=
-gorm.io/gorm v1.25.10/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
+gorm.io/driver/sqlite v1.5.7 h1:8NvsrhP0ifM7LX9G4zPB97NwovUakUxc+2V2uuf3Z1I=
+gorm.io/driver/sqlite v1.5.7/go.mod h1:U+J8craQU6Fzkcvu8oLeAQmi50TkwPEhHDEjQZXDah4=
+gorm.io/gorm v1.25.12 h1:I0u8i2hWQItBq1WfE0o2+WuL9+8L21K9e2HHSTE/0f8=
+gorm.io/gorm v1.25.12/go.mod h1:xh7N7RHfYlNc5EmcI/El95gXusucDrQnHXe0+CgWcLQ=
 nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
-rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=

server/import.go

@@ -30,7 +30,7 @@ type ImportRequest struct {
 	Name             string           `json:"name"`
 	TmdbID           int              `json:"tmdbId"`
 	Type             ContentType      `json:"type"`
-	Rating           int8             `json:"rating"`
+	Rating           float64          `json:"rating" binding:"max=10"`
 	RatingCustomDate *time.Time       `json:"ratingCustomDate"`
 	Status           WatchedStatus    `json:"status"`
 	Thoughts         string           `json:"thoughts"`
@@ -38,6 +38,8 @@ type ImportRequest struct {
 	Activity         []Activity       `json:"activity"`
 	WatchedEpisodes  []WatchedEpisode `json:"watchedEpisodes"`
 	WatchedSeason    []WatchedSeason  `json:"watchedSeasons"`
+	Tags             []TagAddRequest  `json:"tags"`
+	ImdbID           string           `json:"imdbId"`
 }
 
 type ImportResponse struct {
@@ -70,7 +72,53 @@ func importContent(db *gorm.DB, userId uint, ar ImportRequest) (ImportResponse,
 			return successfulImport(db, userId, cr.ID, SHOW, ar)
 		}
 	}
-	sr, err := searchContent(ar.Name)
+	// If imdb id passed, attempt to get content with it
+	if ar.ImdbID != "" && (ar.Type == MOVIE || ar.Type == SHOW || ar.Type == SHOW_EPISODE) {
+		if imdbResp, err := searchByExternalId(ar.ImdbID, "imdb"); err == nil {
+			if len(imdbResp.Results) == 1 {
+				onlyResult := imdbResp.Results[0]
+				if onlyResult.MediaType == string(MOVIE) || onlyResult.MediaType == string(SHOW) {
+					// Will only be one result
+					slog.Debug("import: importing imdb match", "imdb_id", ar.ImdbID, "tmdb_id_thatwasfound", onlyResult.ID)
+					return successfulImport(db, userId, onlyResult.ID, ContentType(onlyResult.MediaType), ar)
+				} else if onlyResult.MediaType == string(SHOW_EPISODE) {
+					// Handle episodes differently.
+					// Clients must import tv episodes last so that the actual show can be imported first
+					// will fail if watched entry isn't imported first or already exists (we won't make it here).
+					w, e := getWatchedItemByTmdbId(db, userId, uint(onlyResult.ShowId), "tv")
+					if e != nil {
+						slog.Error("import: imdb match: Failed to add watched episode (failed to find watched item, it must exist!).", "rq", ar, "error", err)
+						return ImportResponse{Type: IMPORT_FAILED}, nil
+					}
+					ws, err := addWatchedEpisodes(db, userId, WatchedEpisodeAddRequest{
+						WatchedID:       w.ID,
+						SeasonNumber:    onlyResult.SeasonNumber,
+						EpisodeNumber:   onlyResult.EpisodeNumber,
+						Status:          ar.Status,
+						Rating:          int8(ar.Rating),
+						addActivityDate: *ar.RatingCustomDate,
+					})
+					if err != nil {
+						slog.Error("import: imdb match: Failed to add watched episode.", "rq", ar, "error", err)
+						return ImportResponse{Type: IMPORT_FAILED}, nil
+					} else {
+						w.WatchedEpisodes = ws.WatchedEpisodes
+						return ImportResponse{Type: IMPORT_SUCCESS, WatchedEntry: w}, nil
+					}
+				} else {
+					slog.Error("import: imdb match has unsupported media type.", "media_type", imdbResp.Results[0].MediaType, "rq", ar)
+					return ImportResponse{Type: IMPORT_FAILED}, nil
+				}
+			} else {
+				// Content in tmdb may just be missing a related imdb id, so allow search to continue by name below.
+				slog.Warn("import: No results for search by imdb id.. search will contiue by content name.", "rq", ar)
+			}
+		} else {
+			slog.Warn("import: Failed to get content by imdb id.. search will contiue by content name.", "rq", ar)
+		}
+	}
+	// tmdbId not passed.. search for the content by name.
+	sr, err := searchContent(ar.Name, 1)
 	if err != nil {
 		slog.Error("import: content search failed", "error", err)
 		return ImportResponse{}, errors.New("Content search failed")
@@ -227,5 +275,39 @@ func successfulImport(db *gorm.DB, userId uint, contentId int, contentType Conte
 			w.WatchedEpisodes = ws.WatchedEpisodes
 		}
 	}
+	// Import tags, if any
+	if len(ar.Tags) > 0 {
+		// Create tags if they dont exist
+		slog.Debug("successfulImport: Importing tags")
+		for _, v := range ar.Tags {
+			// Check if tag exists
+			var t Tag
+			t, err := getTagByNameAndColor(db, userId, v.Name, v.Color, v.BgColor)
+			if err != nil && err.Error() != "tag does not exist" {
+				slog.Error("successfulImport: Failed to check for an existing tag", "name", v.Name, "error", err)
+				continue
+			}
+			if t.ID == 0 {
+				tag, err := addTag(db, userId, TagAddRequest{
+					Name:    v.Name,
+					Color:   v.Color,
+					BgColor: v.BgColor,
+				})
+				if err != nil {
+					slog.Error("successfulImport: Failed to add a tag.", "name", v.Name, "error", err)
+					continue
+				}
+				t = tag
+			}
+
+			// Associate the watched entry with the tag
+			err = addWatchedToTag(db, userId, t.ID, w.ID)
+			if err != nil {
+				slog.Error("successfulImport: Failed to associate watched entry with tag.", "error", err)
+				continue
+			}
+			w.Tags = append(w.Tags, t)
+		}
+	}
 	return ImportResponse{Type: IMPORT_SUCCESS, WatchedEntry: w}, nil
 }

server/import_trakt.go

@@ -0,0 +1,456 @@
+// Trakt.tv importer.
+
+package main
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io"
+	"log/slog"
+	"net/http"
+	"net/url"
+	"strconv"
+	"time"
+
+	"gorm.io/gorm"
+)
+
+type TraktImportRequest struct {
+	// Username of public trakt user to import from.
+	Username string `json:"username" binding:"required"`
+}
+
+type TraktUser struct {
+	Username string `json:"username"`
+	Private  bool   `json:"private"`
+	IDs      struct {
+		Slug string `json:"slug"`
+	} `json:"ids"`
+}
+
+type TraktHistory struct {
+	ID        int64            `json:"id"`
+	WatchedAt time.Time        `json:"watched_at"`
+	Action    string           `json:"action"`
+	Type      string           `json:"type"`
+	Show      TraktListShow    `json:"show,omitempty"`
+	Episode   TraktListEpisode `json:"episode,omitempty"`
+	Movie     TraktListMovie   `json:"movie,omitempty"`
+}
+
+type TraktWatchlist []struct {
+	Rank     int              `json:"rank"`
+	ID       int              `json:"id"`
+	ListedAt time.Time        `json:"listed_at"`
+	Notes    string           `json:"notes"`
+	Type     string           `json:"type"`
+	Show     TraktListShow    `json:"show,omitempty"`
+	Episode  TraktListEpisode `json:"episode,omitempty"`
+	Movie    TraktListMovie   `json:"movie,omitempty"`
+}
+
+type TraktRatings []struct {
+	Rating  int              `json:"rating"`
+	Type    string           `json:"type"`
+	Show    TraktListShow    `json:"show,omitempty"`
+	Episode TraktListEpisode `json:"episode,omitempty"`
+	Movie   TraktListMovie   `json:"movie,omitempty"`
+}
+
+type TraktListShow struct {
+	Title string `json:"title"`
+	Year  int    `json:"year"`
+	Ids   struct {
+		Trakt int    `json:"trakt"`
+		Slug  string `json:"slug"`
+		Tmdb  int    `json:"tmdb"`
+	} `json:"ids"`
+}
+
+type TraktListEpisode struct {
+	Season int    `json:"season"`
+	Number int    `json:"number"`
+	Title  string `json:"title"`
+	Ids    struct {
+		Trakt int    `json:"trakt"`
+		Slug  string `json:"slug"`
+		Tmdb  int    `json:"tmdb"`
+	} `json:"ids"`
+}
+
+type TraktListMovie struct {
+	Title string `json:"title"`
+	Year  int    `json:"year"`
+	Ids   struct {
+		Trakt int    `json:"trakt"`
+		Slug  string `json:"slug"`
+		Tmdb  int    `json:"tmdb"`
+	} `json:"ids"`
+}
+
+type TraktImportResponse struct {
+	JobId string `json:"jobId"`
+}
+
+// TODO we could support trakt list imports when we support a similar feature (tags will function as custom lists when done #199)
+func startTraktImport(db *gorm.DB, jobId string, userId uint, traktUsername string) {
+	// Get trakt user. We want to get their profile `slug` for use in
+	// next requests and we can check their profile isn't private while here.
+	var traktUser TraktUser
+	_, err := traktAPIRequest("users/"+traktUsername, map[string]string{}, &traktUser)
+	if err != nil {
+		slog.Error("startTraktImport: Failed to get users profile", "error", err, "trakt_user", traktUser)
+		addJobError(jobId, userId, "failed to request trakt profile from api")
+		updateJobStatus(jobId, userId, JOB_CANCELLED)
+		return
+	}
+	if traktUser.Private {
+		slog.Error("startTraktImport: Users profile is private. Cannot continue with import.")
+		addJobError(jobId, userId, "trakt profile is private")
+		updateJobStatus(jobId, userId, JOB_CANCELLED)
+		return
+	}
+	userSlug := traktUser.IDs.Slug
+	// Everything will be added to this map for importing at the end.
+	toImport := map[string]ImportRequest{}
+	// Process all history for this user (in chunks of 1000).
+	var history []TraktHistory
+	slog.Debug("startTraktImport: Getting first history page")
+	historyHeaders, err := traktAPIRequest("users/"+userSlug+"/history", map[string]string{"limit": "1000"}, &history)
+	if err != nil {
+		// FATAL if we can't get the users history, we probably shouldn't continue (to ratings/watchlist below).
+		slog.Error("startTraktImport: Failed to get users history", "error", err)
+		addJobError(jobId, userId, "failed to get your history")
+		return
+	} else {
+		pageCount := historyHeaders.Get("x-pagination-page-count")
+		slog.Debug("startTraktImport: Got first history page", "page_count", pageCount)
+		if pageCount == "" {
+			slog.Error("startTraktImport: Failed to get history page count!", "page_count", pageCount)
+			addJobError(jobId, userId, "Failed to get history page count")
+			return
+		}
+		pageCountNum, err := strconv.Atoi(pageCount)
+		if err != nil {
+			slog.Error("startTraktImport: Failed to parse history page count into an int!", "error", err)
+			addJobError(jobId, userId, "Failed to parse history page count: "+pageCount)
+			return
+		}
+		rProc := func(v TraktHistory) {
+			var collectingText string
+			if v.Type == "episode" {
+				collectingText = fmt.Sprintf("%s S%dE%d", v.Show.Title, v.Episode.Season, v.Episode.Number)
+			} else if v.Type == "show" {
+				collectingText = v.Show.Title
+			} else if v.Type == "movie" {
+				collectingText = v.Movie.Title
+			}
+			if collectingText != "" {
+				updateJobCurrentTask(jobId, userId, "collecting "+collectingText)
+			}
+			err = processTraktHistoryItem(v, toImport)
+			if err != nil {
+				addJobError(jobId, userId, err.Error())
+			}
+		}
+		// Process first page of history (next pages processed below)
+		for _, v := range history {
+			rProc(v)
+		}
+		for i := range pageCountNum {
+			slog.Debug("startTraktImport: Getting history page", "page_num", i)
+			_, err := traktAPIRequest("users/"+userSlug+"/history", map[string]string{"limit": "1000", "page": strconv.Itoa(i)}, &history)
+			if err != nil {
+				slog.Error("startTraktImport: Failed to get a history page", "page_num", i, "error", err)
+				addJobError(jobId, userId, "Failed to get history page: "+strconv.Itoa(i))
+			} else {
+				for _, v := range history {
+					rProc(v)
+				}
+			}
+		}
+		slog.Info("startTraktImport: Finished processing all history")
+		history = nil // clear whatever is lingering in the history slice
+	}
+	// Get watchlist for PLANNED items
+	slog.Info("startTraktImport: Getting whole watchlist")
+	var watchlist TraktWatchlist
+	_, err = traktAPIRequest("users/"+userSlug+"/watchlist", map[string]string{}, &watchlist)
+	if err != nil {
+		slog.Error("startTraktImport: Failed to get users watchlist! Cannot import planned content.", "error", err)
+		addJobError(jobId, userId, "failed to get your watchlist (planned items cannot be imported)")
+	} else {
+		slog.Debug("startTraktImport: Successfully got whole watchlist")
+		for _, v := range watchlist {
+			slog.Debug("startTraktImport: Processing watchlist item", "item", v)
+			var (
+				title       string
+				contentType ContentType
+				tmdbId      int
+			)
+			if v.Type == "show" || v.Type == "episode" {
+				title = v.Show.Title
+				tmdbId = v.Show.Ids.Tmdb
+				contentType = SHOW
+				if v.Type == "episode" {
+					title = v.Episode.Title
+				}
+			} else if v.Type == "movie" {
+				title = v.Movie.Title
+				tmdbId = v.Movie.Ids.Tmdb
+				contentType = MOVIE
+			}
+			updateJobCurrentTask(jobId, userId, "setting status for "+title)
+			mapKey := makeTraktMapKey(contentType, tmdbId)
+			if mv, ok := toImport[mapKey]; ok {
+				// If item already exists in toImport, set its status to planned.
+				if v.Type == "episode" {
+					// For episode entries, we have to find the WatchedEpisode to set its status to planned.
+					weFound := false
+					for i, we := range mv.WatchedEpisodes {
+						if we.SeasonNumber == v.Episode.Season && we.EpisodeNumber == v.Episode.Number {
+							we.Status = PLANNED
+							mv.WatchedEpisodes[i] = we
+							weFound = true
+							break
+						}
+					}
+					if !weFound {
+						mv.WatchedEpisodes = append(mv.WatchedEpisodes, WatchedEpisode{
+							SeasonNumber:  v.Episode.Season,
+							EpisodeNumber: v.Episode.Number,
+							Status:        PLANNED,
+							GormModel: GormModel{
+								CreatedAt: v.ListedAt,
+							},
+						})
+					}
+					toImport[mapKey] = mv
+				} else {
+					mv.Status = PLANNED
+					if v.Notes != "" {
+						// episodes dont support notes in watcharr
+						mv.Thoughts = v.Notes
+					}
+					toImport[mapKey] = mv
+				}
+			} else {
+				// If the item does not exist in toImport, create it and set it to planned.
+				ti := ImportRequest{
+					Type:   contentType,
+					TmdbID: tmdbId,
+					Status: PLANNED,
+				}
+				if v.Type == "episode" {
+					ti.WatchedEpisodes = []WatchedEpisode{{
+						SeasonNumber:  v.Episode.Season,
+						EpisodeNumber: v.Episode.Number,
+						Status:        PLANNED,
+						GormModel: GormModel{
+							CreatedAt: v.ListedAt,
+						},
+					}}
+				} else {
+					// episodes dont support notes in watcharr
+					ti.Thoughts = v.Notes
+				}
+				toImport[mapKey] = ti
+			}
+		}
+	}
+	// Process ratings
+	slog.Info("startTraktImport: Getting all ratings")
+	var ratings TraktRatings
+	_, err = traktAPIRequest("users/"+userSlug+"/ratings", map[string]string{}, &ratings)
+	if err != nil {
+		slog.Error("startTraktImport: Failed to get users ratings!", "error", err)
+		addJobError(jobId, userId, "failed to get your ratings (content ratings cannot be imported)")
+	} else {
+		slog.Debug("startTraktImport: Successfully got all ratings")
+		for _, v := range ratings {
+			slog.Debug("startTraktImport: Processing rating item", "item", v)
+			var (
+				title       string
+				contentType ContentType
+				tmdbId      int
+				traktSlug   string
+			)
+			if v.Type == "show" || v.Type == "episode" {
+				title = v.Show.Title
+				tmdbId = v.Show.Ids.Tmdb
+				traktSlug = v.Show.Ids.Slug
+				contentType = SHOW
+				if v.Type == "episode" {
+					title = v.Episode.Title
+					traktSlug = v.Episode.Ids.Slug
+				}
+			} else if v.Type == "movie" {
+				title = v.Movie.Title
+				tmdbId = v.Movie.Ids.Tmdb
+				contentType = MOVIE
+				traktSlug = v.Movie.Ids.Slug
+			}
+			updateJobCurrentTask(jobId, userId, fmt.Sprintf("setting rating of %d for %s", v.Rating, title))
+			mapKey := makeTraktMapKey(contentType, tmdbId)
+			if mv, ok := toImport[mapKey]; ok {
+				if v.Type == "episode" {
+					// For episode entries, we have to find the WatchedEpisode to set its rating.
+					epFound := false
+					for i, we := range mv.WatchedEpisodes {
+						if we.SeasonNumber == v.Episode.Season && we.EpisodeNumber == v.Episode.Number {
+							we.Rating = int8(v.Rating)
+							mv.WatchedEpisodes[i] = we
+							epFound = true
+							break
+						}
+					}
+					toImport[mapKey] = mv
+					if !epFound {
+						addJobError(jobId, userId, fmt.Sprintf("episode rating of %d for %s not imported. The episode does not exist in your history or watchlist.", v.Rating, title))
+					}
+				} else {
+					mv.Rating = float64(v.Rating)
+					toImport[mapKey] = mv
+				}
+			} else {
+				// Item should be in toImport by now (from history or watchlist) if it has a rating, otherwise we won't import it
+				addJobError(jobId, userId, fmt.Sprintf("cannot import rating of %d for %s. The main content does not exist in your history or watchlist. type: %s traktSlug: %s", v.Rating, title, v.Type, traktSlug))
+			}
+		}
+	}
+	// Loop over `toImport` and finally import everything.
+	for _, v := range toImport {
+		_, err := importContent(db, userId, v)
+		if err != nil {
+			slog.Error("startTraktImport: Failed to do import on content!", "error", err, "import_obj", v)
+			addJobError(jobId, userId, fmt.Sprintf("Failed to import %s as %s. tmdbId: %d", v.Type, v.Status, v.TmdbID))
+		}
+	}
+	// We are donezo
+	updateJobStatus(jobId, userId, JOB_DONE)
+}
+
+func processTraktHistoryItem(v TraktHistory, toImport map[string]ImportRequest) error {
+	var (
+		title          string
+		traktId        int
+		tmdbId         int
+		contentType    ContentType
+		watchedEpisode WatchedEpisode
+	)
+	if v.Type == "show" || v.Type == "episode" {
+		title = v.Show.Title
+		traktId = v.Show.Ids.Trakt
+		tmdbId = v.Show.Ids.Tmdb
+		contentType = SHOW
+		if v.Type == "episode" {
+			traktId = v.Episode.Ids.Trakt
+			watchedEpisode = WatchedEpisode{
+				SeasonNumber:  v.Episode.Season,
+				EpisodeNumber: v.Episode.Number,
+				Status:        FINISHED,
+				// Rating: ,
+				GormModel: GormModel{
+					CreatedAt: v.WatchedAt,
+				},
+			}
+			slog.Debug("processTraktHistoryItem: Processing an episode.", "showTitle", title, "season", v.Episode.Season, "episode", v.Episode.Number)
+		} else {
+			slog.Debug("processTraktHistoryItem: Processing a show.", "contentTitle", title, "contentTmdbId", tmdbId)
+		}
+	} else if v.Type == "movie" {
+		title = v.Movie.Title
+		traktId = v.Movie.Ids.Trakt
+		tmdbId = v.Movie.Ids.Tmdb
+		contentType = MOVIE
+		slog.Debug("processTraktHistoryItem: Processing a movie.", "contentTitle", title, "contentTmdbId", tmdbId)
+	}
+	if tmdbId == 0 {
+		slog.Debug("processTraktHistoryItem: Item had no tmdbId. Cannot process.")
+		return errors.New("Failed to process history: " + title + " type:" + v.Type + " trakt id:" + strconv.Itoa(traktId) + " tmdb id:" + strconv.Itoa(tmdbId) + " error:" + "item had no tmdb id")
+	}
+	mapKey := makeTraktMapKey(contentType, tmdbId)
+	if e, ok := toImport[mapKey]; ok {
+		e.WatchedEpisodes = append(toImport[mapKey].WatchedEpisodes, watchedEpisode)
+		toImport[mapKey] = e
+	} else {
+		toImport[mapKey] = ImportRequest{
+			Type:            contentType,
+			TmdbID:          tmdbId,
+			Status:          FINISHED,
+			DatesWatched:    []time.Time{v.WatchedAt},
+			WatchedEpisodes: []WatchedEpisode{watchedEpisode},
+		}
+	}
+	return nil
+}
+
+// `tmdbId` is for the movie or show (not for episodes).
+func makeTraktMapKey(ct ContentType, tmdbId int) string {
+	return string(ct) + strconv.Itoa(tmdbId)
+}
+
+func traktAPIRequest(ep string, p map[string]string, resp interface{}) (http.Header, error) {
+	base, err := url.Parse("https://api.trakt.tv")
+	if err != nil {
+		return map[string][]string{}, errors.New("failed to parse api uri")
+	}
+	base.Path += ep
+	if len(p) > 0 {
+		params := url.Values{}
+		for k, v := range p {
+			params.Add(k, v)
+		}
+		base.RawQuery = params.Encode()
+	}
+	slog.Debug("traktAPIRequest", "request_url", base.String())
+	req, err := http.NewRequest("GET", base.String(), nil)
+	if err != nil {
+		return map[string][]string{}, err
+	}
+	req.Header.Add("trakt-api-key", "c481cb044dcd58d83f3fde113741d1e28d19c1bef1bcbfcb9acedee222f3a673")
+	req.Header.Add("trakt-api-version", "2")
+	req.Header.Add("Content-type", "application/json")
+	res, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return map[string][]string{}, err
+	}
+	body, err := io.ReadAll(res.Body)
+	res.Body.Close()
+	if err != nil {
+		return map[string][]string{}, err
+	}
+	if !(res.StatusCode >= 200 && res.StatusCode <= 299) {
+		slog.Error("traktAPIRequest: non 2xx status code:", "status_code", res.StatusCode)
+		return map[string][]string{}, errors.New("non success status code")
+	}
+	err = json.Unmarshal([]byte(body), &resp)
+	if err != nil {
+		return map[string][]string{}, err
+	}
+	return res.Header, nil
+}
+
+func traktImportWatched(
+	db *gorm.DB,
+	userId uint,
+	traktUsername string,
+) (TraktImportResponse, error) {
+	jobId, err := addUniqueJob("trakt_import", userId)
+	if err != nil {
+		slog.Error("traktSyncWatched: Failed to create a job", "error", err)
+		return TraktImportResponse{}, err
+	}
+
+	updateJobStatus(jobId, userId, JOB_RUNNING)
+
+	go startTraktImport(
+		db,
+		jobId,
+		userId,
+		traktUsername,
+	)
+
+	return TraktImportResponse{JobId: jobId}, nil
+}

server/jobs.go

@@ -38,10 +38,12 @@ var activeJobs = make(map[string]*Job)
 
 // Add a job to our activeJobs map.
 // Returns id of job on success, or error if failed to add.
+// Only return safe errors for display to users, log serious errors.
 func addJob(name string, userId uint) (string, error) {
 	idk, err := generateString(8)
 	if err != nil {
-		return "", err
+		slog.Error("addJob: Failed to generate a job id!", "error", err)
+		return "", errors.New("failed to generate a job id, please try again")
 	}
 	_, ok := activeJobs[idk]
 	if ok {
@@ -56,6 +58,22 @@ func addJob(name string, userId uint) (string, error) {
 	return idk, nil
 }
 
+// Add a job, but only if one with the same `name` isn't already running.
+// Only return safe errors for display to users.
+func addUniqueJob(name string, userId uint) (string, error) {
+	found := false
+	for _, v := range activeJobs {
+		if v.UserId == userId && v.Name == name && (v.Status == JOB_CREATED || v.Status == JOB_RUNNING) {
+			found = true
+			break
+		}
+	}
+	if found {
+		return "", errors.New("a job of this type is already running, please wait for the existing job to finish")
+	}
+	return addJob(name, userId)
+}
+
 func rmJob(id string, userId uint) {
 	slog.Debug("rmJob: Removing a job.", "id", id)
 	v, ok := activeJobs[id]
@@ -91,11 +109,11 @@ func updateJobStatus(id string, userId uint, status JobStatus) error {
 	}
 	j.Status = status
 	// If job is set to done, remove it after 1 minute.
-	if status == JOB_DONE {
-		slog.Debug("updateJobStatus: Job set to done. Will be removed after 1m.", "id", id)
+	if status == JOB_DONE || status == JOB_CANCELLED {
+		slog.Debug("updateJobStatus: Job set to done or cancelled. Will be removed after 30m.", "id", id, "status", status)
 		go func() {
-			time.Sleep(1 * time.Minute)
-			slog.Debug("updateJobStatus: Job done. waited 1m.. removing job now.", "id", id)
+			time.Sleep(30 * time.Minute)
+			slog.Debug("updateJobStatus: Job done. waited 30m.. removing job now.", "id", id)
 			rmJob(id, userId)
 		}()
 	}

server/plex_sync.go

@@ -79,7 +79,7 @@ func startPlexSync(
 					Status:      FINISHED,
 					ContentID:   tmdbId,
 					ContentType: MOVIE,
-					Rating:      int8(movie.UserRating),
+					Rating:      float64(movie.UserRating),
 					WatchedDate: lastViewedAt,
 				}, IMPORTED_WATCHED_PLEX)
 				if err != nil {
@@ -146,7 +146,7 @@ func startPlexSync(
 					Status:      FINISHED,
 					ContentID:   tmdbId,
 					ContentType: SHOW,
-					Rating:      int8(show.UserRating),
+					Rating:      float64(show.UserRating),
 					WatchedDate: lastViewedAt,
 				}, IMPORTED_WATCHED_PLEX)
 				if err != nil {

server/routes.go

@@ -3,6 +3,7 @@ package main
 import (
 	"log/slog"
 	"net/http"
+	"net/url"
 	"strconv"
 	"time"
 
@@ -79,13 +80,112 @@ func (b *BaseRouter) addContentRoutes() {
 	exp := time.Hour * 24
 
 	// Search for content
-	content.GET("/:query", cache.CachePage(b.ms, exp, func(c *gin.Context) {
-		// println(c.Param("query"))
-		if c.Param("query") == "" {
-			c.Status(400)
+	content.GET("/search/multi", cache.CachePage(b.ms, exp, func(c *gin.Context) {
+		query := c.Query("q")
+		if query == "" {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "a query was not provided"})
 			return
 		}
-		content, err := searchContent(c.Param("query"))
+		pageQ := c.Query("page")
+		pageNum := 1
+		if pageQ != "" {
+			num, err := strconv.Atoi(pageQ)
+			if err != nil {
+				c.JSON(http.StatusBadRequest, ErrorResponse{Error: "query parameter 'page' is not a number"})
+				return
+			}
+			pageNum = num
+		}
+		content, err := searchContent(query, pageNum)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, content)
+	}))
+
+	// Search for movies
+	content.GET("/search/movie", cache.CachePage(b.ms, exp, func(c *gin.Context) {
+		query := c.Query("q")
+		if query == "" {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "a query was not provided"})
+			return
+		}
+		pageQ := c.Query("page")
+		pageNum := 1
+		if pageQ != "" {
+			num, err := strconv.Atoi(pageQ)
+			if err != nil {
+				c.JSON(http.StatusBadRequest, ErrorResponse{Error: "query parameter 'page' is not a number"})
+				return
+			}
+			pageNum = num
+		}
+		content, err := searchMovies(query, pageNum)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, content)
+	}))
+
+	// Search for shows
+	content.GET("/search/tv", cache.CachePage(b.ms, exp, func(c *gin.Context) {
+		query := c.Query("q")
+		if query == "" {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "a query was not provided"})
+			return
+		}
+		pageQ := c.Query("page")
+		pageNum := 1
+		if pageQ != "" {
+			num, err := strconv.Atoi(pageQ)
+			if err != nil {
+				c.JSON(http.StatusBadRequest, ErrorResponse{Error: "query parameter 'page' is not a number"})
+				return
+			}
+			pageNum = num
+		}
+		content, err := searchTv(query, pageNum)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, content)
+	}))
+
+	// Search for people
+	content.GET("/search/person", cache.CachePage(b.ms, exp, func(c *gin.Context) {
+		query := c.Query("q")
+		if query == "" {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "a query was not provided"})
+			return
+		}
+		pageQ := c.Query("page")
+		pageNum := 1
+		if pageQ != "" {
+			num, err := strconv.Atoi(pageQ)
+			if err != nil {
+				c.JSON(http.StatusBadRequest, ErrorResponse{Error: "query parameter 'page' is not a number"})
+				return
+			}
+			pageNum = num
+		}
+		content, err := searchPeople(query, pageNum)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, content)
+	}))
+
+	// Search for content with external id
+	content.GET("/search/ext/:id/:source", cache.CachePage(b.ms, exp, func(c *gin.Context) {
+		if c.Param("id") == "" {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "an id was not provided"})
+			return
+		}
+		content, err := searchByExternalId(c.Param("id"), c.Param("source"))
 		if err != nil {
 			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 			return
@@ -150,6 +250,7 @@ func (b *BaseRouter) addContentRoutes() {
 	}))
 
 	// Get season details
+	// Supports `watchedId` query parameter for saving the requested season as `LastViewedSeason`.
 	content.GET("/tv/:id/season/:num", func(c *gin.Context) {
 		if c.Param("id") == "" || c.Param("num") == "" {
 			c.Status(400)
@@ -160,6 +261,28 @@ func (b *BaseRouter) addContentRoutes() {
 			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 			return
 		}
+		// If a `watchedId` is passed, we should update it with this season
+		// number, so the LastViewedSeason field is up to date (this seemed
+		// better than making a new request for just saving this).
+		// We will attach a `watcharr-lastviewedseason-saved` header if
+		// this part succeeds so the client can decide on showing an error.
+		if watchedIdQ := c.Query("watchedId"); watchedIdQ != "" {
+			userId := c.MustGet("userId").(uint)
+			watchedId, err := strconv.ParseUint(watchedIdQ, 10, 64)
+			if err != nil {
+				slog.Error("get season details route: Processing watchedId param failed", "error", err.Error(), "id", watchedIdQ)
+			} else {
+				if seasonNum, err := strconv.ParseInt(c.Param("num"), 10, 64); err == nil {
+					if err = updateWatchedLastViewedSeason(b.db, userId, uint(watchedId), int(seasonNum)); err == nil {
+						c.Header("watcharr-lastviewedseason-saved", "1")
+					}
+				} else {
+					slog.Error("get season details route: Parsing season number as int failed", "error", err.Error(), "season_num", c.Param("num"))
+				}
+			}
+		} else {
+			slog.Debug("get season details route: No watchedId parameter found.. not doing anything.")
+		}
 		c.JSON(http.StatusOK, content)
 	})
 
@@ -271,12 +394,32 @@ func (b *BaseRouter) addGameRoutes() {
 	}
 
 	// Search for games
-	gamer.GET("/search/:query", cache.CachePage(b.ms, exp, func(c *gin.Context) {
-		if c.Param("query") == "" {
+	gamer.GET("/search", cache.CachePage(b.ms, exp, func(c *gin.Context) {
+		query := c.Query("q")
+		if query == "" {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "a query was not provided"})
+			return
+		}
+		decodedQuery, err := url.QueryUnescape(query)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "query parameter invalid"})
+			return
+		}
+		games, err := igdb.Search(decodedQuery)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, games)
+	}))
+
+	// Search for game by id (for search page, same minimal details as /search returned)
+	gamer.GET("/search/:id", cache.CachePage(b.ms, exp, func(c *gin.Context) {
+		if c.Param("id") == "" {
 			c.Status(400)
 			return
 		}
-		games, err := igdb.Search(c.Param("query"))
+		games, err := igdb.SearchById(c.Param("id"))
 		if err != nil {
 			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 			return
@@ -472,6 +615,50 @@ func (b *BaseRouter) addWatchedRoutes() {
 		}
 		c.JSON(http.StatusOK, response)
 	})
+
+	watched.POST(":id/tag/:tagId", func(c *gin.Context) {
+		id, err := strconv.Atoi(c.Param("id"))
+		if err != nil {
+			slog.Error("tag watched route failed to convert id param to int", "error", err)
+			c.Status(http.StatusBadRequest)
+			return
+		}
+		tagId, err := strconv.Atoi(c.Param("tagId"))
+		if err != nil {
+			slog.Error("tag watched route failed to convert tagId param to int", "error", err)
+			c.Status(http.StatusBadRequest)
+			return
+		}
+		userId := c.MustGet("userId").(uint)
+		err = addWatchedToTag(b.db, userId, uint(tagId), uint(id))
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.Status(http.StatusOK)
+	})
+
+	watched.DELETE(":id/tag/:tagId", func(c *gin.Context) {
+		id, err := strconv.Atoi(c.Param("id"))
+		if err != nil {
+			slog.Error("tag watched route failed to convert id param to int", "error", err)
+			c.Status(http.StatusBadRequest)
+			return
+		}
+		tagId, err := strconv.Atoi(c.Param("tagId"))
+		if err != nil {
+			slog.Error("tag watched route failed to convert tagId param to int", "error", err)
+			c.Status(http.StatusBadRequest)
+			return
+		}
+		userId := c.MustGet("userId").(uint)
+		err = rmWatchedFromTag(b.db, userId, uint(tagId), uint(id))
+		if err != nil {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.Status(http.StatusOK)
+	})
 }
 
 func (b *BaseRouter) addActivityRoutes() {
@@ -594,6 +781,28 @@ func (b *BaseRouter) addAuthRoutes() {
 		c.Status(400)
 	})
 
+	// Proxy Login
+	auth.POST("/proxy", func(c *gin.Context) {
+		var user User
+		if !trustedHeaderAuthIsEnabled() {
+			slog.Error("ProxyLogin: SSO has not been configured.")
+			c.JSON(http.StatusForbidden, ErrorResponse{Error: "proxy authentication is disabled"})
+			return
+		}
+		user.Username = c.GetHeader(Config.HEADER_AUTH.HeaderName)
+		if user.Username == "" {
+			slog.Error("ProxyLogin: Authentication header is missing.")
+			c.JSON(http.StatusForbidden, ErrorResponse{Error: "authentication header missing"})
+			return
+		}
+		response, err := loginTrustedHeaderAuth(&user, b.db)
+		if err != nil {
+			c.JSON(http.StatusForbidden, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, response)
+	})
+
 	// Register
 	auth.POST("/register", func(c *gin.Context) {
 		var user UserRegisterRequest
@@ -611,24 +820,45 @@ func (b *BaseRouter) addAuthRoutes() {
 
 	// Get available auth providers
 	auth.GET("/available", func(c *gin.Context) {
-		availableAuthProviders := []string{}
-		if Config.JELLYFIN_HOST != "" {
-			availableAuthProviders = append(availableAuthProviders, "jellyfin")
-		}
-		if Config.PLEX_HOST != "" && Config.PLEX_MACHINE_ID != "" {
-			availableAuthProviders = append(availableAuthProviders, "plex")
-		}
-		c.JSON(http.StatusOK, &AvailableAuthProvidersResponse{
-			AvailableAuthProviders: availableAuthProviders,
+		resp := &AvailableAuthProvidersResponse{
+			AvailableAuthProviders: []string{},
 			SignupEnabled:          Config.SIGNUP_ENABLED,
 			IsInSetup:              ServerInSetup,
 			UseEmby:                Config.USE_EMBY,
-		})
+		}
+		if Config.JELLYFIN_HOST != "" {
+			resp.AvailableAuthProviders = append(resp.AvailableAuthProviders, "jellyfin")
+		}
+		if Config.PLEX_HOST != "" && Config.PLEX_MACHINE_ID != "" {
+			resp.AvailableAuthProviders = append(resp.AvailableAuthProviders, "plex")
+		}
+		if trustedHeaderAuthIsEnabled() {
+			resp.AvailableAuthProviders = append(resp.AvailableAuthProviders, "header")
+			resp.HeaderAuthAutoLogin = Config.HEADER_AUTH.AutoLogin
+		}
+		c.JSON(http.StatusOK, resp)
 	})
 
 	// IMPORTANT: Routes below here must be authenticated.
 	auth.Use(AuthRequired(nil))
 	{
+		// Request details for logout process for proxy users.
+		// Any proxy user can request this for logout.
+		auth.GET("/proxy_logout_details", func(c *gin.Context) {
+			if !trustedHeaderAuthIsEnabled() {
+				slog.Error("GetProxy: SSO has not been configured.")
+				c.JSON(http.StatusForbidden, ErrorResponse{Error: "proxy authentication is disabled"})
+				return
+			}
+			userType := c.MustGet("userType").(UserType)
+			if userType != PROXY_USER {
+				slog.Error("GetProxy: Non proxy user attempted to fetch proxy logout details.")
+				c.JSON(http.StatusForbidden, ErrorResponse{Error: "you are not a proxy user"})
+				return
+			}
+			c.JSON(http.StatusOK, getTrustedHeaderAuthLogoutDetails())
+		})
+
 		// Request admin token
 		auth.GET("/admin_token", func(c *gin.Context) {
 			userId := c.MustGet("userId").(uint)
@@ -784,9 +1014,14 @@ func (b *BaseRouter) addUserRoutes() {
 	})
 
 	// Search users
-	u.GET("/search/:query", func(c *gin.Context) {
+	u.GET("/search", func(c *gin.Context) {
 		userId := c.MustGet("userId").(uint)
-		response, err := userSearch(b.db, userId, c.Param("query"))
+		query := c.Query("q")
+		if query == "" {
+			c.JSON(http.StatusBadRequest, ErrorResponse{Error: "a query was not provided"})
+			return
+		}
+		response, err := userSearch(b.db, userId, query)
 		if err != nil {
 			c.JSON(http.StatusForbidden, ErrorResponse{Error: err.Error()})
 			return
@@ -921,6 +1156,22 @@ func (b *BaseRouter) addImportRoutes() {
 		}
 		c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 	})
+
+	imprt.POST("/trakt", func(c *gin.Context) {
+		userId := c.MustGet("userId").(uint)
+		var ar TraktImportRequest
+		err := c.ShouldBindJSON(&ar)
+		if err == nil {
+			response, err := traktImportWatched(b.db, userId, ar.Username)
+			if err != nil {
+				c.JSON(http.StatusForbidden, ErrorResponse{Error: err.Error()})
+				return
+			}
+			c.JSON(http.StatusOK, response)
+			return
+		}
+		c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+	})
 }
 
 func (b *BaseRouter) addServerRoutes() {
@@ -928,18 +1179,53 @@ func (b *BaseRouter) addServerRoutes() {
 
 	// Get server config (minus very sensitive fields, like JWT_SECRET)
 	server.GET("/config", func(c *gin.Context) {
+		// s should be provided when asking for the value of just one setting.
+		s := c.Query("s")
+		if s != "" {
+			val, err := Config.Get(s)
+			if err != nil {
+				c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+				return
+			}
+			c.JSON(http.StatusOK, val)
+			return
+		}
 		// Return new ServerConfig with only the fields we want to show in settings ui
 		c.JSON(http.StatusOK, Config.GetSafe())
 	})
 
 	// Update config
 	server.POST("/config", func(c *gin.Context) {
+		// If query param `s` provided, handle specific setting.
+		// In this case, request body should be new setting value.
+		s := c.Query("s")
+		if s != "" {
+			switch s {
+			case "HEADER_AUTH":
+				var ur TrustedHeaderAuthSetting
+				err := c.ShouldBindJSON(&ur)
+				if err != nil {
+					c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+					return
+				}
+				err = setTrustedHeaderAuthSetting(ur)
+				if err != nil {
+					c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+					return
+				}
+				c.Status(http.StatusOK)
+				return
+			}
+			c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: "unsupported setting"})
+			return
+		}
+		// No `s` param.. handle normally with `updateConfig` func.
 		var ur KeyValueRequest
 		err := c.ShouldBindJSON(&ur)
 		if err == nil {
 			err := updateConfig(ur.Key, ur.Value)
 			if err != nil {
-				c.JSON(http.StatusForbidden, ErrorResponse{Error: err.Error()})
+				c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 				return
 			}
 			c.Status(http.StatusOK)
@@ -1422,3 +1708,91 @@ func (b *BaseRouter) addTaskRoutes() {
 		c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 	})
 }
+
+func (b *BaseRouter) addTagRoutes() {
+	tag := b.rg.Group("/tag").Use(AuthRequired(nil))
+
+	// Get list of all our tags.
+	tag.GET("", func(c *gin.Context) {
+		userId := c.MustGet("userId").(uint)
+		tags, err := getTags(b.db, userId)
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, tags)
+	})
+
+	// // Get all items within one of our tags.
+	// tag.GET(":id", func(c *gin.Context) {
+	// 	id, err := strconv.Atoi(c.Param("id"))
+	// 	if err != nil {
+	// 		slog.Error("getTag route failed to convert id param to int", "error", err)
+	// 		c.Status(http.StatusBadRequest)
+	// 		return
+	// 	}
+	// 	userId := c.MustGet("userId").(uint)
+	// 	tags, err := getTag(b.db, userId, uint(id))
+	// 	if err != nil {
+	// 		c.JSON(http.StatusInternalServerError, ErrorResponse{Error: err.Error()})
+	// 		return
+	// 	}
+	// 	c.JSON(http.StatusOK, tags)
+	// })
+
+	// Create a tag.
+	tag.POST("", func(c *gin.Context) {
+		userId := c.MustGet("userId").(uint)
+		var tr TagAddRequest
+		err := c.ShouldBindJSON(&tr)
+		if err == nil {
+			response, err := addTag(b.db, userId, tr)
+			if err != nil {
+				c.JSON(http.StatusInternalServerError, ErrorResponse{Error: err.Error()})
+				return
+			}
+			c.JSON(http.StatusOK, response)
+			return
+		}
+		c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+	})
+
+	// Update a tag.
+	tag.PUT(":id", func(c *gin.Context) {
+		userId := c.MustGet("userId").(uint)
+		id, err := strconv.ParseUint(c.Param("id"), 10, 32)
+		if err != nil {
+			c.Status(400)
+			slog.Error("tag update rote: failed to process tag id.", "error", err.Error(), "id", c.Param("id"))
+			return
+		}
+		var tr TagAddRequest
+		err = c.ShouldBindJSON(&tr)
+		if err == nil {
+			err := updateTag(b.db, userId, uint(id), tr)
+			if err != nil {
+				c.JSON(http.StatusInternalServerError, ErrorResponse{Error: err.Error()})
+				return
+			}
+			c.Status(http.StatusOK)
+			return
+		}
+		c.AbortWithStatusJSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
+	})
+
+	tag.DELETE(":id", func(c *gin.Context) {
+		userId := c.MustGet("userId").(uint)
+		id, err := strconv.ParseUint(c.Param("id"), 10, 32)
+		if err != nil {
+			c.Status(400)
+			slog.Error("tag delete rote: failed to process tag id.", "error", err.Error(), "id", c.Param("id"))
+			return
+		}
+		err = deleteTag(b.db, userId, uint(id))
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, ErrorResponse{Error: err.Error()})
+			return
+		}
+		c.Status(http.StatusOK)
+	})
+}

server/tags.go

@@ -0,0 +1,194 @@
+package main
+
+import (
+	"errors"
+	"log/slog"
+
+	"gorm.io/gorm"
+)
+
+// I think tags will be private for the user.
+// If the user wants to make a public list, they should make a custom view.
+
+type Tag struct {
+	GormModel
+	// ID of user that own this tag.
+	UserID uint `json:"-" gorm:"not null"`
+	// Name of the tag.
+	Name string `json:"name" gorm:"not null"`
+	// Hex of text color.
+	Color string `json:"color"`
+	// Hex of background color.
+	BgColor string `json:"bgColor"`
+	// All watched items.
+	Watched []Watched `json:"watched,omitempty" gorm:"many2many:watched_tags;"`
+}
+
+type TagAddRequest struct {
+	Name    string `json:"name" binding:"required"`
+	Color   string `json:"color"`
+	BgColor string `json:"bgColor"`
+}
+
+func getTags(db *gorm.DB, userId uint) ([]Tag, error) {
+	tags := new([]Tag)
+	res := db.Model(&Tag{}).Where("user_id = ?", userId).Find(&tags)
+	if res.Error != nil {
+		slog.Error("getTags: Failed getting tags from database", "error", res.Error.Error())
+		return []Tag{}, errors.New("failed getting tags")
+	}
+	return *tags, nil
+}
+
+// func getTag(db *gorm.DB, userId uint, tagId uint) (Tag, error) {
+// 	tag := new(Tag)
+// 	res := db.Model(&Tag{}).Where("id = ? AND user_id = ?", tagId, userId).Preload("Watched").Find(&tag)
+// 	if res.Error != nil {
+// 		slog.Error("getTag: Failed getting tag from database", "error", res.Error.Error())
+// 		return Tag{}, errors.New("failed getting tag")
+// 	}
+// 	if tag.ID == 0 {
+// 		slog.Error("getTag: Tag does not exist for this user.", "user_id", userId)
+// 		return Tag{}, errors.New("tag does not exist")
+// 	}
+// 	return *tag, nil
+// }
+
+// This method should only be used when we don't have the tagId
+// (eg: when we are importing data) because this is not technically
+// reliable, since users can have multiple tags with the same name/colors
+// (realistically they probably won't, but...).
+func getTagByNameAndColor(db *gorm.DB, userId uint, tagName string, tagColor string, tagBgColor string) (Tag, error) {
+	tag := new(Tag)
+	res := db.Model(&Tag{}).Where("name = ? AND user_id = ? AND color = ? AND bg_color = ?", tagName, userId, tagColor, tagBgColor).Preload("Watched").Find(&tag)
+	if res.Error != nil {
+		slog.Error("getTagByNameAndColor: Failed getting tag from database", "error", res.Error.Error())
+		return Tag{}, errors.New("failed getting tag")
+	}
+	if tag.ID == 0 {
+		slog.Error("getTagByNameAndColor: Tag does not exist for this user.", "user_id", userId)
+		return Tag{}, errors.New("tag does not exist")
+	}
+	return *tag, nil
+}
+
+// Let user create a tag.
+func addTag(db *gorm.DB, userId uint, tr TagAddRequest) (Tag, error) {
+	if tr.Name == "" {
+		return Tag{}, errors.New("tag must have a name")
+	}
+	tag := Tag{UserID: userId, Name: tr.Name, Color: tr.Color, BgColor: tr.BgColor}
+	res := db.Create(&tag)
+	if res.Error != nil {
+		slog.Error("Error adding tag to database", "error", res.Error.Error())
+		return Tag{}, errors.New("failed adding new tag to database")
+	}
+	slog.Debug("Adding tag", "added_tag", tag)
+	return tag, nil
+}
+
+// Let user update one of their tags (replaces).
+func updateTag(db *gorm.DB, userId uint, tagId uint, tr TagAddRequest) error {
+	if tr.Name == "" {
+		return errors.New("tag must have a name")
+	}
+	tag := Tag{Name: tr.Name, Color: tr.Color, BgColor: tr.BgColor}
+	res := db.Where("id = ? AND user_id = ?", tagId, userId).Updates(&tag)
+	if res.Error != nil {
+		slog.Error("Error updating tag in database", "error", res.Error.Error())
+		return errors.New("failed updating tag in database")
+	}
+	if res.RowsAffected == 0 {
+		slog.Error("updateTag: Zero rows affected.. tag likely does not exist", "tag_id", tagId, "user_id", userId)
+		return errors.New("tag does not exist")
+	}
+	slog.Debug("updateTag:", "updated_tag", tag)
+	return nil
+}
+
+// Let user delete their own tag.
+func deleteTag(db *gorm.DB, userId uint, tagId uint) error {
+	if tagId == 0 {
+		return errors.New("no tag id provided")
+	}
+	slog.Debug("deleteTag:", "tag_id", tagId, "user_id", userId)
+	// Select("Watched") so relations in watched_tags table are removed too.
+	// ID is passed in the .Delete param so the .Select call can do it's job (relies on the primary key).
+	res := db.Unscoped().Where("id = ? AND user_id = ?", tagId, userId).Select("Watched").Delete(&Tag{GormModel: GormModel{ID: tagId}})
+	if res.Error != nil {
+		slog.Error("deleteTag: Error deleting tag from database", "error", res.Error.Error(), "tag_id", tagId, "user_id", userId)
+		return errors.New("failed deleting tag from database")
+	}
+	if res.RowsAffected == 0 {
+		slog.Error("deleteTag: Zero rows affected.. tag must not exist for user", "tag_id", tagId, "user_id", userId)
+		return errors.New("tag does not exist")
+	}
+	return nil
+}
+
+// Add watched content to a tag (user must own the tag and watched entry).
+func addWatchedToTag(db *gorm.DB, userId uint, tagId uint, watchedId uint) error {
+	slog.Debug("addWatchedToTag: Adding", "userId", userId, "watchedID", watchedId, "tagId", tagId)
+	// 1. Make sure watched item exists and is owned by this user
+	var w Watched
+	if resp := db.Where("id = ? AND user_id = ?", watchedId, userId).Preload("Tags").Find(&w); resp.Error != nil {
+		slog.Error("addWatchedToTag: failed to get watched item from db", "error", resp.Error)
+		return errors.New("failed when retrieving watched item")
+	}
+	if w.ID == 0 {
+		slog.Error("addWatchedToTag", "error", "watched item does not exist in db", "watchedID", watchedId)
+		return errors.New("watched entry does not exist")
+	}
+	// 2. Make sure tag exists
+	var t Tag
+	if resp := db.Where("id = ? AND user_id = ?", tagId, userId).Find(&t); resp.Error != nil {
+		slog.Error("addWatchedToTag: Failed to get tag from db", "error", resp.Error)
+		return errors.New("failed when retrieving tag")
+	}
+	if t.ID == 0 {
+		slog.Error("addWatchedToTag", "error", "tag does not exist in db", "tagId", tagId)
+		return errors.New("tag does not exist")
+	}
+	// 3. Save relation (unique restraint will fail if it already exists)
+	w.Tags = append(w.Tags, t)
+	resp := db.Save(&w)
+	if resp.Error != nil {
+		slog.Error("addWatchedToTag: Failed to tag watched item", "error", resp.Error)
+		return errors.New("failed to tag watched item")
+	}
+	slog.Debug("addWatchedToTag: watched content successfully linked to tag", "watchedID", watchedId, "tagId", tagId)
+	return nil
+}
+
+// Remove watched content from a tag (user must own the tag and watched entry).
+func rmWatchedFromTag(db *gorm.DB, userId uint, tagId uint, watchedId uint) error {
+	slog.Debug("rmWatchedFromTag: Removing", "userId", userId, "watchedID", watchedId, "tagId", tagId)
+	// 1. Make sure watched item exists and is owned by this user
+	var w Watched
+	if resp := db.Where("id = ? AND user_id = ?", watchedId, userId).Preload("Tags").Find(&w); resp.Error != nil {
+		slog.Error("rmWatchedFromTag: failed to get watched item from db", "error", resp.Error)
+		return errors.New("failed when retrieving watched item")
+	}
+	if w.ID == 0 {
+		slog.Error("rmWatchedFromTag", "error", "watched item does not exist in db", "watchedID", watchedId)
+		return errors.New("watched entry does not exist")
+	}
+	// 2. Make sure tag exists
+	var t Tag
+	if resp := db.Where("id = ? AND user_id = ?", tagId, userId).Find(&t); resp.Error != nil {
+		slog.Error("rmWatchedFromTag: Failed to get tag from db", "error", resp.Error)
+		return errors.New("failed when retrieving tag")
+	}
+	if t.ID == 0 {
+		slog.Error("rmWatchedFromTag", "error", "tag does not exist in db", "tagId", tagId)
+		return errors.New("tag does not exist")
+	}
+	// 3. Remove relation
+	err := db.Model(&w).Association("Tags").Delete(&t)
+	if err != nil {
+		slog.Error("rmWatchedFromTag: Failed to untag watched item", "error", err)
+		return errors.New("failed to untag watched item")
+	}
+	slog.Debug("rmWatchedFromTag: watched content successfully removed from tag", "watchedID", watchedId, "tagId", tagId)
+	return nil
+}

server/tmdb.go

@@ -10,11 +10,11 @@ import (
 	"time"
 )
 
-type TMDBSearchMultiResponse struct {
-	Page         int                      `json:"page"`
-	Results      []TMDBSearchMultiResults `json:"results"`
-	TotalPages   int                      `json:"total_pages"`
-	TotalResults int                      `json:"total_results"`
+type TMDBSearchResponse[R any] struct {
+	Page         int `json:"page"`
+	Results      []R `json:"results"`
+	TotalPages   int `json:"total_pages"`
+	TotalResults int `json:"total_results"`
 }
 
 type TMDBSearchMultiResults struct {
@@ -38,6 +38,108 @@ type TMDBSearchMultiResults struct {
 	OriginalName     string   `json:"original_name,omitempty"`
 	FirstAirDate     string   `json:"first_air_date,omitempty"`
 	OriginCountry    []string `json:"origin_country,omitempty"`
+	// Below are for tv episode results
+	AirDate        string `json:"air_date,omitempty"`
+	EpisodeNumber  int    `json:"episode_number,omitempty"`
+	EpisodeType    string `json:"episode_type,omitempty"`
+	ProductionCode string `json:"production_code,omitempty"`
+	Runtime        int    `json:"runtime,omitempty"`
+	SeasonNumber   int    `json:"season_number,omitempty"`
+	ShowId         int    `json:"show_id,omitempty"`
+	StillPath      string `json:"still_path,omitempty"`
+}
+
+type TMDBSearchMultiResponse struct {
+	TMDBSearchResponse[TMDBSearchMultiResults]
+}
+
+type TMDBSearchMovieResult struct {
+	Adult            bool    `json:"adult"`
+	BackdropPath     string  `json:"backdrop_path"`
+	GenreIds         []int   `json:"genre_ids"`
+	ID               int     `json:"id"`
+	OriginalLanguage string  `json:"original_language"`
+	OriginalTitle    string  `json:"original_title"`
+	Overview         string  `json:"overview"`
+	Popularity       float64 `json:"popularity"`
+	PosterPath       string  `json:"poster_path"`
+	ReleaseDate      string  `json:"release_date"`
+	Title            string  `json:"title"`
+	Video            bool    `json:"video"`
+	VoteAverage      float64 `json:"vote_average"`
+	VoteCount        int     `json:"vote_count"`
+	MediaType        string  `json:"media_type"` // API req doesn't include this, we will add it in our service.
+}
+
+type TMDBSearchMoviesResponse struct {
+	TMDBSearchResponse[TMDBSearchMovieResult]
+}
+
+type TMDBSearchShowsResult struct {
+	Adult            bool     `json:"adult"`
+	BackdropPath     string   `json:"backdrop_path"`
+	GenreIds         []int    `json:"genre_ids"`
+	ID               int      `json:"id"`
+	OriginCountry    []string `json:"origin_country"`
+	OriginalLanguage string   `json:"original_language"`
+	OriginalName     string   `json:"original_name"`
+	Overview         string   `json:"overview"`
+	Popularity       float64  `json:"popularity"`
+	PosterPath       string   `json:"poster_path"`
+	FirstAirDate     string   `json:"first_air_date"`
+	Name             string   `json:"name"`
+	VoteAverage      float64  `json:"vote_average"`
+	VoteCount        int      `json:"vote_count"`
+	MediaType        string   `json:"media_type"` // API req doesn't include this, we will add it in our service.
+}
+
+type TMDBSearchShowsResponse struct {
+	TMDBSearchResponse[TMDBSearchShowsResult]
+}
+
+type TMDBSearchPeopleResult struct {
+	Adult              bool    `json:"adult"`
+	Gender             int     `json:"gender"`
+	ID                 int     `json:"id"`
+	KnownForDepartment string  `json:"known_for_department"`
+	Name               string  `json:"name"`
+	OriginalName       string  `json:"original_name"`
+	Popularity         float64 `json:"popularity"`
+	ProfilePath        string  `json:"profile_path"`
+	MediaType          string  `json:"media_type"` // API req doesn't include this, we will add it in our service.
+	KnownFor           []struct {
+		Adult            bool    `json:"adult"`
+		BackdropPath     string  `json:"backdrop_path"`
+		ID               int     `json:"id"`
+		Title            string  `json:"title"`
+		OriginalLanguage string  `json:"original_language"`
+		OriginalTitle    string  `json:"original_title"`
+		Overview         string  `json:"overview"`
+		PosterPath       string  `json:"poster_path"`
+		MediaType        string  `json:"media_type"`
+		GenreIds         []int   `json:"genre_ids"`
+		Popularity       float64 `json:"popularity"`
+		ReleaseDate      string  `json:"release_date"`
+		Video            bool    `json:"video"`
+		VoteAverage      float64 `json:"vote_average"`
+		VoteCount        int     `json:"vote_count"`
+	} `json:"known_for"`
+}
+
+type TMDBSearchPeopleResponse struct {
+	TMDBSearchResponse[TMDBSearchPeopleResult]
+}
+
+type TMDBFindByExternalIdResponse struct {
+	// These are all a TMDBSearchMultiResults so our search func can easily
+	// combine all of them into one []TMDBSearchMultiResults for response
+	// to client (seems not easy to convert to TMDBSearchMultiResults for
+	// concatenation after unmarshalling to correct type).
+	MovieResults     []TMDBSearchMultiResults `json:"movie_results"`
+	PersonResults    []TMDBSearchMultiResults `json:"person_results"`
+	TvResults        []TMDBSearchMultiResults `json:"tv_results"`
+	TvSeasonResults  []TMDBSearchMultiResults `json:"tv_season_results"`
+	TvEpisodeResults []TMDBSearchMultiResults `json:"tv_episode_results"`
 }
 
 type TMDBContentDetails struct {

server/user.go

@@ -64,6 +64,12 @@ func userUpdate(db *gorm.DB, userId uint, ur UserSettings) (UserSettings, error)
 	if ur.Country != nil {
 		user.Country = ur.Country
 	}
+	if ur.RatingSystem != nil {
+		user.RatingSystem = ur.RatingSystem
+	}
+	if ur.RatingStep != nil {
+		user.RatingStep = ur.RatingStep
+	}
 	db.Save(&user)
 	return UserSettings{
 		Private:                  user.Private,
@@ -90,6 +96,8 @@ func userGetSettings(db *gorm.DB, userId uint) (UserSettings, error) {
 		IncludePreviouslyWatched: user.IncludePreviouslyWatched,
 		AutomateShowStatuses:     user.AutomateShowStatuses,
 		Country:                  user.Country,
+		RatingSystem:             user.RatingSystem,
+		RatingStep:               user.RatingStep,
 	}, nil
 }
 

server/user_manage.go

@@ -19,7 +19,8 @@ type ManagedUser struct {
 }
 
 type UpdateUserRequest struct {
-	Permissions *int `json:"permissions"`
+	Permissions *int      `json:"permissions"`
+	Type        *UserType `json:"type"`
 }
 
 func getAllUsers(db *gorm.DB) ([]ManagedUser, error) {
@@ -34,7 +35,7 @@ func getAllUsers(db *gorm.DB) ([]ManagedUser, error) {
 // Update a user. For management views, for admin to update another user.
 func manageUser(db *gorm.DB, userId uint, ur UpdateUserRequest) error {
 	// Error now if no userId or any UpdateUserRequest property was provided.
-	if userId == 0 || (ur.Permissions == nil) {
+	if userId == 0 || (ur.Permissions == nil && ur.Type == nil) {
 		slog.Error("manageUser: invalid arguments", "user_id", userId)
 		return errors.New("invalid arguments, ensure a valid userId and at least one property has been provided for updating")
 	}
@@ -49,6 +50,16 @@ func manageUser(db *gorm.DB, userId uint, ur UpdateUserRequest) error {
 			toUpdate["permissions"] = *ur.Permissions
 		}
 	}
+	if ur.Type != nil {
+		t := *ur.Type
+		if t == WATCHARR_USER || t == PROXY_USER {
+			// Currently only swapping between watcharr/proxy user is supported.
+			slog.Debug("manageUser: User type is being updated.", "new_type", t)
+			toUpdate["type"] = t
+		} else {
+			slog.Warn("manageUser: User type will not be updated. Only watcharr/proxy types are supported for swapping.", "tried_type", t)
+		}
+	}
 	if res := db.Model(&User{}).Where("id = ?", userId).Updates(toUpdate); res.Error != nil {
 		slog.Error("manageUser: failed to update user in database", "user_id", userId, "error", res.Error)
 		return errors.New("failed to update user in database")

server/watcharr.go

@@ -82,6 +82,7 @@ func main() {
 		&Image{},
 		&Game{},
 		&ArrRequest{},
+		&Tag{},
 	)
 	if err != nil {
 		log.Fatal("Failed to auto migrate database:", err)
@@ -94,10 +95,23 @@ func main() {
 	gin.DefaultWriter = multiw
 	gine := gin.Default()
 	gine.Use(cors.New(cors.Config{
-		AllowOrigins:     []string{"*"},
-		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
-		AllowHeaders:     []string{"Content-Type", "Content-Length", "Accept-Encoding", "X-CSRF-Token", "Authorization", "accept", "origin", "Cache-Control", "X-Requested-With"},
-		ExposeHeaders:    []string{"Content-Length"},
+		AllowOrigins: []string{"*"},
+		AllowMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
+		AllowHeaders: []string{
+			"Content-Type",
+			"Content-Length",
+			"Accept-Encoding",
+			"X-CSRF-Token",
+			"Authorization",
+			"accept",
+			"origin",
+			"Cache-Control",
+			"X-Requested-With",
+		},
+		ExposeHeaders: []string{
+			"Content-Length",
+			"watcharr-lastviewedseason-saved",
+		},
 		AllowCredentials: true,
 		MaxAge:           12 * time.Hour,
 	}))
@@ -144,6 +158,7 @@ func main() {
 	br.addArrRequestRoutes()
 	br.addJobRoutes()
 	br.addTaskRoutes()
+	br.addTagRoutes()
 	br.rg.Static("/img", path.Join(DataPath, "img"))
 
 	go setupTasks(db)

server/watched.go

@@ -27,8 +27,11 @@ const (
 
 type Watched struct {
 	GormModel
-	Status          WatchedStatus    `json:"status"`
-	Rating          int8             `json:"rating"`
+	Status WatchedStatus `json:"status"`
+	// float so we can support decimal ratings.
+	// Ratings should still always be saved as out of 10.0,
+	// so they can be viewed with any ratings setting in the client.
+	Rating          float64          `json:"rating" gorm:"type:numeric(2,1)"`
 	Thoughts        string           `json:"thoughts"`
 	Pinned          bool             `json:"pinned" gorm:"default:false;not null"`
 	UserID          uint             `json:"-" gorm:"uniqueIndex:usernctnidx;uniqueIndex:userngamidx"`
@@ -39,11 +42,15 @@ type Watched struct {
 	Activity        []Activity       `json:"activity"`
 	WatchedSeasons  []WatchedSeason  `json:"watchedSeasons,omitempty"`  // For shows
 	WatchedEpisodes []WatchedEpisode `json:"watchedEpisodes,omitempty"` // For shows
+	Tags            []Tag            `json:"tags,omitempty" gorm:"many2many:watched_tags;"`
+	// The last season that was viewed by the user for this watched entry.
+	// Only applies to tv shows of course.
+	LastViewedSeason *int `json:"lastViewedSeason,omitempty"`
 }
 
 type WatchedAddRequest struct {
 	Status      WatchedStatus `json:"status"`
-	Rating      int8          `json:"rating" binding:"max=10"`
+	Rating      float64       `json:"rating" binding:"max=10"`
 	Thoughts    string        `json:"thoughts"`
 	ContentID   int           `json:"contentId" binding:"required"`
 	ContentType ContentType   `json:"contentType" binding:"required,oneof=movie tv"`
@@ -54,7 +61,7 @@ type WatchedAddRequest struct {
 
 type WatchedUpdateRequest struct {
 	Status         WatchedStatus `json:"status" binding:"required_without_all=Rating Thoughts RemoveThoughts Pinned"`
-	Rating         int8          `json:"rating" binding:"max=10,required_without_all=Status Thoughts RemoveThoughts Pinned"`
+	Rating         float64       `json:"rating" binding:"max=10,required_without_all=Status Thoughts RemoveThoughts Pinned"`
 	Thoughts       string        `json:"thoughts" binding:"required_without_all=Status Rating RemoveThoughts Pinned"`
 	RemoveThoughts bool          `json:"removeThoughts"`
 	Pinned         *bool         `json:"pinned" binding:"required_without_all=Status Rating Thoughts RemoveThoughts"`
@@ -70,7 +77,16 @@ type WatchedRemoveResponse struct {
 
 func getWatched(db *gorm.DB, userId uint) []Watched {
 	watched := new([]Watched)
-	res := db.Model(&Watched{}).Preload("Content").Preload("Game").Preload("Game.Poster").Preload("Activity").Preload("WatchedSeasons").Preload("WatchedEpisodes").Where("user_id = ?", userId).Find(&watched)
+	res := db.Model(&Watched{}).
+		Preload("Content").
+		Preload("Game").
+		Preload("Game.Poster").
+		Preload("Activity").
+		Preload("WatchedSeasons").
+		Preload("WatchedEpisodes").
+		Preload("Tags").
+		Where("user_id = ?", userId).
+		Find(&watched)
 	if res.Error != nil {
 		panic(res.Error)
 	}
@@ -88,6 +104,22 @@ func getWatchedItemById(db *gorm.DB, userId uint, id uint) (Watched, error) {
 	return *watched, nil
 }
 
+// Get a watched list item by content (tmdb) id (must be for `userId`).
+func getWatchedItemByTmdbId(db *gorm.DB, userId uint, tmdbId uint, contentType ContentType) (Watched, error) {
+	slog.Debug("getWatchedItemByTmdbId: Running.", "userId", userId, "tmdbId", tmdbId)
+	watched := new(Watched)
+	res := db.Model(&Watched{}).
+		Joins("Content").
+		Where("user_id = ? AND Content.tmdb_id = ? AND Content.type = ?", userId, tmdbId, contentType).
+		Take(&watched)
+	if res.Error != nil {
+		slog.Error("getWatchedItemByTmdbId: Failed!", "error", res.Error)
+		return Watched{}, res.Error
+	}
+	slog.Debug("getWatchedItemByTmdbId: Done.", "userId", userId, "tmdbId", tmdbId, "watched_item", watched)
+	return *watched, nil
+}
+
 // Get another users **public** watchlist.
 func getPublicWatched(db *gorm.DB, userId uint, username string) ([]Watched, error) {
 	slog.Debug("getPublicWatched running", "user_id", userId, "username", username)
@@ -230,6 +262,24 @@ func updateWatched(db *gorm.DB, userId uint, id uint, ar WatchedUpdateRequest) (
 	return WatchedUpdateResponse{NewActivity: addedActivity}, nil
 }
 
+func updateWatchedLastViewedSeason(db *gorm.DB, userId uint, id uint, seasonNum int) error {
+	slog.Debug("UpdateWatchedLastViewedSeason", "user_id", userId, "id", id, "season_num", seasonNum)
+	res := db.
+		Model(&Watched{}).
+		Where("id = ? AND user_id = ?", id, userId).
+		Update("last_viewed_season", seasonNum)
+	if res.Error != nil {
+		slog.Error("updateWatchedLastViewedSeason: Failed when updating.", "error", res.Error)
+		return errors.New("failed to update db")
+	}
+	if res.RowsAffected == 0 {
+		// likely the watched entry does not exist or is not owned by this `userId`.
+		slog.Error("updateWatchedLastViewedSeason: Watched entry does not exist.")
+		return errors.New("watched entry does not exist")
+	}
+	return nil
+}
+
 func removeWatched(db *gorm.DB, userId uint, id uint) (WatchedRemoveResponse, error) {
 	slog.Debug("Removing watched item:", "id", id, "user_id", userId)
 	// Our model has a deleted_at field, which will make gorm do a soft delete.
@@ -248,45 +298,67 @@ func removeWatched(db *gorm.DB, userId uint, id uint) (WatchedRemoveResponse, er
 	return WatchedRemoveResponse{NewActivity: addedActivity}, nil
 }
 
-func download(url string, outf string) (err error) {
-	slog.Debug("Attempting to download file", "url", url, "outf", outf)
-
-	// Create the file
-	out, err := os.Create(outf)
-	if err != nil {
-		if os.IsNotExist(err) {
-			err = os.MkdirAll(path.Dir(outf), 0764)
-			if err != nil {
-				return err
-			}
-			// If dirs made, try making file again
-			out, err = os.Create(outf)
-			if err != nil {
-				return err
-			}
+// Download file over http (used for downloading poster images)
+// url - The remote file url.
+// outf - Where should we store the downloaded file.
+// force - Should we overwrite an existing file? If false, existing files will be skipped.
+func download(url string, outf string, force bool) (err error) {
+	slog.Debug("download: Attempting to download file", "url", url, "outf", outf, "force", force)
+	// If not forced, skip call if file already exists to save unnecessary requests.
+	if !force {
+		if _, err := os.Stat(outf); !errors.Is(err, os.ErrNotExist) {
+			slog.Debug("download: Skipping file, it already exists locally.", "outf", outf, "error", err)
+			return nil
 		} else {
-			return err
+			slog.Debug("download: Continuing to download file, it does not already exist.", "outf", outf, "error", err)
 		}
 	}
-	defer out.Close()
 
 	// Get the data
 	resp, err := http.Get(url)
 	if err != nil {
+		slog.Error("download: Failed to make request.", "outf", outf, "error", err)
 		return err
 	}
 	defer resp.Body.Close()
 
 	// Check server response
 	if resp.StatusCode != http.StatusOK {
+		slog.Error("download: Request failed. Non OK response.", "outf", outf, "status", resp.Status, "error", err)
 		return fmt.Errorf("bad status: %s", resp.Status)
 	}
 
+	// Create the file
+	out, err := os.Create(outf)
+	if err != nil {
+		if errors.Is(err, os.ErrNotExist) {
+			slog.Warn("download: Failed to create out file, trying to recover by ensuring directories exist.", "outf", outf)
+			err = os.MkdirAll(path.Dir(outf), 0764)
+			if err != nil {
+				slog.Error("download: Failed to create dir(s) in recovery attempt.", "outf", outf, "error", err)
+				return err
+			}
+			// If dirs made, try making file again
+			out, err = os.Create(outf)
+			if err != nil {
+				slog.Error("download: Failed to create out file again in recovery attempt.", "outf", outf, "error", err)
+				return err
+			}
+			slog.Info("download: recovered by creating dir(s).", "outf", outf)
+		} else {
+			slog.Error("download: Failed to create out file. No known recovery path possible.", "outf", outf, "error", err)
+			return err
+		}
+	}
+	defer out.Close()
+
 	// Write the body to file
 	_, err = io.Copy(out, resp.Body)
 	if err != nil {
+		slog.Error("download: Failed to write file to our file.", "outf", outf, "error", err)
 		return err
 	}
 
+	slog.Debug("download: Successfully downloaded file", "outf", outf)
 	return nil
 }

server/watched_episodes.go

@@ -31,7 +31,7 @@ type WatchedEpisodeAddRequest struct {
 	SeasonNumber    int           `json:"seasonNumber"`
 	EpisodeNumber   int           `json:"episodeNumber"`
 	Status          WatchedStatus `json:"status"`
-	Rating          int8          `json:"rating"`
+	Rating          int8          `json:"rating" binding:"max=10"`
 	addActivity     ActivityType  `json:"-"`
 	addActivityDate time.Time     `json:"-"`
 }

server/watched_seasons.go

@@ -25,7 +25,7 @@ type WatchedSeasonAddRequest struct {
 	WatchedID       uint          `json:"watchedId"`
 	SeasonNumber    int           `json:"seasonNumber"`
 	Status          WatchedStatus `json:"status"`
-	Rating          int8          `json:"rating"`
+	Rating          int8          `json:"rating" binding:"max=10"`
 	addActivity     ActivityType  `json:"-"`
 	addActivityDate time.Time     `json:"-"`
 	// Data to add to activity if the season is created.

src/app.d.ts

@@ -1,12 +1,12 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface Platform {}
-  }
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
 }
 
 export {};

src/app.html

@@ -1,14 +1,14 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link rel="apple-touch-icon" href="%sveltekit.assets%/logo-col.png" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Watcharr</title>
-    %sveltekit.head%
-  </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="apple-touch-icon" href="%sveltekit.assets%/logo-col.png" />
+		<meta name="viewport" content="width=device-width" />
+		<title>Watcharr</title>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
 </html>

src/hooks.client.ts

@@ -0,0 +1,8 @@
+import type { ClientInit } from "@sveltejs/kit";
+
+export const init: ClientInit = async () => {
+	console.info(
+		`%cWATCHARR v${__WATCHARR_VERSION__}`,
+		"background: white;color: black;font-size: large;padding: 3px 5px;",
+	);
+};

src/lib/Activity.svelte

@@ -1,320 +1,326 @@
 <script lang="ts">
-  import type { Activity } from "@/types";
-  import { getOrdinalSuffix, months, seasonAndEpToReadable } from "./util/helpers";
-  import ActivityEditor from "./ActivityEditor.svelte";
-  import Icon from "./Icon.svelte";
-  import tooltip from "./actions/tooltip";
+	import type { Activity } from "@/types";
+	import {
+		getOrdinalSuffix,
+		months,
+		seasonAndEpToReadable,
+	} from "./util/helpers";
+	import ActivityEditor from "./ActivityEditor.svelte";
+	import Icon from "./Icon.svelte";
+	import tooltip from "./actions/tooltip";
 
-  export let activity: Activity[] | undefined;
-  export let wListId: number;
+	interface Props {
+		activity: Activity[] | undefined;
+		wListId: number;
+	}
 
-  let clickedActivity: Activity;
-  let groupedActivities: { [index: string]: any };
-  let isActivityEditorVisible: boolean;
+	let { activity, wListId }: Props = $props();
 
-  $: {
-    groupedActivities = getGroupedActivity(activity);
-  }
+	let clickedActivity: Activity | undefined = $state();
+	let groupedActivities: { [index: string]: any } = $derived(
+		getGroupedActivity(activity),
+	);
 
-  function getMsg(a: Activity) {
-    switch (a?.type) {
-      case "ADDED_WATCHED":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `Added to Watched List${data?.status ? ` as ${toFullTitleCase(data.status)}` : ""}${
-            data?.rating ? ` with ${data.rating} Stars` : ""
-          }`;
-        }
-        return "Added to Watched List";
-      case "REMOVED_WATCHED":
-        return "Removed from Watched List";
-      case "RATING_CHANGED":
-        if (a.data) {
-          return `Rating Changed to ${a.data}`;
-        }
-        return "Rating Changed";
-      case "STATUS_CHANGED":
-        if (a.data) {
-          return `Status Changed to ${toFullTitleCase(a.data)}`;
-        }
-        return "Status Changed";
-      case "STATUS_CHANGED_AUTO":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `Status Changed to ${toFullTitleCase(data.status)}`;
-        }
-        return "Status Changed";
-      case "THOUGHTS_CHANGED":
-        return "Thoughts Changed";
-      case "THOUGHTS_REMOVED":
-        return "Thoughts Removed";
-      case "IMPORTED_WATCHED":
-        return "Imported";
-      case "IMPORTED_WATCHED_JF":
-      case "IMPORTED_WATCHED_PLEX":
-        return "Synced";
-      case "IMPORTED_RATING":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          if (data.rating) {
-            return `Rating Changed to ${data.rating}`;
-          } else {
-            return "Added to Watchlist with No Rating";
-          }
-        }
-        return "Imported Rating";
-      case "IMPORTED_ADDED_WATCHED":
-      case "IMPORTED_ADDED_WATCHED_JF":
-      case "IMPORTED_ADDED_WATCHED_PLEX":
-        return "Imported Watch Date";
-      case "SEASON_ADDED":
-      case "SEASON_ADDED_AUTO":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `Season ${data.season} Added as ${toFullTitleCase(data.status)}`;
-        }
-        return "Season Added";
-      case "SEASON_ADDED_JF":
-      case "SEASON_ADDED_PLEX":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `Season ${data.season} Synced as ${toFullTitleCase(data.status)}`;
-        }
-        return "Season Synced";
-      case "SEASON_RATING_CHANGED":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `Changed Season ${data.season} Rating to ${data.rating}`;
-        }
-        return "Season Rating Changed";
-      case "SEASON_STATUS_CHANGED":
-      case "SEASON_STATUS_CHANGED_AUTO":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `Changed Season ${data.season} Status to ${toFullTitleCase(data.status)}`;
-        }
-        return "Season Status Changed";
-      case "SEASON_REMOVED":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `Season ${data.season} Status Removed`;
-        }
-        return "Season Removed";
-      case "EPISODE_ADDED":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `${seasonAndEpToReadable(data.season, data.episode)} Added ${data.status ? `as ${toFullTitleCase(data.status)}` : data.rating ? `with Rating ${data.rating}` : ""}`;
-        }
-        return "Episode Added";
-      case "EPISODE_ADDED_JF":
-      case "EPISODE_ADDED_PLEX":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `${seasonAndEpToReadable(data.season, data.episode)} Synced ${data.status ? `as ${toFullTitleCase(data.status)}` : data.rating ? `with Rating ${data.rating}` : ""}`;
-        }
-        return "Episode Synced";
-      case "EPISODE_RATING_CHANGED":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `${seasonAndEpToReadable(data.season, data.episode)} Rating Changed to ${data.rating}`;
-        }
-        return "Episode Rating Changed";
-      case "EPISODE_STATUS_CHANGED":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `${seasonAndEpToReadable(data.season, data.episode)} Status Changed to ${toFullTitleCase(data.status)}`;
-        }
-        return "Episode Status Changed";
-      case "EPISODE_REMOVED":
-        if (a.data) {
-          const data = JSON.parse(a.data);
-          return `${seasonAndEpToReadable(data.season, data.episode)} Removed`;
-        }
-        return "Episode Removed";
-      default:
-        return a.type;
-    }
-  }
+	function getMsg(a: Activity) {
+		switch (a?.type) {
+			case "ADDED_WATCHED":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `Added to Watched List${data?.status ? ` as ${toFullTitleCase(data.status)}` : ""}${
+						data?.rating ? ` with ${data.rating} Stars` : ""
+					}`;
+				}
+				return "Added to Watched List";
+			case "REMOVED_WATCHED":
+				return "Removed from Watched List";
+			case "RATING_CHANGED":
+				if (a.data) {
+					return `Rating Changed to ${a.data}`;
+				}
+				return "Rating Changed";
+			case "STATUS_CHANGED":
+				if (a.data) {
+					return `Status Changed to ${toFullTitleCase(a.data)}`;
+				}
+				return "Status Changed";
+			case "STATUS_CHANGED_AUTO":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `Status Changed to ${toFullTitleCase(data.status)}`;
+				}
+				return "Status Changed";
+			case "THOUGHTS_CHANGED":
+				return "Thoughts Changed";
+			case "THOUGHTS_REMOVED":
+				return "Thoughts Removed";
+			case "IMPORTED_WATCHED":
+				return "Imported";
+			case "IMPORTED_WATCHED_JF":
+			case "IMPORTED_WATCHED_PLEX":
+				return "Synced";
+			case "IMPORTED_RATING":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					if (data.rating) {
+						return `Rating Changed to ${data.rating}`;
+					} else {
+						return "Added to Watchlist with No Rating";
+					}
+				}
+				return "Imported Rating";
+			case "IMPORTED_ADDED_WATCHED":
+			case "IMPORTED_ADDED_WATCHED_JF":
+			case "IMPORTED_ADDED_WATCHED_PLEX":
+				return "Imported Watch Date";
+			case "SEASON_ADDED":
+			case "SEASON_ADDED_AUTO":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `Season ${data.season} Added as ${toFullTitleCase(data.status)}`;
+				}
+				return "Season Added";
+			case "SEASON_ADDED_JF":
+			case "SEASON_ADDED_PLEX":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `Season ${data.season} Synced as ${toFullTitleCase(data.status)}`;
+				}
+				return "Season Synced";
+			case "SEASON_RATING_CHANGED":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `Changed Season ${data.season} Rating to ${data.rating}`;
+				}
+				return "Season Rating Changed";
+			case "SEASON_STATUS_CHANGED":
+			case "SEASON_STATUS_CHANGED_AUTO":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `Changed Season ${data.season} Status to ${toFullTitleCase(data.status)}`;
+				}
+				return "Season Status Changed";
+			case "SEASON_REMOVED":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `Season ${data.season} Status Removed`;
+				}
+				return "Season Removed";
+			case "EPISODE_ADDED":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `${seasonAndEpToReadable(data.season, data.episode)} Added ${data.status ? `as ${toFullTitleCase(data.status)}` : data.rating ? `with Rating ${data.rating}` : ""}`;
+				}
+				return "Episode Added";
+			case "EPISODE_ADDED_JF":
+			case "EPISODE_ADDED_PLEX":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `${seasonAndEpToReadable(data.season, data.episode)} Synced ${data.status ? `as ${toFullTitleCase(data.status)}` : data.rating ? `with Rating ${data.rating}` : ""}`;
+				}
+				return "Episode Synced";
+			case "EPISODE_RATING_CHANGED":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `${seasonAndEpToReadable(data.season, data.episode)} Rating Changed to ${data.rating}`;
+				}
+				return "Episode Rating Changed";
+			case "EPISODE_STATUS_CHANGED":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `${seasonAndEpToReadable(data.season, data.episode)} Status Changed to ${toFullTitleCase(data.status)}`;
+				}
+				return "Episode Status Changed";
+			case "EPISODE_REMOVED":
+				if (a.data) {
+					const data = JSON.parse(a.data);
+					return `${seasonAndEpToReadable(data.season, data.episode)} Removed`;
+				}
+				return "Episode Removed";
+			default:
+				return a.type;
+		}
+	}
 
-  function toFullTitleCase(text: string | undefined) {
-    if (text) {
-      return text
-        .split(" ")
-        .map((l) => l[0].toUpperCase() + l.substring(1).toLowerCase())
-        .join(" ");
-    }
-    return "Unknown";
-  }
+	function toFullTitleCase(text: string | undefined) {
+		if (text) {
+			return text
+				.split(" ")
+				.map((l) => l[0].toUpperCase() + l.substring(1).toLowerCase())
+				.join(" ");
+		}
+		return "Unknown";
+	}
 
-  function toDayTime(d: Date) {
-    return `${d.getDate()}${getOrdinalSuffix(d.getDate())} at ${d.toLocaleTimeString()}`;
-  }
+	function toDayTime(d: Date) {
+		return `${d.getDate()}${getOrdinalSuffix(d.getDate())} at ${d.toLocaleTimeString()}`;
+	}
 
-  /**
-   * Get what will be the visible date the activity was 'created'.
-   * @returns customDate if defined or createdAt if not.
-   */
-  function getCreatedAtVis(a: Activity) {
-    return Date.parse(a.customDate ?? a.createdAt);
-  }
+	/**
+	 * Get what will be the visible date the activity was 'created'.
+	 * @returns customDate if defined or createdAt if not.
+	 */
+	function getCreatedAtVis(a: Activity) {
+		return Date.parse(a.customDate ?? a.createdAt);
+	}
 
-  function getGroupedActivity(activities?: Activity[]) {
-    activities = activities?.filter((a) => a.type);
-    const a = activities?.sort((a, b) => getCreatedAtVis(b) - getCreatedAtVis(a));
-    let grouped: { [index: string]: any } = {};
-    if (a) {
-      for (let i = 0; i < a.length; i++) {
-        const activity = a[i];
-        const date = new Date(getCreatedAtVis(activity));
-        const key = `${months[date.getMonth()]} ${date.getFullYear()}`;
-        if (grouped[key]) {
-          grouped[key].push(activity);
-        } else {
-          grouped[key] = [activity];
-        }
-      }
-    }
-    return grouped;
-  }
+	function getGroupedActivity(activities?: Activity[]) {
+		activities = activities?.filter((a) => a.type);
+		const a = activities?.sort(
+			(a, b) => getCreatedAtVis(b) - getCreatedAtVis(a),
+		);
+		let grouped: { [index: string]: any } = {};
+		if (a) {
+			for (let i = 0; i < a.length; i++) {
+				const activity = a[i];
+				const date = new Date(getCreatedAtVis(activity));
+				const key = `${months[date.getMonth()]} ${date.getFullYear()}`;
+				if (grouped[key]) {
+					grouped[key].push(activity);
+				} else {
+					grouped[key] = [activity];
+				}
+			}
+		}
+		return grouped;
+	}
 
-  function openEditor(a: Activity) {
-    clickedActivity = a;
-    isActivityEditorVisible = true;
-    return;
-  }
+	function openEditor(a: Activity) {
+		clickedActivity = a;
+		return;
+	}
 
-  function getActivityDataParsed(a: Activity) {
-    try {
-      if (a.data) {
-        return JSON.parse(a.data);
-      }
-    } catch (err) {
-      console.error("getActivityDataParsed: Failed!", err);
-    }
-  }
+	function getActivityDataParsed(a: Activity) {
+		try {
+			if (a.data) {
+				return JSON.parse(a.data);
+			}
+		} catch (err) {
+			console.error("getActivityDataParsed: Failed!", err);
+		}
+	}
 </script>
 
-{#if isActivityEditorVisible}
-  <ActivityEditor
-    watchedId={wListId}
-    activity={clickedActivity}
-    activityMessage={getMsg(clickedActivity)}
-    onClose={() => (isActivityEditorVisible = false)}
-  />
+{#if clickedActivity}
+	<ActivityEditor
+		watchedId={wListId}
+		activity={clickedActivity}
+		activityMessage={getMsg(clickedActivity)}
+		onClose={() => (clickedActivity = undefined)}
+	/>
 {/if}
 
 <div class="activity">
-  <h2>Activity</h2>
-  {#if groupedActivities && Object.keys(groupedActivities).length > 0}
-    <ul>
-      {#each Object.keys(groupedActivities) as k}
-        <h3>{k}</h3>
+	<h2>Activity</h2>
+	{#if groupedActivities && Object.keys(groupedActivities).length > 0}
+		<ul>
+			{#each Object.keys(groupedActivities) as k}
+				<h3>{k}</h3>
 
-        {#each groupedActivities[k] as a}
-          {@const d = new Date(getCreatedAtVis(a))}
-          <li>
-            <button class="unset" on:click={() => openEditor(a)}>
-              <span title={d.toDateString()}>{toDayTime(d)}</span>
-              <span>{getMsg(a)}</span>
-            </button>
-            {#if a.type?.endsWith("_AUTO")}
-              {@const data = getActivityDataParsed(a)}
-              <i
-                use:tooltip={{
-                  text:
-                    data && data.reason
-                      ? `Automated because ${data.reason}`
-                      : "Completed by an automation.",
-                  pos: "bot"
-                }}
-                style="width: 20px; height: 20px;"
-              >
-                <Icon i="sparkles" wh={20} />
-              </i>
-            {/if}
-          </li>
-        {/each}
-      {/each}
-    </ul>
-  {:else}
-    <span>You Have No Activity!</span>
-  {/if}
+				{#each groupedActivities[k] as a}
+					{@const d = new Date(getCreatedAtVis(a))}
+					<li>
+						<button class="plain" onclick={() => openEditor(a)}>
+							<span title={d.toDateString()}>{toDayTime(d)}</span>
+							<span>{getMsg(a)}</span>
+						</button>
+						{#if a.type?.endsWith("_AUTO")}
+							{@const data = getActivityDataParsed(a)}
+							<i
+								use:tooltip={{
+									text:
+										data && data.reason
+											? `Automated because ${data.reason}`
+											: "Completed by an automation.",
+									pos: "bot",
+								}}
+								style="width: 20px; height: 20px;"
+							>
+								<Icon i="sparkles" wh={20} />
+							</i>
+						{/if}
+					</li>
+				{/each}
+			{/each}
+		</ul>
+	{:else}
+		<span>You Have No Activity!</span>
+	{/if}
 </div>
 
 <style lang="scss">
-  .activity {
-    width: 100%;
+	.activity {
+		width: 100%;
 
-    ul {
-      display: flex;
-      flex-flow: column;
-      gap: 8px;
-      margin-top: 8px;
-      margin-left: calc(30px + 8px);
-      list-style: none;
-      max-height: 250px;
-      overflow-y: auto;
-      overflow-x: hidden;
+		ul {
+			display: flex;
+			flex-flow: column;
+			gap: 8px;
+			margin-top: 8px;
+			margin-left: calc(30px + 8px);
+			list-style: none;
+			max-height: 250px;
+			overflow-y: auto;
+			overflow-x: hidden;
 
-      h3 {
-        position: sticky;
-        top: 0;
-        font-size: 16px;
-        font-family:
-          sans-serif,
-          system-ui,
-          -apple-system,
-          BlinkMacSystemFont;
-        padding-bottom: 1px;
-        background-color: $bg-color;
-      }
+			h3 {
+				position: sticky;
+				top: 0;
+				font-size: 16px;
+				font-family:
+					sans-serif,
+					system-ui,
+					-apple-system,
+					BlinkMacSystemFont;
+				padding-bottom: 1px;
+				background-color: $bg-color;
+			}
 
-      li {
-        display: flex;
-        flex-flow: row;
-        gap: 8px;
-        align-items: center;
+			li {
+				display: flex;
+				flex-flow: row;
+				gap: 8px;
+				align-items: center;
 
-        button {
-          all: unset;
-          display: flex;
-          flex-flow: row;
-          align-items: center;
-          gap: 8px;
-          width: max-content;
-          max-width: 100%;
-          cursor: pointer;
-        }
+				button {
+					all: unset;
+					display: flex;
+					flex-flow: row;
+					align-items: center;
+					gap: 8px;
+					width: max-content;
+					max-width: 100%;
+					cursor: pointer;
+				}
 
-        span {
-          width: max-content;
-          margin-left: 0px;
+				span {
+					width: max-content;
+					margin-left: 0px;
 
-          &:first-child {
-            min-width: max-content;
-          }
+					&:first-child {
+						min-width: max-content;
+					}
 
-          &:last-of-type {
-            background-color: $accent-color;
-            color: $text-color;
-            border-radius: 8px;
-            padding: 10px 12px;
-          }
-        }
-      }
-    }
+					&:last-of-type {
+						background-color: $accent-color;
+						color: $text-color;
+						border-radius: 8px;
+						padding: 10px 12px;
+					}
+				}
+			}
+		}
 
-    span {
-      margin-left: calc(30px);
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-  }
+		span {
+			margin-left: calc(30px);
+			width: 100%;
+			display: flex;
+			justify-content: center;
+		}
+	}
 
-  h2 {
-    font-size: 30px;
-    font-weight: bold;
-    margin-left: 30px;
-  }
+	h2 {
+		font-size: 30px;
+		font-weight: bold;
+		margin-left: 30px;
+	}
 </style>

src/lib/ActivityEditor.svelte

@@ -1,131 +1,140 @@
 <script lang="ts">
-  import { updateActivity, removeActivity } from "@/lib/util/api";
-  import Modal from "./Modal.svelte";
-  import type { Activity } from "@/types";
-  import { notify } from "./util/notify";
+	import { updateActivity, removeActivity } from "@/lib/util/api";
+	import Modal from "./Modal.svelte";
+	import type { Activity } from "@/types";
+	import { notify } from "./util/notify";
 
-  export let watchedId: number;
-  export let activity: Activity;
-  export let activityMessage: string;
-  export let onClose: () => void;
+	interface Props {
+		watchedId: number;
+		activity: Activity;
+		activityMessage: string;
+		onClose: () => void;
+	}
 
-  let isDateTimeChanged: boolean;
-  let isDateTimeValid = true;
-  let currentDateObject = new Date(Date.parse(activity.customDate ?? activity.createdAt));
-  let currentDateString = dateToInputDateString(currentDateObject);
-  let currentTimeString = dateToInputTimeString(currentDateObject);
-  let selectedDateString = currentDateString;
-  let selectedTimeString = currentTimeString;
+	let { watchedId, activity, activityMessage, onClose }: Props = $props();
 
-  $: {
-    isDateTimeChanged =
-      currentDateString != selectedDateString || currentTimeString != selectedTimeString;
-  }
+	let isDateTimeChanged: boolean = $derived(
+		currentDateString != selectedDateString ||
+			currentTimeString != selectedTimeString,
+	);
+	let isDateTimeValid = $state(true);
+	let currentDateObject = new Date(
+		Date.parse(activity.customDate ?? activity.createdAt),
+	);
+	let currentDateString = dateToInputDateString(currentDateObject);
+	let currentTimeString = dateToInputTimeString(currentDateObject);
+	let selectedDateString = $state(currentDateString);
+	let selectedTimeString = $state(currentTimeString);
 
-  function dateToInputDateString(date: Date) {
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, "0");
-    const day = date.getDate().toString().padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  }
+	function dateToInputDateString(date: Date) {
+		const year = date.getFullYear();
+		const month = (date.getMonth() + 1).toString().padStart(2, "0");
+		const day = date.getDate().toString().padStart(2, "0");
+		return `${year}-${month}-${day}`;
+	}
 
-  function dateToInputTimeString(date: Date) {
-    const hours = date.getHours().toString().padStart(2, "0");
-    const minutes = date.getMinutes().toString().padStart(2, "0");
-    return `${hours}:${minutes}`;
-  }
+	function dateToInputTimeString(date: Date) {
+		const hours = date.getHours().toString().padStart(2, "0");
+		const minutes = date.getMinutes().toString().padStart(2, "0");
+		return `${hours}:${minutes}`;
+	}
 
-  function validateNewDate() {
-    try {
-      const epochMillis = Date.parse(`${selectedDateString} ${selectedTimeString}`);
-      const dateObj = new Date(epochMillis);
-      if (isNaN(dateObj.getTime())) {
-        isDateTimeValid = false;
-        return;
-      }
-      isDateTimeValid = true;
-      return dateObj;
-    } catch (err) {
-      console.error("ActivityEditor: validateNewDate failed!", err);
-      isDateTimeValid = false;
-    }
-  }
+	function validateNewDate() {
+		try {
+			const epochMillis = Date.parse(
+				`${selectedDateString} ${selectedTimeString}`,
+			);
+			const dateObj = new Date(epochMillis);
+			if (isNaN(dateObj.getTime())) {
+				isDateTimeValid = false;
+				return;
+			}
+			isDateTimeValid = true;
+			return dateObj;
+		} catch (err) {
+			console.error("ActivityEditor: validateNewDate failed!", err);
+			isDateTimeValid = false;
+		}
+	}
 
-  function update() {
-    const dateObj = validateNewDate();
-    if (dateObj && isDateTimeValid && isDateTimeChanged) {
-      updateActivity(watchedId, activity.id, dateObj);
-      onClose();
-      return;
-    }
-    notify({ text: "Unable to try updating!", type: "error" });
-    console.error(
-      "ActivityEditor: Can't try updating, data missing/invalid:",
-      dateObj,
-      isDateTimeValid,
-      isDateTimeChanged
-    );
-  }
+	function update() {
+		const dateObj = validateNewDate();
+		if (dateObj && isDateTimeValid && isDateTimeChanged) {
+			updateActivity(watchedId, activity.id, dateObj);
+			onClose();
+			return;
+		}
+		notify({ text: "Unable to try updating!", type: "error" });
+		console.error(
+			"ActivityEditor: Can't try updating, data missing/invalid:",
+			dateObj,
+			isDateTimeValid,
+			isDateTimeChanged,
+		);
+	}
 
-  function remove() {
-    removeActivity(watchedId, activity.id);
-    onClose();
-  }
+	function remove() {
+		removeActivity(watchedId, activity.id);
+		onClose();
+	}
 </script>
 
 <Modal title="Edit Activity" desc={activityMessage} maxWidth="400px" {onClose}>
-  <div class="centered">
-    <h3>Date</h3>
-    <input
-      id="activity-date"
-      type="date"
-      bind:value={selectedDateString}
-      on:change={validateNewDate}
-      class:invalid={!isDateTimeValid}
-    />
-    <h3>Time</h3>
-    <input
-      id="activity-time"
-      type="time"
-      bind:value={selectedTimeString}
-      on:change={validateNewDate}
-    />
+	<div class="centered">
+		<h3>Date</h3>
+		<input
+			id="activity-date"
+			type="date"
+			bind:value={selectedDateString}
+			onchange={validateNewDate}
+			class:invalid={!isDateTimeValid}
+		/>
+		<h3>Time</h3>
+		<input
+			id="activity-time"
+			type="time"
+			bind:value={selectedTimeString}
+			onchange={validateNewDate}
+		/>
 
-    <div class="button-row">
-      <button class="danger" on:click={remove}>Delete</button>
-      <div>
-        <button on:click={update} disabled={!(isDateTimeChanged && isDateTimeValid)}>Update</button>
-      </div>
-    </div>
-  </div>
+		<div class="button-row">
+			<button class="danger" onclick={remove}>Delete</button>
+			<div>
+				<button
+					onclick={update}
+					disabled={!(isDateTimeChanged && isDateTimeValid)}>Update</button
+				>
+			</div>
+		</div>
+	</div>
 </Modal>
 
 <style lang="scss">
-  .centered {
-    display: flex;
-    flex-flow: column;
-    gap: 10px;
-    height: 100%;
+	.centered {
+		display: flex;
+		flex-flow: column;
+		gap: 10px;
+		height: 100%;
 
-    h3 {
-      font-size: 16px;
-      font-family:
-        sans-serif,
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont;
-    }
+		h3 {
+			font-size: 16px;
+			font-family:
+				sans-serif,
+				system-ui,
+				-apple-system,
+				BlinkMacSystemFont;
+		}
 
-    .button-row {
-      display: flex;
-      flex-flow: row;
-      justify-content: space-between;
-      margin-top: 10px;
+		.button-row {
+			display: flex;
+			flex-flow: row;
+			justify-content: space-between;
+			margin-top: 10px;
 
-      button {
-        margin-top: auto;
-        width: max-content;
-      }
-    }
-  }
+			button {
+				margin-top: auto;
+				width: max-content;
+			}
+		}
+	}
 </style>

src/lib/Checkbox.svelte

@@ -1,87 +1,96 @@
 <script lang="ts">
-  export let name: string;
-  export let value: boolean = false;
-  export let toggled: (on: boolean) => void = () => {};
-  export let disabled = false;
+	interface Props {
+		name: string;
+		value?: boolean;
+		toggled?: (on: boolean) => void;
+		disabled?: boolean;
+	}
 
-  let actualDisabled = false;
+	let {
+		name,
+		value = $bindable(),
+		toggled = () => {},
+		disabled = false,
+	}: Props = $props();
 
-  $: {
-    // In cases where we disable and enable the checkbox super fast
-    // it ends up looking like a jittery mess. To circumvent this
-    // issue, we add a small delay before undisabling.
-    // (eg. fast internet and net request dis and re enables it quickly)
-    if (disabled) {
-      actualDisabled = true;
-    } else {
-      setTimeout(() => {
-        actualDisabled = disabled;
-      }, 150);
-    }
-  }
+	let actualDisabled = $state(false);
 
-  function checkboxChange(e: Event) {
-    toggled((e.target as HTMLInputElement).checked);
-  }
+	$effect(() => {
+		// In cases where we disable and enable the checkbox super fast
+		// it ends up looking like a jittery mess. To circumvent this
+		// issue, we add a small delay before undisabling.
+		// (eg. fast internet and net request dis and re enables it quickly)
+		if (disabled) {
+			actualDisabled = true;
+		} else {
+			setTimeout(() => {
+				actualDisabled = disabled;
+			}, 150);
+		}
+	});
+
+	function checkboxChange(e: Event) {
+		toggled((e.target as HTMLInputElement).checked);
+	}
 </script>
 
 <div class="toggle-pill-color">
-  <input
-    bind:checked={value}
-    disabled={actualDisabled}
-    type="checkbox"
-    id={name}
-    on:change={checkboxChange}
-  />
-  <label for={name}></label>
+	<input
+		bind:checked={value}
+		disabled={actualDisabled}
+		type="checkbox"
+		id={name}
+		onchange={checkboxChange}
+	/>
+	<label for={name}></label>
 </div>
 
 <style lang="scss">
-  .toggle-pill-color {
-    width: min-content;
+	.toggle-pill-color {
+		width: min-content;
 
-    input {
-      display: none;
+		input {
+			display: none;
 
-      &:checked + label {
-        background: $success;
+			&:checked + label {
+				background: $success;
 
-        &::before {
-          left: 1.6em;
-        }
-      }
+				&::before {
+					left: 1.6em;
+				}
+			}
 
-      &:disabled + label {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
+			&:disabled + label {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
 
-    label {
-      display: block;
-      position: relative;
-      width: 3em;
-      height: 1.6em;
-      border-radius: 1em;
-      background: $error;
-      cursor: pointer;
-      user-select: none;
-      transition:
-        opacity 100ms ease-in-out,
-        opacity 100ms ease-in-out;
+		label {
+			display: block;
+			position: relative;
+			width: 3em;
+			height: 1.6em;
+			border-radius: 1em;
+			background: $error;
+			cursor: pointer;
+			user-select: none;
+			transition:
+				opacity 100ms ease-in-out,
+				opacity 100ms ease-in-out;
 
-      &::before {
-        content: "";
-        display: block;
-        width: 1.2em;
-        height: 1.2em;
-        border-radius: 1em;
-        background: #fff;
-        position: absolute;
-        left: 0.2em;
-        top: 0.2em;
-        transition: all 0.2s ease-in-out;
-      }
-    }
-  }
+			&::before {
+				content: "";
+				display: block;
+				width: 1.2em;
+				height: 1.2em;
+				border-radius: 1em;
+				background: #fff;
+				position: absolute;
+				left: 0.2em;
+				top: 0.2em;
+				transition: all 0.2s ease-in-out;
+			}
+		}
+	}
 </style>

src/lib/ColorSelector.svelte

@@ -0,0 +1,33 @@
+<!-- Uses Native Color Input -->
+
+<script lang="ts">
+	interface Props {
+		value?: string;
+		style?: string;
+	}
+
+	let { value = $bindable("#000000"), style = "" }: Props = $props();
+</script>
+
+<button
+	aria-label="Open color picker"
+	class="plain"
+	style={`background-color: ${value};${style}`}
+>
+	<input type="color" bind:value />
+</button>
+
+<style lang="scss">
+	button {
+		width: 100%;
+		height: 100%;
+		border-radius: 10px;
+		outline: 1px solid $accent-color;
+		cursor: pointer;
+	}
+
+	input {
+		opacity: 0;
+		cursor: pointer;
+	}
+</style>

src/lib/DropDown.svelte

@@ -1,181 +1,202 @@
 <script lang="ts">
-  import type { DropDownItem } from "@/types";
-  import Icon from "./Icon.svelte";
-  import { onMount } from "svelte";
+	import type { DropDownItem } from "@/types";
+	import Icon from "./Icon.svelte";
+	import { onMount } from "svelte";
 
-  export let options: string[] | DropDownItem[];
-  // If we are using DropDownItems[] as options.
-  export let isDropDownItem = false;
-  export let active: string | number | undefined = undefined;
-  export let placeholder: string;
-  export let blendIn: boolean = false;
-  export let disabled = false;
-  export let onChange: () => void = () => {};
+	interface Props {
+		options: string[] | DropDownItem[];
+		// If we are using DropDownItems[] as options.
+		isDropDownItem?: boolean;
+		active?: string | number | undefined;
+		placeholder: string;
+		blendIn?: boolean;
+		disabled?: boolean;
+		onChange?: () => void;
+		showActiveElementsInOptions?: boolean;
+	}
 
-  let activeValue: string;
-  let open = false;
-  let ulElement: HTMLUListElement;
-  let mainElement: HTMLDivElement;
+	let {
+		options,
+		isDropDownItem = false,
+		active = $bindable(undefined),
+		placeholder,
+		blendIn = false,
+		disabled = false,
+		onChange = () => {},
+		showActiveElementsInOptions = false,
+	}: Props = $props();
 
-  function handleKeyPress(event: KeyboardEvent) {
-    if (!open || disabled) return; // Don't handle if closed or disabled
+	let activeValue: string | undefined = $state();
+	let open = $state(false);
+	let ulElement: HTMLUListElement | undefined = $state();
+	let mainElement: HTMLDivElement | undefined = $state();
 
-    const pressedLetter = event.key.toLowerCase();
+	function handleKeyPress(event: KeyboardEvent) {
+		if (!open || disabled) return; // Don't handle if closed or disabled
 
-    // Filter options that start with the pressed letter (ignoring case)
-    const filteredOptions = options.filter((o) =>
-      typeof o === "string"
-        ? o.toLowerCase().startsWith(pressedLetter)
-        : o.value.toLowerCase().startsWith(pressedLetter)
-    );
+		const pressedLetter = event.key.toLowerCase();
 
-    // If there are filtered options, select the first one
-    let f: string | number | undefined;
-    if (filteredOptions.length > 0) {
-      f = typeof filteredOptions[0] === "string" ? filteredOptions[0] : filteredOptions[0].id;
-    }
+		// Filter options that start with the pressed letter (ignoring case)
+		const filteredOptions = options.filter((o) =>
+			typeof o === "string"
+				? o.toLowerCase().startsWith(pressedLetter)
+				: o.value.toLowerCase().startsWith(pressedLetter),
+		);
 
-    // Find first button with text content starting with letter pressed and scroll it into view.
-    const btns = ulElement?.querySelectorAll("button");
-    for (let i = 0; i < btns.length; i++) {
-      const btn = btns[i];
-      if (btn.textContent?.toLowerCase()?.startsWith(pressedLetter)) {
-        btn.scrollIntoView({ behavior: "smooth", block: "start" });
-        break;
-      }
-    }
-  }
+		// If there are filtered options, select the first one
+		let f: string | number | undefined;
+		if (filteredOptions.length > 0) {
+			f =
+				typeof filteredOptions[0] === "string"
+					? filteredOptions[0]
+					: filteredOptions[0].id;
+		}
 
-  $: {
-    if (typeof active === "string" && !isDropDownItem) {
-      activeValue = active;
-    } else {
-      const v = options.find((o) => (typeof o !== "string" ? o.id === active : false));
-      if (v && typeof v !== "string") activeValue = v.value;
-    }
-  }
+		// Find first button with text content starting with letter pressed and scroll it into view.
+		const btns = ulElement?.querySelectorAll("button");
+		if (btns) {
+			for (let i = 0; i < btns.length; i++) {
+				const btn = btns[i];
+				if (btn.textContent?.toLowerCase()?.startsWith(pressedLetter)) {
+					btn.scrollIntoView({ behavior: "smooth", block: "start" });
+					break;
+				}
+			}
+		}
+	}
 
-  onMount(() => {
-    mainElement.addEventListener("keypress", handleKeyPress);
+	$effect(() => {
+		if (typeof active === "string" && !isDropDownItem) {
+			activeValue = active;
+		} else {
+			const v = options.find((o) =>
+				typeof o !== "string" ? o.id === active : false,
+			);
+			if (v && typeof v !== "string") activeValue = v.value;
+		}
+	});
 
-    return () => {
-      mainElement.removeEventListener("keypress", handleKeyPress);
-    };
-  });
+	onMount(() => {
+		mainElement?.addEventListener("keypress", handleKeyPress);
+
+		return () => {
+			mainElement?.removeEventListener("keypress", handleKeyPress);
+		};
+	});
 </script>
 
 <div
-  class={[
-    open ? "is-open" : "",
-    typeof active === "undefined" ? "placeholder-shown" : "",
-    blendIn ? "blend-in" : ""
-  ].join(" ")}
-  bind:this={mainElement}
+	class={[
+		open ? "is-open" : "",
+		typeof active === "undefined" ? "placeholder-shown" : "",
+		blendIn ? "blend-in" : "",
+	].join(" ")}
+	bind:this={mainElement}
 >
-  <button on:click={() => (open = !open)} {disabled}>
-    {activeValue ? activeValue : placeholder}
-    <Icon i="chevron" facing={open ? "up" : "down"} />
-  </button>
-  <ul bind:this={ulElement}>
-    {#each options.filter((o) => (typeof o === "string" ? o !== active : o.id !== active)) as o}
-      <li>
-        <button
-          class="plain"
-          on:click={() => {
-            active = typeof o == "string" ? o : o.id;
-            open = false;
-            onChange();
-          }}
-        >
-          {typeof o == "string" ? o : o.value}
-        </button>
-      </li>
-    {/each}
-  </ul>
+	<button onclick={() => (open = !open)} {disabled}>
+		{activeValue ? activeValue : placeholder}
+		<Icon i="chevron" facing={open ? "up" : "down"} />
+	</button>
+	<ul bind:this={ulElement}>
+		{#each showActiveElementsInOptions ? options : options.filter( (o) => (typeof o === "string" ? o !== active : o.id !== active), ) as o}
+			<li>
+				<button
+					class="plain"
+					onclick={() => {
+						active = typeof o == "string" ? o : o.id;
+						open = false;
+						onChange();
+					}}
+				>
+					{typeof o == "string" ? o : o.value}
+				</button>
+			</li>
+		{/each}
+	</ul>
 </div>
 
 <style lang="scss">
-  div {
-    position: relative;
+	div {
+		position: relative;
 
-    &.placeholder-shown {
-      & > button {
-        color: #8e8e8e;
+		&.placeholder-shown {
+			& > button {
+				color: #8e8e8e;
 
-        &:hover:not(:disabled) {
-          color: $bg-color;
-        }
-      }
-    }
+				&:hover:not(:disabled) {
+					color: $bg-color;
+				}
+			}
+		}
 
-    &.blend-in {
-      & > button {
-        border-color: transparent;
-        background-color: transparent;
+		&.blend-in {
+			& > button {
+				border-color: transparent;
+				background-color: transparent;
 
-        &:hover:not(:disabled),
-        &:focus-visible:not(:disabled) {
-          background-color: $text-color;
-        }
-      }
-    }
+				&:hover:not(:disabled),
+				&:focus-visible:not(:disabled) {
+					background-color: $text-color;
+				}
+			}
+		}
 
-    &.is-open {
-      ul {
-        display: flex;
-      }
+		&.is-open {
+			ul {
+				display: flex;
+			}
 
-      & > button {
-        border-color: $text-color;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
+			& > button {
+				border-color: $text-color;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
 
-    button {
-      gap: 3px;
-      text-transform: capitalize;
+		button {
+			gap: 3px;
+			text-transform: capitalize;
 
-      :global(svg) {
-        margin-left: auto;
-      }
-    }
+			:global(svg) {
+				margin-left: auto;
+			}
+		}
 
-    ul {
-      display: none;
-      flex-flow: column;
-      position: absolute;
-      list-style: none;
-      width: 100%;
-      font-size: 14px;
-      border: 2px solid $text-color;
-      border-top: 0;
-      border-bottom-left-radius: 5px;
-      border-bottom-right-radius: 5px;
-      background-color: $bg-color;
-      z-index: 99;
-      max-height: 20vh;
-      overflow-y: auto;
+		ul {
+			display: none;
+			flex-flow: column;
+			position: absolute;
+			list-style: none;
+			width: 100%;
+			font-size: 14px;
+			border: 2px solid $text-color;
+			border-top: 0;
+			border-bottom-left-radius: 5px;
+			border-bottom-right-radius: 5px;
+			background-color: $bg-color;
+			z-index: 99;
+			max-height: 20vh;
+			overflow-y: auto;
 
-      li {
-        width: 100%;
+			li {
+				width: 100%;
 
-        button {
-          padding: 5px 10px;
-          width: 100%;
-          text-align: start;
-          text-transform: capitalize;
-          transition: background-color 100ms ease;
+				button {
+					padding: 5px 10px;
+					width: 100%;
+					text-align: start;
+					text-transform: capitalize;
+					transition: background-color 100ms ease;
 
-          &:hover:not(:disabled),
-          &:focus-visible:not(:disabled) {
-            background-color: $text-color;
-            color: $bg-color;
-            fill: $bg-color;
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
+					&:hover:not(:disabled),
+					&:focus-visible:not(:disabled) {
+						background-color: $text-color;
+						color: $bg-color;
+						fill: $bg-color;
+						opacity: 1;
+					}
+				}
+			}
+		}
+	}
 </style>

src/lib/DropFileButton.svelte

@@ -1,121 +1,134 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import type { Icon as IconT } from "@/types";
-  import Icon from "./Icon.svelte";
+	import { onMount } from "svelte";
+	import type { Icon as IconT } from "@/types";
+	import Icon from "./Icon.svelte";
 
-  export let text: string;
-  export let icon: IconT = "document";
-  export let filesSelected: (f?: FileList | null) => void;
-  export let allowSelectMultipleFiles = false;
+	interface Props {
+		text: string;
+		icon?: IconT;
+		filesSelected: (f?: FileList | null) => void;
+		allowSelectMultipleFiles?: boolean;
+	}
 
-  let fileInput: HTMLInputElement;
-  let dragEnterTarget: EventTarget | null;
-  let isDragOver = false;
+	let {
+		text,
+		icon = "document",
+		filesSelected,
+		allowSelectMultipleFiles = false,
+	}: Props = $props();
 
-  function importFile() {
-    fileInput.click();
-  }
+	let fileInput: HTMLInputElement = $state();
+	let dragEnterTarget: EventTarget | null = $state();
+	let isDragOver = $state(false);
 
-  onMount(() => {
-    if (fileInput) {
-      fileInput.addEventListener("change", () => {
-        filesSelected(fileInput.files);
-      });
-    }
-  });
+	function importFile() {
+		fileInput.click();
+	}
+
+	onMount(() => {
+		if (fileInput) {
+			fileInput.addEventListener("change", () => {
+				filesSelected(fileInput.files);
+			});
+		}
+	});
 </script>
 
 <div class="drop-file-btn">
-  <button
-    on:click={importFile}
-    on:dragover={(ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }}
-    on:dragenter={(ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      dragEnterTarget = ev.target;
-      console.log("enter");
-      isDragOver = true;
-    }}
-    on:dragleave={(ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      if (dragEnterTarget === ev.target) {
-        console.log("leave");
-        isDragOver = false;
-      }
-    }}
-    on:drop={(ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      filesSelected(ev.dataTransfer?.files);
-    }}
-    class={isDragOver ? "dragging-over" : ""}
-  >
-    <Icon i={isDragOver ? "add" : icon} wh="100%" />
-    <div>
-      <h4 class="norm">
-        {#if isDragOver}
-          Import {text}
-        {:else}
-          Browse For {text}
-        {/if}
-      </h4>
-    </div>
-  </button>
-  <input type="file" multiple={allowSelectMultipleFiles} bind:this={fileInput} />
+	<button
+		onclick={importFile}
+		ondragover={(ev) => {
+			ev.preventDefault();
+			ev.stopPropagation();
+		}}
+		ondragenter={(ev) => {
+			ev.preventDefault();
+			ev.stopPropagation();
+			dragEnterTarget = ev.target;
+			console.log("enter");
+			isDragOver = true;
+		}}
+		ondragleave={(ev) => {
+			ev.preventDefault();
+			ev.stopPropagation();
+			if (dragEnterTarget === ev.target) {
+				console.log("leave");
+				isDragOver = false;
+			}
+		}}
+		ondrop={(ev) => {
+			ev.preventDefault();
+			ev.stopPropagation();
+			filesSelected(ev.dataTransfer?.files);
+		}}
+		class={isDragOver ? "dragging-over" : ""}
+	>
+		<Icon i={isDragOver ? "add" : icon} wh="100%" />
+		<div>
+			<h4 class="norm">
+				{#if isDragOver}
+					Import {text}
+				{:else}
+					{text}
+				{/if}
+			</h4>
+		</div>
+	</button>
+	<input
+		type="file"
+		multiple={allowSelectMultipleFiles}
+		bind:this={fileInput}
+	/>
 </div>
 
 <style lang="scss">
-  .drop-file-btn {
-    button {
-      display: flex;
-      flex-flow: column;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-      height: 180px;
-      padding: 20px;
-      background-color: $accent-color;
-      border: unset;
-      border-radius: 10px;
-      user-select: none;
-      transition: 180ms ease-in-out;
+	.drop-file-btn {
+		button {
+			display: flex;
+			flex-flow: column;
+			justify-content: center;
+			align-items: center;
+			gap: 10px;
+			height: 180px;
+			padding: 20px;
+			background-color: $accent-color;
+			border: unset;
+			border-radius: 10px;
+			user-select: none;
+			transition: 180ms ease-in-out;
 
-      :global {
-        #reel path {
-          transition: 180ms ease-in-out;
+			:global {
+				#reel path {
+					transition: 180ms ease-in-out;
 
-          &:first-of-type {
-            fill: transparent;
-          }
+					&:first-of-type {
+						fill: transparent;
+					}
 
-          &:last-of-type {
-            fill: $text-color;
-          }
-        }
-      }
+					&:last-of-type {
+						fill: $text-color;
+					}
+				}
+			}
 
-      &:hover,
-      &.dragging-over {
-        color: $bg-color;
-        background-color: $accent-color-hover;
+			&:hover,
+			&.dragging-over {
+				color: $bg-color;
+				background-color: $accent-color-hover;
 
-        :global(#reel path:last-of-type) {
-          fill: $bg-color;
-        }
-      }
-    }
+				:global(#reel path:last-of-type) {
+					fill: $bg-color;
+				}
+			}
+		}
 
-    input[type="file"] {
-      width: 0px;
-      overflow: hidden;
-      border: unset;
-      background-color: transparent;
-      position: absolute;
-      top: -500px;
-    }
-  }
+		input[type="file"] {
+			width: 0px;
+			overflow: hidden;
+			border: unset;
+			background-color: transparent;
+			position: absolute;
+			top: -500px;
+		}
+	}
 </style>

src/lib/Error.svelte

@@ -1,40 +1,48 @@
 <script lang="ts">
-  export let pretty: string;
-  export let error: any;
+	interface Props {
+		pretty: string;
+		error: any;
+		onRetry?: () => void | undefined;
+	}
+
+	let { pretty, error, onRetry = undefined! }: Props = $props();
 </script>
 
 <div>
-  <div>
-    <strong>{pretty}</strong>
-    {#if error?.message}
-      <p>{error.message}</p>
-      {#if error.response?.data?.error}
-        <p>{error.response.data.error}</p>
-      {/if}
-    {:else}
-      <p>{JSON.stringify(error)}</p>
-    {/if}
-  </div>
+	<div>
+		<strong>{pretty}</strong>
+		{#if error?.message}
+			<p>{error.message}</p>
+			{#if error.response?.data?.error}
+				<p>{error.response.data.error}</p>
+			{/if}
+		{:else}
+			<p>{JSON.stringify(error)}</p>
+		{/if}
+		{#if onRetry}
+			<button onclick={onRetry}>Try Again</button>
+		{/if}
+	</div>
 </div>
 
 <style lang="scss">
-  div {
-    display: flex;
-    justify-content: center;
-    width: 100%;
+	div {
+		display: flex;
+		justify-content: center;
+		width: 100%;
 
-    div {
-      display: flex;
-      justify-content: center;
-      flex-flow: column;
-      max-width: 500px;
-      gap: 5px;
-      text-transform: capitalize;
-      font-size: 16px;
+		div {
+			display: flex;
+			justify-content: center;
+			flex-flow: column;
+			max-width: 500px;
+			gap: 5px;
+			text-transform: capitalize;
+			font-size: 16px;
 
-      p {
-        font-size: 12px;
-      }
-    }
-  }
+			p {
+				font-size: 12px;
+			}
+		}
+	}
 </style>

src/lib/HorizontalList.svelte

@@ -1,41 +1,46 @@
 <script lang="ts">
-  export let title: string | undefined;
+	interface Props {
+		title: string | undefined;
+		children?: import("svelte").Snippet;
+	}
+
+	let { title, children }: Props = $props();
 </script>
 
 <div>
-  {#if title}
-    <h2>{title}</h2>
-  {/if}
-  <ul>
-    <slot />
-  </ul>
+	{#if title}
+		<h2>{title}</h2>
+	{/if}
+	<ul>
+		{@render children?.()}
+	</ul>
 </div>
 
 <style lang="scss">
-  div {
-    width: 100%;
-    overflow-x: auto;
-  }
+	div {
+		width: 100%;
+		overflow-x: auto;
+	}
 
-  h2 {
-    font-family:
-      sans-serif,
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont;
-    font-size: 30px;
-    font-weight: bold;
-    margin-left: 30px;
-    position: sticky;
-    left: 0;
-  }
+	h2 {
+		font-family:
+			sans-serif,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont;
+		font-size: 30px;
+		font-weight: bold;
+		margin-left: 30px;
+		position: sticky;
+		left: 0;
+	}
 
-  ul {
-    display: flex;
-    flex-flow: row;
-    gap: 10px;
-    list-style: none;
-    padding: 15px 30px;
-    justify-content: space-between;
-  }
+	ul {
+		display: flex;
+		flex-flow: row;
+		gap: 10px;
+		list-style: none;
+		padding: 15px 30px;
+		justify-content: space-between;
+	}
 </style>

src/lib/JobWatcherModal.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+	import Icon from "@/lib/Icon.svelte";
+	import Modal from "@/lib/Modal.svelte";
+	import Spinner from "@/lib/Spinner.svelte";
+	import { notify } from "@/lib/util/notify";
+	import {
+		JobStatus,
+		type GetJobResponse,
+		type JobCreatedResponse,
+	} from "@/types";
+	import axios from "axios";
+	import { onDestroy, onMount } from "svelte";
+	import { store } from "@/store.svelte";
+
+	interface Props {
+		modalTitle: string;
+		// Promise that returns the job id to watch.
+		getJobId: () => Promise<{ jobId: string } | undefined>;
+		onClose: () => void;
+		messages: {
+			starting: string;
+		};
+	}
+
+	let { modalTitle, getJobId, onClose, messages }: Props = $props();
+
+	let step: "starting" | "errored" | "job-running" | "done" | "modal-closing" =
+		$state("starting");
+	let jobId: string | undefined;
+	let currentTask: string | undefined = $state();
+	let latestJobStatus: GetJobResponse | undefined = $state();
+	let jobFailError: string | undefined = $state();
+
+	async function startSync() {
+		try {
+			const r = await getJobId();
+			console.log("startSync: Response:", r);
+			if (!r?.jobId) {
+				step = "errored";
+				console.error("startSync: No jobId returned!");
+				return;
+			}
+			jobId = r.jobId;
+			step = "job-running";
+			startJobWatcher();
+		} catch (err: any) {
+			console.error("startSync failed!", err);
+			step = "errored";
+			jobFailError = err?.response ? err?.response?.data?.error : String(err);
+		}
+	}
+
+	async function startJobWatcher() {
+		if (!jobId) {
+			console.error("startJobWatcher: No Job Id");
+			notify({
+				text: "Unable to start job watcher, no job id.",
+				type: "error",
+			});
+			return;
+		}
+		console.log("startJobWatcher: Starting..");
+		let seqfailedJobReqs = 0;
+		while (step === "job-running") {
+			try {
+				const r = await axios.get<GetJobResponse>(`/job/${jobId}`);
+				console.log("jobWatcher: Got job data:", r.data);
+				latestJobStatus = r.data;
+				currentTask = r.data?.currentTask;
+				if (r.data?.status === JobStatus.DONE) {
+					step = "done";
+				} else if (r.data?.status === JobStatus.CANCELLED) {
+					step = "errored";
+				}
+				// If we get here without erroring, we can reset it to 0.
+				seqfailedJobReqs = 0;
+			} catch (err) {
+				console.error(
+					"jobWatcher: Get job request failed!",
+					seqfailedJobReqs,
+					err,
+				);
+				seqfailedJobReqs++;
+			}
+			if (seqfailedJobReqs >= 10) {
+				console.error("jobWatcher: Failed 10 times in a row!");
+				notify({
+					text: "Status checker has failed 10 times in a row!",
+					type: "error",
+					time: 30000,
+				});
+				step = "errored";
+				break;
+			}
+			await new Promise((r) => setTimeout(r, 1000));
+		}
+		if (step !== "modal-closing") {
+			// Update our watched list
+			const nid = notify({
+				text: "Fetching updated watched list.",
+				type: "loading",
+			});
+			try {
+				const w = await axios.get("/watched");
+				if (w?.data?.length > 0) {
+					store.watchedList = w.data;
+				}
+				notify({
+					id: nid,
+					text: "Fetched updated watched list.",
+					type: "success",
+				});
+			} catch (err) {
+				console.error("jobWatcher: Getting updated watched list failed!", err);
+				notify({
+					id: nid,
+					text: "Getting updated watched list failed!",
+					type: "error",
+				});
+			}
+		}
+	}
+
+	function modalClose() {
+		if (step === "job-running") {
+			notify({
+				text: "Sync will continue in the background.. please refresh the page periodically to view your updated list or come back later.",
+				time: 10000,
+			});
+		}
+		step = "modal-closing";
+		onClose();
+	}
+
+	onMount(() => {
+		startSync();
+	});
+
+	onDestroy(() => {
+		step = "starting";
+		jobId = undefined;
+		currentTask = undefined;
+		latestJobStatus = undefined;
+	});
+</script>
+
+<Modal title={modalTitle} maxWidth="700px" onClose={modalClose}>
+	<div class="ctr">
+		{#if step === "done"}
+			<Icon i="check" wh={60} />
+		{:else if step === "errored"}
+			<Icon i="close" wh={70} />
+		{:else}
+			<Spinner />
+		{/if}
+		<div>
+			{#if step === "starting"}
+				<h4 class="norm">Starting</h4>
+				<span>{messages.starting}</span>
+			{:else if step === "job-running"}
+				<h4 class="norm">Running</h4>
+				{#if currentTask}
+					<span>{currentTask}</span>
+				{/if}
+			{:else if step === "done"}
+				{#if !latestJobStatus?.errors || latestJobStatus?.errors?.length <= 0}
+					<h4 class="norm">Finished</h4>
+					<span>We have finished. Looks like there were no errors!</span>
+				{:else}
+					<h4 class="norm">
+						Finished With {latestJobStatus?.errors?.length} Error{latestJobStatus
+							?.errors?.length === 1
+							? ""
+							: "s"}
+					</h4>
+					<span>Job finished, but with errors:</span>
+					<ul>
+						{#each latestJobStatus?.errors as e}
+							<li>{e}</li>
+						{/each}
+					</ul>
+				{/if}
+			{:else if step === "errored"}
+				<h4 class="norm">We Errored!</h4>
+				{#if jobFailError}
+					<span>{jobFailError}</span>
+				{:else}
+					<span
+						>We errored before starting the job or the job was cancelled.</span
+					>
+				{/if}
+				{#if latestJobStatus?.errors && latestJobStatus?.errors?.length > 0}
+					<ul>
+						{#each latestJobStatus?.errors as e}
+							<li>{e}</li>
+						{/each}
+					</ul>
+				{/if}
+			{:else}
+				<h4 class="norm">Unknown State!</h4>
+				<span>We're not sure of the current job status.</span>
+			{/if}
+		</div>
+	</div>
+</Modal>
+
+<style lang="scss">
+	.ctr {
+		display: flex;
+		flex-flow: row;
+		gap: 20px;
+		justify-content: start;
+		align-items: start;
+		margin-top: 25px;
+		margin-bottom: 15px;
+		margin-left: 15px;
+
+		& > div:last-of-type {
+			display: flex;
+			flex-flow: column;
+			gap: 8px;
+			padding: 8px 0;
+
+			& > span {
+				font-style: italic;
+
+				&::first-letter {
+					text-transform: uppercase;
+				}
+			}
+
+			& > ul {
+				padding-left: 25px;
+
+				li::first-letter {
+					text-transform: uppercase;
+				}
+			}
+		}
+	}
+</style>

src/lib/ListBox.svelte

@@ -1,65 +1,68 @@
 <script lang="ts">
-  import type { ListBoxItem } from "@/types";
-  import Checkbox from "./Checkbox.svelte";
+	import type { ListBoxItem } from "@/types";
+	import Checkbox from "./Checkbox.svelte";
 
-  export let options: ListBoxItem[];
+	interface Props {
+		options: ListBoxItem[];
+		/**
+		 * If a checkbox to select all checkboxes is wanted,
+		 * provide the text to display besides it.
+		 */
+		allCheckBox?: string | undefined;
+	}
 
-  /**
-   * If a checkbox to select all checkboxes is wanted,
-   * provide the text to display besides it.
-   */
-  export let allCheckBox: string | undefined = undefined;
+	let { options = $bindable(), allCheckBox = undefined }: Props = $props();
 
-  let allCheckBoxValue: boolean = false;
+	let allCheckBoxValue: boolean = $state(false);
 </script>
 
 <div>
-  {#if allCheckBox}
-    <div>
-      <Checkbox
-        name={allCheckBox}
-        bind:value={allCheckBoxValue}
-        toggled={(on) => {
-          for (let i = 0; i < options.length; i++) {
-            const e = options[i];
-            e.value = on;
-          }
-          options = options;
-        }}
-      />
-      <span>{allCheckBox}</span>
-    </div>
-  {/if}
-  {#each options as o}
-    <div>
-      <Checkbox
-        name={o.displayValue}
-        bind:value={o.value}
-        toggled={(on) => {
-          if (!on) {
-            allCheckBoxValue = false;
-          } else if (!allCheckBoxValue) {
-            if (!options.some((o) => !o.value)) {
-              allCheckBoxValue = true;
-            }
-          }
-        }}
-      />
-      <span>{o.displayValue}</span>
-    </div>
-  {/each}
+	{#if allCheckBox}
+		<div>
+			<Checkbox
+				name={allCheckBox}
+				bind:value={allCheckBoxValue}
+				toggled={(on) => {
+					for (let i = 0; i < options.length; i++) {
+						const e = options[i];
+						e.value = on;
+					}
+					options = options;
+				}}
+			/>
+			<span>{allCheckBox}</span>
+		</div>
+	{/if}
+	{#each options as o}
+		<div>
+			<Checkbox
+				name={o.displayValue}
+				bind:value={o.value}
+				toggled={(on) => {
+					if (!on) {
+						allCheckBoxValue = false;
+					} else if (!allCheckBoxValue) {
+						if (!options.some((o) => !o.value)) {
+							allCheckBoxValue = true;
+						}
+					}
+				}}
+			/>
+			<span>{o.displayValue}</span>
+		</div>
+	{/each}
 </div>
 
 <style lang="scss">
-  div {
-    display: flex;
-    flex-flow: column;
-    gap: 10px;
+	div {
+		display: flex;
+		flex-flow: column;
+		gap: 10px;
 
-    & > div {
-      display: flex;
-      flex-flow: row;
-      gap: 10px;
-    }
-  }
+		& > div {
+			display: flex;
+			flex-flow: row;
+			gap: 10px;
+		}
+	}
 </style>

src/lib/Menu.svelte

@@ -0,0 +1,133 @@
+<!-- A menu designed to pop up around a
+ 	button after it is pressed. -->
+<script lang="ts">
+	import stayInView from "./actions/stayInView";
+
+	export interface MenuConfig {
+		width?: string;
+		top?: string;
+		right?: string;
+		arrowRight?: string;
+		arrowLeft?: string;
+		arrowColor?: string;
+	}
+
+	interface Props {
+		children: import("svelte").Snippet;
+		conf?: MenuConfig;
+	}
+
+	let { children, conf }: Props = $props();
+</script>
+
+<div
+	class="menu"
+	style={`--w: ${conf?.width || "125px"}; --r: ${
+		conf?.right || "10px"
+	}; --t: ${conf?.top || "55px"}; --ar: ${
+		conf?.arrowRight || "unset"
+	}; --al: ${conf?.arrowLeft || "unset"}; --ac: ${conf?.arrowColor || "unset"};`}
+	use:stayInView={{ elToShiftSelector: "& > .arrow" }}
+>
+	<i class="arrow"></i>
+	<div>
+		{@render children?.()}
+	</div>
+</div>
+
+<style lang="scss">
+	.menu {
+		display: flex;
+		flex-flow: column;
+		position: absolute;
+		right: var(--r);
+		top: var(--t);
+		width: var(--w);
+		border: 3px solid $text-color;
+		border-radius: 10px;
+		background-color: $bg-color;
+		list-style: none;
+		z-index: 50;
+
+		// The lil arrow, adjust its pos under each specific menu.
+		&:not(:has(> .arrow)):before,
+		:global(.arrow) {
+			// Works by showing arrow in ::before pseudoelement,
+			// or if more control is needed, applies to any .arrow
+			// element.
+			content: "";
+			position: absolute;
+			bottom: 100%;
+			width: 0;
+			border-top: 10px solid transparent;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-bottom: 10px solid var(--ac, $text-color);
+			right: var(--ar);
+			left: var(--al);
+			pointer-events: none;
+		}
+
+		& > div {
+			display: flex;
+			flex-flow: column;
+			padding: 10px;
+			width: 100%;
+			max-height: calc(100dvh - 65px);
+			overflow: auto;
+
+			:global {
+				h5 {
+					margin-bottom: 2px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					cursor: default;
+				}
+
+				button,
+				a {
+					font-size: 14px;
+					padding: 8px 16px;
+					text-align: center;
+					cursor: pointer;
+					transition: background-color 200ms ease;
+
+					&:hover,
+					&:focus-visible {
+						background-color: $text-color;
+						color: $bg-color;
+					}
+				}
+
+				a.menu-footer,
+				button.menu-footer {
+					font-size: 11px;
+					padding: 2px;
+					text-align: center;
+					transition: inherit;
+					color: $text-color-accent;
+					cursor: pointer;
+					border: none;
+					display: inline;
+					font-weight: initial;
+					width: auto;
+
+					&:hover,
+					&:focus-visible {
+						text-decoration: underline;
+						background-color: $bg-color;
+						color: $text-color;
+					}
+				}
+
+				span {
+					margin-top: 8px;
+					font-size: 11px;
+					color: $text-color-accent;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

src/lib/Modal.svelte

@@ -1,80 +1,110 @@
 <script lang="ts">
-  import Icon from "./Icon.svelte";
+	import Icon from "./Icon.svelte";
 
-  export let title: string;
-  export let desc: string | undefined = undefined;
-  export let onClose: (() => void) | undefined = undefined;
-  export let maxWidth = "1000px";
+	interface Props {
+		title: string;
+		desc?: string | undefined;
+		onClose?: (() => void) | undefined;
+		maxWidth?: string;
+		error?: string | undefined; // TODO This property is new, mimics what we do with other modals by showing an error at top.. we could migrate to use this in other places.
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		title,
+		desc = undefined,
+		onClose = undefined,
+		maxWidth = "1000px",
+		error = undefined,
+		children,
+	}: Props = $props();
 </script>
 
 <div class="backdrop"></div>
 <div class="modal">
-  <div style="max-width:{maxWidth};">
-    {#if typeof onClose !== "undefined"}
-      <button class="close" on:click={onClose}><Icon i="close" wh="20" /></button>
-    {/if}
-    <h3 class="norm">{title}</h3>
-    {#if desc}
-      <h5 class="norm">{desc}</h5>
-    {/if}
-    <slot />
-  </div>
+	<div style="max-width:{maxWidth};">
+		{#if typeof onClose !== "undefined"}
+			<button class="close" onclick={onClose}><Icon i="close" wh="20" /></button
+			>
+		{/if}
+		<h3 class="norm">{title}</h3>
+		{#if desc}
+			<h5 class="norm">{desc}</h5>
+		{/if}
+		{#if error}
+			<span class="error">{error}</span>
+		{/if}
+		{@render children?.()}
+	</div>
 </div>
 
 <style lang="scss">
-  .backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100dvw;
-    height: 100dvh;
-    backdrop-filter: blur(2px) saturate(180%);
-    background-color: color-mix(in srgb, black 85%, transparent);
-    position: fixed;
-    z-index: 99998;
-  }
+	.backdrop {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100dvw;
+		height: 100dvh;
+		backdrop-filter: blur(2px) saturate(180%);
+		background-color: color-mix(in srgb, black 85%, transparent);
+		position: fixed;
+		z-index: 99998;
+	}
 
-  .modal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100dvw;
-    height: 100dvh;
-    top: 0;
-    left: 0;
-    position: fixed;
-    z-index: 99998;
+	.modal {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100dvw;
+		height: 100dvh;
+		top: 0;
+		left: 0;
+		position: fixed;
+		z-index: 99998;
 
-    & > div {
-      position: relative;
-      display: flex;
-      flex-flow: column;
-      min-width: 300px;
-      width: 100%;
-      max-height: calc(100% - 20px);
-      background-color: $bg-color;
-      border-radius: 10px;
-      padding: 15px 20px;
-      margin: 20px 100px;
-      transition: margin 100ms ease;
-      outline: 2px solid $text-color;
-      overflow: auto;
+		& > div {
+			position: relative;
+			display: flex;
+			flex-flow: column;
+			min-width: 300px;
+			width: 100%;
+			max-height: calc(100% - 20px);
+			background-color: $bg-color;
+			border-radius: 10px;
+			padding: 15px 20px;
+			margin: 20px 100px;
+			transition: margin 100ms ease;
+			outline: 2px solid $text-color;
+			overflow: auto;
 
-      h5 {
-        margin-bottom: 15px;
-      }
+			h5 {
+				margin-bottom: 15px;
+			}
 
-      button.close {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        width: max-content;
-        padding: 3px 5px;
-      }
+			button.close {
+				position: absolute;
+				top: 8px;
+				right: 8px;
+				width: max-content;
+				padding: 3px 5px;
+			}
 
-      @media screen and (max-width: 680px) {
-        margin: 20px;
-      }
-    }
-  }
+			@media screen and (max-width: 680px) {
+				margin: 20px;
+			}
+
+			.error {
+				position: sticky;
+				top: 0;
+				display: flex;
+				justify-content: center;
+				width: 100%;
+				padding: 10px;
+				background-color: rgb(221, 48, 48);
+				text-transform: capitalize;
+				color: white;
+				margin-bottom: 15px;
+			}
+		}
+	}
 </style>

src/lib/Notice.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	interface Props {
+		title: string;
+		desc: string;
+		type: "warn";
+	}
+
+	let { title, desc, type }: Props = $props();
+</script>
+
+<div class={type}>
+	<h4 class="norm">{title}</h4>
+	<p>{desc}</p>
+</div>
+
+<style lang="scss">
+	div {
+		padding: 10px 12px;
+		border-radius: 10px;
+
+		&.warn {
+			background-color: $warn;
+		}
+	}
+</style>

src/lib/PageError.svelte

@@ -1,42 +1,46 @@
 <script lang="ts">
-  export let pretty: string;
-  export let error: any;
+	interface Props {
+		pretty: string;
+		error: any;
+	}
+
+	let { pretty, error }: Props = $props();
 </script>
 
 <div>
-  <div>
-    <strong>{pretty}</strong>
-    {#if error?.message}
-      <p>{error.message}</p>
-      {#if error.response}
-        <p>{error.response.data.error}</p>
-      {/if}
-    {:else}
-      <p>{JSON.stringify(error)}</p>
-    {/if}
-  </div>
+	<div>
+		<strong>{pretty}</strong>
+		{#if error?.message}
+			<p>{error.message}</p>
+			{#if error.response}
+				<p>{error.response.data.error}</p>
+			{/if}
+		{:else}
+			<p>{JSON.stringify(error)}</p>
+		{/if}
+	</div>
 </div>
 
 <style lang="scss">
-  div {
-    display: flex;
-    justify-content: center;
-    width: 100%;
+	div {
+		display: flex;
+		justify-content: center;
+		width: 100%;
 
-    div {
-      display: flex;
-      justify-content: center;
-      flex-flow: column;
-      max-width: 500px;
-      gap: 15px;
+		div {
+			display: flex;
+			justify-content: center;
+			flex-flow: column;
+			max-width: 500px;
+			gap: 15px;
 
-      p {
-        color: white;
-        background-color: rgb(66, 60, 60);
-        padding: 10px;
-        border-radius: 8px;
-        text-transform: capitalize;
-      }
-    }
-  }
+			p {
+				color: white;
+				background-color: rgb(66, 60, 60);
+				padding: 10px;
+				border-radius: 8px;
+				text-transform: capitalize;
+			}
+		}
+	}
 </style>

src/lib/Rating.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  export let rating: number | undefined;
-  export let onChange: (newRating: number) => void;
-
-  let hoveredRating: number | undefined;
-  let shownRating: number | undefined;
-  let ratingContainer: HTMLDivElement;
-  let ratingText: HTMLSpanElement;
-
-  const ratingDesc = [
-    "Apalling",
-    "Horrible",
-    "Very Bad",
-    "Bad",
-    "Average",
-    "Fine",
-    "Good",
-    "Very Good",
-    "Great",
-    "Masterpiece"
-  ];
-
-  function handleStarClick(r: number) {
-    if (r === rating) return;
-    onChange(r);
-  }
-
-  $: {
-    if (hoveredRating !== undefined) shownRating = hoveredRating;
-    else if (rating !== undefined) {
-      shownRating = rating;
-      resetRatingText();
-    } else shownRating = undefined;
-  }
-
-  function resetRatingText() {
-    if (!ratingText) {
-      console.warn("resetRatingText: ratingText is not defined yet.");
-      return;
-    }
-    if (typeof rating === "number" && rating > 0) {
-      ratingText.innerText = ratingDesc[rating - 1];
-    } else {
-      ratingText.innerText = "Select Your Rating";
-    }
-  }
-
-  function handleStarHover(
-    ev: MouseEvent & {
-      currentTarget: EventTarget & HTMLButtonElement;
-    },
-    r: number
-  ) {
-    hoveredRating = r;
-    // We set innerText instead of letting svelte update dom for us
-    // since we need the new width of span right now.
-    ratingText.innerText = ratingDesc[r - 1];
-    const start = ratingContainer?.getBoundingClientRect()?.x;
-    const starl = ev?.currentTarget?.getBoundingClientRect()?.left;
-    const rb = ratingText?.getBoundingClientRect();
-    ratingText.style.left = `${starl - start - rb.width / 2 + 11.5}px`;
-    ratingText.style.transform = "unset";
-  }
-
-  function handleStarHoverEnd() {
-    hoveredRating = undefined;
-    ratingText.style.left = "50%";
-    ratingText.style.transform = "translateX(-50%)";
-    resetRatingText();
-  }
-
-  onMount(() => {
-    resetRatingText();
-  });
-</script>
-
-<div class="rating-container" bind:this={ratingContainer}>
-  <span bind:this={ratingText}></span>
-  <div class="rating">
-    {#each [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] as v}
-      <button
-        class="plain{shownRating === v ? ' lit' : ''}"
-        on:click={() => handleStarClick(v)}
-        on:mouseenter={(ev) => handleStarHover(ev, v)}
-        on:mouseleave={() => handleStarHoverEnd()}
-      >
-        *
-      </button>
-    {/each}
-  </div>
-</div>
-
-<style lang="scss">
-  .rating-container {
-    display: flex;
-    flex-flow: column;
-    overflow: visible;
-
-    & > span {
-      position: relative;
-      transition:
-        left 100ms ease-in,
-        transform 100ms ease-in;
-      max-width: max-content;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .rating {
-    display: flex;
-    flex-flow: row-reverse;
-    align-items: center;
-    justify-content: center;
-    color: $text-color;
-    -webkit-text-stroke: 1.5px $text-color;
-    cursor: pointer;
-    overflow: hidden;
-    margin: 10px 0 10px 0;
-    padding: 1px;
-
-    button {
-      font-size: 55px;
-      font-family: "Rampart One";
-      letter-spacing: 10px;
-      line-height: 52px;
-      height: 38px;
-
-      &:global(.lit),
-      &:global(.lit ~ button) {
-        color: gold;
-        -webkit-text-stroke: 1.5px gold;
-      }
-
-      @media screen and (max-width: 450px) {
-        font-size: 50px;
-      }
-
-      @media screen and (max-width: 420px) {
-        font-size: 45px;
-      }
-    }
-  }
-</style>

src/lib/RegionDropDown.svelte

@@ -1,37 +1,45 @@
 <script lang="ts">
-  import axios from "axios";
-  import DropDown from "./DropDown.svelte";
-  import type { DropDownItem, TMDBRegions } from "@/types";
-  import Error from "./Error.svelte";
+	import axios from "axios";
+	import DropDown from "./DropDown.svelte";
+	import type { DropDownItem, TMDBRegions } from "@/types";
+	import Error from "./Error.svelte";
 
-  export let selectedCountry: string = "US";
-  export let disabled = false;
-  export let onChange: (country: string) => void;
+	interface Props {
+		selectedCountry?: string;
+		disabled?: boolean;
+		onChange: (country: string) => void;
+	}
 
-  let mappedCountries: DropDownItem[];
+	let {
+		selectedCountry = $bindable("US"),
+		disabled = false,
+		onChange,
+	}: Props = $props();
 
-  async function getCountries() {
-    const c = (await axios.get(`/content/regions`)).data as TMDBRegions;
-    mappedCountries = c.results
-      .map((cc) => {
-        return {
-          id: cc.iso_3166_1,
-          value: cc.english_name
-        } as DropDownItem;
-      })
-      .sort((a, b) => a.value.localeCompare(b.value));
-  }
+	let mappedCountries: DropDownItem[] = $state();
+
+	async function getCountries() {
+		const c = (await axios.get(`/content/regions`)).data as TMDBRegions;
+		mappedCountries = c.results
+			.map((cc) => {
+				return {
+					id: cc.iso_3166_1,
+					value: cc.english_name,
+				} as DropDownItem;
+			})
+			.sort((a, b) => a.value.localeCompare(b.value));
+	}
 </script>
 
 {#await getCountries() then}
-  <DropDown
-    placeholder="Select a country"
-    bind:active={selectedCountry}
-    options={mappedCountries}
-    onChange={() => onChange(selectedCountry)}
-    isDropDownItem={true}
-    {disabled}
-  />
+	<DropDown
+		placeholder="Select a country"
+		bind:active={selectedCountry}
+		options={mappedCountries}
+		onChange={() => onChange(selectedCountry)}
+		isDropDownItem={true}
+		{disabled}
+	/>
 {:catch err}
-  <Error error={err} pretty="Failed to load countries!" />
+	<Error error={err} pretty="Failed to load countries!" />
 {/await}

src/lib/SeasonsList.svelte

@@ -1,323 +1,486 @@
 <script lang="ts">
-  import type {
-    TMDBSeasonDetails,
-    TMDBShowSeason,
-    Watched,
-    WatchedSeasonAddResponse,
-    WatchedStatus
-  } from "@/types";
-  import axios from "axios";
-  import Spinner from "./Spinner.svelte";
-  import Error from "./Error.svelte";
-  import SeasonsListEpisode from "./SeasonsListEpisode.svelte";
-  import PosterStatus from "./poster/PosterStatus.svelte";
-  import { notify } from "./util/notify";
-  import { get } from "svelte/store";
-  import { watchedList } from "@/store";
-  import PosterRating from "./poster/PosterRating.svelte";
+	import type {
+		TMDBSeasonDetails,
+		TMDBShowSeason,
+		Watched,
+		WatchedSeason,
+		WatchedSeasonAddResponse,
+		WatchedStatus,
+	} from "@/types";
+	import axios from "axios";
+	import Spinner from "./Spinner.svelte";
+	import Error from "./Error.svelte";
+	import SeasonsListEpisode from "./SeasonsListEpisode.svelte";
+	import PosterStatus from "./poster/PosterStatus.svelte";
+	import { notify } from "./util/notify";
+	import { store } from "@/store.svelte";
+	import PosterRating from "./poster/PosterRating.svelte";
+	import Icon from "./Icon.svelte";
+	import { watchedStatuses } from "./util/helpers";
 
-  export let tvId: number;
-  export let seasons: TMDBShowSeason[];
-  export let watchedItem: Watched; // Watched list item id
+	interface Props {
+		tvId: number;
+		seasons: TMDBShowSeason[];
+		watchedItem: Watched | undefined;
+	}
 
-  let activeSeason = 1;
-  let seasonDetailsReq: Promise<TMDBSeasonDetails>;
+	let { tvId, seasons, watchedItem = $bindable() }: Props = $props();
 
-  async function sdr(seasonNum: number) {
-    return (await axios.get(`/content/tv/${tvId}/season/${seasonNum}`)).data as TMDBSeasonDetails;
-  }
+	let activeSeason = $state(
+		typeof watchedItem?.lastViewedSeason === "number"
+			? watchedItem?.lastViewedSeason
+			: 1,
+	);
+	let seasonDetailsReq: Promise<TMDBSeasonDetails> = $derived(
+		sdr(activeSeason),
+	);
 
-  // Add/update watched season
-  function updateWatchedSeason(seasonNumber: number, status?: WatchedStatus, rating?: number) {
-    const nid = notify({ text: `Saving`, type: "loading" });
-    axios
-      .post<WatchedSeasonAddResponse>(`/watched/season`, {
-        watchedId: watchedItem.id,
-        seasonNumber: seasonNumber,
-        status,
-        rating
-      })
-      .then((r) => {
-        const wList = get(watchedList);
-        const wEntry = wList.find((w) => w.id === watchedItem.id);
-        if (!wEntry) {
-          notify({
-            id: nid,
-            text: `Request succeeded, but failed to find local data. Please refresh.`,
-            type: "error"
-          });
-          return;
-        }
-        if (r.status === 200) {
-          wEntry.watchedSeasons = r.data.watchedSeasons;
-          if (wEntry.activity?.length > 0) {
-            wEntry.activity.push(r.data.addedActivity);
-          } else {
-            wEntry.activity = [r.data.addedActivity];
-          }
-          watchedList.update((w) => w);
-          notify({ id: nid, text: `Saved!`, type: "success" });
-        }
-      })
-      .catch((err) => {
-        console.error(err);
-        notify({ id: nid, text: "Failed To Update!", type: "error" });
-      });
-  }
+	async function sdr(seasonNum: number) {
+		const resp = await axios.get(`/content/tv/${tvId}/season/${seasonNum}`, {
+			params: {
+				watchedId: watchedItem?.id,
+			},
+		});
+		try {
+			if (watchedItem?.id) {
+				// If we sent a watched id, expect a 'watcharr-lastviewedseason-saved' header in the response.
+				const hVal = resp.headers["watcharr-lastviewedseason-saved"];
+				if (hVal) {
+					watchedItem.lastViewedSeason = seasonNum;
+					// watchedList.update((w) => w);
+				} else {
+					console.error(
+						"SeasonList: sdr: No header in response indicating that the lastviewedseason was saved.",
+					);
+					notify({
+						type: "error",
+						text: "Failed when saving last viewed season",
+					});
+				}
+			}
+		} catch (err) {
+			console.error(
+				"SeasonList: sdr: Failed to process lastviewedseason-saved header.",
+				err,
+			);
+		}
+		return resp.data as TMDBSeasonDetails;
+	}
 
-  function handleStatusClick(type: WatchedStatus | "DELETE", seasonNumber: number) {
-    if (type === "DELETE") {
-      const ws = watchedItem.watchedSeasons?.find((s) => s.seasonNumber === seasonNumber);
-      if (!ws) {
-        notify({ text: "Failed to find watched season id. Please try refreshing.", type: "error" });
-        return;
-      }
-      const nid = notify({ text: `Saving`, type: "loading" });
-      axios
-        .delete(`/watched/season/${ws.id}`)
-        .then((r) => {
-          const wList = get(watchedList);
-          const wEntry = wList.find((w) => w.id === watchedItem.id);
-          if (!wEntry) {
-            notify({
-              id: nid,
-              text: `Request succeeded, but failed to find local data. Please refresh.`,
-              type: "error"
-            });
-            return;
-          }
-          if (r.status === 200) {
-            wEntry.watchedSeasons = wEntry.watchedSeasons?.filter((s) => s.id !== ws.id);
-            if (r.data) {
-              if (wEntry.activity?.length > 0) {
-                wEntry.activity.push(r.data);
-              } else {
-                wEntry.activity = [r.data];
-              }
-            }
-            watchedList.update((w) => w);
-            notify({ id: nid, text: `Removed!`, type: "success" });
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-          notify({ id: nid, text: "Failed To Remove!", type: "error" });
-        });
-      return;
-    }
-    updateWatchedSeason(seasonNumber, type);
-  }
+	// Add/update watched season
+	function updateWatchedSeason(
+		seasonNumber: number,
+		status?: WatchedStatus,
+		rating?: number,
+	) {
+		if (!watchedItem) {
+			console.error("updateWatchedSeason: No watched item.");
+			return;
+		}
+		const nid = notify({ text: `Saving`, type: "loading" });
+		axios
+			.post<WatchedSeasonAddResponse>(`/watched/season`, {
+				watchedId: watchedItem.id,
+				seasonNumber: seasonNumber,
+				status,
+				rating,
+			})
+			.then((r) => {
+				// const wList = get(watchedList);
+				const wEntry = store.watchedList.find((w) => w.id === watchedItem.id);
+				if (!wEntry) {
+					notify({
+						id: nid,
+						text: `Request succeeded, but failed to find local data. Please refresh.`,
+						type: "error",
+					});
+					return;
+				}
+				if (r.status === 200) {
+					wEntry.watchedSeasons = r.data.watchedSeasons;
+					if (wEntry.activity?.length > 0) {
+						wEntry.activity.push(r.data.addedActivity);
+					} else {
+						wEntry.activity = [r.data.addedActivity];
+					}
+					notify({ id: nid, text: `Saved!`, type: "success" });
+				}
+			})
+			.catch((err) => {
+				console.error(err);
+				notify({ id: nid, text: "Failed To Update!", type: "error" });
+			});
+	}
 
-  function handleStarClick(rating: number, seasonNumber: number) {
-    updateWatchedSeason(seasonNumber, undefined, rating);
-  }
+	function handleStatusClick(
+		type: WatchedStatus | "DELETE",
+		seasonNumber: number,
+	) {
+		if (!watchedItem) {
+			console.error("handleStatusClick: No watched item.");
+			return;
+		}
+		if (type === "DELETE") {
+			const ws = watchedItem.watchedSeasons?.find(
+				(s) => s.seasonNumber === seasonNumber,
+			);
+			if (!ws) {
+				notify({
+					text: "Failed to find watched season id. Please try refreshing.",
+					type: "error",
+				});
+				return;
+			}
+			const nid = notify({ text: `Saving`, type: "loading" });
+			axios
+				.delete(`/watched/season/${ws.id}`)
+				.then((r) => {
+					const wEntry = store.watchedList.find((w) => w.id === watchedItem.id);
+					if (!wEntry) {
+						notify({
+							id: nid,
+							text: `Request succeeded, but failed to find local data. Please refresh.`,
+							type: "error",
+						});
+						return;
+					}
+					if (r.status === 200) {
+						wEntry.watchedSeasons = wEntry.watchedSeasons?.filter(
+							(s) => s.id !== ws.id,
+						);
+						if (r.data) {
+							if (wEntry.activity?.length > 0) {
+								wEntry.activity.push(r.data);
+							} else {
+								wEntry.activity = [r.data];
+							}
+						}
+						notify({ id: nid, text: `Removed!`, type: "success" });
+					}
+				})
+				.catch((err) => {
+					console.error(err);
+					notify({ id: nid, text: "Failed To Remove!", type: "error" });
+				});
+			return;
+		}
+		updateWatchedSeason(seasonNumber, type);
+	}
 
-  $: {
-    seasonDetailsReq = sdr(activeSeason);
-  }
+	function handleStarClick(rating: number, seasonNumber: number) {
+		updateWatchedSeason(seasonNumber, undefined, rating);
+	}
+
+	function checkSeasonStatus(
+		watchedSeasons: WatchedSeason[] | undefined,
+		currentSeason: TMDBShowSeason,
+	): WatchedStatus | undefined {
+		if (watchedSeasons) {
+			const watchedSeason = watchedSeasons.find(
+				(ws) => ws.seasonNumber === currentSeason.season_number,
+			);
+			console.debug(
+				"checkSeasonStatus:",
+				currentSeason.season_number,
+				watchedSeason?.status,
+			);
+			return watchedSeason?.status;
+		}
+		return undefined;
+	}
 </script>
 
 <div class="ctr">
-  <ul class="seasons">
-    {#each seasons as season}
-      <button
-        class={`plain${activeSeason === season.season_number ? " active" : ""}`}
-        on:click={() => {
-          activeSeason = season.season_number;
-        }}
-      >
-        <h1>{season.name}</h1>
-        {#if season.air_date}
-          <h2>{new Date(Date.parse(season.air_date)).getFullYear()}</h2>
-        {:else if season.season_number > 0}
-          <h2>TBD</h2>
-        {/if}
-      </button>
-    {/each}
-    <div class="last" />
-  </ul>
+	<ul class="seasons">
+		{#each seasons as season}
+			<button
+				class={`plain${activeSeason === season.season_number ? " active" : ""}`}
+				onclick={() => {
+					activeSeason = season.season_number;
+				}}
+			>
+				<div>
+					<h1 class="season-name">{season.name}</h1>
+					{#if season.episode_count > 0}
+						<h2 class="season-episodes">{season.episode_count} Episodes</h2>
+					{/if}
+				</div>
+				<div>
+					{#if season.air_date}
+						<h2 class="season-date">
+							{new Date(Date.parse(season.air_date)).getFullYear()}
+						</h2>
+					{:else if season.season_number > 0}
+						<h2>TBD</h2>
+					{/if}
 
-  <div class="episodes">
-    {#await seasonDetailsReq}
-      <Spinner />
-    {:then season}
-      <div class="episodes-topbar">
-        <h3>{season.name}</h3>
-        {#if watchedItem}
-          {@const ws = watchedItem?.watchedSeasons?.find(
-            (s) => s.seasonNumber === season.season_number
-          )}
-          {#if ws}
-            <div class="rating" style={ws?.rating ? "width: 65px" : "width: 45px"}>
-              <PosterRating
-                rating={ws?.rating}
-                btnTooltip="Season Rating"
-                handleStarClick={(r) => handleStarClick(r, season.season_number)}
-                minimal={true}
-                direction="bot"
-              />
-            </div>
-          {/if}
-          <div class="status">
-            <PosterStatus
-              status={ws?.status}
-              btnTooltip="Season Status"
-              handleStatusClick={(t) => handleStatusClick(t, season.season_number)}
-              direction="bot"
-              width="100%"
-              small
-            />
-          </div>
-        {/if}
-      </div>
-      {#if season?.episodes?.length > 0}
-        <ul>
-          {#each season.episodes as ep}
-            <SeasonsListEpisode {ep} {watchedItem} />
-          {/each}
-        </ul>
-      {:else}
-        <h3 class="norm">No episodes in this season yet!</h3>
-      {/if}
-    {:catch err}
-      <Error pretty="Failed to load season details!" error={err} />
-    {/await}
-  </div>
+					{#if watchedItem}
+						{@const status = checkSeasonStatus(
+							watchedItem.watchedSeasons,
+							season,
+						)}
+						{#if status}
+							<div class="plain season-status">
+								<Icon i={watchedStatuses[status]} />
+							</div>
+						{/if}
+					{/if}
+				</div>
+			</button>
+		{/each}
+		<div class="last"></div>
+	</ul>
+
+	<div class="episodes">
+		{#await seasonDetailsReq}
+			<Spinner />
+		{:then season}
+			<div class="episodes-topbar">
+				<h3>{season.name}</h3>
+				{#if watchedItem}
+					{@const ws = watchedItem?.watchedSeasons?.find(
+						(s) => s.seasonNumber === season.season_number,
+					)}
+					{#if ws}
+						<div class="rating">
+							<PosterRating
+								rating={ws?.rating}
+								btnTooltip="Season Rating"
+								handleStarClick={(r) =>
+									handleStarClick(r, season.season_number)}
+								minimal={true}
+								direction="bot"
+							/>
+						</div>
+					{/if}
+					<div class="status">
+						<PosterStatus
+							status={ws?.status}
+							btnTooltip="Season Status"
+							handleStatusClick={(t) =>
+								handleStatusClick(t, season.season_number)}
+							direction="bot"
+							width="100%"
+							small
+						/>
+					</div>
+				{/if}
+			</div>
+			{#if season?.episodes?.length > 0}
+				<ul>
+					{#each season.episodes as ep}
+						<SeasonsListEpisode {ep} {watchedItem} />
+					{/each}
+				</ul>
+			{:else}
+				<h3 class="norm">No episodes in this season yet!</h3>
+			{/if}
+		{:catch err}
+			<Error pretty="Failed to load season details!" error={err} />
+		{/await}
+	</div>
 </div>
 
 <style lang="scss">
-  .ctr {
-    display: flex;
-    flex-flow: row;
-    gap: 20px;
-    width: 100%;
-  }
+	.ctr {
+		display: flex;
+		flex-flow: row;
+		gap: 20px;
+		width: 100%;
+	}
 
-  .episodes {
-    width: 100%;
+	.episodes {
+		width: 100%;
 
-    ul {
-      display: flex;
-      flex-flow: column;
-      list-style: none;
-      gap: 20px;
-    }
-  }
+		ul {
+			display: flex;
+			flex-flow: column;
+			list-style: none;
+			gap: 20px;
+		}
+	}
 
-  ul.seasons {
-    display: flex;
-    flex-flow: column;
-    list-style: none;
-    gap: 8px;
-    min-width: fit-content;
-    height: 100vh;
-    overflow: auto;
-    position: sticky;
-    top: 0px;
-    transition: top 200ms ease-in-out;
+	ul.seasons {
+		display: flex;
+		flex-flow: column;
+		list-style: none;
+		gap: 8px;
+		min-width: fit-content;
+		height: 100vh;
+		overflow: auto;
+		position: sticky;
+		top: 0px;
+		transition: top 200ms ease-in-out;
 
-    button {
-      display: flex;
-      flex-flow: row;
-      flex-wrap: wrap;
-      gap: 0 18px;
-      align-items: center;
-      padding: 10px;
-      border: 2px solid #302d2d;
-      border-radius: 8px;
-      cursor: pointer;
-      max-width: 220px;
-      transition: background-color 100ms ease;
+		button {
+			display: flex;
+			flex-flow: row;
+			gap: 0 18px;
+			align-items: center;
+			border: 2px solid #302d2d;
+			border-radius: 8px;
+			padding: 4px 8px;
+			cursor: pointer;
+			min-width: 160px;
+			max-width: 220px;
+			transition: background-color 100ms ease;
 
-      &:first-of-type {
-        margin-top: 10px;
-      }
+			& > div {
+				&:first-of-type {
+					display: flex;
+					flex-flow: column;
+				}
 
-      h1 {
-        font-size: 18px;
-        font-family: sans-serif;
-      }
+				&:last-of-type {
+					display: flex;
+					flex-flow: column;
+					margin-left: auto;
+					margin-bottom: auto;
+					padding-top: 5px;
+				}
+			}
 
-      h2 {
-        font-size: 12px;
-        font-family: sans-serif;
-        margin-left: auto;
-      }
+			&:first-of-type {
+				margin-top: 10px;
+			}
 
-      &:hover,
-      &.active {
-        color: white;
-        background-color: black;
-      }
+			.season-name {
+				text-align: left;
+			}
 
-      &.active {
-        position: sticky;
-        top: 10px;
-        bottom: 10px;
-      }
-    }
+			.season-name,
+			.season-episodes {
+				margin-right: auto;
+			}
 
-    /* hack to get extra scroll space under last el */
-    .last {
-      padding: 1px;
-    }
-  }
+			.season-date,
+			.season-status {
+				margin-left: auto;
+			}
 
-  .episodes-topbar {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 20px;
-    min-height: 40px;
+			.season-episodes {
+				color: $text-color-accent;
+			}
 
-    div {
-      transition: width 100ms ease;
+			.season-status {
+				fill: $text-color;
 
-      &:first-of-type {
-        margin-left: auto;
-      }
+				:global(svg) {
+					width: 20px;
+					height: 20px;
+				}
+			}
 
-      &.rating {
-        height: 40px;
-        min-height: 40px;
-      }
+			h1 {
+				font-size: 18px;
+			}
 
-      &.status {
-        width: 45px;
-        min-height: 40px;
-        height: 40px;
-        overflow: visible;
-      }
-    }
-  }
+			h2 {
+				font-size: 12px;
+			}
 
-  @media screen and (min-width: 960px) {
-    :global(body.nav-shown) ul.seasons {
-      top: $nav-height;
-      height: calc(100vh - $nav-height);
-    }
-  }
+			h1,
+			h2 {
+				font-family: sans-serif;
+			}
 
-  @media screen and (max-width: 960px) {
-    .ctr {
-      flex-flow: column;
-    }
+			&:hover,
+			&.active {
+				color: $bg-color;
+				background-color: $text-color;
 
-    ul.seasons {
-      flex-flow: row;
-      flex-wrap: wrap;
-      position: unset;
-      height: unset;
-      justify-content: center;
+				.season-status {
+					fill: $bg-color;
+				}
 
-      button {
-        &:first-of-type {
-          margin-top: unset;
-        }
-        &.active {
-          position: unset;
-        }
-      }
-    }
-  }
+				.season-episodes {
+					color: $bg-color-accent;
+				}
+			}
+
+			&.active {
+				position: sticky;
+				top: 10px;
+				bottom: 10px;
+
+				.season-status {
+					fill: $bg-color;
+				}
+			}
+		}
+
+		/* hack to get extra scroll space under last el */
+		.last {
+			padding: 1px;
+		}
+	}
+
+	.episodes-topbar {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		margin-bottom: 20px;
+		min-height: 40px;
+
+		div {
+			transition: width 100ms ease;
+
+			&:first-of-type {
+				margin-left: auto;
+			}
+
+			&.rating {
+				height: 40px;
+				min-height: 40px;
+			}
+
+			&.status {
+				width: 45px;
+				min-height: 40px;
+				height: 40px;
+				overflow: visible;
+			}
+		}
+	}
+
+	@media screen and (min-width: 960px) {
+		:global(body.nav-shown) ul.seasons {
+			top: $nav-height;
+			height: calc(100vh - $nav-height);
+		}
+	}
+
+	@media screen and (max-width: 960px) {
+		.ctr {
+			flex-flow: column;
+		}
+
+		:global(body.nav-shown) ul.seasons {
+			top: $nav-height;
+		}
+
+		ul.seasons {
+			flex-flow: row;
+			flex-wrap: nowrap;
+			position: unset;
+			height: unset;
+			justify-content: unset;
+			overflow: auto;
+			min-width: unset;
+			position: sticky;
+			top: 0px;
+			padding: 10px 0;
+			z-index: 5;
+			@include nav-blur;
+
+			button {
+				&:first-of-type {
+					margin-top: unset;
+				}
+				&.active {
+					position: unset;
+				}
+			}
+		}
+	}
 </style>