docker/ui-build: Add doc link to readme

Was going to version doc, but never did and don't want to anymore.. doc site will only support latest version of watcharr.

If anyone needs an older version for any reason, can always browse through them in specific git tag.

.dockerignore

@@ -0,0 +1,3 @@
+# Docker dev volume
+container_data/
+data/

.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/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,4 +1,6 @@
+#
 # Backend
+#
 FROM golang:1.22-alpine AS server
 
 WORKDIR /server
@@ -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,41 +18,43 @@ 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>
 
 # Set Up
 
-[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.
+[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 [compose.yml](./compose.yml) file is your friend.
 
 # Community Made Tools
 
@@ -69,3 +71,7 @@ Thanks to anyone that has made a script or tool for Watcharr. Feel free to add y
 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).

compose.dev.ui-replace.yml

@@ -0,0 +1,24 @@
+# This compose file will replace watcharrs
+# built in UI with a custom one provided in
+# a named volume (for use with ui-build image).
+
+services:
+  watcharr:
+    # We dont need to build here too for testing if
+    # a custom ui works, so using latest prod image.
+    image: ghcr.io/sbondco/watcharr:latest
+    container_name: watcharr
+    ports:
+      - 3080:3080
+    volumes:
+      - ./container_data:/data
+      - type: volume
+        source: watcharr-ui
+        target: /ui
+        volume:
+          nocopy: true
+          subpath: build
+
+volumes:
+  watcharr-ui:
+    external: true

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/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/installation/docker-compose-subpath.md

@@ -0,0 +1,104 @@
+---
+sidebar_position: 2
+description: Install and setup with Docker Compose for access through a subpath.
+---
+
+# Docker Compose (subpath)
+
+Install and setup with Docker Compose for access through a subpath.
+
+:::info Not a great experience at the moment!
+
+Currently, hosting Watcharr via a subpath on your server is not very easy (unlike hosting under a subdomain). Hopefully this will change in the future, but as a temporary measure to at least allow hosting under a subpath, this method has been provided.
+
+The following issue will continue to track this: https://github.com/sbondCo/Watcharr/issues/312
+
+:::
+
+## Installing
+
+### Build UI
+
+First we have to build the frontend with our subpath provided as an environment variable.
+
+If you don't want to use `/watcharr` as your subpath, replace the value of `WATCHARR_BASE` before running the command.
+
+```bash
+docker run -e WATCHARR_BASE=/watcharr -v watcharr-ui:/ui --rm ghcr.io/sbondco/watcharr-ui-build:latest
+```
+
+Once the container has finished running the build script, it will exit and remove itself. The `watcharr-ui` volume will contain the built files.
+
+### Install Watcharr
+
+Now we can install Watcharr. You can copy the example below to get started:
+
+```yaml title="compose.yml"
+services:
+  watcharr:
+    # The :latest tag is used for simplicity, it is recommended
+    # to use an actual version, then when updating check the releases for changelogs.
+    image: ghcr.io/sbondco/watcharr:latest
+    container_name: watcharr
+    ports:
+      - 3080:3080
+    volumes:
+      # Contains all of watcharr data (database & cache)
+      - ./data:/data
+      # Use our volume containing built ui files
+      # instead of default ui included in image.
+      - type: volume
+        source: watcharr-ui
+        target: /ui
+        volume:
+          nocopy: true
+          subpath: build
+    restart: unless-stopped
+
+volumes:
+  watcharr-ui:
+    external: true
+```
+
+:::danger first account
+
+When **first** running Watcharr, make sure only you have access. The first user created will become admin.
+
+:::
+
+You can now start `Watcharr` like so:
+
+```bash
+docker compose up -d
+```
+
+If you didn't change the ports in the example, the server will be available at [http://localhost:3080/](http://localhost:3080/).
+
+## Updating
+
+:::danger Take care
+
+We try taking care as to not release breaking changes, however it is still recommended that
+you lookover changelogs before updating!
+
+Breaking changes are marked at the top of releases: https://github.com/sbondCo/Watcharr/releases
+
+:::
+
+1. Update your built ui files by following the [Build UI](#build-ui) step again.
+
+2. Update the `image` version in your `compose.yml` file.
+   Skip this step if you are using the `latest` tag.
+
+   ```yaml
+   # eg. update v1.19.0 to v1.20.0 (or whatever version you are updating to)
+   image: ghcr.io/sbondco/watcharr:v1.19.0
+   ```
+
+3. Pull the new changes and re-create your container:
+
+   ```bash
+   docker compose pull && docker compose down && docker compose up -d
+   ```
+
+And that is it!

doc/docs/installation/docker-compose.md

@@ -9,7 +9,7 @@ description: Install and setup with Docker Compose.
 
 Installing Watcharr with a docker compose file is easy. You can copy the example below to get started:
 
-```yaml title="docker-compose.yml"
+```yaml title="compose.yml"
 services:
   watcharr:
     # The :latest tag is used for simplicity, it is recommended
@@ -51,7 +51,7 @@ Breaking changes are marked at the top of releases: https://github.com/sbondCo/W
 
 Updating your server can be done in two steps:
 
-1. Update the `image` version in your `docker-compose.yml` file.
+1. Update the `image` version in your `compose.yml` file.
    Skip this step if you are using the `latest` tag.
 
    ```yaml

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/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,101 @@ 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",
+					},
+					{
+						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;
 }

docker/README.md

@@ -0,0 +1,3 @@
+This folder is for any _extra_ images that we produce.
+
+The main watcharr Dockerfile remains in project root.

docker/ui-build/Dockerfile

@@ -0,0 +1,16 @@
+#
+# Frontend
+#
+FROM node:20-alpine AS ui
+
+COPY ./docker/ui-build/entrypoint.sh /entrypoint.sh
+RUN ["chmod", "+x", "/entrypoint.sh"]
+
+WORKDIR /app
+COPY package*.json vite.config.ts svelte.config.js tsconfig.json ./
+COPY ./src ./src
+COPY ./static ./static
+
+VOLUME /ui
+
+ENTRYPOINT ["/entrypoint.sh"]

docker/ui-build/README.md

@@ -0,0 +1,7 @@
+Image for building watcharr ui.
+
+Accepts environment variables:
+
+- `WATCHARR_BASE`
+
+https://watcharr.app/docs/installation/docker-compose-subpath

docker/ui-build/compose.dev.yml

@@ -0,0 +1,15 @@
+# To test prod
+services:
+  watcharr-ui-build:
+    build:
+      context: ../../
+      dockerfile: ./docker/ui-build/Dockerfile
+    container_name: watcharr-ui-build
+    volumes:
+      - watcharr-ui:/ui
+    environment:
+      WATCHARR_BASE: "/sp"
+
+volumes:
+  watcharr-ui:
+    name: "watcharr-ui"

docker/ui-build/entrypoint.sh

@@ -0,0 +1,25 @@
+#!/bin/sh
+
+# This is loosely based on the main containers Dockerfile commands.
+# Just everything needed to get ui built and ready and nothing else.
+
+set -x
+
+echo "wuib: Starting build"
+
+# Install all deps
+/usr/local/bin/npm install
+
+# Run build
+/usr/local/bin/npm run build
+
+# Remove any existing build files from volume
+rm -rf /ui/build
+
+# Move build folder to /ui
+mv /app/build /ui
+# Move package.json and lock file to /ui/build for final npm ci call
+mv /app/package.json /app/package-lock.json /ui/build
+
+# cd to build files final destination and install dependencies for production
+cd /ui/build && /usr/local/bin/npm ci --omit=dev --ignore-scripts=true

package.json

@@ -1,41 +1,42 @@
 {
-  "name": "watcharr",
-  "version": "1.42.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.24",
-    "@types/papaparse": "^5.3.14",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@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.41.0",
-    "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.3",
-    "svelte": "^4.2.17",
-    "svelte-check": "^3.8.5",
-    "svelte-eslint-parser": "^0.39.2",
-    "svelte-preprocess": "^6.0.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.5.4",
-    "vite": "^5.2.11"
-  },
-  "type": "module",
-  "dependencies": {
-    "axios": "^1.7.4",
-    "blurhash": "^2.0.5",
-    "papaparse": "^5.4.1"
-  }
+	"name": "watcharr",
+	"version": "2.0.2",
+	"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.16.0",
+		"@types/papaparse": "^5.3.15",
+		"@typescript-eslint/eslint-plugin": "^8.18.2",
+		"@typescript-eslint/parser": "^8.18.2",
+		"@vite-pwa/sveltekit": "^0.6.6",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.45.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"sass": "^1.83.0",
+		"svelte": "^5.17.3",
+		"svelte-check": "^4.1.3",
+		"svelte-eslint-parser": "^0.42.0",
+		"svelte-preprocess": "^6.0.3",
+		"typescript": "^5.7.2",
+		"vite": "^6.0.7"
+	},
+	"type": "module",
+	"dependencies": {
+		"axios": "^1.7.4",
+		"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
@@ -96,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.
@@ -156,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 {
@@ -202,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)
@@ -582,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())
 		}
@@ -304,6 +306,33 @@ func searchPeople(query string, pageNum int) (TMDBSearchPeopleResponse, error) {
 	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

@@ -4,53 +4,53 @@ go 1.22
 
 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.3
 	github.com/gin-gonic/gin v1.10.0
-	github.com/go-co-op/gocron/v2 v2.11.0
+	github.com/go-co-op/gocron/v2 v2.14.2
 	github.com/golang-jwt/jwt/v5 v5.2.1
 	github.com/joho/godotenv v1.5.1
-	golang.org/x/crypto v0.26.0
+	golang.org/x/crypto v0.32.0
 	gopkg.in/natefinch/lumberjack.v2 v2.2.1
-	gorm.io/driver/sqlite v1.5.6
-	gorm.io/gorm v1.25.11
+	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/bytedance/sonic v1.12.6 // indirect
+	github.com/bytedance/sonic/loader v0.2.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/gabriel-vasile/mimetype v1.4.7 // indirect
 	github.com/gin-contrib/sse v0.1.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/go-playground/validator/v10 v10.23.0 // indirect
+	github.com/goccy/go-json v0.10.4 // indirect
+	github.com/gomodule/redigo v1.9.2 // 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/json-iterator/go v1.1.12 // indirect
-	github.com/klauspost/cpuid/v2 v2.2.7 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.9 // 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.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/arch v0.12.0 // indirect
 	golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8 // indirect
-	golang.org/x/net v0.25.0 // indirect
-	golang.org/x/sys v0.23.0 // indirect
-	golang.org/x/text v0.17.0 // indirect
-	google.golang.org/protobuf v1.34.1 // indirect
+	golang.org/x/net v0.33.0 // indirect
+	golang.org/x/sys v0.29.0 // indirect
+	golang.org/x/text v0.21.0 // indirect
+	google.golang.org/protobuf v1.36.1 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

server/go.sum

@@ -2,10 +2,11 @@ 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.12.6 h1:/isNmCUF2x3Sh8RAp/4mh4ZGkcFAX/hLrzrK3AvpRzk=
+github.com/bytedance/sonic v1.12.6/go.mod h1:B8Gt/XvtZ3Fqj+iSKMypzymZxw/FVwgIGKzMzT9r/rk=
 github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/bytedance/sonic/loader v0.2.1 h1:1GgorWTqf12TA8mma4DDSbaQigE2wOgQo7iCjjJv3+E=
+github.com/bytedance/sonic/loader v0.2.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=
@@ -13,32 +14,32 @@ github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQ
 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/gabriel-vasile/mimetype v1.4.7 h1:SKFKl7kD0RiPdbht0s7hFtjl489WcQ1VyPW8ZzUMYCA=
+github.com/gabriel-vasile/mimetype v1.4.7/go.mod h1:GDlAgAyIRT27BhFl53XNAFtfjzOkLaF35JdEG0P7LtU=
+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.3 h1:hV+a5xp8hwJoTw7OY+a70FsL8JkVVFTXw9EcfrYUdns=
+github.com/gin-contrib/cors v1.7.3/go.mod h1:M3bcKZhxzsvI+rlRSkkxHyljJt1ESd93COUvemZ79j4=
 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/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.11.0 h1:IOowNA6SzwdRFnD4/Ol3Kj6G2xKfsoiiGq2Jhhm9bvE=
-github.com/go-co-op/gocron/v2 v2.11.0/go.mod h1:xY7bJxGazKam1cz04EebrlP4S9q4iWdiAylMGP3jY9w=
+github.com/go-co-op/gocron/v2 v2.14.2 h1:S6CbI7MVfD3S/aPJNLoSg2YcGyEqzEMwUopDejuT4Oc=
+github.com/go-co-op/gocron/v2 v2.14.2/go.mod h1:ZF70ZwEqz0OO4RBXE1sNxnANy/zvwLcattWEFsqpKig=
 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/go-playground/validator/v10 v10.23.0 h1:/PwmTwZhS0dPkav3cdK9kV1FsAmrL8sThn8IHr/sO+o=
+github.com/go-playground/validator/v10 v10.23.0/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
+github.com/goccy/go-json v0.10.4 h1:JSwxQzIqKfmFX1swYPpUThQZp/Ka4wzJdK0LWVytLPM=
+github.com/goccy/go-json v0.10.4/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 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/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=
@@ -55,8 +56,8 @@ github.com/jonboulle/clockwork v0.4.0/go.mod h1:xgRqUGwRcjKCO1vbZUEtSLrqKoPSsUpK
 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.9 h1:66ze0taIn2H33fBvCkXuv9BmCwDfafmiIVpKV9kKGuY=
+github.com/klauspost/cpuid/v2 v2.2.9/go.mod h1:rqkxqrZ1EhYM9G+hXH7YdowN5R5RGN6NK4QwQ3WMXF8=
 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=
@@ -75,8 +76,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=
@@ -88,38 +89,34 @@ github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6po
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
-github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 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.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
-golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
+golang.org/x/arch v0.12.0 h1:UsYJhbzPYGsT0HbEdmYcqtCv8UNGvnaL561NnIUvaKg=
+golang.org/x/arch v0.12.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
+golang.org/x/crypto v0.32.0 h1:euUpcYgM8WcP71gNpTqQCn6rC2t6ULUPiOzfWaXVVfc=
+golang.org/x/crypto v0.32.0/go.mod h1:ZnnJkOaASj8g0AjIduWNlq2NRxL0PlBrbKVyZ6V/Ugc=
 golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8 h1:yixxcjnhBmY0nkL253HFVIm0JsFHwrHdT3Yh6szTnfY=
 golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8/go.mod h1:jj3sYF3dwk5D+ghuXyeI3r5MFf+NT2An6/9dOA95KSI=
-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/net v0.33.0 h1:74SYHlV8BIgHIFC/LrYkOGIwL19eTYXQ5wc6TBuO36I=
+golang.org/x/net v0.33.0/go.mod h1:HXLR5J+9DxmrqMwG9qjGCxZ+zKXxBru04zlTvWlWuN4=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.23.0 h1:YfKFowiIMvtgl1UERQoTPPToxltDeZfbj4H7dVUCwmM=
-golang.org/x/sys v0.23.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.17.0 h1:XtiM5bkSOt+ewxlOE/aE/AKEHibwj/6gvWMl9Rsh0Qc=
-golang.org/x/text v0.17.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
-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.29.0 h1:TPYlXGxvx1MGTn2GiZDhnjPA9wZzZeGKHHmKhHYvgaU=
+golang.org/x/sys v0.29.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
+golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
+google.golang.org/protobuf v1.36.1 h1:yBPeRvTftaleIgM3PZ/WBIZ7XM/eEYAaEyCwvyjq/gk=
+google.golang.org/protobuf v1.36.1/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
 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 +125,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.6 h1:fO/X46qn5NUEEOZtnjJRWRzZMe8nqJiQ9E+0hi+hKQE=
-gorm.io/driver/sqlite v1.5.6/go.mod h1:U+J8craQU6Fzkcvu8oLeAQmi50TkwPEhHDEjQZXDah4=
-gorm.io/gorm v1.25.11 h1:/Wfyg1B/je1hnDx3sMkX+gAlxrlZpn6X0BXRlwXlvHg=
-gorm.io/gorm v1.25.11/go.mod h1:xh7N7RHfYlNc5EmcI/El95gXusucDrQnHXe0+CgWcLQ=
+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" binding:"max=10"`
+	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,6 +72,51 @@ func importContent(db *gorm.DB, userId uint, ar ImportRequest) (ImportResponse,
 			return successfulImport(db, userId, cr.ID, SHOW, ar)
 		}
 	}
+	// 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 {
@@ -228,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

@@ -310,7 +310,7 @@ func startTraktImport(db *gorm.DB, jobId string, userId uint, traktUsername stri
 						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 = int8(v.Rating)
+					mv.Rating = float64(v.Rating)
 					toImport[mapKey] = mv
 				}
 			} else {

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,8 +80,9 @@ func (b *BaseRouter) addContentRoutes() {
 	exp := time.Hour * 24
 
 	// Search for content
-	content.GET("/search/multi/:query", cache.CachePage(b.ms, exp, func(c *gin.Context) {
-		if c.Param("query") == "" {
+	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
 		}
@@ -94,7 +96,7 @@ func (b *BaseRouter) addContentRoutes() {
 			}
 			pageNum = num
 		}
-		content, err := searchContent(c.Param("query"), pageNum)
+		content, err := searchContent(query, pageNum)
 		if err != nil {
 			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 			return
@@ -103,8 +105,9 @@ func (b *BaseRouter) addContentRoutes() {
 	}))
 
 	// Search for movies
-	content.GET("/search/movie/:query", cache.CachePage(b.ms, exp, func(c *gin.Context) {
-		if c.Param("query") == "" {
+	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
 		}
@@ -118,7 +121,7 @@ func (b *BaseRouter) addContentRoutes() {
 			}
 			pageNum = num
 		}
-		content, err := searchMovies(c.Param("query"), pageNum)
+		content, err := searchMovies(query, pageNum)
 		if err != nil {
 			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 			return
@@ -127,8 +130,9 @@ func (b *BaseRouter) addContentRoutes() {
 	}))
 
 	// Search for shows
-	content.GET("/search/tv/:query", cache.CachePage(b.ms, exp, func(c *gin.Context) {
-		if c.Param("query") == "" {
+	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
 		}
@@ -142,7 +146,7 @@ func (b *BaseRouter) addContentRoutes() {
 			}
 			pageNum = num
 		}
-		content, err := searchTv(c.Param("query"), pageNum)
+		content, err := searchTv(query, pageNum)
 		if err != nil {
 			c.JSON(http.StatusBadRequest, ErrorResponse{Error: err.Error()})
 			return
@@ -151,8 +155,9 @@ func (b *BaseRouter) addContentRoutes() {
 	}))
 
 	// Search for people
-	content.GET("/search/person/:query", cache.CachePage(b.ms, exp, func(c *gin.Context) {
-		if c.Param("query") == "" {
+	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
 		}
@@ -166,7 +171,21 @@ func (b *BaseRouter) addContentRoutes() {
 			}
 			pageNum = num
 		}
-		content, err := searchPeople(c.Param("query"), pageNum)
+		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
@@ -231,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)
@@ -241,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)
 	})
 
@@ -352,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
@@ -719,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
@@ -736,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)
@@ -909,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
@@ -1069,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)

server/tags.go

@@ -54,6 +54,24 @@ func getTags(db *gorm.DB, userId uint) ([]Tag, error) {
 // 	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 == "" {

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,86 +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 {
-	Page    int `json:"page"`
-	Results []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.
-	} `json:"results"`
-	TotalPages   int `json:"total_pages"`
-	TotalResults int `json:"total_results"`
+	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 {
-	Page    int `json:"page"`
-	Results []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.
-	} `json:"results"`
-	TotalPages   int `json:"total_pages"`
-	TotalResults int `json:"total_results"`
+	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 {
-	Page    int `json:"page"`
-	Results []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"`
-	} `json:"results"`
-	TotalPages   int `json:"total_pages"`
-	TotalResults int `json:"total_results"`
+	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

@@ -95,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,
 	}))

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"`
@@ -40,11 +43,14 @@ type Watched struct {
 	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"`
@@ -55,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"`
@@ -98,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)
@@ -240,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.
@@ -258,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
 }

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

@@ -1,25 +1,33 @@
 <!-- Uses Native Color Input -->
 
 <script lang="ts">
-  export let value = "#000000";
-  export let style = "";
+	interface Props {
+		value?: string;
+		style?: string;
+	}
+
+	let { value = $bindable("#000000"), style = "" }: Props = $props();
 </script>
 
-<button class="plain" style={`background-color: ${value};${style}`}>
-  <input type="color" bind:value />
+<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;
-  }
+	button {
+		width: 100%;
+		height: 100%;
+		border-radius: 10px;
+		outline: 1px solid $accent-color;
+		cursor: pointer;
+	}
 
-  input {
-    opacity: 0;
-    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}
-          {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,44 +1,48 @@
 <script lang="ts">
-  export let pretty: string;
-  export let error: any;
-  export let onRetry: () => void | undefined = undefined!;
+	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}
-    {#if onRetry}
-      <button on:click={onRetry}>Try Again</button>
-    {/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

@@ -1,212 +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 { watchedList } from "@/store";
+	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";
 
-  export let modalTitle: string;
-  // Promise that returns the job id to watch.
-  export let getJobId: () => Promise<{ jobId: string } | undefined>;
-  export let onClose: () => void;
-  export let messages: {
-    starting: string;
-  };
+	interface Props {
+		modalTitle: string;
+		// Promise that returns the job id to watch.
+		getJobId: () => Promise<{ jobId: string } | undefined>;
+		onClose: () => void;
+		messages: {
+			starting: string;
+		};
+	}
 
-  let step: "starting" | "errored" | "job-running" | "done" | "modal-closing" = "starting";
-  let jobId: string | undefined;
-  let currentTask: string | undefined;
-  let latestJobStatus: GetJobResponse | undefined;
-  let jobFailError: string | undefined;
+	let { modalTitle, getJobId, onClose, messages }: Props = $props();
 
-  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);
-    }
-  }
+	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 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) {
-          watchedList.update((wl) => (wl = 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" });
-      }
-    }
-  }
+	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);
+		}
+	}
 
-  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();
-  }
+	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",
+				});
+			}
+		}
+	}
 
-  onMount(() => {
-    startSync();
-  });
+	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();
+	}
 
-  onDestroy(() => {
-    step = "starting";
-    jobId = undefined;
-    currentTask = undefined;
-    latestJobStatus = undefined;
-  });
+	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>
+	<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;
+	.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;
+		& > div:last-of-type {
+			display: flex;
+			flex-flow: column;
+			gap: 8px;
+			padding: 8px 0;
 
-      & > span {
-        font-style: italic;
+			& > span {
+				font-style: italic;
 
-        &::first-letter {
-          text-transform: uppercase;
-        }
-      }
+				&::first-letter {
+					text-transform: uppercase;
+				}
+			}
 
-      & > ul {
-        padding-left: 25px;
+			& > ul {
+				padding-left: 25px;
 
-        li::first-letter {
-          text-transform: uppercase;
-        }
-      }
-    }
-  }
+				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,97 +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";
-  export let error: string | undefined = 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.
+	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}
-    {#if error}
-      <span class="error">{error}</span>
-    {/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;
-      }
-    }
-  }
+			.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>