Minor improvements and code cleanup across components

- Refactor PlexSettings component for better organization
- Add utility functions to utils.ts for shared logic
- Update API methods for improved error handling
- Clean up navigation icon components
- Remove unused code from CommandPalette and SeasonedButton
- Fix minor issues in Movie popup component
- Update page component imports (RegisterPage, TorrentsPage)

.drone.yml

@@ -0,0 +1,112 @@
+---
+kind: pipeline
+type: docker
+name: seasoned build
+
+platform:
+  os: linux
+  arch: amd64
+
+volumes:
+  - name: cache
+    host:
+      path: /tmp/cache
+
+steps:
+  - name: Load cached frontend packages
+    image: sinlead/drone-cache:1.0.0
+    settings:
+      action: load
+      key: yarn.lock
+      mount: node_modules
+      prefix: yarn-modules-seasoned
+    volumes:
+      - name: cache
+        path: /cache
+
+  - name: Frontend install
+    image: node:24.13.1
+    commands:
+      - node -v
+      - yarn --version
+      - yarn
+
+  - name: Cache frontend packages
+    image: sinlead/drone-cache:1.0.0
+    settings:
+      action: save
+      key: yarn.lock
+      mount: node_modules
+      prefix: yarn-modules-seasoned
+    volumes:
+      - name: cache
+        path: /cache
+
+  - name: Lint project using eslint
+    image: node:24.13.1
+    commands:
+      - yarn lint
+    failure: ignore
+
+  - name: Frontend build
+    image: node:24.13.1
+    commands:
+      - yarn build
+    environment:
+      ELASTIC:
+        from_secret: ELASTIC
+      ELASTIC_INDEX:
+        from_secret: ELASTIC_INDEX
+      SEASONED_API:
+        from_secret: SEASONED_API
+      SEASONED_DOMAIN:
+        from_secret: SEASONED_DOMAIN
+
+  - name: Build and publish docker image
+    image: plugins/docker
+    settings:
+      registry: ghcr.io
+      repo: ghcr.io/kevinmidboe/seasoned
+      dockerfile: Dockerfile
+      username:
+        from_secret: GITHUB_USERNAME
+      password:
+        from_secret: GITHUB_PASSWORD
+      tags: latest
+    when:
+      event:
+        - push
+      branch:
+        - master
+
+  - name: deploy
+    image: appleboy/drone-ssh
+    pull: true
+    secrets:
+      - ssh_key
+    when:
+      event:
+        - push
+      branch:
+        - master
+        - drone-test
+      status: success
+    settings:
+      host: 10.0.0.54
+      username: root
+      key:
+        from_secret: ssh_key
+      command_timeout: 600s
+      script:
+        - /home/kevin/deploy/seasoned.sh
+
+trigger:
+  event:
+    include:
+      - push
+      # - pull_request
+---
+kind: signature
+hmac: 6f10b2871d2bd6b5cd26ddf72796325991ba211ba1eb62b657baf993e9d549c8
+
+...

.env.example

@@ -0,0 +1,3 @@
+SEASONED_API=http://localhost:31459
+ELASTIC_URL=http://elastic.local:9200/tmdb-movies-shows
+ELASTIC_API_KEY=

.gitignore

@@ -1,8 +1,10 @@
 # config file - copy config.json.example
 src/config.json
+.env
 
 # Build directory
 dist/
+lib/
 
 # Node packages
 node_modules/

.htaccess

@@ -1,8 +0,0 @@
-<IfModule mod_rewrite.c>
-  RewriteEngine On
-  RewriteBase /
-  RewriteRule ^index\.html$ - [L]
-  RewriteCond %{REQUEST_FILENAME} !-f
-  RewriteCond %{REQUEST_FILENAME} !-d
-  RewriteRule . /index.html [L]
-</IfModule>

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "vueIndentScriptAndStyle": true,
+  "trailingComma": "none"
+}

Caddyfile

@@ -0,0 +1,31 @@
+{
+	# Disable automatic HTTPS
+	auto_https off
+}
+
+:8080 {
+    root * {$DIST_PATH:/usr/share/caddy}
+
+    file_server
+
+    encode gzip zstd
+
+    try_files {path} {path}/ /index.html
+
+    # Cache favicons aggressively
+    @favicons path /favicons/*
+    header @favicons Cache-Control "public, max-age=31536000, immutable"
+
+    # Cache static assets based on MIME type
+    @static {
+        header Content-Type application/javascript*
+        header Content-Type text/css*
+        header Content-Type image/*
+        header Content-Type font/*
+        header Content-Type application/font-*
+        header Content-Type application/woff*
+        header Content-Type application/json*
+    }
+
+    header @static Cache-Control "public, max-age=2592000, immutable"
+}

Dockerfile

@@ -0,0 +1,38 @@
+FROM node:24.13.1 AS build
+
+# Set the working directory for the build stage
+WORKDIR /app
+
+# Install dependencies
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Copy source files that the build depends on
+COPY index.html .
+COPY public/ public/
+COPY src/ src/
+COPY tsconfig.json vite.config.ts ./
+
+ARG SEASONED_API=http://localhost:31459
+ENV VITE_SEASONED_API=$SEASONED_API
+
+ARG ELASTIC_URL=http://elastic.local:9200/tmdb-movies-shows
+ENV VITE_ELASTIC_URL=$ELASTIC_URL
+ARG ELASTIC_API_KEY=
+ENV VITE_ELASTIC_API_KEY=$ELASTIC_API_KEY
+
+RUN yarn build
+
+FROM caddy:2.11-alpine
+
+COPY Caddyfile /etc/caddy/Caddyfile
+
+# Copy static files
+COPY public /usr/share/caddy
+
+# Copy the static build from the previous stage
+COPY --from=build /app/dist /usr/share/caddy
+
+EXPOSE 8080
+
+LABEL org.opencontainers.image.source https://github.com/kevinmidboe/seasoned

README.md

@@ -1,45 +1,72 @@
-# The Movie Database App
+# Seasoned Request
 
-A Vue.js project.
+Seasoned request is frontend vue application for searching, requesting and viewing account watch activity.
 
 ![](https://github.com/dmtrbrl/tmdb-app/blob/master/docs/demo.gif)
 
-## Demo
-
-[TMDB Vue App](https://tmdb-vue-app.herokuapp.com/)
-
 ## Config setup
-Set seasonedShows api endpoint and/or elastic.   
- - SeasonedShows [can be found here](https://github.com/kevinmidboe/seasonedshows) and is the matching backend to fetch tmdb search results, tmdb lists, request new content, check plex status and lets owner search and add torrents to download.
- - Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb.
 
-```json
+```bash
-{
+# make copy of example environment file
-  "SEASONED_URL": "http://localhost:31459/api",
+cp .env.example .env
-  "ELASTIC_URL": "http://localhost:9200"
-}
 ```
-*Set ELASTIC_URL to undefined or false to disable*
 
-## Build Setup
+```bash
+# .env sane default values
+SEASONED_API=
+ELASTIC=
+ELASTIC_INDEX=shows,movies
+SEASONED_DOMAIN=
+```
 
-``` bash
+- Leave SEASONED_API empty to request `/api` from same origin and proxy passed by nginx, set if hosting [seasonedShows backend api](https://github.com/KevinMidboe/seasonedShows) locally.
+- Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb, leave empty to disable.
+
+```bash
+# .env example values
+SEASONED_API=http://localhost:31459
+ELASTIC=http://localhost:9200
+ELASTIC_INDEX=shows,movies
+SEASONED_DOMAIN=request.movie
+```
+
+## Build Steps
+
+```bash
 # install dependencies
-npm install
+yarn
 
-# serve with hot reload at localhost:8080
+# build vue project using webpack
-npm run dev
+yarn build
 
-# build for production with minification
+# test or host built files using docker, might require sudo:
-npm run build
+docker build -t seasoned .
+docker run -d -p 5000:5000 --name seasoned-request --env-file .env seasoned
 ```
 
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
+## Development Steps
-This app uses [history mode](https://router.vuejs.org/en/essentials/history-mode.html)
+
+```bash
+# serve project with hot reloading at localhost:8080
+yarn dev
+```
+
+To proxy requests to `/api` either update `SEASONED_API` in `.env` or run set environment variable, e.g.:
+
+```bash
+# export and run
+export SEASONED_API=http://localhost:31459
+yarn dev
+
+# or run with environment variable inline
+SEASONED_API=http://localhost:31459 yarn dev
+```
 
 ## Documentation
+
 All api functions are documented in `/docs` and [found here](docs/api.md).  
 [html version also available](http://htmlpreview.github.io/?https://github.com/KevinMidboe/seasoned/blob/release/v2/docs/api/index.html)
 
 ## License
+
 [MIT](https://github.com/dmtrbrl/tmdb-app/blob/master/LICENSE)

eslint.config.mjs

@@ -0,0 +1,66 @@
+import path from "node:path";
+
+import { includeIgnoreFile } from "@eslint/compat";
+import js from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import { configs, plugins } from "eslint-config-airbnb-extended";
+import { rules as prettierConfigRules } from "eslint-config-prettier";
+import prettierPlugin from "eslint-plugin-prettier";
+
+const CUSTOM_RULES = {
+  "vue/no-v-model-argument": "off",
+  "no-underscore-dangle": "off",
+  "vue/multi-word-component-names": "off"
+};
+
+const gitignorePath = path.resolve(".", ".gitignore");
+
+// ESLint recommended config
+const jsConfig = defineConfig([
+  {
+    name: "js/config",
+    ...js.configs.recommended
+  },
+  plugins.stylistic,
+  plugins.importX,
+  ...configs.base.recommended // Airbnb base recommended config
+]);
+
+// Node & Airbnb recommended config
+const nodeConfig = defineConfig([plugins.node, ...configs.node.recommended]);
+
+// Typescript & Airbnb base TS config
+const typescriptConfig = defineConfig([
+  plugins.typescriptEslint,
+  ...configs.base.typescript
+  // rules.typescript.typescriptEslintStrict
+]);
+
+// Prettier config
+const prettierConfig = defineConfig([
+  {
+    name: "prettier/plugin/config",
+    plugins: {
+      prettier: prettierPlugin
+    }
+  },
+  {
+    name: "prettier/config",
+    rules: {
+      ...prettierConfigRules,
+      "prettier/prettier": "error"
+    }
+  }
+]);
+
+export default defineConfig([
+  // Ignore files and folders listed in .gitignore
+  includeIgnoreFile(gitignorePath),
+  ...jsConfig,
+  ...nodeConfig,
+  ...typescriptConfig,
+  ...prettierConfig,
+  {
+    rules: CUSTOM_RULES
+  }
+]);

package.json

@@ -1,44 +1,34 @@
 {
   "name": "seasoned-request",
   "description": "seasoned request app",
-  "version": "1.0.0",
+  "version": "1.22.17",
   "author": "Kevin Midboe",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
+    "dev": "NODE_ENV=development vite",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "build": "yarn vite build",
-    "start": "node server.js",
+    "lint": "eslint src; prettier -c src",
-    "docs": "documentation build src/api.js -f html -o docs/api && documentation build src/api.js -f md -o docs/api.md"
+    "clean": "rm -rf dist/ yarn-*.log 2>/dev/null",
+    "docs": "documentation build src/api.ts -f html -o docs/api && documentation build src/api.ts -f md -o docs/api.md"
   },
   "dependencies": {
-    "axios": "^0.18.1",
+    "chart.js": "3.9.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "vue": "3.5.28",
-    "connect-history-api-fallback": "^1.3.0",
+    "vue-router": "5.0.3",
-    "express": "^4.16.1",
+    "vuex": "4.1.0"
-    "vue": "^2.5.2",
-    "vue-axios": "^1.2.2",
-    "vue-data-tablee": "^0.12.1",
-    "vue-js-modal": "^1.3.16",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@eslint/compat": "^2.0.2",
-    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@eslint/js": "^10.0.1",
-    "@babel/preset-env": "^7.4.5",
+    "@types/node": "^25.3.0",
-    "@babel/runtime": "^7.4.5",
+    "@vitejs/plugin-vue": "^5.2.1",
-    "babel-loader": "^8.0.6",
+    "eslint": "^10.0.1",
-    "cross-env": "^3.0.0",
+    "eslint-config-airbnb-extended": "^3.0.1",
-    "css-loader": "^0.25.0",
+    "eslint-config-prettier": "^10.1.8",
-    "documentation": "^11.0.0",
+    "eslint-plugin-prettier": "^5.5.5",
-    "file-loader": "^0.9.0",
+    "prettier": "^3.8.1",
-    "node-sass": "^4.5.0",
+    "sass": "1.54.3",
-    "sass-loader": "^5.0.1",
+    "typescript": "5.9.3",
-    "schema-utils": "^2.4.1",
+    "vite": "^6.0.3"
-    "vue-loader": "^10.0.0",
-    "vue-svg-inline-loader": "^1.3.1",
-    "vue-template-compiler": "2.6.10",
-    "webpack": "^2.2.0",
-    "webpack-dev-server": "^2.2.0"
   }
 }

server.js

@@ -1,23 +0,0 @@
-var express = require('express');
-var path = require('path');
-const compression = require('compression')
-var history = require('connect-history-api-fallback');
-
-app = express();
-
-app.use(compression())
-app.use('/dist', express.static(path.join(__dirname + "/dist")));
-app.use('/dist', express.static(path.join(__dirname + "/dist/")));
-app.use('/favicons', express.static(path.join(__dirname + "/favicons")));
-app.use(history({
-    index: '/'
-}));
-
-var port = process.env.PORT || 5000;
-
-app.get('/', function(req, res) {
-    res.sendFile(path.join(__dirname + '/index.html'));
-});
-
-
-app.listen(port);

src/App.vue

@@ -1,159 +1,72 @@
 <template>
-  <div id="app">
+  <div id="content">
-
     <!-- Header and hamburger navigation -->
-    <navigation></navigation>
+    <NavigationHeader class="header" />
 
-    <!-- Header with search field -->
+    <div class="navigation-icons-gutter desktop-only">
-
+      <NavigationIcons />
-    <!-- TODO move this to the navigation component -->
+    </div>
-    <header class="header">
-      <search-input v-model="query"></search-input>
-    </header>
-
-    <!-- Movie popup that will show above existing rendered content -->
-    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
-
-
-    <darkmode-toggle />
 
     <!-- Display the component assigned to the given route (default: home) -->
-    <router-view class="content" :key="$route.fullPath"></router-view>
+    <router-view :key="router.currentRoute.value.path" class="content" />
 
+    <!-- Popup that will show above existing rendered content -->
+    <popup />
+
+    <!-- Command Palette -->
+    <command-palette />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import Vue from 'vue'
+  import { useRouter } from "vue-router";
-import Navigation from '@/components/Navigation'
+  import NavigationHeader from "@/components/header/NavigationHeader.vue";
-import MoviePopup from '@/components/MoviePopup'
+  import NavigationIcons from "@/components/header/NavigationIcons.vue";
-import SearchInput from '@/components/SearchInput'
+  import Popup from "@/components/Popup.vue";
-import DarkmodeToggle from '@/components/ui/darkmodeToggle'
+  import CommandPalette from "@/components/ui/CommandPalette.vue";
 
-export default {
+  const router = useRouter();
-  name: 'app',
-  components: {
-    Navigation,
-    MoviePopup,
-    SearchInput,
-    DarkmodeToggle
-  },
-  data() {
-    return {
-      query: '',
-      moviePopupIsVisible: false,
-      popupID: 0,
-      popupType: 'movie'
-    }
-  },
-  created(){
-    let that = this
-    Vue.prototype.$popup = {
-      get isOpen() {
-        return that.moviePopupIsVisible
-      },
-      open: (id, type) => {
-        this.popupID = id || this.popupID
-        this.popupType = type || this.popupType
-        this.moviePopupIsVisible = true
-        console.log('opened')
-      },
-      close: () => {
-        this.moviePopupIsVisible = false
-        console.log('closed')
-      }
-    }
-    console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
-  }
-}
 </script>
 
-<style lang="scss" scoped>
-@import "./src/scss/media-queries";
-@import "./src/scss/variables";
-.content {
-    @include tablet-min{
-    width: calc(100% - 95px);
-    margin-top: $header-size;
-    margin-left: 95px;
-    position: relative;
-  }
-}
-</style>
-
 <style lang="scss">
-// @import "./src/scss/main";
+  @import "scss/main";
-@import "./src/scss/variables";
+  @import "scss/media-queries";
-@import "./src/scss/media-queries";
 
-*{
+  #content {
-  box-sizing: border-box;
+    display: grid;
-}
+    grid-template-rows: var(--header-size);
-html {
+    grid-template-columns: var(--header-size) 100%;
-  height: 100%;
+
-}
+    @include mobile {
-body{
+      grid-template-columns: 1fr;
-  margin: 0;
-  padding: 0;
-  font-family: 'Roboto', sans-serif;
-  line-height: 1.6;
-  background: $background-color;
-  color: $text-color;
-  transition: background-color .5s ease, color .5s ease;
-  &.hidden{
-    overflow: hidden;
     }
-}
-h1,h2,h3 {
-  transition: color .5s ease;
-}
-a:any-link {
-  color: inherit;
-}
-input, textarea, button{
-  font-family: 'Roboto', sans-serif;
-}
-figure{
-  padding: 0;
-  margin: 0;
-}
-img{
-  display: block;
-  // max-width: 100%;
-  height: auto;
-}
 
-.no-scroll {
+    .header {
-  overflow: hidden;
-}
-
-.wrapper{
-  position: relative;
-}
-.header{
       position: fixed;
-  z-index: 15;
-  display: flex;
-  flex-direction: column;
-
-  @include tablet-min{
-    width: calc(100% - 170px);
-    margin-left: 95px;
-    border-top: 0;
-    border-bottom: 0;
       top: 0;
+      width: 100%;
+      z-index: 15;
     }
-}
 
-// router view transition
+    .navigation-icons-gutter {
-.fade-enter-active, .fade-leave-active {
+      position: fixed;
-  transition-property: opacity;
+      height: 100vh;
-  transition-duration: 0.25s;
+      margin: 0;
-}
+      top: var(--header-size);
-.fade-enter-active {
+      width: var(--header-size);
-  transition-delay: 0.25s;
+      background-color: var(--background-color-secondary);
-}
+    }
-.fade-enter, .fade-leave-active {
+
-  opacity: 0
+    .content {
-}
+      display: grid;
+      grid-column: 2 / 3;
+      width: calc(100% - var(--header-size));
+      grid-row: 2;
+
+      @include mobile {
+        grid-column: 1 / 3;
+        width: 100%;
+      }
+    }
+  }
 </style>

src/api.js

@@ -1,316 +0,0 @@
-import axios from 'axios'
-import storage from '@/storage'
-import config from '@/config.json'
-import path from 'path'
-
-const SEASONED_URL = config.SEASONED_URL
-const ELASTIC_URL = config.ELASTIC_URL
-const ELASTIC_INDEX = config.ELASTIC_INDEX
-
-// TODO
-//  - Move autorization token and errors here?
-
-// - - - TMDB - - - 
-
-/**
- * Fetches tmdb movie by id. Can optionally include cast credits in result object.
- * @param {number} id
- * @param {boolean} [credits=false] Include credits
- * @returns {object} Tmdb response
- */
-const getMovie = (id, credits=false) => {
-  const url = new URL('v2/movie', SEASONED_URL)
-  url.pathname = path.join(url.pathname, id.toString())
-  if (credits) {
-    url.searchParams.append('credits', true)
-  }
-
-  return fetch(url.href)
-    .then(resp => resp.json())
-    .catch(error => { console.error(`api error getting movie: ${id}`); throw error })
-}
-
-/**
- * Fetches tmdb show by id. Can optionally include cast credits in result object.
- * @param {number} id
- * @param {boolean} [credits=false] Include credits
- * @returns {object} Tmdb response
- */
-const getShow = (id, credits=false) => {
-  const url = new URL('v2/show', SEASONED_URL)
-  url.pathname = path.join(url.pathname, id.toString())
-  if (credits) {
-    url.searchParams.append('credits', true)
-  }
-
-  return fetch(url.href)
-    .then(resp => resp.json())
-    .catch(error => { console.error(`api error getting show: ${id}`); throw error })
-}
-
-/**
- * Fetches tmdb list by name.
- * @param {string} name List the fetch
- * @param {number} [page=1]
- * @returns {object} Tmdb list response
- */
-const getTmdbMovieListByName = (name, page=1) => {
-  const url = new URL('v2/movie/' + name, SEASONED_URL)
-  url.searchParams.append('page', page)
-  const headers = { authorization: storage.token }
-
-  return fetch(url.href, { headers: headers })
-    .then(resp => resp.json())
-    // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error })
-}
-
-/**
- * Fetches requested items.
- * @param {number} [page=1]
- * @returns {object} Request response
- */
-const getRequests = (page=1) => {
-  const url = new URL('v2/request', SEASONED_URL)
-  url.searchParams.append('page', page)
-  const headers = { authorization: storage.token }
-
-  return fetch(url.href, { headers: headers })
-    .then(resp => resp.json())
-    // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error })
-}
-
-
-const getUserRequests = (page=1) => {
-  const url = new URL('v1/user/requests', SEASONED_URL)
-  url.searchParams.append('page', page)
-
-  const headers = { authorization: localStorage.getItem('token') }
-
-  return fetch(url.href, { headers })
-    .then(resp => resp.json())
-}
-
-/**
- * Fetches tmdb movies and shows by query.
- * @param {string} query
- * @param {number} [page=1]
- * @returns {object} Tmdb response
- */
-const searchTmdb = (query, page=1) => {
-  const url = new URL('v2/search', SEASONED_URL)
-  url.searchParams.append('query', query)
-  url.searchParams.append('page', page)
-
-  return fetch(url.href)
-    .then(resp => resp.json())
-    .catch(error => { console.error(`api error searching: ${query}, page: ${page}`); throw error })
-}
-
-// - - - Torrents - - - 
-
-/**
- * Search for torrents by query
- * @param {string} query
- * @param {boolean} credits Include credits
- * @returns {object} Torrent response
- */
-const searchTorrents = (query, authorization_token) => {
-  const url = new URL('/api/v1/pirate/search', SEASONED_URL)
-  url.searchParams.append('query', query)
-
-  const headers = { authorization: storage.token }
-
-  return fetch(url.href, { headers: headers })
-    .then(resp => resp.json())
-    .catch(error => { console.error(`api error searching torrents: ${query}`); throw error })
-}
-
-/**
- * Add magnet to download queue.
- * @param {string} magnet Magnet link
- * @param {boolean} name Name of torrent
- * @param {boolean} tmdb_id
- * @returns {object} Success/Failure response
- */
-const addMagnet = (magnet, name, tmdb_id) => {
-  const url = new URL('v1/pirate/add', SEASONED_URL)
-
-  const body = JSON.stringify({
-    magnet: magnet,
-    name: name,
-    tmdb_id: tmdb_id
-  })
-  const headers = {
-    'Content-Type': 'application/json',
-    authorization: storage.token
-  }
-
-  return fetch(url.href, {
-      method: 'POST',
-      headers,
-      body
-    })
-    .then(resp => resp.json())
-    .catch(error => { console.error(`api error adding magnet: ${name} ${error}`); throw error })
-}
-
-// - - - Plex/Request - - - 
-
-/**
- * Request a movie or show from id. If authorization token is included the user will be linked
- * to the requested item.
- * @param {number} id Movie or show id
- * @param {string} type Movie or show type
- * @param {string} [authorization_token] To identify the requesting user
- * @returns {object} Success/Failure response
- */
-const request = (id, type, authorization_token=undefined) => {
-  const url = new URL('v2/request', SEASONED_URL)
-//  url.pathname = path.join(url.pathname, id.toString())
-//  url.searchParams.append('type', type)
-
-  const headers = {
-    'Authorization': authorization_token,
-    'Content-Type': 'application/json'
-  }
-  const body = {
-    id: id,
-    type: type
-  }
-
-  return fetch(url.href, {
-    method: 'POST',
-    headers: headers,
-    body: JSON.stringify(body)
-  })
-  .then(resp => resp.json())
-  .catch(error => { console.error(`api error requesting: ${id}, type: ${type}`); throw error })
-}
-
-/**
- * Check request status by tmdb id and type
- * @param {number} tmdb id
- * @param {string} type
- * @returns {object} Success/Failure response
- */
-const getRequestStatus = (id, type, authorization_token=undefined) => {
-  const url = new URL('v2/request', SEASONED_URL)
-  url.pathname = path.join(url.pathname, id.toString())
-  url.searchParams.append('type', type)
-
-  return fetch(url.href)
-    .then(resp => {
-      const status = resp.status;
-      if (status === 200) { return true }
-      else if (status === 404) { return false }
-      else {
-        console.error(`api error getting request status for id ${id} and type ${type}`)
-      }
-    })
-    .catch(err => Promise.reject(err))
-}
-
-// - - - Authenticate with plex - - -
-
-const plexAuthenticate = (username, password) => {
-  const url = new URL('https://plex.tv/api/v2/users/signin')
-
-  const headers = {
-    'Content-Type': 'application/json',
-    'X-Plex-Platform': 'Linux',
-    'X-Plex-Version': 'v2.0.24',
-    'X-Plex-Platform-Version': '4.13.0-36-generic',
-    'X-Plex-Device-Name': 'Tautulli',
-    'X-Plex-Client-Identifier': '123'
-  }
-
-  let formData = new FormData()
-  formData.set('login', username)
-  formData.set('password', password)
-  formData.set('rememberMe', false)
-
-  return axios({
-      method: 'POST',
-      url: url.href,
-      headers: headers,
-      data: formData
-    })
-    .catch(error => { console.error(`api error authentication plex: ${username}`); throw error })
-}
-
-
-// - - - Random emoji - - -
-
-const getEmoji = () => {
-  const url = new URL('v1/emoji', SEASONED_URL)
-
-  return fetch(url.href)
-    .then(resp => resp.json())
-    .catch(error => { console.log('api error getting emoji'); throw error })
-}
-
-
-// - - - ELASTIC SEARCH - - -
-// This elastic index contains titles mapped to ids. Lightning search
-// used for autocomplete
-
-/**
- * Search elastic indexes movies and shows by query. Doc includes Tmdb daily export of Movies and
- * Tv Shows. See tmdb docs for more info: https://developers.themoviedb.org/3/getting-started/daily-file-exports
- * @param {string} query
- * @returns {object} List of movies and shows matching query
- */
-const elasticSearchMoviesAndShows = (query) => {
-  const url = new URL(path.join(ELASTIC_INDEX, '/_search'), ELASTIC_URL)
-  const headers = {
-    'Content-Type': 'application/json'
-  }
-
-  const body = {
-    "sort" : [
-      { "popularity" : {"order" : "desc"}},
-      "_score"
-    ],
-    "query": {
-      "bool": {
-        "should": [{
-          "match_phrase_prefix": {
-            "original_name": query
-          }
-        },
-        {
-          "match_phrase_prefix": {
-            "original_title": query
-          }
-        }]
-      }
-    },
-    "size": 6
-  }
-
-  return fetch(url.href, {
-    method: 'POST',
-    headers: headers,
-    body: JSON.stringify(body)
-  })
-    .then(resp => resp.json())
-    .catch(error => { console.log(`api error searching elasticsearch: ${query}`); throw error })
-}
-
-
-
-export {
-  getMovie,
-  getShow,
-  getTmdbMovieListByName,
-  searchTmdb,
-  getUserRequests,
-  getRequests,
-  searchTorrents,
-  addMagnet,
-  request,
-  getRequestStatus,
-  plexAuthenticate,
-  getEmoji,
-  elasticSearchMoviesAndShows
-}

src/api.ts

@@ -0,0 +1,587 @@
+/* eslint-disable n/no-unsupported-features/node-builtins */
+import {
+  IList,
+  IMediaCredits,
+  IPersonCredits,
+  MediaTypes
+} from "./interfaces/IList";
+import type {
+  IRequestStatusResponse,
+  IRequestSubmitResponse
+} from "./interfaces/IRequestResponse";
+
+const API_HOSTNAME = import.meta.env.VITE_SEASONED_API;
+const ELASTIC_URL = import.meta.env.VITE_ELASTIC_URL;
+const ELASTIC_API_KEY = import.meta.env.VITE_ELASTIC_API_KEY;
+
+// - - - TMDB - - -
+interface GetMediaOpts {
+  checkExistance: boolean;
+  credits: boolean;
+  releaseDates?: boolean;
+}
+
+const getMovie = async (id: number, opts: GetMediaOpts) => {
+  const url = new URL("/api/v2/movie", API_HOSTNAME);
+  url.pathname = `${url.pathname}/${id.toString()}`;
+
+  const { checkExistance, credits, releaseDates } = opts;
+  if (checkExistance) {
+    url.searchParams.append("check_existance", "true");
+  }
+  if (credits) {
+    url.searchParams.append("credits", "true");
+  }
+  if (releaseDates) {
+    url.searchParams.append("release_dates", "true");
+  }
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error getting movie: ${id}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Fetches tmdb show by id. Can optionally include cast credits in result object.
+const getShow = async (id: number, opts: GetMediaOpts) => {
+  const url = new URL("/api/v2/show", API_HOSTNAME);
+  url.pathname = `${url.pathname}/${id.toString()}`;
+
+  const { checkExistance, credits, releaseDates } = opts;
+  if (checkExistance) {
+    url.searchParams.append("check_existance", "true");
+  }
+  if (credits) {
+    url.searchParams.append("credits", "true");
+  }
+  if (releaseDates) {
+    url.searchParams.append("release_dates", "true");
+  }
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error getting show: ${id}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Fetches tmdb person by id. Can optionally include cast credits in result object.
+const getPerson = async (id: number, credits = false) => {
+  const url = new URL("/api/v2/person", API_HOSTNAME);
+  url.pathname = `${url.pathname}/${id.toString()}`;
+  if (credits) {
+    url.searchParams.append("credits", "true");
+  }
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error getting person: ${id}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Fetches tmdb movie credits by id.
+const getMovieCredits = async (id: number): Promise<IMediaCredits> => {
+  const url = new URL("/api/v2/movie", API_HOSTNAME);
+  url.pathname = `${url.pathname}/${id.toString()}/credits`;
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error getting movie: ${id}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Fetches tmdb show credits by id.
+const getShowCredits = async (id: number): Promise<IMediaCredits> => {
+  const url = new URL("/api/v2/show", API_HOSTNAME);
+  url.pathname = `${url.pathname}/${id.toString()}/credits`;
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error getting show: ${id}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Fetches tmdb person credits by id.
+const getPersonCredits = async (id: number): Promise<IPersonCredits> => {
+  const url = new URL("/api/v2/person", API_HOSTNAME);
+  url.pathname = `${url.pathname}/${id.toString()}/credits`;
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error getting person: ${id}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Fetches tmdb list by name.
+const getTmdbMovieListByName = async (
+  name: string,
+  page = 1
+): Promise<IList> => {
+  const url = new URL(`/api/v2/movie/${name}`, API_HOSTNAME);
+  url.searchParams.append("page", page.toString());
+
+  return fetch(url.href).then(resp => resp.json());
+  // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error }) // eslint-disable-line no-console
+};
+
+// Fetches requested items.
+const getRequests = async (page = 1) => {
+  const url = new URL("/api/v2/request", API_HOSTNAME);
+  url.searchParams.append("page", page.toString());
+
+  return fetch(url.href).then(resp => resp.json());
+  // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error }) // eslint-disable-line no-console
+};
+
+const getUserRequests = async (page = 1) => {
+  const url = new URL("/api/v1/user/requests", API_HOSTNAME);
+  url.searchParams.append("page", page.toString());
+
+  const options: RequestInit = {
+    headers: { "Content-Type": "application/json" },
+    credentials: "include"
+  };
+
+  return fetch(url.href, options).then(resp => resp.json());
+};
+
+// Fetches tmdb movies and shows by query.
+const searchTmdb = async (
+  query: string,
+  page = 1,
+  adult = false,
+  mediaType = null
+) => {
+  const url = new URL("/api/v2/search", API_HOSTNAME);
+  if (mediaType != null && ["movie", "show", "person"].includes(mediaType)) {
+    url.pathname += `/${mediaType}`;
+  }
+
+  url.searchParams.append("query", query);
+  url.searchParams.append("page", page.toString());
+  url.searchParams.append("adult", adult.toString());
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error searching: ${query}, page: ${page}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// - - - Torrents - - -
+
+// Search for torrents by query
+const searchTorrents = async (query: string) => {
+  const url = new URL("/api/v1/pirate/search", API_HOSTNAME);
+  url.searchParams.append("query", query);
+  const options: RequestInit = {
+    credentials: "include"
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error searching torrents: ${query}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Add magnet to download queue.
+const addMagnet = async (
+  magnet: string,
+  name: string,
+  tmdbId: number | null
+) => {
+  const url = new URL("/api/v1/pirate/add", API_HOSTNAME);
+
+  const options: RequestInit = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({
+      magnet,
+      name,
+      tmdb_id: tmdbId
+    })
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error adding magnet: ${name} ${error}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// - - - Plex/Request - - -
+
+// Request a movie or show from id. If authorization token is included the user will be linked
+const request = async (
+  id: number,
+  type: MediaTypes.Movie | MediaTypes.Show
+): Promise<IRequestSubmitResponse> => {
+  const url = new URL("/api/v2/request", API_HOSTNAME);
+
+  const options = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ id, type })
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error requesting: ${id}, type: ${type}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// Check request status by tmdb id and type
+const getRequestStatus = async (
+  id: number,
+  type = null
+): Promise<IRequestStatusResponse> => {
+  const url = new URL("/api/v2/request", API_HOSTNAME);
+  url.pathname = `${url.pathname}/${id.toString()}`;
+  url.searchParams.append("type", type);
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(err => Promise.reject(err));
+};
+
+const watchLink = async (title: string, year: string) => {
+  const url = new URL("/api/v1/plex/watch-link", API_HOSTNAME);
+  url.searchParams.append("title", title);
+  url.searchParams.append("year", year);
+
+  const options: RequestInit = {
+    headers: { "Content-Type": "application/json" },
+    credentials: "include"
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .then(response => response.link);
+};
+
+/*
+const movieImages = id => {
+  const url = new URL(`v2/movie/${id}/images`, API_HOSTNAME);
+
+  return fetch(url.href).then(resp => resp.json());
+};
+*/
+
+// - - - Seasoned user endpoints - - -
+
+const register = async (username: string, password: string) => {
+  const url = new URL("/api/v1/user", API_HOSTNAME);
+  const options: RequestInit = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({ username, password })
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      const errorMessage =
+        "Unexpected error occured before receiving response. Error:";
+      // eslint-disable-next-line no-console
+      console.error(errorMessage, error);
+      // TODO log to sentry the issue here
+      throw error;
+    });
+};
+
+const login = async (
+  username: string,
+  password: string,
+  throwError = false
+) => {
+  const url = new URL("/api/v1/user/login", API_HOSTNAME);
+  const options: RequestInit = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({ username, password })
+  };
+
+  return fetch(url.href, options).then(resp => {
+    if (resp.status === 200) return resp.json();
+
+    if (throwError) return Promise.reject(resp.text().then(t => new Error(t)));
+    console.error("Error occured when trying to sign in.\nError:", resp); // eslint-disable-line no-console
+    return Promise.reject(resp);
+  });
+};
+
+const logout = async (throwError = false) => {
+  const url = new URL("/api/v1/user/logout", API_HOSTNAME);
+  const options: RequestInit = { method: "POST", credentials: "include" };
+
+  return fetch(url.href, options).then(resp => {
+    if (resp.status === 200) return resp.json();
+
+    if (throwError) return Promise.reject(resp.text().then(t => new Error(t)));
+    console.error("Error occured when trying to log out.\nError:", resp); // eslint-disable-line no-console
+    return Promise.reject(resp);
+  });
+};
+
+const getSettings = async () => {
+  const url = new URL("/api/v1/user/settings", API_HOSTNAME);
+  const options: RequestInit = {
+    headers: { "Content-Type": "application/json" },
+    credentials: "include"
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.log("api error getting user settings"); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+const updateSettings = async (settings: any) => {
+  const url = new URL("/api/v1/user/settings", API_HOSTNAME);
+
+  const options: RequestInit = {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(settings)
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.log("api error updating user settings"); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// - - - Authenticate with plex - - -
+
+const linkPlexAccount = async (authToken: string) => {
+  const url = new URL("/api/v1/user/link_plex", API_HOSTNAME);
+  const body = { authToken };
+
+  const options: RequestInit = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(body)
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error("api error linking plex account"); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+const unlinkPlexAccount = async () => {
+  const url = new URL("/api/v1/user/unlink_plex", API_HOSTNAME);
+  const options: RequestInit = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include"
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error unlinking your plex account`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+const plexRecentlyAddedInLibrary = async (id: number) => {
+  const url = new URL(`/api/v2/plex/recently_added/${id}`, API_HOSTNAME);
+  const options: RequestInit = {
+    credentials: "include"
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error fetch plex recently added`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// - - - User graphs - - -
+
+const fetchGraphData = async (
+  urlPath: string,
+  days: number,
+  chartType: string
+) => {
+  const url = new URL(`/api/v1/user/${urlPath}`, API_HOSTNAME);
+  url.searchParams.append("days", String(days));
+  url.searchParams.append("y_axis", chartType);
+
+  const options: RequestInit = {
+    headers: { "Content-Type": "application/json" },
+    credentials: "include"
+  };
+
+  return fetch(url.href, options).then(resp => {
+    if (!resp.ok) {
+      console.log("DAMN WE FAILED!", resp); // eslint-disable-line no-console
+      throw Error(resp.statusText);
+    }
+
+    return resp.json();
+  });
+};
+
+// - - - Random emoji - - -
+
+const getEmoji = async () => {
+  const url = new URL("/api/v1/emoji", API_HOSTNAME);
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.log("api error getting emoji"); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+// - - - ELASTIC SEARCH - - -
+// This elastic index contains titles mapped to ids. Lightning search
+// used for autocomplete
+interface TimeoutRequestInit extends RequestInit {
+  timeout: number;
+}
+
+async function fetchWithTimeout(url: string, options: TimeoutRequestInit) {
+  const { timeout = 2000 } = options;
+
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeout);
+
+  const response = await fetch(url, {
+    ...options,
+    signal: controller.signal
+  });
+  clearTimeout(timer);
+
+  return response;
+}
+
+/**
+ * Search elastic indexes movies and shows by query. Doc includes Tmdb daily export of Movies and
+ * Tv Shows. See tmdb docs for more info: https://developers.themoviedb.org/3/getting-started/daily-file-exports
+ */
+const elasticSearchMoviesAndShows = async (query: string, count = 22) => {
+  const url = new URL(`${ELASTIC_URL}/_search`);
+
+  const body = {
+    sort: [{ popularity: { order: "desc" } }, "_score"],
+    size: count,
+    query: {
+      multi_match: {
+        query,
+        fields: ["name", "original_title", "original_name"],
+        type: "phrase_prefix",
+        tie_breaker: 0.3
+      }
+    },
+    suggest: {
+      text: query,
+      "person-suggest": {
+        prefix: query,
+        completion: {
+          field: "name.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      },
+      "movie-suggest": {
+        prefix: query,
+        completion: {
+          field: "original_title.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      },
+      "show-suggest": {
+        prefix: query,
+        completion: {
+          field: "original_name.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      }
+    }
+  };
+
+  const options = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `ApiKey ${ELASTIC_API_KEY}`
+    },
+    body: JSON.stringify(body),
+    timeout: 1000
+  };
+
+  return fetchWithTimeout(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.log(`api error searching elasticsearch: ${query}`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
+export {
+  API_HOSTNAME,
+  getMovie,
+  getShow,
+  getPerson,
+  getMovieCredits,
+  getShowCredits,
+  getPersonCredits,
+  getTmdbMovieListByName,
+  searchTmdb,
+  getUserRequests,
+  getRequests,
+  searchTorrents,
+  addMagnet,
+  request,
+  getRequestStatus,
+  linkPlexAccount,
+  unlinkPlexAccount,
+  plexRecentlyAddedInLibrary,
+  register,
+  login,
+  logout,
+  getSettings,
+  updateSettings,
+  fetchGraphData,
+  watchLink,
+  getEmoji,
+  elasticSearchMoviesAndShows
+};

src/components/404.vue

@@ -1,39 +0,0 @@
-<template>
-  <section class="not-found">
-    <h1 class="not-found__title">Page Not Found</h1>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.not-found {
-  display: flex;
-  height: calc(100vh - var(--header-size));
-  width: 100%;
-  background: url('~assets/pulp-fiction.jpg') no-repeat 50% 50%;
-  background-size: cover;
-  justify-content: center;
-
-  &:before {
-    content: "";
-    position: absolute;
-    height: calc(100vh - var(--header-size));
-    width: 100%;
-    background: $background-40;
-  }
-  &__title {
-   padding-top: 40vh;
-    font-size: 2rem;
-    font-weight: 500;
-    color: $text-color;
-    position: relative;
-    margin: 0;
-
-    @include tablet-min {
-      font-size: 2.3rem;
-    }
-  }
-}
-</style>

src/components/CastList.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="cast">
+    <ol class="persons">
+      <CastListItem
+        v-for="credit in cast"
+        :key="credit.id"
+        :credit-item="credit"
+      />
+    </ol>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps } from "vue";
+  import CastListItem from "@/components/CastListItem.vue";
+  import type {
+    IMovie,
+    IShow,
+    IPerson,
+    ICast,
+    ICrew
+  } from "../interfaces/IList";
+
+  interface Props {
+    cast: Array<IMovie | IShow | IPerson | ICast | ICrew>;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="scss">
+  .cast {
+    position: relative;
+    top: 0;
+    left: 0;
+
+    ol {
+      overflow-x: scroll;
+      padding: 0;
+      list-style-type: none;
+      margin: 0;
+      display: flex;
+
+      scrollbar-width: none; /* for Firefox */
+
+      &::-webkit-scrollbar {
+        display: none; /* for Chrome, Safari, and Opera */
+      }
+    }
+  }
+</style>

src/components/CastListItem.vue

@@ -0,0 +1,117 @@
+<template>
+  <li class="card">
+    <a @click="openCastItem" @keydown.enter="openCastItem">
+      <img :src="pictureUrl" alt="Movie or person poster image" />
+      <p class="name">{{ creditItem.name || creditItem.title }}</p>
+      <p class="meta">{{ creditItem.character || creditItem.year }}</p>
+    </a>
+  </li>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+  import { useStore } from "vuex";
+  import type { ICast, ICrew, IMovie, IShow } from "../interfaces/IList";
+
+  interface Props {
+    creditItem: ICast | ICrew | IMovie | IShow;
+  }
+
+  const props = defineProps<Props>();
+  const store = useStore();
+
+  const pictureUrl = computed(() => {
+    const baseUrl = "https://image.tmdb.org/t/p/w185";
+
+    if ("profile_path" in props.creditItem && props.creditItem.profile_path) {
+      return baseUrl + props.creditItem.profile_path;
+    }
+    if ("poster" in props.creditItem && props.creditItem.poster) {
+      return baseUrl + props.creditItem.poster;
+    }
+
+    return "/assets/no-image_small.svg";
+  });
+
+  function openCastItem() {
+    store.dispatch("popup/open", { ...props.creditItem });
+  }
+</script>
+
+<style lang="scss">
+  li a p:first-of-type {
+    padding-top: 10px;
+  }
+
+  li.card p {
+    font-size: 1em;
+    padding: 0 10px;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: calc(10px + ((16px * var(--line-height)) * 3));
+  }
+
+  li.card {
+    margin: 10px;
+    margin-right: 4px;
+    padding-bottom: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+
+    min-width: 140px;
+    width: 140px;
+    background-color: var(--background-color-secondary);
+    color: var(--text-color);
+
+    transition: all 0.3s ease;
+    transform: scale(0.97) translateZ(0);
+
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+
+    &:hover {
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+      transform: scale(1.03);
+    }
+
+    .name {
+      font-weight: 500;
+    }
+
+    .character {
+      font-size: 0.9em;
+    }
+
+    .meta {
+      font-size: 0.9em;
+      color: var(--text-color-70);
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      // margin-top: auto;
+      max-height: calc((0.9em * var(--line-height)) * 1);
+    }
+
+    a {
+      display: block;
+      text-decoration: none;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+      max-height: 210px;
+      background-color: var(--background-color);
+      object-fit: cover;
+    }
+  }
+</style>

src/components/Graph.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="graph-wrapper">
+    <canvas ref="graphCanvas"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, watch, onBeforeUnmount } from "vue";
+  import {
+    Chart,
+    LineElement,
+    BarElement,
+    PointElement,
+    LineController,
+    BarController,
+    LinearScale,
+    CategoryScale,
+    Legend,
+    Title,
+    Tooltip,
+    Filler,
+    ChartType
+  } from "chart.js";
+  import type { BarOptions, ChartOptions } from "chart.js";
+
+  import type { Ref } from "vue";
+  import { convertSecondsToHumanReadable } from "../utils";
+  import { GraphTypes, GraphValueTypes } from "../interfaces/IGraph";
+  import type { IGraphDataset, IGraphData } from "../interfaces/IGraph";
+
+  Chart.register(
+    LineElement,
+    BarElement,
+    PointElement,
+    LineController,
+    BarController,
+    LinearScale,
+    CategoryScale,
+    Legend,
+    Title,
+    Tooltip,
+    Filler
+  );
+
+  interface Props {
+    name?: string;
+    data: IGraphData;
+    type: ChartType;
+    stacked: boolean;
+    datasetDescriptionSuffix: string;
+    tooltipDescriptionSuffix: string;
+    graphValueType?: GraphValueTypes;
+  }
+
+  const props = defineProps<Props>();
+  const graphCanvas: Ref<HTMLCanvasElement | null> = ref(null);
+  let graphInstance: Chart | null = null;
+
+  const graphTemplates = [
+    {
+      borderColor: "#6366F1",
+      backgroundColor: "rgba(99,102,241,0.12)"
+    },
+    {
+      borderColor: "#F59E0B",
+      backgroundColor: "rgba(245,158,11,0.12)"
+    },
+    {
+      borderColor: "#10B981",
+      backgroundColor: "rgba(16,185,129,0.12)"
+    }
+  ];
+
+  onMounted(() => generateGraph());
+  watch(() => props.data, generateGraph, { deep: true });
+
+  onBeforeUnmount(() => {
+    if (graphInstance) graphInstance.destroy();
+  });
+
+  function removeEmptyDataset(dataset: IGraphDataset) {
+    return dataset;
+    return !dataset.data.every(point => point === 0);
+  }
+
+  function hydrateDataset(dataset: IGraphDataset, index: number) {
+    const base = graphTemplates[index % graphTemplates.length];
+
+    if (props.type === "bar") {
+      return {
+        label: `${dataset.name} ${props.datasetDescriptionSuffix}`,
+        data: dataset.data,
+        backgroundColor: base.borderColor,
+        inflateAmount: 0,
+        borderRadius: {
+          topLeft: 8,
+          topRight: 8,
+          bottomLeft: 8,
+          bottomRight: 8
+        },
+
+        borderSkipped: false,
+        borderWidth: 2,
+        borderColor: "transparent",
+
+        // Slight spacing between categories
+        barPercentage: 0.8,
+        categoryPercentage: 0.9
+      } as BarOptions;
+    }
+
+    // Line chart — subtle, minimal points
+    return {
+      label: `${dataset.name} ${props.datasetDescriptionSuffix}`,
+      data: dataset.data,
+      borderColor: base.borderColor,
+      backgroundColor: base.backgroundColor,
+      borderWidth: 2,
+      tension: 0.35,
+      fill: true,
+
+      pointRadius: 2,
+      pointHoverRadius: 5,
+      pointHitRadius: 12,
+      pointBackgroundColor: base.borderColor,
+      pointBorderColor: base.borderColor,
+      pointBorderWidth: 0
+    };
+  }
+
+  function generateGraph() {
+    if (!graphCanvas.value) return;
+
+    const datasets = props.data.series
+      .filter(removeEmptyDataset)
+      .map(hydrateDataset);
+
+    const chartData = {
+      labels: props.data.labels,
+      datasets
+    };
+
+    const options: ChartOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      layout: {
+        padding: { top: 8 }
+      },
+      plugins: {
+        legend: {
+          display: true
+        },
+
+        tooltip: {
+          backgroundColor: "#111827",
+          bodyColor: "#e5e7eb",
+          padding: 12,
+          cornerRadius: 8,
+          displayColors: true,
+          callbacks: {
+            label: (tooltipItem: any) => {
+              const context = tooltipItem.dataset.label.split(" ")[0];
+
+              let type = GraphTypes.Plays;
+              let value = tooltipItem.raw;
+              if (props.graphValueType === String(GraphTypes.Duration)) {
+                value = convertSecondsToHumanReadable(value);
+                type = GraphTypes.Duration;
+              }
+
+              const text = `${context} ${type}`;
+              return `${text}: ${value}`;
+            }
+          }
+        }
+      },
+
+      scales: {
+        x: {
+          stacked: props.stacked,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            color: "#9CA3AF",
+            font: { size: 11 }
+          }
+        },
+
+        y: {
+          stacked: props.stacked,
+          beginAtZero: true,
+          grid: {
+            color: "rgba(0,0,0,0.04)",
+            drawBorder: false
+          },
+          ticks: {
+            color: "#9CA3AF",
+            font: { size: 11 },
+            padding: 8,
+            callback: (value: number) => {
+              if (props.graphValueType === String(GraphTypes.Duration)) {
+                return convertSecondsToHumanReadable(value);
+              }
+              return value;
+            }
+          }
+        }
+      }
+    };
+
+    if (graphInstance) {
+      graphInstance.data = chartData;
+      graphInstance.update();
+      return;
+    }
+
+    graphInstance = new Chart(graphCanvas.value, {
+      type: props.type,
+      data: chartData,
+      options
+    });
+  }
+</script>
+
+<style scoped lang="scss">
+  .graph-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 240px;
+  }
+</style>

src/components/Home.vue

@@ -1,85 +0,0 @@
-<template>
-  <section>
-    <LandingBanner />
-
-    <div v-for="list in lists">
-      <list-header :title="list.title" :link="'/list/' + list.route" />
-
-      <results-list :results="list.data" :shortList="true" />
-      <loader v-if="!list.data.length" />
-    </div>
-  </section>
-</template>
-
-<script>
-import LandingBanner from '@/components/LandingBanner'
-import ListHeader from '@/components/ListHeader'
-import ResultsList from '@/components/ResultsList'
-import Loader from '@/components/ui/Loader'
-
-import { getTmdbMovieListByName, getRequests } from '@/api'
-
-export default {
-  name: 'home',
-  components: { LandingBanner, ResultsList, ListHeader, Loader },
-  data(){
-    return {
-      imageFile: 'dist/pulp-fiction.jpg',
-      requests: [],
-      nowplaying: [],
-      upcoming: [],
-      popular: []
-    }
-  },
-  computed: {
-    lists() {
-      return [
-        {
-          title: 'Requests',
-          route: 'request',
-          data: this.requests
-        },
-        {
-          title: 'Now playing',
-          route: 'now_playing',
-          data: this.nowplaying
-        },
-        {
-          title: 'Upcoming',
-          route: 'upcoming',
-          data: this.upcoming
-        },
-        {
-          title: 'Popular',
-          route: 'popular',
-          data: this.popular
-        }
-      ]
-    }
-  },
-  methods: {
-    fetchRequests() {
-      getRequests()
-        .then(results => this.requests = results.results)
-    },
-    fetchNowPlaying() {
-      getTmdbMovieListByName('now_playing')
-        .then(results => this.nowplaying = results.results)
-    },
-    fetchUpcoming() {
-      getTmdbMovieListByName('upcoming')
-        .then(results => this.upcoming = results.results)
-    },
-    fetchPopular() {
-      getTmdbMovieListByName('popular')
-        .then(results => this.popular = results.results)
-    }
-  },
-  created(){
-    this.fetchRequests()
-    this.fetchNowPlaying()
-    this.fetchUpcoming()
-    this.fetchPopular()
-  }
-}
-</script>

src/components/LandingBanner.vue

@@ -1,67 +1,191 @@
 <template>
-  <header v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
+  <header ref="headerElement" :class="{ expanded, noselect: true }">
+    <img ref="imageElement" :src="bannerImage" alt="Page banner image" />
     <div class="container">
-      <h1 class="title">Request new movies or tv shows for plex</h1>
+      <h1 class="title">Request movies or tv shows</h1>
-      <strong class="subtitle">Made with Vue.js</strong>
+      <strong class="subtitle"
+        >Create a profile to track and view requests</strong
+      >
+    </div>
+
+    <div
+      class="expand-icon"
+      @click="expand"
+      @keydown.enter="expand"
+      @mouseover="upgradeImage"
+      @focus="focus"
+    >
+      <IconExpand v-if="!expanded" />
+      <IconShrink v-else />
     </div>
   </header>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+  import { ref } from "vue";
-  props: {
+  import IconExpand from "@/icons/IconExpand.vue";
-    image: {
+  import IconShrink from "@/icons/IconShrink.vue";
-      type: String,
+  import type { Ref } from "vue";
-      required: false
+
+  const ASSET_URL = "https://request.movie/assets/";
+  const images: Array<string> = [
+    "pulp-fiction.jpg",
+    "arrival.jpg",
+    "disaster-artist.jpg",
+    "dune.jpg",
+    "mandalorian.jpg"
+  ];
+
+  const bannerImage: Ref<string> = ref();
+  const expanded: Ref<boolean> = ref(false);
+  const headerElement: Ref<HTMLElement> = ref(null);
+  const imageElement: Ref<HTMLImageElement> = ref(null);
+  const defaultHeaderHeight: Ref<string> = ref();
+  // const disableProxy = true;
+
+  function expand() {
+    expanded.value = !expanded.value;
+    let height = defaultHeaderHeight?.value;
+
+    if (expanded.value) {
+      const aspectRation =
+        imageElement.value.naturalHeight / imageElement.value.naturalWidth;
+      height = `${imageElement.value.clientWidth * aspectRation}px`;
+      defaultHeaderHeight.value = headerElement.value.style.height;
     }
-  },
+
-  data() {
+    headerElement.value.style.setProperty("--header-height", height);
-    return {
-      imageFile: 'dist/pulp-fiction.jpg'
   }
-  },
+
-  beforeMount() {
+  function focus(event: FocusEvent) {
-    if (this.image && this.image.length > 0) {
+    event.preventDefault();
-      this.imageFile = this.image
   }
+
+  function randomImage(): string {
+    const image = images[Math.floor(Math.random() * images.length)];
+    return ASSET_URL + image;
   }
-}
+
+  bannerImage.value = randomImage();
+
+  // function sliceToHeaderSize(url: string): string {
+  //   let width = headerElement.value?.getBoundingClientRect()?.width || 1349;
+  //   let height = headerElement.value?.getBoundingClientRect()?.height || 261;
+
+  //   if (disableProxy) return url;
+
+  //   return buildProxyURL(width, height, url);
+  // }
+
+  // function upgradeImage() {
+  //   if (disableProxy || imageUpgraded.value == true) return;
+
+  //   const headerSize = 90;
+  //   const height = window.innerHeight - headerSize;
+  //   const width = window.innerWidth - headerSize;
+
+  //   const proxyHost = `http://imgproxy.schleppe:8080/insecure/`;
+  //   const proxySizeOptions = `q:65/plain/`;
+
+  //   bannerImage.value = `${proxyHost}${proxySizeOptions}${
+  //     ASSET_URL + image.value
+  //   }`;
+  // }
+
+  // function buildProxyURL(width: number, height: number, asset: string): string {
+  //   const proxyHost = `http://imgproxy.schleppe:8080/insecure/`;
+  //   const proxySizeOptions = `resize:fill:${width}:${height}:ce/q:65/plain/`;
+  //   return `${proxyHost}${proxySizeOptions}${asset}`;
+  // }
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+  @import "scss/variables";
-@import "./src/scss/media-queries";
+  @import "scss/media-queries";
 
-header {
+  header {
     width: 100%;
-  height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
     position: relative;
+    transition: height 0.5s ease;
+    overflow: hidden;
+    --header-height: 25vh;
 
-  @include tablet-min {
+    height: var(--header-height);
-    height: 284px;
+
+    > * {
+      z-index: 1;
+    }
+
+    img {
+      position: absolute;
+      z-index: 0;
+      object-fit: cover;
+      width: 100%;
+    }
+
+    &.expanded {
+      // height: calc(100vh - var(--header-size));
+      // width: calc(100vw - var(--header-size));
+
+      // @include mobile {
+      //   width: 100vw;
+      //   height: 100vh;
+      // }
+
+      &:before {
+        background-color: transparent;
+      }
+
+      .title,
+      .subtitle {
+        opacity: 0;
+      }
+    }
+
+    .expand-icon {
+      visibility: hidden;
+      opacity: 0;
+      transition: all 0.5s ease-in-out;
+      height: 1.8rem;
+      width: 1.8rem;
+      fill: var(--text-color-50);
+
+      position: absolute;
+      top: 0.5rem;
+      right: 1rem;
+
+      &:hover {
+        cursor: pointer;
+        fill: var(--text-color-90);
+      }
+    }
+
+    &:hover {
+      .expand-icon {
+        visibility: visible;
+        opacity: 1;
+      }
     }
 
     &:before {
       content: "";
+      z-index: 1;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-    background-color: $background-70;
+      background-color: var(--background-70);
-    transition: background-color .5s ease;
+      transition: inherit;
     }
 
     .container {
       text-align: center;
       position: relative;
-    transition: color .5s ease;
+      transition: color 0.5s ease;
     }
 
     .title {
@@ -71,9 +195,10 @@ header {
       letter-spacing: 0.5px;
       color: $text-color;
       margin: 0;
+      opacity: 1;
 
-    @include tablet-min{
+      @include tablet-min {
-      font-size: 28px;
+        font-size: 2.5rem;
       }
     }
 
@@ -83,10 +208,11 @@ header {
       font-weight: 300;
       color: $text-color-70;
       margin: 5px 0;
+      opacity: 1;
 
-    @include tablet-min{
+      @include tablet-min {
-      font-size: 16px;
+        font-size: 1.3rem;
+      }
     }
   }
-}
 </style>

src/components/ListHeader.vue

@@ -1,101 +0,0 @@
-<template>
-  <header :class="{ 'sticky': sticky }">
-    <h2>{{ title }}</h2>
-
-    <span v-if="info" class="result-count">{{ info }}</span>
-    <router-link v-else-if="link" :to="link" class='view-more'>
-      View All
-    </router-link>
-  </header>  
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    sticky: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    info: {
-      type: String,
-      required: false
-    },
-    link: {
-      type: String,
-      required: false
-    }
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-@import './src/scss/variables';
-@import './src/scss/media-queries';
-
-header {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 1.8rem 12px;
-
-  &.sticky {
-    background-color: $background-color;
-
-    position: sticky;
-    position: -webkit-sticky;
-    top: $header-size;
-    z-index: 4;
-
-    padding-bottom: 1rem;
-    margin-bottom: 1.5rem;
-  }
-
-  h2 {
-    font-size: 18px;
-    font-weight: 300;
-    text-transform: capitalize;
-    line-height: 18px;
-    margin: 0;
-    color: $text-color;
-  }
-
-  .view-more {
-    font-size: 13px;
-    font-weight: 300;
-    letter-spacing: .5px;
-    color: $text-color-70;
-    text-decoration: none;
-    transition: color .5s ease;
-    cursor: pointer;
-
-    &:after{
-      content: " →";
-    }
-    &:hover{
-      color: $text-color;
-    }
-  }
-
-  .result-count {
-    font-size: 13px;
-    font-weight: 300;
-    letter-spacing: .5px;
-    color: $text-color;
-    text-decoration: none;
-  }
-
-  @include tablet-min {
-    padding-left: 1.25rem;;
-  }
-  @include desktop-lg-min {
-    padding-left: 1.75rem;
-  }
-}
-
-</style>

src/components/ListPage.vue

@@ -1,104 +0,0 @@
-
-<template>
-  <div>
-    <list-header :title="listTitle" :info="resultCount" :sticky="true" />
-
-    <results-list :results="results" v-if="results" />
-
-    <loader v-if="!results.length" />
-
-    <div v-if="page < totalPages" class="fullwidth-button">
-      <seasoned-button @click="loadMore">load more</seasoned-button>
-    </div>
-  </div>
-</template>
-
-
-<script>
-import ListHeader from '@/components/ListHeader'
-import ResultsList from '@/components/ResultsList'
-import SeasonedButton from '@/components/ui/SeasonedButton'
-import Loader from '@/components/ui/Loader'
-import { getTmdbMovieListByName, getRequests } from '@/api'
-import store from '@/store'
-
-export default {
-  components: { ListHeader, ResultsList, SeasonedButton, Loader },
-  data() {
-    return {
-      legalTmdbLists: [ 'now_playing', 'upcoming', 'popular' ],
-      results: [],
-      page: 1,
-      totalPages: 0,
-      totalResults: 0
-    }
-  },
-  computed: {
-    listTitle() {
-      if (this.results.length === 0)
-        return ''
-
-      const routeListName = this.$route.params.name
-      console.log('routelistname', routeListName)
-      return routeListName.includes('_') ? routeListName.split('_').join(' ') : routeListName
-    },
-    resultCount() {
-      if (this.results.length === 0)
-        return ''
-
-      const loadedResults = this.results.length
-      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
-      return `${loadedResults} of ${totalResults} results`
-    }
-  },
-  methods: {
-    loadMore() {
-      console.log(this.$route)
-      this.page++
-
-      window.history.replaceState({}, 'search', `/#/${this.$route.fullPath}?page=${this.page}`)
-      this.init()
-    },
-    init() {
-      const routeListName = this.$route.params.name
-
-      if (routeListName === 'request') {
-        getRequests(this.page)
-          .then(results => {
-            this.results = this.results.concat(...results.results)
-            this.page = results.page
-            this.totalPages = results.total_pages
-            this.totalResults = results.total_results
-          })
-      } else if (this.legalTmdbLists.includes(routeListName)) {
-        getTmdbMovieListByName(routeListName, this.page)
-          .then(results => {
-            this.results = this.results.concat(...results.results)
-            this.page = results.page
-            this.totalPages = results.total_pages
-            this.totalResults = results.total_results
-          })
-      } else {
-        // TODO handle if list is not found
-        console.log('404 this is not a tmdb list')
-      }
-    }
-  },
-  created() {
-    if (this.results.length === 0)
-      this.init()
-
-    store.dispatch('documentTitle/updateTitle', `${this.$router.history.current.name} ${this.$route.params.name}`)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.fullwidth-button {
-  width: 100%;
-  margin: 1rem 0;
-  padding-bottom: 2rem;
-  display: flex;
-  justify-content: center;
-}
-</style>

src/components/Movie.vue

@@ -1,420 +0,0 @@
-<template>
-  <section class="movie">
-
-    <!-- HEADER w/ POSTER -->
-    <header class="movie__header" :style="{ 'background-image': movie && backdrop !== null ? 'url(' + ASSET_URL + ASSET_SIZES[1] + backdrop + ')' : '' }" :class="compact ? 'compact' : ''" @click="compact=!compact">
-      <div class="movie__wrap movie__wrap--header">
-        <figure class="movie__poster">
-          <img v-if="movie && poster === null"
-            class="movies-item__img is-loaded"
-            alt="movie poster image"
-            src="~assets/no-image.png">
-          <img v-else-if="poster === undefined"
-            class="movies-item__img grey"
-            alt="movie poster image">
-            <!-- src="~assets/placeholder.png"> -->
-          <img v-else
-            class="movies-item__img is-loaded"
-            alt="movie poster image"
-            :src="ASSET_URL + ASSET_SIZES[0] + poster">
-        </figure>
-
-        <div class="movie__title">
-          <h1 v-if="movie">{{ movie.title }}</h1>
-          <loading-placeholder v-else :count="1" />
-        </div>
-      </div>
-    </header>
-
-    <!-- Siderbar and movie info -->
-    <div class="movie__main">
-      <div class="movie__wrap movie__wrap--main">
-
-        <!-- SIDEBAR ACTIONS -->
-        <div class="movie__actions" v-if="movie">
-
-          <sidebar-list-element :iconRef="'#iconNot_exsits'" :active="matched"
-            :iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'">
-
-            Not yet in plex
-          </sidebar-list-element>
-          <sidebar-list-element @click="sendRequest" :iconRef="'#iconSent'"
-            :active="requested" :textActive="'Requested to be downloaded'">
-
-            Request to be downloaded?
-          </sidebar-list-element>
-          <sidebar-list-element v-if="admin" @click="showTorrents=!showTorrents"
-            :iconRef="'#icon_torrents'" :active="showTorrents"
-            :supplementaryText="numberOfTorrentResults">
-
-            Search for torrents
-          </sidebar-list-element>
-          <sidebar-list-element @click="openTmdb" :iconRef="'#icon_info'">
-            See more info
-          </sidebar-list-element>
-        </div>
-
-        <!-- Loading placeholder -->
-        <div class="movie__actions text-input__loading" v-else>
-          <div class="movie__actions-link" v-for="_ in admin ? Array(4) : Array(3)">
-            <div class="movie__actions-text text-input__loading--line" style="margin:9px; margin-left: -3px;"></div>
-          </div>
-        </div>
-
-
-        <!-- MOVIE INFO -->
-        <div class="movie__info">
-          <div class="movie__description" v-if="movie"> {{ movie.overview }}</div>
-
-          <!-- Loading placeholder -->
-          <div v-else class="movie__description">
-            <loading-placeholder :count="12" />
-          </div>
-
-          <div class="movie__details" v-if="movie">
-            <div v-if="movie.year" class="movie__details-block">
-              <h2 class="movie__details-title">Release Date</h2>
-              <div class="movie__details-text">{{ movie.year }}</div>
-            </div>
-
-             <div v-if="movie.rank" class="movie__details-block">
-              <h2 class="movie__details-title">Rating</h2>
-              <div class="movie__details-text">{{ movie.rank }}</div>
-            </div>
-
-            <div v-if="movie.type == 'show'" class="movie__details-block">
-              <h2 class="movie__details-title">Seasons</h2>
-              <div class="movie__details-text">{{ movie.seasons }}</div>
-            </div>
-
-            <div v-if="movie.genres" class="movie__details-block">
-              <h2 class="movie__details-title">Genres</h2>
-              <div class="movie__details-text">{{ nestedDataToString(movie.genres) }}</div>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- TODO: change this classname, this is general  -->
-
-        <div class="movie__admin" v-if="movie && movie.credits">
-          <h2 class="movie__details-title">Cast</h2>
-          <div style="display: flex; flex-wrap: wrap;">
-            <person v-for="cast in movie.credits.cast" :info="cast"
-              style="flex-basis: 0;"></person>
-            </div>
-        </div>
-
-      </div>
-
-      <!-- TORRENT LIST -->
-      <TorrentList v-if="movie" :show="showTorrents" :query="title" :tmdb_id="id"
-                   :admin="admin"></TorrentList>
-    </div>
-  </section>
-</template>
-
-<script>
-import storage from '@/storage'
-import img from '@/directives/v-image'
-import TorrentList from './TorrentList'
-import Person from './Person'
-import SidebarListElement from './ui/sidebarListElem'
-import store from '@/store'
-import LoadingPlaceholder from './ui/LoadingPlaceholder'
-
-import { getMovie, getShow, request, getRequestStatus } from '@/api'
-
-export default {
-  props: ['id', 'type'],
-  components: { TorrentList, Person, LoadingPlaceholder, SidebarListElement },
-  directives: { img: img }, // TODO decide to remove or use
-  data(){
-    return{
-      ASSET_URL: 'https://image.tmdb.org/t/p/',
-      ASSET_SIZES: ['w500', 'w780', 'original'],
-      movie: undefined,
-      title: undefined,
-      poster: undefined,
-      backdrop: undefined,
-      matched: false,
-      userLoggedIn: storage.sessionId ? true : false,
-      requested: false,
-      admin: localStorage.getItem('admin'),
-      showTorrents: false,
-      compact: false
-    }
-  },
-  methods: {
-    parseResponse(movie) {
-      this.movie = { ...movie }
-      this.title = movie.title
-      this.poster = movie.poster
-      this.backdrop = movie.backdrop
-      this.matched = movie.existsInPlex
-      this.checkIfRequested(movie)
-        .then(status => this.requested = status)
-
-      store.dispatch('documentTitle/updateTitle', movie.title)
-    },
-    async checkIfRequested(movie) {
-      return await getRequestStatus(movie.id, movie.type)
-    },
-    nestedDataToString(data) {
-      let nestedArray = []
-      data.forEach(item => nestedArray.push(item));
-      return nestedArray.join(', ');
-    },
-    sendRequest(){
-      request(this.id, this.type, storage.token)
-        .then(resp => {
-          if (resp.success) {
-            this.requested = true
-          }
-        })
-    },
-    openTmdb(){
-      const tmdbType = this.type === 'show' ? 'tv' : this.type
-      window.location.href = 'https://www.themoviedb.org/' + tmdbType + '/' + this.id
-    },
-  },
-  watch: {
-    id: function(val){
-      if (this.type === 'movie') {
-        this.fetchMovie(val);
-      } else {
-        this.fetchShow(val)
-      }
-    }
-  },
-  computed: {
-    numberOfTorrentResults: () => {
-      let numTorrents = store.getters['torrentModule/resultCount']
-      return numTorrents !== null ? numTorrents + ' results' : null
-    }
-  },
-  beforeDestroy() {
-    store.dispatch('documentTitle/updateTitle', this.prevDocumentTitle)
-  },
-  created(){
-    this.prevDocumentTitle = store.getters['documentTitle/title']
-
-    if (this.type === 'movie') {
-      getMovie(this.id)
-        .then(this.parseResponse)
-        .catch(error => {
-          this.$router.push({ name: '404' });
-        })
-    } else {
-      getShow(this.id)
-        .then(this.parseResponse)
-        .catch(error => {
-          this.$router.push({ name: '404' });
-        })
-    }
-
-    console.log('admin: ', this.admin)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/loading-placeholder";
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.movie {
-  &__wrap {
-    display: flex;
-    &--header {
-      align-items: center;
-      height: 100%;
-    }
-    &--main {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: column;
-      @include tablet-min{
-        flex-direction: row;
-      }
-
-      background-color: $background-color;
-      color: $text-color;
-    }
-  }
-  &__header {
-    $duration: 0.2s;
-    height: 250px;
-    transform: scaleY(1);
-    transition: height $duration ease;
-    transform-origin: top;
-    position: relative;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-color: $background-color;
-    @include tablet-min {
-      height: 350px;
-    }
-    &:before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 0;
-      width: 100%;
-      height: 100%;
-      background: $background-dark-85;
-    }
-    &.compact {
-      height: 100px;
-    }
-  }
-
-  &__poster {
-    display: none;
-    @include tablet-min {
-      background: $background-color;
-      height: 0;
-      display: block;
-      position: absolute;
-      width: calc(45% - 40px);
-      top: 40px;
-      left: 40px;
-
-    }
-  }
-
-  &__img {
-    display: block;
-    width: 100%;
-    opacity: 0;
-    transform: scale(0.97) translateZ(0);
-    transition: opacity 0.5s ease, transform 0.5s ease;
-
-    &.is-loaded {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  &__title {
-    position: relative;
-    padding: 20px;
-    color: $green;
-    text-align: center;
-    width: 100%;
-    @include tablet-min {
-      width: 55%;
-      text-align: left;
-      margin-left: 45%;
-      padding: 30px 30px 30px 40px;
-    }
-    h1 {
-      font-weight: 500;
-      line-height: 1.4;
-      font-size: 24px;
-      @include tablet-min {
-        font-size: 30px;
-      }
-    }
-  }
-  &__main {
-    min-height: calc(100vh - 250px);
-    @include tablet-min {
-      min-height: 0;
-    }
-
-    height: 100%;
-  }
-    &__actions {
-      text-align: center;
-      width: 100%;
-      order: 2;
-      padding: 20px;
-      border-top: 1px solid $text-color-5;
-      @include tablet-min {
-        order: 1;
-        width: 45%;
-        padding: 185px 0 40px 40px;
-        border-top: 0;
-      }
-    }
-    &__info {
-      width: 100%;
-      padding: 20px;
-      order: 1;
-      @include tablet-min {
-        order: 2;
-        padding: 40px;
-        width: 55%;
-        margin-left: 45%;
-      }
-    }
-    &__info {
-      margin-left: 0;
-    }
-    &__description {
-      font-weight: 300;
-      font-size: 13px;
-      line-height: 1.8;
-      margin-bottom: 20px;
-      @include tablet-min {
-        margin-bottom: 30px;
-        font-size: 14px;
-      }
-    }
-    &__details {
-      &-block {
-        float: left;
-      }
-      &-block:not(:last-child) {
-        margin-bottom: 20px;
-        margin-right: 20px;
-        @include tablet-min {
-          margin-bottom: 30px;
-          margin-right: 30px;
-        }
-      }
-      &-title {
-        margin: 0;
-        font-weight: 400;
-        text-transform: uppercase;
-        font-size: 14px;
-        color: $green;
-        @include tablet-min {
-          font-size: 16px;
-        }
-      }
-      &-text {
-        font-weight: 300;
-        font-size: 14px;
-        margin-top: 5px;
-      }
-    }
-    &__admin {
-      width: 100%;
-      padding: 20px;
-      order: 2;
-      @include tablet-min {
-        order: 3;
-        padding: 40px;
-        padding-top: 0px;
-        width: 100%;
-      }
-      &-title {
-          margin: 0;
-          font-weight: 400;
-          text-transform: uppercase;
-          text-align: center;
-          font-size: 14px;
-          color: $green;
-          padding-bottom: 20px;
-          @include tablet-min {
-            font-size: 16px;
-          }
-        }
-    }
-}
-</style>

src/components/MoviePage.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="container info">
-    <movie :id="$route.params.id" :type="'page'"></movie>
-  </div>
-</template>
-
-<script>
-import Movie from './Movie';
-export default {
-  components: { Movie }
-}
-</script>

src/components/MoviePopup.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="movie-popup" @click="$popup.close()">
-    <div class="movie-popup__box" @click.stop>
-      <movie :id="id" :type="type"></movie>
-      <button class="movie-popup__close" @click="$popup.close()"></button>
-    </div>
-    <i class="loader"></i>
-  </div>
-</template>
-
-<script>
-import Movie from './Movie';
-
-export default {
-  props: {
-    id: {
-      type: Number,
-      required: true
-    },
-    type: {
-      type: String,
-      required: true
-    }
-  },
-  components: { Movie },
-  methods: {
-    checkEventForEscapeKey(event) {
-      if (event.keyCode == 27) {
-        this.$popup.close()
-      }
-    }
-  },
-  created(){
-    window.addEventListener('keyup', this.checkEventForEscapeKey)
-    document.getElementsByTagName("body")[0].classList += " no-scroll";
-  },
-  beforeDestroy() {
-    window.removeEventListener('keyup', this.checkEventForEscapeKey)
-    document.getElementsByTagName("body")[0].classList.remove("no-scroll");
-  }
-
-}
-</script>
-
-<style lang="scss">
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.movie-popup{
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  width: 100%;
-  height: 100vh;
-  background: rgba($dark, 0.93);
-  -webkit-overflow-scrolling: touch;
-  overflow: auto;
-  &__box{
-    width: 100%;
-    max-width: 768px;
-    position: relative;
-    z-index: 5;
-    background: $background-color-secondary;
-    padding-bottom: 50px;
-    @include tablet-min{
-      padding-bottom: 0;
-      margin: 40px auto;
-    }
-  }
-  &__close{
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    border: 0;
-    background: transparent;
-    width: 40px;
-    height: 40px;
-    transition: background 0.5s ease;
-    cursor: pointer;
-    &:before,
-    &:after{
-      content: "";
-      display: block;
-      position: absolute;
-      top: 19px;
-      left: 10px;
-      width: 20px;
-      height: 2px;
-      background: $white;
-    }
-    &:before{
-      transform: rotate(45deg);
-    }
-    &:after{
-      transform: rotate(-45deg);
-    }
-    &:hover{
-      background: $green;
-    }
-  }
-}
-</style>

src/components/MoviesListItem.vue

@@ -1,117 +0,0 @@
-<template>
-  <li class="movies-item" :class="{'shortList': shortList}">
-    <a class="movies-item__link" :class="{'no-image': noImage}" @click.prevent="openMoviePopup(movie.id, movie.type)">
-
-      <!-- TODO change to picture element -->
-      <figure class="movies-item__poster">
-        <img v-if="!noImage" class="movies-item__img" src="~assets/placeholder.png" v-img="poster()" alt="">
-        <img v-if="noImage" class="movies-item__img is-loaded" src="~assets/no-image.png" alt="">
-      </figure>
-      <div class="movies-item__content">
-        <p class="movies-item__title">{{ movie.title }}</p>
-        <p class="movies-item__title">{{ movie.year }}</p>
-      </div>
-    </a>
-  </li>
-</template>
-
-<script>
-import img from '../directives/v-image'
-
-export default {
-  props: ['movie', 'shortList'],
-  directives: {
-    img: img
-  },
-  data(){
-    return {
-      noImage: false
-    }
-  },
-  methods: {
-    // TODO handle missing images better and load diff sizes based on screen size
-    poster() {
-      if (this.movie.poster) {
-        return 'https://image.tmdb.org/t/p/w500' + this.movie.poster
-      } else {
-        this.noImage = true
-      }
-    },
-    openMoviePopup(id, type) {
-      this.$popup.open(id, type)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.movies-item {
-  padding: 10px;
-  width: 50%;
-  background-color: $background-color;
-  transition: background-color 0.5s ease;
-
-  @include tablet-min{
-    padding: 15px;
-  }
-  @include tablet-landscape-min{
-    padding: 15px;
-    width: 25%;
-  }
-  @include desktop-min{
-    padding: 15px;
-    width: 20%;
-  }
-
-  @include desktop-lg-min{
-    padding: 20px;
-    width: 12.5%;
-  }
-
-  &__link{
-    text-decoration: none;
-    color: $text-color-70;
-    font-weight: 300;
-  }
-  &__content{
-    padding-top: 15px;
-  }
-  &__poster{
-    transition: transform 0.5s ease, box-shadow 0.3s ease;
-    transform: translateZ(0);
-  }
-  &__img{
-    width: 100%;
-    opacity: 0;
-    transform: scale(0.97) translateZ(0);
-    transition: opacity 0.5s ease, transform 0.5s ease;
-    &.is-loaded{
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  &__link:not(.no-image):hover &__poster{
-    transform: scale(1.03);
-    box-shadow: 0 0 10px rgba($dark, 0.1);
-  }
-  &__title{
-    margin: 0;
-    font-size: 11px;
-    letter-spacing: 0.5px;
-    transition: color 0.5s ease;
-    cursor: pointer;
-    @include mobile-ls-min{
-      font-size: 12px;
-    }
-    @include tablet-min{
-      font-size: 14px;
-    }
-  }
-  &__link:hover &__title{
-    color: $text-color;
-  }
-}
-</style>

src/components/Navigation.vue

@@ -1,314 +0,0 @@
-<template>
-  <div>
-    <nav class="nav">
-      <router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App">
-        <svg class="nav__logo-image">
-          <use xlink:href="#svgLogo"></use>
-        </svg>
-      </router-link>
-
-      <div class="nav__hamburger" @click="toggleNav">
-        <div v-for="_ in 3" class="bar"></div>
-      </div>
-
-      <ul class="nav__list">
-        <li class="nav__item" v-for="item in listTypes">
-          <router-link class="nav__link" :to="'/list/' + item.route">
-            <div class="nav__link-wrap">
-              <svg class="nav__link-icon">
-                <use :xlink:href="'#icon_' + item.route"></use>
-              </svg>
-              <span class="nav__link-title">{{ item.title }}</span>
-            </div>
-          </router-link>
-        </li>
-
-        <li class="nav__item nav__item--profile">
-          <router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
-            <div class="nav__link-wrap">
-              <svg class="nav__link-icon">
-                <use xlink:href="#iconLogin"></use>
-              </svg>
-              <span class="nav__link-title">Sign in</span>
-            </div>
-          </router-link>
-
-          <router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
-            <div class="nav__link-wrap">
-              <svg class="nav__link-icon">
-                <use xlink:href="#iconLogin"></use>
-              </svg>
-              <span class="nav__link-title">Profile</span>
-            </div>
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-
-    <div class="spacer"></div>
-  </div>
-</template>
-
-<script>
-import storage from '@/storage'
-
-export default {
-  data(){
-    return {
-      listTypes: storage.homepageLists,
-      userLoggedIn: localStorage.getItem('token') ? true : false
-    }
-  },
-  methods: {
-    setUserStatus(){
-      this.userLoggedIn = localStorage.getItem('token') ? true : false;
-    },
-    toggleNav(){
-      document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active');
-      document.querySelector('.nav__list').classList.toggle('nav__list--active');
-    }
-  },
-  created(){
-    // TODO move this to state manager
-    eventHub.$on('setUserStatus', this.setUserStatus);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.icon {
-  width: 30px;
-}
-
-.spacer {
-  @include mobile-only {
-    width: 100%;
-    height: $header-size;
-  }
-}
-
-.nav {
-  transition: background .5s ease;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50px;
-  z-index: 10;
-  display: block;
-  color: $text-color;
-  background-color: $background-color-secondary;
-
-  @include tablet-min{
-    width: 95px;
-    height: 100vh;
-  }
-  &__logo {
-    width: 55px;
-    height: $header-size;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: $background-nav-logo;
-    @include tablet-min{
-      width: 95px;
-    }
-    &-image{
-      width: 35px;
-      height: 31px;
-      fill: $green;
-      transition: transform 0.5s ease;
-      @include tablet-min{
-        width: 45px;
-        height: 40px;
-      }
-    }
-    &:hover &-image {
-      transform: scale(1.04);
-    }
-  }
-  &__hamburger {
-    display: block;
-    position: fixed;
-    width: 55px;
-    height: 50px;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    z-index: 10;
-    border-left: 1px solid $background-color;
-    @include tablet-min{
-      display: none;
-    }
-    .bar {
-      position: absolute;
-      width: 23px;
-      height: 1px;
-      background-color: $text-color-70;
-      transition: all 300ms ease;
-      &:nth-child(1) {
-        left: 16px;
-        top: 17px;
-      }
-      &:nth-child(2) {
-        left: 16px;
-        top: 25px;
-        &:after {
-          content: "";
-          position: absolute;
-          left: 0px;
-          top: 0px;
-          width: 23px;
-          height: 1px;
-          transition: all 300ms ease;
-        }
-      }
-      &:nth-child(3) {
-        right: 15px;
-        top: 33px;
-      }
-    }
-    &--active {
-      .bar{
-        &:nth-child(1),
-        &:nth-child(3){
-          width: 0;
-        }
-        &:nth-child(2) {
-          transform: rotate(-45deg);
-        }
-        &:nth-child(2):after {
-          transform: rotate(-90deg);
-          // background: rgba($c-dark, 0.5);
-          background-color: $text-color-70;
-        }
-      }
-    }
-  }
-  &__list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 50px;
-    border-top: 1px solid $background-color;
-    @include mobile-only {
-      display: flex;
-      flex-wrap: wrap;
-      font-size: 0;
-      opacity: 0;
-      visibility: hidden;
-      background-color: $background-95;
-      text-align: left;
-      &--active{
-        opacity: 1;
-        visibility: visible;
-      }
-    }
-    @include tablet-min {
-      display: flex;
-      position: relative;
-      display: block;
-      width: 100%;
-      border-top: 0;
-      top: 0;
-    }
-  }
-  &__item {
-    transition: background .5s ease, color .5s ease, border .5s ease;
-    background-color: $background-color-secondary;
-    color: $text-color-70;
-
-    @include mobile-only {
-      flex: 0 0 50%;
-      text-align: center;
-      border-bottom: 1px solid $background-color;
-      &:nth-child(odd){
-        border-right: 1px solid $background-color;
-
-        &:last-child {
-          // flex: 0 0 100%;
-        }
-      }
-    }
-    @include tablet-min {
-      width: 100%;
-      border-bottom: 1px solid $text-color-5;
-
-      &--profile {
-        position: fixed;
-        right: 0;
-        top: 0;
-        width: $header-size;
-        height: $header-size;
-        border-bottom: 0;
-        border-left: 1px solid $background-color;
-      }
-    }
-    &:hover, .is-active {
-      color: $text-color;
-      background-color: $background-color;
-    }
-  }
-  &__link {
-    background-color: inherit; // a elements have a transparent background
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    font-size: 7px;
-    font-weight: 300;
-    text-decoration: none;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    position: relative;
-    cursor: pointer;
-    &-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    @include mobile-only {
-      font-size: 10px;
-      padding: 20px 0;
-    }
-    @include tablet-min {
-      width: 95px;
-      height: 95px;
-      font-size: 9px;
-      &--profile {
-        width: 75px;
-        height: 75px;
-        background-color: $background-color-secondary;
-      }
-    }
-    &-icon {
-      width: 20px;
-      height: 20px;
-      fill: $text-color-70;
-      @include tablet-min {
-        width: 20px;
-        height: 20px;
-        margin-bottom: 5px;
-      }
-
-    }
-    &-title {
-      margin-top: 5px;
-      display: block;
-      width: 100%;
-    }
-    &:hover &-icon, &.is-active &-icon {
-      fill: $text-color;
-    }
-  }
-}
-</style>

src/components/PageHeader.vue

@@ -0,0 +1,110 @@
+<template>
+  <header>
+    <h2>{{ prettify }}</h2>
+    <h3>{{ subtitle }}</h3>
+
+    <router-link
+      v-if="shortList"
+      :to="urlify"
+      class="view-more"
+      :aria-label="`View all ${title}`"
+    >
+      View All
+    </router-link>
+
+    <div v-else-if="info">
+      <div v-if="info instanceof Array" class="flex flex-direction-column">
+        <span v-for="item in info" :key="item" class="info">{{ item }}</span>
+      </div>
+
+      <span v-else class="info">{{ info }}</span>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+
+  interface Props {
+    title: string;
+    subtitle?: string;
+    info?: string | Array<string>;
+    link?: string;
+    shortList?: boolean;
+  }
+
+  const props = defineProps<Props>();
+
+  const urlify = computed(() => {
+    return `/list/${props.title.toLowerCase().replace(" ", "_")}`;
+  });
+
+  const prettify = computed(() => {
+    return props.title.includes("_")
+      ? props.title.split("_").join(" ")
+      : props.title;
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
+
+  header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background-color: $background-color;
+
+    position: sticky;
+    position: -webkit-sticky;
+    top: $header-size;
+    z-index: 1;
+
+    h2 {
+      font-size: 1.4rem;
+      font-weight: 300;
+      text-transform: capitalize;
+      line-height: 1.4rem;
+      margin: 0;
+      color: $text-color;
+    }
+
+    .view-more {
+      font-size: 0.9rem;
+      font-weight: 300;
+      letter-spacing: 0.5px;
+      color: $text-color-70;
+      text-decoration: none;
+      transition: color 0.5s ease;
+      cursor: pointer;
+
+      &:after {
+        content: " →";
+      }
+      &:hover {
+        color: $text-color;
+      }
+    }
+
+    .info {
+      font-size: 13px;
+      font-weight: 300;
+      letter-spacing: 0.5px;
+      color: $text-color;
+      text-decoration: none;
+      text-align: right;
+    }
+
+    @include tablet-min {
+      padding-left: 1.25rem;
+    }
+
+    @include desktop-lg-min {
+      padding-left: 1.75rem;
+    }
+  }
+</style>

src/components/Person.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="persons">
-    <div class="persons--image" :style="{ 
-      'background-image': 'url(' + getPicture(info) + ')' }"></div>
-    <span>{{ info.name }}</span>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Person',
-  components: {
-
-  },
-  props: {
-    info: Object
-  },
-  data() {
-    return {
-
-    }
-  },
-  created() {},
-  beforeMount() {},
-  computed: {
-    
-  },
-  methods: {
-getPicture: (person) => {
-  if (person)
-      return 'https://image.tmdb.org/t/p/w185' + person.profile_path;
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.persons {
-  display: flex;
-  // border: 1px solid black;
-  flex-direction: column;
-
-  margin: 0 0.5rem;
-
-  span {
-    font-size: 0.6rem;
-  }
-
-  &--image {
-    border-radius: 50%;
-    height: 70px;
-    width: 70px;
-    // height: auto;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-  }
-
-  &--name {
-  }
-}
-</style>

src/components/Popup.vue

@@ -0,0 +1,237 @@
+<template>
+  <div
+    v-if="isOpen"
+    ref="popupContainer"
+    class="movie-popup"
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+    @click="close"
+    @keydown.enter="close"
+    @keydown="handleKeydown"
+  >
+    <div class="movie-popup__box" @click.stop>
+      <person v-if="type === 'person'" :id="id" type="person" />
+      <movie v-else :id="id" :type="type"></movie>
+      <button class="movie-popup__close" @click="close" tabindex="0"></button>
+    </div>
+    <i class="loader"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+  import { useStore } from "vuex";
+  import Movie from "@/components/popup/Movie.vue";
+  import Person from "@/components/popup/Person.vue";
+  import type { Ref } from "vue";
+  import { MediaTypes } from "../interfaces/IList";
+
+  interface URLQueryParameters {
+    id: number;
+    type: MediaTypes;
+  }
+
+  const store = useStore();
+  const isOpen: Ref<boolean> = ref();
+  const id: Ref<string> = ref();
+  const type: Ref<MediaTypes> = ref();
+  const popupContainer = ref<HTMLElement | null>(null);
+  let previouslyFocusedElement: HTMLElement | null = null;
+
+  const unsubscribe = store.subscribe((mutation, state) => {
+    if (!mutation.type.includes("popup")) return;
+
+    isOpen.value = state.popup.open;
+    id.value = state.popup.id;
+    type.value = state.popup.type;
+
+    if (isOpen.value) {
+      document.getElementsByTagName("body")[0].classList.add("no-scroll");
+    } else {
+      document.getElementsByTagName("body")[0].classList.remove("no-scroll");
+    }
+  });
+
+  function getFromURLQuery(): URLQueryParameters {
+    let _id: number;
+    let _type: MediaTypes;
+
+    const params = new URLSearchParams(window.location.search);
+    params.forEach((_, key) => {
+      if (
+        key !== MediaTypes.Movie &&
+        key !== MediaTypes.Show &&
+        key !== MediaTypes.Person
+      ) {
+        return;
+      }
+
+      _id = Number(params.get(key));
+      _type = key;
+    });
+
+    return { id: _id, type: _type };
+  }
+
+  function open(_id: number, _type: string) {
+    if (!_id || !_type) return;
+    store.dispatch("popup/open", { id: _id, type: _type });
+  }
+
+  function close() {
+    store.dispatch("popup/close");
+  }
+
+  function checkEventForEscapeKey(event: KeyboardEvent) {
+    if (event.keyCode !== 27) return;
+    close();
+  }
+
+  function getFocusableElements(): HTMLElement[] {
+    if (!popupContainer.value) return [];
+
+    const focusableSelectors = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+
+    return Array.from(
+      popupContainer.value.querySelectorAll(focusableSelectors)
+    ) as HTMLElement[];
+  }
+
+  function trapFocus(event: KeyboardEvent) {
+    if (event.key !== "Tab") return;
+
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+      // Shift + Tab
+      if (document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      }
+    } else {
+      // Tab
+      if (document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    trapFocus(event);
+  }
+
+  function setInitialFocus() {
+    nextTick(() => {
+      // Focus the popup container itself instead of a specific element
+      // This allows tab to start fresh without any element being focused
+      if (popupContainer.value) {
+        popupContainer.value.focus();
+      }
+    });
+  }
+
+  watch(isOpen, newValue => {
+    if (newValue) {
+      // Store the previously focused element
+      previouslyFocusedElement = document.activeElement as HTMLElement;
+      // Set focus to popup
+      setInitialFocus();
+    } else {
+      // Restore focus to previously focused element
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+      }
+    }
+  });
+
+  window.addEventListener("keyup", checkEventForEscapeKey);
+
+  onMounted(() => {
+    const query = getFromURLQuery();
+    open(query?.id, query?.type);
+  });
+
+  onBeforeUnmount(() => {
+    unsubscribe();
+    window.removeEventListener("keyup", checkEventForEscapeKey);
+  });
+</script>
+
+<style lang="scss">
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .movie-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 20;
+    width: 100%;
+    height: 100%;
+    background: rgba($dark, 0.93);
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+
+    &:focus {
+      outline: none;
+    }
+
+    &__box {
+      max-width: 768px;
+      position: relative;
+      z-index: 5;
+      margin: 8vh auto;
+
+      @include mobile {
+        margin: 0 0 50px 0;
+      }
+    }
+    &__close {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      border: 0;
+      background: transparent;
+      width: 40px;
+      height: 40px;
+      transition: background 0.5s ease;
+      cursor: pointer;
+      z-index: 5;
+
+      &:before,
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 19px;
+        left: 10px;
+        width: 20px;
+        height: 2px;
+        background-color: white;
+      }
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
+      &:hover {
+        background-color: var(--highlight-color);
+      }
+    }
+  }
+</style>

src/components/Profile.vue

@@ -1,161 +0,0 @@
-<template>
-  <section class="profile">
-    <div class="profile__content" v-if="userLoggedIn">
-      <header class="profile__header">
-        <h2 class="profile__title">{{ emoji }} Welcome {{ userName }}</h2>
-
-        <div class="button--group">
-          <seasoned-button @click="showSettings = !showSettings">{{ showSettings ? 'hide settings' : 'show settings' }}</seasoned-button>
-
-          <seasoned-button @click="logOut">Log out</seasoned-button>
-        </div>
-      </header>
-
-      <settings v-if="showSettings"></settings>
-
-      <list-header title="User requests" :info="resultCount"/>
-      <results-list v-if="results" :results="results" />
-    </div>
-
-    <section class="not-found" v-if="!userLoggedIn">
-      <div class="not-found__content">
-        <h2 class="not-found__title">Authentication Request Failed</h2>
-        <router-link :to="{name: 'signin'}" exact title="Sign in here">
-          <button class="not-found__button button">Sign In</button>
-        </router-link>
-      </div>
-    </section>
-  </section>
-</template>
-
-<script>
-import storage from '@/storage'
-import store from '@/store'
-import ListHeader from '@/components/ListHeader'
-import ResultsList from '@/components/ResultsList'
-import Settings from '@/components/Settings'
-import SeasonedButton from '@/components/ui/SeasonedButton'
-
-import { getEmoji, getUserRequests } from '@/api'
-
-export default {
-  components: { ListHeader, ResultsList, Settings, SeasonedButton },
-  data(){
-    return{
-      userLoggedIn: '',
-      userName: '',
-      emoji: '',
-      results: undefined,
-      totalResults: undefined,
-      showSettings: false
-    }
-  },
-  computed: {
-    resultCount() {
-      if (this.results === undefined)
-        return
-
-      const loadedResults = this.results.length
-      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
-      return `${loadedResults} of ${totalResults} results`
-    }
-  },
-  methods: {
-    createSession(token){
-      axios.get(`https://api.themoviedb.org/3/authentication/session/new?api_key=${storage.apiKey}&request_token=${token}`)
-      .then(function(resp){
-          let data = resp.data;
-          if(data.success){
-            let id = data.session_id;
-            localStorage.setItem('session_id', id);
-            eventHub.$emit('setUserStatus');
-            this.userLoggedIn = true;
-            this.getUserInfo();
-          }
-      }.bind(this));
-    },
-    getUserInfo(){
-      this.userName = localStorage.getItem('username'); 
-    },
-    toggleSettings() {
-      this.showSettings = this.showSettings ? false : true;
-    },
-    logOut(){
-      localStorage.clear();
-      eventHub.$emit('setUserStatus');
-      this.$router.push({ name: 'home' });
-    }
-  },
-  created(){
-    if(!localStorage.getItem('token')){
-      this.userLoggedIn = false;
-    } else {
-      this.userLoggedIn = true;
-      this.getUserInfo();
-
-      getUserRequests()
-        .then(results => {
-          this.results = results.results
-          this.totalResults = results.total_results
-        })
-
-      getEmoji()
-        .then(resp => {
-          const { emoji } = resp
-          this.emoji = emoji
-          store.dispatch('documentTitle/updateEmoji', emoji)
-        })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.button--group {
-  display: flex;
-}
-
-// DUPLICATE CODE
-.profile{
-  &__header{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px;
-    border-bottom: 1px solid $text-color-5;
-
-    @include mobile-only {
-      flex-direction: column;
-      align-items: flex-start;
-
-      .button--group {
-        padding-top: 2rem;
-      }
-    }
-
-    @include tablet-min{
-      padding: 29px 30px;
-    }
-    @include tablet-landscape-min{
-      padding: 29px 50px;
-    }
-    @include desktop-min{
-      padding: 29px 60px;
-    }
-  }
-  &__title{
-    margin: 0;
-    font-size: 16px;
-    line-height: 16px;
-    color: $text-color;
-    font-weight: 300;
-    @include tablet-min{
-      font-size: 18px;
-      line-height: 18px;
-    }
-  }
-}
-</style>

src/components/Register.vue

@@ -1,126 +0,0 @@
-<template>
-  <section>
-    <h1>Register new user</h1>
-
-    <seasoned-input placeholder="username" icon="Email" type="username" :value.sync="username" />
-
-    <seasoned-input placeholder="password" icon="Keyhole" type="password"
-      :value.sync="password" @enter="requestNewUser"/>
-
-    <seasoned-input placeholder="repeat password" icon="Keyhole" type="password"
-      :value.sync="passwordRepeat" @enter="requestNewUser"/>
-
-    <seasoned-button @click="requestNewUser">Register</seasoned-button>
-
-    <router-link class="link" to="/signin">Have a user? Sign in here</router-link>
-    <seasoned-messages :messages.sync="messages"></seasoned-messages>
-  </section>
-</template>
-
-<script>
-import axios from 'axios'
-import SeasonedButton from '@/components/ui/SeasonedButton'
-import SeasonedInput from '@/components/ui/SeasonedInput'
-import SeasonedMessages from '@/components/ui/SeasonedMessages'
-
-export default {
-  components: { SeasonedButton, SeasonedInput, SeasonedMessages },
-  data() {
-    return {
-      messages: [],
-      username: null,
-      password: null,
-      passwordRepeat: null
-    }
-  },
-  methods: {
-    requestNewUser(){
-      let { username, password, passwordRepeat } = this
-
-      let verifyCredentials = this.checkCredentials(username, password, passwordRepeat);
-
-      if (verifyCredentials.verified) {
-        axios.post(`https://api.kevinmidboe.com/api/v1/user`, {
-          username: username,
-          password: password
-        })
-        .then(resp => {
-          let data = resp.data;
-          if (data.success){
-            localStorage.setItem('token', data.token);
-            localStorage.setItem('username', username);
-            localStorage.setItem('admin', data.admin)
-            
-            eventHub.$emit('setUserStatus');
-            this.$router.push({ name: 'profile' })
-          }
-        })
-        .catch(error => {
-          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.response.data.error })
-        });
-      } 
-      else {
-        this.messages.push({ type: 'warning', title: 'Parse error', message: verifyCredentials.reason })
-      }
-    },
-    checkCredentials(username, password, passwordRepeat) {
-      if (!username || username.length === 0) {
-        return {
-          verified: false,
-          reason: 'Fill inn username'
-        }
-      } 
-      else if (!password || !passwordRepeat) {
-        return {
-          verified: false,
-          reason: "Fill inn both password fields"
-        }
-      }
-      else if (password !== passwordRepeat) {
-        return {
-          verified: false,
-          reason: 'Passwords do not match'
-        }
-      } 
-      else {
-        return {
-          verified: true,
-          reason: 'Verified credentials'
-        }
-      }
-    },
-    logOut(){
-      localStorage.clear();
-      eventHub.$emit('setUserStatus');
-      this.$router.push({ name: 'home' });
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-
-section {
-  padding: 1.3rem;
-
-  @include tablet-min {
-    padding: 4rem;
-  }
-
-  h1 {
-    margin: 0;
-    line-height: 16px;
-    color: $text-color;
-    font-weight: 300;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-  }
-
-  .link {
-    display: block;
-    width: max-content;
-    margin-top: 1rem;
-  }
-}
-</style>

src/components/ResultsList.vue

@@ -1,68 +1,76 @@
 <template>
-  <ul class="results" :class="{'shortList': shortList}">
+  <div>
-    <movies-list-item v-for='movie in results' :movie="movie" />
+    <ul
+      v-if="results && results.length"
+      class="results"
+      :class="{ shortList: shortList }"
+    >
+      <results-list-item
+        v-for="(result, index) in results"
+        :key="generateResultKey(index, `${result.type}-${result.id}`)"
+        :list-item="result"
+      />
     </ul>
+
+    <span v-else-if="!loading" class="no-results">No results found</span>
+  </div>
 </template>
 
+<script setup lang="ts">
+  import ResultsListItem from "@/components/ResultsListItem.vue";
+  import type { ListResults } from "../interfaces/IList";
 
-<script>
+  interface Props {
-import MoviesListItem from '@/components/MoviesListItem'
+    results: Array<ListResults>;
+    shortList?: boolean;
+    loading?: boolean;
+  }
 
-export default {
+  defineProps<Props>();
-  components: { MoviesListItem },
+
-  props: {
+  function generateResultKey(index: string | number | symbol, value: string) {
-    results: {
+    return `${String(index)}-${value}`;
-      type: Array,
-      required: true
-    },
-    shortList: {
-      type: Boolean,
-      required: false,
-      default: false
   }
-  }
-}  
 </script>
 
-
 <style lang="scss" scoped>
-@import './src/scss/media-queries';
+  @import "scss/media-queries";
+  @import "scss/main";
 
-.results {
+  .no-results {
-  display: flex;
+    width: 100%;
-  flex-wrap: wrap;
+    display: block;
+    text-align: center;
+    margin: 1.5rem;
+    font-size: 1.2rem;
+  }
+
+  .results {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
+    grid-auto-rows: auto;
     margin: 0;
     padding: 0;
     list-style: none;
 
-  &.shortList > li {
+    @include mobile {
-    display: none;
+      grid-template-columns: repeat(2, 1fr);
+    }
 
-    &:nth-child(-n+4) {
+    &.shortList {
-      display: block;
+      overflow: auto;
-    }
+      grid-auto-flow: column;
-  }
+      max-width: 100vw;
-}
 
-@include tablet-min {
+      @include noscrollbar;
-  .results.shortList > li:nth-child(-n+6) {
-    display: block;
-  }
-}
-@include tablet-landscape-min {
-  .results.shortList > li:nth-child(-n+8) {
-    display: block;
-  }
-}
-@include desktop-min {
-  .results.shortList > li:nth-child(-n+10) {
-    display: block;
-  }
-}
-@include desktop-lg-min {
-  .results.shortList > li:nth-child(-n+16) {
-    display: block;
-  }
-}
 
+      > li {
+        min-width: 225px;
+      }
+
+      @include tablet-min {
+        max-width: calc(100vw - var(--header-size));
+      }
+    }
+  }
 </style>

src/components/ResultsListItem.vue

@@ -0,0 +1,187 @@
+<template>
+  <li ref="list-item" class="movie-item">
+    <figure
+      ref="posterElement"
+      class="movie-item__poster"
+      @click="openMoviePopup"
+      @keydown.enter="openMoviePopup"
+    >
+      <img
+        class="movie-item__img"
+        :alt="posterAltText"
+        :data-src="poster"
+        src="/assets/placeholder.png"
+      />
+
+      <div v-if="listItem.download" class="progress">
+        <progress :value="listItem.download.progress" max="100"></progress>
+        <span
+          >{{ listItem.download.state }}:
+          {{ listItem.download.progress }}%</span
+        >
+      </div>
+    </figure>
+
+    <div
+      class="movie-item__info"
+      @click="openMoviePopup"
+      @keydown.enter="openMoviePopup"
+    >
+      <p v-if="listItem.title || listItem.name" class="movie-item__title">
+        {{ listItem.title || listItem.name }}
+      </p>
+      <p v-if="listItem.year">{{ listItem.year }}</p>
+      <p v-if="listItem.type == 'person'">
+        Known for: {{ listItem.known_for_department }}
+      </p>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from "vue";
+  import { useStore } from "vuex";
+  import type { Ref } from "vue";
+  import type { IMovie, IShow, IPerson } from "../interfaces/IList";
+
+  interface Props {
+    listItem: IMovie | IShow | IPerson;
+  }
+
+  const props = defineProps<Props>();
+  const store = useStore();
+
+  const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";
+  const IMAGE_FALLBACK = "/assets/no-image.svg";
+  const poster: Ref<string> = ref();
+  const posterElement: Ref<HTMLElement> = ref(null);
+  const observed: Ref<boolean> = ref(false);
+
+  if (props.listItem?.poster) {
+    poster.value = IMAGE_BASE_URL + props.listItem.poster;
+  } else {
+    poster.value = IMAGE_FALLBACK;
+  }
+
+  const posterAltText = computed(() => {
+    const type = props.listItem.type || "";
+    let title = "";
+
+    if ("name" in props.listItem) title = props.listItem.name;
+    else if ("title" in props.listItem) title = props.listItem.title;
+
+    return props.listItem.poster
+      ? `Poster for ${type} ${title}`
+      : `Missing image for ${type} ${title}`;
+  });
+
+  function observePosterAndSetImageSource() {
+    const imageElement = posterElement.value.getElementsByTagName("img")[0];
+    if (imageElement == null) return;
+
+    const imageObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && observed.value === false) {
+          const lazyImage = entry.target as HTMLImageElement;
+          lazyImage.src = lazyImage.dataset.src;
+          posterElement.value.classList.add("is-loaded");
+          observed.value = true;
+        }
+      });
+    });
+
+    imageObserver.observe(imageElement);
+  }
+
+  onMounted(observePosterAndSetImageSource);
+
+  function openMoviePopup() {
+    store.dispatch("popup/open", { ...props.listItem });
+  }
+
+  // const imageSize = computed(() => {
+  //   if (!posterElement.value) return;
+  //   const { height, width } = posterElement.value.getBoundingClientRect();
+  //   return {
+  //     height: Math.ceil(height),
+  //     width: Math.ceil(width)
+  //   };
+  // });
+
+  // import img from "../directives/v-image";
+  //   directives: {
+  //     img: img
+  //   },
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
+
+  .movie-item {
+    padding: 15px;
+    width: 100%;
+    background-color: var(--background-color);
+
+    &:hover &__info > p {
+      color: $text-color;
+    }
+
+    &__poster {
+      text-decoration: none;
+      color: $text-color-70;
+      font-weight: 300;
+      position: relative;
+      transform: scale(0.97) translateZ(0);
+
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background-color: var(--background-color);
+        transition: 1s background-color ease;
+      }
+
+      &:hover {
+        transform: scale(1.03);
+        box-shadow: 0 0 10px rgba($dark, 0.1);
+      }
+
+      &.is-loaded::before {
+        background-color: transparent;
+      }
+
+      img {
+        width: 100%;
+        border-radius: 10px;
+      }
+    }
+
+    &__info {
+      padding-top: 10px;
+      font-weight: 300;
+
+      > p {
+        color: $text-color-70;
+        margin: 0;
+        font-size: 14px;
+        letter-spacing: 0.5px;
+        transition: color 0.5s ease;
+        cursor: pointer;
+        @include mobile-ls-min {
+          font-size: 12px;
+        }
+        @include tablet-min {
+          font-size: 14px;
+        }
+      }
+    }
+
+    &__title {
+      font-weight: 400;
+    }
+  }
+</style>

src/components/ResultsSection.vue

@@ -0,0 +1,203 @@
+<template>
+  <div ref="resultSection" class="resultSection">
+    <page-header v-bind="{ title, info, shortList }" />
+
+    <div
+      v-if="!loadedPages.includes(1) && loading == false"
+      class="button-container"
+    >
+      <seasoned-button class="load-button" :full-width="true" @click="loadLess"
+        >load previous</seasoned-button
+      >
+    </div>
+
+    <results-list v-bind="{ results, shortList, loading }" />
+    <loader v-if="loading" />
+
+    <div ref="loadMoreButton" class="button-container">
+      <seasoned-button
+        v-if="!loading && !shortList && page != totalPages && results.length"
+        class="load-button"
+        :full-width="true"
+        @click="loadMore"
+        >load more</seasoned-button
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from "vue";
+  import PageHeader from "@/components/PageHeader.vue";
+  import ResultsList from "@/components/ResultsList.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import Loader from "@/components/ui/Loader.vue";
+  import type { Ref } from "vue";
+  import type { IList, ListResults } from "../interfaces/IList";
+  import type ISection from "../interfaces/ISection";
+
+  interface Props extends ISection {
+    title: string;
+    apiFunction: (page: number) => Promise<IList>;
+    shortList?: boolean;
+  }
+
+  const props = defineProps<Props>();
+
+  const results: Ref<ListResults> = ref([]);
+  const page: Ref<number> = ref(1);
+  const loadedPages: Ref<number[]> = ref([]);
+  const totalResults: Ref<number> = ref(0);
+  const totalPages: Ref<number> = ref(0);
+  const loading: Ref<boolean> = ref(true);
+  const autoLoad: Ref<boolean> = ref(false);
+  const observer: Ref<IntersectionObserver> = ref(null);
+  const resultSection = ref(null);
+  const loadMoreButton = ref(null);
+
+  function pageCountString(_page: number, _totalPages: number) {
+    return `Page ${_page} of ${_totalPages}`;
+  }
+
+  function resultCountString(_results: ListResults, _totalResults: number) {
+    const loadedResults = _results.length;
+    const __totalResults = _totalResults < 10000 ? _totalResults : "∞";
+    return `${loadedResults} of ${__totalResults} results`;
+  }
+
+  function setLoading(state: boolean) {
+    loading.value = state;
+  }
+
+  const info = computed(() => {
+    if (results.value.length === 0) return [null, null];
+
+    const pageCount = pageCountString(page.value, totalPages.value);
+    const resultCount = resultCountString(results.value, totalResults.value);
+    return [pageCount, resultCount];
+  });
+
+  function getPageFromUrl() {
+    const _page = new URLSearchParams(window.location.search).get("page");
+    if (!_page) return null;
+
+    return Number(_page);
+  }
+
+  function updateQueryParams() {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has("page")) {
+      params.set("page", page.value?.toString());
+    } else if (page.value > 1) {
+      params.append("page", page.value?.toString());
+    }
+
+    window.history.replaceState(
+      {},
+      "search",
+      `${window.location.protocol}//${window.location.hostname}${
+        window.location.port ? `:${window.location.port}` : ""
+      }${window.location.pathname}${
+        params.toString().length ? `?${params}` : ""
+      }`
+    );
+  }
+
+  function getListResults(front = false) {
+    props
+      .apiFunction(page.value)
+      .then(listResponse => {
+        if (!front)
+          results.value = results.value.concat(...listResponse.results);
+        else results.value = listResponse.results.concat(...results.value);
+
+        page.value = listResponse.page;
+        loadedPages.value.push(page.value);
+        loadedPages.value = loadedPages.value.sort((a, b) => a - b);
+        totalPages.value = listResponse.total_pages;
+        totalResults.value = listResponse.total_results;
+      })
+      .then(updateQueryParams)
+      .finally(() => setLoading(false));
+  }
+
+  function loadMore() {
+    if (!autoLoad.value) {
+      autoLoad.value = true;
+    }
+
+    loading.value = true;
+    const maxPage = [...loadedPages.value].slice(-1)[0];
+
+    if (Number.isNaN(maxPage)) return;
+    page.value = maxPage + 1;
+    getListResults();
+  }
+
+  function loadLess() {
+    loading.value = true;
+    const minPage = loadedPages.value[0];
+    if (minPage === 1) return;
+
+    page.value = minPage - 1;
+    getListResults(true);
+  }
+
+  function handleButtonIntersection(entries) {
+    entries.map(entry =>
+      entry.isIntersecting && autoLoad.value ? loadMore() : null
+    );
+  }
+
+  function setupAutoloadObserver() {
+    observer.value = new IntersectionObserver(handleButtonIntersection, {
+      root: resultSection.value.$el,
+      rootMargin: "0px",
+      threshold: 0
+    });
+
+    observer.value.observe(loadMoreButton.value);
+  }
+
+  page.value = getPageFromUrl() || page.value;
+  if (results.value?.length === 0) getListResults();
+  onMounted(() => {
+    if (!props?.shortList) setupAutoloadObserver();
+  });
+
+  //   beforeDestroy() {
+  //     this.observer = undefined;
+  //   }
+  // };
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .resultSection {
+    background-color: var(--background-color);
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+  }
+
+  .load-button {
+    margin: 2rem 0;
+
+    @include mobile {
+      margin: 1rem 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 4rem;
+
+      @include mobile {
+        margin-bottom: 2rem;
+      }
+    }
+  }
+</style>

src/components/Search.vue

@@ -1,102 +0,0 @@
-<template>
-  <div>
-    <list-header :title="title" :info="resultCount" :sticky="true" />
-
-    <results-list :results="results" />
-    
-    <div v-if="page < totalPages" class="fullwidth-button">
-      <seasoned-button @click="loadMore">load more</seasoned-button>
-    </div>
-
-    <loader v-if="!results.length" />
-  </div>
-</template>
-
-<script>
-import { searchTmdb } from '@/api'
-import ListHeader from '@/components/ListHeader'
-import ResultsList from '@/components/ResultsList'
-import SeasonedButton from '@/components/ui/SeasonedButton'
-import Loader from '@/components/ui/Loader'
-
-export default {
-  components: { ListHeader, ResultsList, SeasonedButton, Loader },
-  props: {
-    propQuery: {
-      type: String,
-      required: false
-    },
-    propPage: {
-      type: Number,
-      required: false
-    }
-  },
-  data() {
-    return {
-      loading: true,
-      query: String,
-      title: String,
-      page: Number,
-      totalPages: 0,
-      results: [],
-      totalResults: []
-    }
-  },
-  computed: {
-    resultCount() {
-      const loadedResults = this.results.length
-      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
-      return `${loadedResults} of ${totalResults} results`
-    }
-  },
-  methods: {
-    search(query=this.query, page=this.page) {
-      searchTmdb(query, page)
-        .then(this.parseResponse)
-    },
-    parseResponse(data) {
-      if (this.results.length > 0) {
-        this.results.push(...data.results)
-      } else {
-        this.results = data.results
-      }
-
-      this.totalPages = data.total_pages
-      this.totalResults = data.total_results || data.results.length
-
-      this.loading = false
-    },
-    loadMore() {
-      this.page++
-
-      window.history.replaceState({}, 'search', `/#/search?query=${this.query}&page=${this.page}`)
-      this.search()
-    }
-  },
-  created() {
-    const { query, page } = this.$route.query
-
-    if (!query) {
-      // abort
-      console.error('abort, no query')
-    }
-    this.query = decodeURIComponent(query)
-    this.page = page ? page : 1
-    this.title = `Search results: ${this.query}`
-
-    this.search()
-  }
-}
-
-</script>
-
-<style lang="scss" scoped>
-.fullwidth-button {
-  width: 100%;
-  margin: 1rem 0;
-  padding-bottom: 2rem;
-  display: flex;
-  justify-content: center;
-}
-
-</style>

src/components/SearchInput.vue

@@ -1,287 +0,0 @@
-<template>
-  <div>
-    
-    <div class="search">
-      <input
-        ref="input"
-        type="text"
-        placeholder="Search for a movie or show"
-        autocorrect="off"
-        autocapitalize="off"
-        v-model="query" 
-        @input="handleInput" 
-        @click="focus = true"
-        @keydown.escape="handleEscape"
-        @keyup.enter="handleSubmit"
-        @keydown.up="navigateUp"
-        @keydown.down="navigateDown" />
-
-      <svg class="search--icon" fill="currentColor"><use xlink:href="#iconSearch"></use></svg>
-    </div> 
-
-    <transition name="fade">
-      <div class="dropdown" v-if="!disabled && focus && query.length > 0">
-        <div class="dropdown--results">
-
-          <ul v-for="(item, index) in elasticSearchResults"
-              @click="$popup.open(item.id, item.type)"
-              :class="{ active: index + 1 === selectedResult}">
-                
-              {{ item.name }}
-          </ul>
-
-        </div>
-
-        <seasoned-button class="end-section" fullWidth="true" 
-          @click="focus = false" :active="elasticSearchResults.length + 1 === selectedResult">
-          close
-        </seasoned-button>
-      </div>
-    </transition>
-</div>
-
-
-</template>
-
-<script>
-import SeasonedButton from '@/components/ui/SeasonedButton'
-
-import { elasticSearchMoviesAndShows } from '@/api'
-import config from '@/config.json'
-
-export default {
-  name: 'SearchInput',
-  components: {
-    SeasonedButton
-  },
-  props: ['value'],
-  data() {
-    return {
-      query: this.value,
-      focus: false,
-      disabled: false,
-      scrollListener: undefined,
-      scrollDistance: 0,
-      elasticSearchResults: '',
-      selectedResult: 0
-    }
-  },
-  watch: {
-    focus: function(val) {
-      if (val === true) {
-        window.addEventListener('scroll', this.disableFocus)
-      } else {
-        window.removeEventListener('scroll', this.disableFocus)
-        this.scrollDistance = 0
-      }
-    }
-  },
-  beforeMount() {
-    const elasticUrl = config.ELASTIC_URL
-    if (elasticUrl === undefined || elasticUrl === false || elasticUrl === '') {
-      this.disabled = true
-    }
-  },
-  beforeDestroy() {
-    console.log('scroll eventlistener not removed, destroying!')
-    window.removeEventListener('scroll', this.disableFocus)
-  },
-  methods: {
-    navigateDown() {
-      this.focus = true
-      this.selectedResult++
-    },
-    navigateUp() {
-      this.focus = true
-      this.selectedResult--
-      const input = this.$refs.input;
-      const textLength = input.value.length
-
-      setTimeout(() => {
-        input.focus()
-        input.setSelectionRange(textLength, textLength + 1)
-      }, 1)
-    },
-    handleInput(e){
-      this.selectedResult = 0
-      this.$emit('input', this.query);
-
-      if (! this.focus) {
-        this.focus = true;
-      }
-
-      elasticSearchMoviesAndShows(this.query)
-      .then(resp => {
-        const data = resp.hits.hits
-
-        this.elasticSearchResults = data.map(item => {
-          const index = item._index.slice(0, -1)
-          if (index === 'movie' || item._source.original_title) {
-            return {
-              name: item._source.original_title,
-              id: item._source.id,
-              type: 'movie'
-            }
-          } else if (index === 'show' || item._source.original_name) {
-            return {
-              name: item._source.original_name,
-              id: item._source.id,
-              type: 'show'
-            }
-          }
-        })
-        console.log(this.elasticSearchResults)
-      })
-    },
-    handleSubmit() {
-      let searchResults = this.elasticSearchResults
-
-      if (this.selectedResult > searchResults.length) {
-        this.focus = false
-        this.selectedResult = 0
-      } else if (this.selectedResult > 0) {
-        const resultItem = searchResults[this.selectedResult - 1]
-        this.$popup.open(resultItem.id, resultItem.type)
-      } else {
-        const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'))
-        this.$router.push({ name: 'search', query: { query: encodedQuery }});
-        this.focus = false
-        this.selectedResult = 0
-      }
-    },
-    handleEscape() {
-      if (this.$popup.isOpen) {
-        console.log('THIS WAS FUCKOING OPEN!')
-      } else {
-        this.focus = false
-      }
-    },
-    disableFocus(_) {
-      this.focus = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import './src/scss/main';
-
-
-.fade-enter-active {
-  transition: opacity .2s;
-}
-.fade-leave-active {
-  transition: opacity .2s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-
-.dropdown {
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  z-index: 5;
-  min-height: $header-size;
-  right: 0px;
-  background-color: $background-color-secondary;
-
-  @include mobile-only {
-    position: fixed;
-    top: 50px;
-    padding-top: 20px;
-    width: calc(100%);
-  }
-
-  &--results {
-    padding-left: 60px;
-    width: 100%;
-
-    @include mobile-only {
-      padding-left: 45px;
-    }
-
-    > ul {
-      font-size: 1.3rem;
-      padding: 0;
-      margin: 0.2rem 0;
-      width: calc(100% - 25px);
-      max-width: fit-content;
-
-      list-style: none;      
-      color: rgba(0, 0, 0, 0.5);
-      text-transform: capitalize;
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: $text-color-50;
-
-      &.active, &:hover, &:active {
-        color: $text-color;
-        border-bottom: 2px solid $text-color;
-      }
-    }
-  }
-}
-
-.search {
-  height: $header-size;
-  display: flex;
-  position: fixed;
-  flex-wrap: wrap;
-  z-index: 5;
-  border: 0;
-  background-color: $background-color-secondary;
-
-  // TODO check if this is for mobile
-  width: calc(100% - 110px);
-  top: 0;
-  right: 55px;
-
-  @include tablet-min{
-    position: relative;
-    width: 100%;
-    right: 0px;
-  }
-
-  input {
-    display: block;
-    width: 100%;
-    padding: 13px 20px 13px 45px;
-    outline: none;
-    margin: 0;
-    border: 0;
-    background-color: $background-color-secondary;
-    font-weight: 300;
-    font-size: 19px;
-    color: $text-color;
-    transition: background-color .5s ease, color .5s ease;
-
-    @include tablet-min {
-      padding: 13px 30px 13px 60px;
-    }
-  }
-
-  &--icon{
-    width: 20px;
-    height: 20px;
-    fill: $text-color-50;
-    transition: fill 0.5s ease;
-    pointer-events: none;
-    position: absolute;
-    left: 15px;
-    top: 15px;
-
-    @include tablet-min{
-      top: 27px;
-      left: 25px;
-    }
-  }
-}
-</style>

src/components/Settings.vue

@@ -1,166 +0,0 @@
-<template>
-  <section class="profile">
-    <div class="profile__content" v-if="userLoggedIn">
-      <section class='settings'>
-        <h3 class='settings__header'>Plex account</h3>
-        <span class="settings__info">Sign in to your plex account to get information about recently added movies and to see your watch history</span>
-
-        <form class="form">
-          <seasoned-input placeholder="plex username" icon="Email" :value.sync="plexUsername"/>
-          <seasoned-input placeholder="plex password" icon="Keyhole" type="password"
-            :value.sync="plexPassword" @submit="authenticatePlex" />
-
-          <seasoned-button @click="authenticatePlex">link plex account</seasoned-button>
-
-          <seasoned-messages :messages.sync="messages" />
-        </form>
-
-        <hr class='setting__divider'>
-
-        <h3 class='settings__header'>Change password</h3>
-        <form class="form">
-          <seasoned-input placeholder="new password" icon="Keyhole" type="password"
-            :value.sync="newPassword" />
-
-          <seasoned-input placeholder="repeat new password" icon="Keyhole" type="password"
-            :value.sync="newPasswordRepeat" />
-
-          <seasoned-button @click="changePassword">change password</seasoned-button>
-        </form>
-
-        <hr class='setting__divider'>
-      </section>
-    </div>
-
-    <section class="not-found" v-else>
-      <div class="not-found__content">
-        <h2 class="not-found__title">Authentication Request Failed</h2>
-        <router-link :to="{name: 'signin'}" exact title="Sign in here">
-          <button class="not-found__button button">Sign In</button>
-        </router-link>
-      </div>
-    </section>
-  </section>
-</template>
-
-<script>
-import storage from '@/storage'
-import SeasonedInput from '@/components/ui/SeasonedInput'
-import SeasonedButton from '@/components/ui/SeasonedButton'
-import SeasonedMessages from '@/components/ui/SeasonedMessages'
-
-import { plexAuthenticate } from '@/api'
-
-export default {
-  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
-  data(){
-    return{
-      userLoggedIn: '',
-      messages: [],
-      plexUsername: null,
-      plexPassword: null,
-      newPassword: null,
-      newPasswordRepeat: null
-    }
-  },
-  methods: {
-    setValue(l, t) {
-      this[l] = t
-    },
-    changePassword() {
-      return
-    },
-    authenticatePlex() {
-      let username = this.plexUsername
-      let password = this.plexPassword
-
-      plexAuthenticate(username, password)
-      .then(resp => {
-        const data = resp.data
-        this.messages.push({ type: 'success', title: 'Authenticated with plex', message: 'Successfully linked plex account with seasoned request' })
-
-        console.log('response from plex:', data.username)
-      })
-      .catch(error => {
-        console.error(error);
-
-        this.messages.push({ type: 'error', title: 'Something went wrong', message: error.message })
-      })
-    }
-  },
-  created(){
-    if (localStorage.getItem('token')){
-      this.userLoggedIn = true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-a {
-   text-decoration: none;
-}
-
-// DUPLICATE CODE
-.form {
-  > div:last-child {
-    margin-top: 1rem;
-  }
-
-  &__group{
-     justify-content: unset;
-     &__input-icon {
-        margin-top: 8px;
-        height: 22px;
-        width: 22px;
-     }
-     &-input {
-        padding: 10px 5px 10px 45px;
-        height: 40px;
-        font-size: 17px;
-        width: 75%;
-        @include desktop-min {
-           width: 400px;
-        }
-     }
-  }
-}
-.settings {
-  padding: 3rem;
-
-  @include mobile-only {
-    padding: 1rem;
-  }
-
-   &__header {
-      margin: 0;
-      line-height: 16px;
-      color: $text-color;
-      font-weight: 300;
-      margin-bottom: 20px;
-      text-transform: uppercase;
-   }
-   &__info {
-      display: block;
-      margin-bottom: 25px;
-   }
-   hr {
-      display: block;
-      height: 1px;
-      border: 0;
-      border-bottom: 1px solid rgba(8, 28, 36, 0.05);
-      margin-top: 30px;
-      margin-bottom: 70px;
-      margin-left: 20px;
-      width: 96%;
-      text-align: left;
-   }
-   span {
-      font-weight: 200;
-      size: 16px;
-   }
-}
-</style>

src/components/Signin.vue

@@ -1,99 +0,0 @@
-<template>
-  <section>
-    <h1>Sign in</h1>
-
-    <seasoned-input placeholder="username" icon="Email" type="username" :value.sync="username" />
-    <seasoned-input placeholder="password" icon="Keyhole" type="password" :value.sync="password" @enter="signin"/>
-
-    <seasoned-button @click="signin">sign in</seasoned-button>
-
-    <router-link class="link" to="/register">Don't have a user? Register here</router-link>
-    <seasoned-messages :messages.sync="messages"></seasoned-messages>
-
-  </section>
-</template>
-
-
-
-<script>
-import axios from 'axios'
-import storage from '../storage'
-import SeasonedInput from '@/components/ui/SeasonedInput'
-import SeasonedButton from '@/components/ui/SeasonedButton'
-import SeasonedMessages from '@/components/ui/SeasonedMessages'
-
-export default {
-  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
-  data(){
-    return{
-      messages: [],
-      username: null,
-      password: null
-    }
-  },
-  methods: {
-    setValue(l, t) {
-      this[l] = t
-    },
-    signin(){
-      let username = this.username;
-      let password = this.password;
-
-      axios.post(`https://api.kevinmidboe.com/api/v1/user/login`, {
-        username: username,
-        password: password
-      })
-      .then(resp => {
-        let data = resp.data;
-        if (data.success){
-          localStorage.setItem('token', data.token);
-          localStorage.setItem('username', username);
-          localStorage.setItem('admin', data.admin);
-          
-          eventHub.$emit('setUserStatus');
-          this.$router.push({ name: 'profile' })
-        }
-      })
-      .catch(error => {
-        if (error.message.endsWith('401')) {
-          this.messages.push({ type: 'warning', title: 'Access denied', message: 'Incorrect username or password' })
-        }
-        else {
-          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.message })
-        }
-      });
-    }
-  },
-  created(){
-    document.title = 'Sign in' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-
-section {
-  padding: 1.3rem;
-
-  @include tablet-min {
-    padding: 4rem;
-  }
-
-  h1 {
-    margin: 0;
-    line-height: 16px;
-    color: $text-color;
-    font-weight: 300;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-  }
-
-  .link {
-    display: block;
-    width: max-content;
-    margin-top: 1rem;
-  }
-}
-</style>

src/components/TorrentList.vue

@@ -1,505 +0,0 @@
-<template>
-  <div v-if="show" class="container">
-    <h2 class="torrentHeader-text">Searching for: {{ editedSearchQuery || query }}</h2>
-<!--     <div class="torrentHeader">
-      <span class="torrentHeader-text">Searching for:&nbsp;</span>
-
-
-      <span id="search" :contenteditable="editSearchQuery ? true : false" class="torrentHeader-text editable">{{ editedSearchQuery || query }}</span>
-
-
-      <svg v-if="!editSearchQuery" class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
-        <use xlink:href="#icon_radar"></use>
-      </svg>
-
-      <svg v-else class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
-        <use xlink:href="#icon_check"></use>
-      </svg>
-
-    </div> -->
-
-    <div v-if="listLoaded">
-      <div v-if="torrents.length > 0">
-        <ul class="filter">
-          <li class="filter-item" v-for="(item, index) in release_types" @click="applyFilter(item, index)" :class="{'active': item === selectedRelaseType}">{{ item }}</li>
-        </ul>
-
-
-        <table>
-          <tr class="table__header noselect">
-            <th @click="sortTable('name')" :class="selectedSortableClass('name')">
-              <span>Name</span>
-              <span v-if="prevCol === 'name' && direction">↑</span>
-              <span v-if="prevCol === 'name' && !direction">↓</span>
-            </th>
-            <th @click="sortTable('seed')" :class="selectedSortableClass('seed')">
-              <span>Seed</span>
-              <span v-if="prevCol === 'seed' && direction">↑</span>
-              <span v-if="prevCol === 'seed' && !direction">↓</span>
-            </th>
-            <th @click="sortTable('size')" :class="selectedSortableClass('size')">
-              <span>Size</span>
-              <span v-if="prevCol === 'size' && direction">↑</span>
-              <span v-if="prevCol === 'size' && !direction">↓</span>
-            <th>
-              <span>Magnet</span>
-            </th>
-          </tr>
-          <tr v-for="torrent in torrents" class="table__content">
-            <td @click="expand($event, torrent.name)">{{ torrent.name }}</td>
-            <td @click="expand($event, torrent.name)">{{ torrent.seed }}</td>
-            <td @click="expand($event, torrent.name)">{{ torrent.size }}</td>
-            <td @click="sendTorrent(torrent.magnet, torrent.name, $event)" class="download">
-              <svg class="download__icon"><use xlink:href="#iconUnmatched"></use></svg>
-            </td>
-          </tr>
-        </table>
-
-        <div style="
-          display: flex;
-          justify-content: center;
-          padding: 1rem;
-        ">
-          <seasonedButton @click="resetTorrentsAndToggleEditSearchQuery">Edit search query</seasonedButton>
-        </div>
-      </div>
-
-    <div v-else style="display: flex;
-                       padding-bottom: 2rem;
-                       justify-content: center;
-                       flex-direction: column;
-                       width: 100%;
-                       align-items: center;">
-      <h2>No results found</h2>
-      <br />
-
-      <div class="editQuery" v-if="editSearchQuery">
-
-        <seasonedInput placeholder="Torrent query" icon="_torrents" :value.sync="editedSearchQuery" @enter="fetchTorrents(editedSearchQuery)" />
-
-        <div style="height: 45px; width: 5px;"></div>
-
-        <seasonedButton @click="fetchTorrents(editedSearchQuery)">Search</seasonedButton>
-      </div>
-
-      <seasonedButton @click="toggleEditSearchQuery" :active="editSearchQuery ? true : false">Edit search query</seasonedButton>
-    </div>
-    </div>
-    <div v-else class="torrentloader"><i></i></div>
-  </div>
-</template>
-
-<script>
-import storage from '@/storage'
-import store from '@/store'
-import { sortableSize } from '@/utils'
-import { searchTorrents, addMagnet } from '@/api'
-
-import SeasonedButton from '@/components/ui/SeasonedButton'
-import SeasonedInput from '@/components/ui/SeasonedInput'
-
-export default {
-  components: { SeasonedButton, SeasonedInput },
-  props: {
-    query: {
-      type: String,
-      require: true
-    },
-    tmdb_id: {
-      type: Number,
-      require: true
-    },
-    tmdb_type: String,
-    admin: String,
-    show: Boolean
-  },
-  data() {
-    return {
-      listLoaded: false,
-      torrents: [],
-      torrentResponse: undefined,
-      currentPage: 0,
-      prevCol: '',
-      direction: false,
-      release_types: ['all'],
-      selectedRelaseType: 'all',
-      editSearchQuery: false,
-      editedSearchQuery: ''
-    }
-  },
-  beforeMount() {
-    if (localStorage.getItem('admin')) {
-      this.fetchTorrents()
-    }
-    store.dispatch('torrentModule/reset')
-  },
-  methods: {
-    selectedSortableClass(headerName) {
-      return headerName === this.prevCol ? 'active' : ''
-    },
-    resetTorrentsAndToggleEditSearchQuery() {
-      this.torrents = []
-      this.toggleEditSearchQuery()
-    },
-    toggleEditSearchQuery() {
-      this.editSearchQuery = !this.editSearchQuery;
-    },
-    expand(event, name) {
-      const existingExpandedElement = document.getElementsByClassName('expanded')[0]
-
-      if (existingExpandedElement) {
-        console.log('exists')
-        const expandedSibling = event.target.parentNode.nextSibling.className === 'expanded'
-
-        existingExpandedElement.remove()
-
-        if (expandedSibling) {
-          console.log('sibling is here')
-          return
-        }
-      }
-
-      console.log('expand event', event)
-      const nameRow = document.createElement('tr')
-      const nameCol = document.createElement('td')
-      nameRow.className = 'expanded'
-      nameCol.innerText = name
-
-      nameRow.appendChild(nameCol)
-
-      event.target.parentNode.insertAdjacentElement('afterend', nameRow)
-    },
-    sendTorrent(magnet, name, event){
-      this.$notifications.info({
-        title: 'Adding torrent 🦜',
-        description: this.query,
-        timeout: 3000
-      })
-
-      event.target.parentNode.classList.add('active')
-
-      addMagnet(magnet, name, this.tmdb_id)
-      .catch((resp) => { console.log('error:', resp.data) })
-      .then((resp) => {
-        console.log('addTorrent resp: ', resp)
-        this.$notifications.success({
-          title: 'Torrent added 🎉',
-          description: this.query,
-          timeout: 3000
-        })
-      })
-    },
-    sortTable(col, sameDirection=false) {
-      if (this.prevCol === col && sameDirection === false) {
-        this.direction = !this.direction
-      }
-      console.log('col and more', col, sameDirection)
-
-      switch (col) {
-        case 'name':
-          this.sortName()
-          break
-        case 'seed':
-          this.sortSeed()
-          break
-        case 'size':
-          this.sortSize()
-          break
-      }
-      this.prevCol = col
-    },
-    sortName() {
-      const torrentsCopy = [...this.torrents]
-      if (this.direction) {
-        this.torrents = torrentsCopy.sort((a, b) => (a.name < b.name) ? 1 : -1)
-      } else {
-        this.torrents = torrentsCopy.sort((a, b) => (a.name > b.name) ? 1 : -1)
-      }
-    },
-    sortSeed() {
-      const torrentsCopy = [...this.torrents]
-      if (this.direction) {
-        this.torrents = torrentsCopy.sort((a, b) => parseInt(a.seed) - parseInt(b.seed));
-      } else {
-        this.torrents = torrentsCopy.sort((a, b) => parseInt(b.seed) - parseInt(a.seed));
-      }
-    },
-    sortSize() {
-      const torrentsCopy = [...this.torrents]
-      if (this.direction) {
-        this.torrents = torrentsCopy.sort((a, b) => parseInt(sortableSize(a.size)) - parseInt(sortableSize(b.size)));
-      } else {
-        this.torrents = torrentsCopy.sort((a, b) => parseInt(sortableSize(b.size)) - parseInt(sortableSize(a.size)));
-      }
-    },
-    findRelaseTypes() {
-      this.torrents.forEach(item => this.release_types.push(...item.release_type))
-      this.release_types = [...new Set(this.release_types)]
-    },
-    applyFilter(item, index) {
-      this.selectedRelaseType = item;
-      const torrents = [...this.torrentResponse]
-
-      if (item === 'all') {
-        this.torrents = torrents
-        this.sortTable(this.prevCol, true)
-        return
-      }
-
-      this.torrents = torrents.filter(torrent => torrent.release_type.includes(item))
-      this.sortTable(this.prevCol, true)
-    },
-    updateResultCountInStore() {
-      store.dispatch('torrentModule/setResults', this.torrents)
-      store.dispatch('torrentModule/setResultCount', this.torrentResponse.length)
-    },
-    fetchTorrents(query=undefined){
-      this.listLoaded = false;
-      this.editSearchQuery = false;
-
-      searchTorrents(query || this.query, 'all', this.currentPage, storage.token)
-        .then(data => {
-            this.torrentResponse = [...data.results];
-            this.torrents = data.results;
-            this.listLoaded = true;
-        })
-        .then(this.updateResultCountInStore)
-        .then(this.findRelaseTypes)
-        .catch(e => {
-          const error = e.toString()
-          this.errorMessage = error.indexOf('401') != -1 ? 'Permission denied' : 'Nothing found';
-          this.listLoaded = true;
-        });
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-.expanded {
-  display: flex;
-  margin: 0 1rem;
-  max-width: 100%;
-  border-left: 1px solid $text-color;
-  border-right: 1px solid $text-color;
-  border-bottom: 1px solid $text-color;
-
-  td {
-    // border-left: 1px solid $c-dark;
-    word-break: break-all;
-    padding: 0.5rem 0.15rem;
-    width: 100%;
-  }
-}
-</style>
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import "./src/scss/elements";
-
-.container {
-  background-color: $background-color;
-}
-
-.torrentHeader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 20px;
-
-
-  &-text {
-    font-weight: 400;
-    text-transform: uppercase;
-    font-size: 14px;
-    color: $green;
-    text-align: center;
-    margin: 0;
-
-    @include tablet-min {
-      font-size: 16px
-    }
-
-    &.editable {
-      cursor: pointer;
-    }
-  }
-
-  &-editIcon {
-    margin-left: 10px;
-    margin-top: -3px;
-    width: 22px;
-    height: 22px;
-
-    &:hover {
-      fill: $green;
-      cursor: pointer;
-    }
-  }
-}
-
-table {
-  border-collapse: collapse;
-  width: 100%;
-  table-layout: fixed;
-}
-
-.table__content, .table__header {
-  display: flex;
-  padding: 0;
-  margin: 0 1rem;
-  border-left: 1px solid $text-color;
-  border-right: 1px solid $text-color;
-  border-bottom: 1px solid $text-color;
-
-  th, td {
-    display: flex;
-    flex-direction: column;
-    flex-basis: 100%;
-
-    padding: 0.4rem;
-
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    min-width: 75px;
-  }
-
-  th:first-child, td:first-child {
-    flex: 1;
-  }
-
-  th:not(:first-child), td:not(:first-child) {
-    flex: 0.2;
-  }
-
-  th:nth-child(2), td:nth-child(2) {
-    flex: 0.1;
-  }
-
-  @include mobile-only {
-    th:first-child, td:first-child {
-      display: none;
-
-      &.show {
-        display: block;
-        align: flex-end;
-      }
-    }
-
-    th:not(:first-child), td:not(:first-child) {
-      flex: 1;
-    }
-  }
-
-}
-
-.table__content {
-  td:not(:last-child) {
-    border-right: 1px solid $text-color;
-  }
-}
-
-.table__content:last-child {
-  margin-bottom: 1rem;
-
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.table__header {
-  color: $text-color;
-  text-transform: uppercase;
-  cursor: pointer;
-  background-color: $background-color-secondary;
-
-  border-top: 1px solid $text-color;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-
-  th {
-    display: flex;
-    flex-direction: row;
-    font-weight: 400;
-    letter-spacing: 0.7px;
-    // font-size: 1.08rem;
-    font-size: 15px;
-
-    &::before {
-      content: '';
-      min-width: 0.2rem;
-    }
-
-    span:first-child {
-      margin-right: 0.6rem;
-    }
-    span:nth-child(2) {
-      margin-right: 0.1rem;
-    }
-  }
-
-  th:not(:last-child) {
-    border-right: 1px solid $text-color;
-  }
-
-}
-
-
-
-.editQuery {
-  display: flex;
-  width: 70%;
-  justify-content: center;
-
-  @include mobile-only {
-    width: 90%;
-  }
-}
-
-
-.download {
-
-  &__icon {
-    fill: $text-color-70;
-    height: 1.2rem;
-
-    &:hover {
-      fill: $text-color;
-      cursor: pointer;
-    }
-  }
-
-  &.active &__icon {
-    fill: $green;
-  }
-}
-
-.torrentloader {
-  width: 100%;
-  padding: 2rem 0;
-
-  i {
-    animation: load 1s linear infinite;
-    border: 2px solid $text-color;
-    border-radius: 50%;
-    display: block;
-    height: 30px;
-    left: 50%;
-    margin: 0 auto;
-    width: 30px;
-
-    &:after {
-      border: 5px solid $green;
-      border-radius: 50%;
-      content: '';
-      left: 10px;
-      position: absolute;
-      top: 16px;
-    }
-  }
-}
-@keyframes load {
-  100% { transform: rotate(360deg); }
-}
-</style>

src/components/activity/StatsOverview.vue

@@ -0,0 +1,86 @@
+<template>
+  <div v-if="watchStats" class="stats-overview">
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.totalPlays }}</div>
+      <div class="stat-label">Total Plays</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.totalHours }}h</div>
+      <div class="stat-label">Watch Time</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.moviePlays }}</div>
+      <div class="stat-label">Movies watched</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.episodePlays }}</div>
+      <div class="stat-label">Episodes watched</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { WatchStats } from "../../composables/useTautulliStats";
+
+  interface Props {
+    watchStats: WatchStats | null;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .stats-overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+
+    @include mobile-only {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+  }
+
+  .stat-card {
+    background: var(--background-ui);
+    padding: 1.5rem;
+    border-radius: 12px;
+    text-align: center;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: translateY(-4px);
+    }
+
+    @include mobile-only {
+      padding: 1rem;
+    }
+  }
+
+  .stat-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--highlight-color);
+    margin-bottom: 0.5rem;
+
+    @include mobile-only {
+      font-size: 2rem;
+    }
+  }
+
+  .stat-label {
+    font-size: 0.9rem;
+    color: var(--text-color-60);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 300;
+
+    @include mobile-only {
+      font-size: 0.8rem;
+    }
+  }
+</style>

src/components/activity/WatchHistory.vue

@@ -0,0 +1,101 @@
+<template>
+  <div v-if="topContent.length > 0" class="watch-history">
+    <h3 class="section-title">Last Watched</h3>
+    <div class="top-content-list">
+      <div
+        v-for="(item, index) in topContent"
+        :key="index"
+        class="top-content-item"
+      >
+        <div class="content-rank">{{ index + 1 }}</div>
+        <div class="content-details">
+          <div class="content-title">{{ item.title }}</div>
+          <div class="content-meta">
+            {{ item.type }} • {{ item.plays }} plays • {{ item.duration }}min
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface TopContentItem {
+    title: string;
+    type: string;
+    plays: number;
+    duration: number;
+  }
+
+  interface Props {
+    topContent: TopContentItem[];
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .watch-history {
+    margin-top: 2rem;
+  }
+
+  .section-title {
+    margin: 0 0 1rem 0;
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: $text-color;
+  }
+
+  .top-content-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+
+    @include mobile-only {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .top-content-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: var(--background-ui);
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid var(--text-color-50);
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: var(--text-color);
+      transform: translateY(-2px);
+    }
+  }
+
+  .content-rank {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--highlight-color);
+    min-width: 2.5rem;
+    text-align: center;
+  }
+
+  .content-details {
+    flex: 1;
+  }
+
+  .content-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.25rem;
+  }
+
+  .content-meta {
+    font-size: 0.85rem;
+    color: var(--text-color-60);
+  }
+</style>

src/components/admin/AdminStats.vue

@@ -0,0 +1,503 @@
+<template>
+  <div class="admin-stats">
+    <div class="admin-stats__header">
+      <h2 class="admin-stats__title">Statistics</h2>
+      <div class="admin-stats__controls">
+        <select
+          v-model="timeRange"
+          class="time-range-select"
+          @change="fetchStats"
+        >
+          <option value="today">Today</option>
+          <option value="week">This Week</option>
+          <option value="month">This Month</option>
+          <option value="all">All Time</option>
+        </select>
+        <button class="refresh-btn" @click="fetchStats" :disabled="loading">
+          <IconActivity :class="{ spin: loading }" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="admin-stats__loading">Loading statistics...</div>
+
+    <div v-else class="admin-stats__grid">
+      <div
+        class="stat-card"
+        v-for="stat in statCards"
+        :key="stat.key"
+        @click="handleCardClick(stat.key)"
+        :class="{ 'stat-card--clickable': stat.clickable }"
+      >
+        <div class="stat-card__header">
+          <component :is="stat.icon" class="stat-card__icon" />
+          <span
+            v-if="stat.trend !== 0"
+            :class="[
+              'stat-card__trend',
+              stat.trend > 0 ? 'stat-card__trend--up' : 'stat-card__trend--down'
+            ]"
+          >
+            {{ stat.trend > 0 ? "↑" : "↓" }} {{ Math.abs(stat.trend) }}%
+          </span>
+        </div>
+        <span class="stat-card__value">{{ stat.value }}</span>
+        <span class="stat-card__label">{{ stat.label }}</span>
+        <div v-if="stat.sparkline" class="stat-card__sparkline">
+          <div
+            v-for="(point, index) in stat.sparkline"
+            :key="index"
+            class="sparkline-bar"
+            :style="{
+              height: `${(point / Math.max(...stat.sparkline)) * 100}%`
+            }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from "vue";
+  import IconProfile from "@/icons/IconProfile.vue";
+  import IconPlay from "@/icons/IconPlay.vue";
+  import IconRequest from "@/icons/IconRequest.vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+
+  interface Stat {
+    key: string;
+    value: string | number;
+    label: string;
+    trend: number;
+    icon: any;
+    clickable: boolean;
+    sparkline?: number[];
+  }
+
+  const stats = ref({
+    totalUsers: 0,
+    activeTorrents: 0,
+    totalRequests: 0,
+    pendingRequests: 0,
+    approvedRequests: 0,
+    totalStorage: "0 GB",
+    usersTrend: 0,
+    torrentsTrend: 0,
+    requestsTrend: 0,
+    pendingTrend: 0,
+    approvedTrend: 0,
+    storageTrend: 0,
+    usersSparkline: [] as number[],
+    torrentsSparkline: [] as number[],
+    requestsSparkline: [] as number[]
+  });
+
+  const loading = ref(false);
+  const timeRange = ref("week");
+
+  const statCards = computed<Stat[]>(() => [
+    {
+      key: "totalUsers",
+      value: stats.value.totalUsers,
+      label: "Total Users",
+      trend: stats.value.usersTrend,
+      icon: IconProfile,
+      clickable: true,
+      sparkline: stats.value.usersSparkline
+    },
+    {
+      key: "activeTorrents",
+      value: stats.value.activeTorrents,
+      label: "Active Torrents",
+      trend: stats.value.torrentsTrend,
+      icon: IconPlay,
+      clickable: true,
+      sparkline: stats.value.torrentsSparkline
+    },
+    {
+      key: "totalRequests",
+      value: stats.value.totalRequests,
+      label: "Total Requests",
+      trend: stats.value.requestsTrend,
+      icon: IconRequest,
+      clickable: true,
+      sparkline: stats.value.requestsSparkline
+    },
+    {
+      key: "pendingRequests",
+      value: stats.value.pendingRequests,
+      label: "Pending Requests",
+      trend: stats.value.pendingTrend,
+      icon: IconRequest,
+      clickable: true
+    },
+    {
+      key: "approvedRequests",
+      value: stats.value.approvedRequests,
+      label: "Approved",
+      trend: stats.value.approvedTrend,
+      icon: IconRequest,
+      clickable: true
+    },
+    {
+      key: "totalStorage",
+      value: stats.value.totalStorage,
+      label: "Storage Used",
+      trend: stats.value.storageTrend,
+      icon: IconActivity,
+      clickable: false
+    }
+  ]);
+
+  const generateSparkline = (
+    baseValue: number,
+    points: number = 7
+  ): number[] => {
+    return Array.from({ length: points }, () => {
+      const variance = Math.random() * 0.3 - 0.15;
+      return Math.max(0, Math.floor(baseValue * (1 + variance)));
+    });
+  };
+
+  async function fetchStats() {
+    loading.value = true;
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      const baseUsers = 142;
+      const baseTorrents = 23;
+      const baseRequests = 856;
+
+      stats.value = {
+        totalUsers: baseUsers,
+        activeTorrents: baseTorrents,
+        totalRequests: baseRequests,
+        pendingRequests: 12,
+        approvedRequests: 712,
+        totalStorage: "2.4 TB",
+        usersTrend: 8.5,
+        torrentsTrend: -3.2,
+        requestsTrend: 12.7,
+        pendingTrend: -15.4,
+        approvedTrend: 18.2,
+        storageTrend: 5.8,
+        usersSparkline: generateSparkline(baseUsers / 7),
+        torrentsSparkline: generateSparkline(baseTorrents),
+        requestsSparkline: generateSparkline(baseRequests / 30)
+      };
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function handleCardClick(key: string) {
+    console.log(`Stat card clicked: ${key}`);
+  }
+
+  onMounted(() => fetchStats());
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .admin-stats {
+    background-color: var(--background-color-secondary);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    overflow: hidden;
+
+    @include mobile-only {
+      background-color: transparent;
+      border-radius: 0;
+      padding: 0;
+      box-shadow: none;
+      width: 100%;
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.75rem;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      @include mobile-only {
+        margin-bottom: 0.6rem;
+        width: 100%;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 400;
+      color: $text-color;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+
+      @include mobile-only {
+        font-size: 0.95rem;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+
+      @include mobile-only {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+
+    &__loading {
+      padding: 2rem;
+      text-align: center;
+      color: $text-color-70;
+
+      @include mobile-only {
+        padding: 1.5rem;
+        font-size: 0.9rem;
+      }
+    }
+
+    &__grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 0.75rem;
+
+      @include mobile-only {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.6rem;
+        width: 100%;
+      }
+    }
+  }
+
+  .time-range-select {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--background-40);
+    border-radius: 0.25rem;
+    background-color: var(--background-color);
+    color: $text-color;
+    font-size: 0.85rem;
+    cursor: pointer;
+
+    @include mobile-only {
+      flex: 1;
+      font-size: 0.8rem;
+      padding: 0.4rem 0.5rem;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--highlight-color);
+    }
+  }
+
+  .refresh-btn {
+    background: none;
+    border: 1px solid var(--background-40);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 40px;
+      padding: 0.4rem;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-ui);
+      border-color: var(--highlight-color);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: $text-color;
+
+      @include mobile-only {
+        width: 16px;
+        height: 16px;
+      }
+
+      &.spin {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+
+  .stat-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.75rem;
+    background-color: var(--background-ui);
+    border-radius: 0.5rem;
+    text-align: center;
+    transition: all 0.2s;
+    overflow: hidden;
+    min-width: 0;
+
+    @include mobile-only {
+      padding: 0.6rem 0.4rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        background-color: var(--background-40);
+      }
+
+      @include mobile-only {
+        &:hover {
+          transform: none;
+        }
+
+        &:active {
+          transform: scale(0.98);
+        }
+      }
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 0.4rem;
+
+      @include mobile-only {
+        margin-bottom: 0.3rem;
+      }
+    }
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: var(--highlight-color);
+      opacity: 0.8;
+
+      @include mobile-only {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    &__trend {
+      font-size: 0.75rem;
+      font-weight: 600;
+      padding: 0.2rem 0.4rem;
+      border-radius: 0.25rem;
+
+      @include mobile-only {
+        font-size: 0.65rem;
+        padding: 0.15rem 0.3rem;
+      }
+
+      &--up {
+        color: $white;
+        background-color: var(--color-success-highlight);
+      }
+
+      &--down {
+        color: $white;
+        background-color: var(--color-error-highlight);
+      }
+    }
+
+    &__value {
+      font-size: 2.2rem;
+      font-weight: 600;
+      color: var(--highlight-color);
+      margin-bottom: 0.15rem;
+      line-height: 1.1;
+      padding: 1rem 0;
+
+      @include mobile-only {
+        margin-bottom: 0.1rem;
+      }
+    }
+
+    &__label {
+      font-size: 0.8rem;
+      color: $text-color-70;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+      margin-bottom: 0.4rem;
+      word-break: break-word;
+      max-width: 100%;
+      line-height: 1.2;
+
+      @include mobile-only {
+        margin-bottom: 0.3rem;
+        letter-spacing: 0.2px;
+      }
+    }
+
+    &__sparkline {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      width: 100%;
+      height: 24px;
+      margin-top: 0.4rem;
+      gap: 2px;
+
+      @include mobile-only {
+        height: 18px;
+        margin-top: 0.3rem;
+        gap: 1px;
+      }
+    }
+  }
+
+  .sparkline-bar {
+    flex: 1;
+    background: linear-gradient(
+      180deg,
+      var(--highlight-color) 0%,
+      var(--color-green-70) 100%
+    );
+    border-radius: 2px 2px 0 0;
+    min-height: 3px;
+    transition: all 0.3s ease;
+
+    .stat-card:hover & {
+      opacity: 0.9;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

src/components/admin/RecentActivityFeed.vue

@@ -0,0 +1,685 @@
+<template>
+  <div class="activity-feed">
+    <div class="activity-feed__header">
+      <h2 class="activity-feed__title">Recent Activity</h2>
+      <div class="activity-feed__controls">
+        <select v-model="typeFilter" class="activity-feed__filter">
+          <option value="">All Types</option>
+          <option value="request">Requests</option>
+          <option value="download">Downloads</option>
+          <option value="user">Users</option>
+          <option value="movie">Library</option>
+        </select>
+        <select
+          v-model="timeFilter"
+          class="activity-feed__filter"
+          @change="fetchActivities"
+        >
+          <option value="1h">Last Hour</option>
+          <option value="24h">Last 24 Hours</option>
+          <option value="7d">Last 7 Days</option>
+          <option value="30d">Last 30 Days</option>
+        </select>
+        <button
+          class="refresh-btn"
+          @click="fetchActivities"
+          :disabled="loading"
+        >
+          <IconActivity :class="{ spin: loading }" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="activity-feed__loading">
+      Loading activities...
+    </div>
+    <div v-else-if="error" class="activity-feed__error">{{ error }}</div>
+
+    <div v-else class="activity-feed__list">
+      <div
+        class="activity-item"
+        v-for="activity in filteredActivities"
+        :key="activity.id"
+        @click="handleActivityClick(activity)"
+      >
+        <div
+          :class="[
+            'activity-item__icon',
+            `activity-item__icon--${activity.type}`
+          ]"
+        >
+          <component :is="getIcon(activity.type)" />
+        </div>
+        <div class="activity-item__content">
+          <div class="activity-item__header">
+            <span class="activity-item__message">{{ activity.message }}</span>
+            <span v-if="activity.metadata" class="activity-item__badge">
+              {{ activity.metadata }}
+            </span>
+          </div>
+          <div class="activity-item__footer">
+            <span class="activity-item__user" v-if="activity.user">{{
+              activity.user
+            }}</span>
+            <span class="activity-item__time">{{
+              formatTime(activity.timestamp)
+            }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="filteredActivities.length === 0" class="activity-feed__empty">
+        No activities found
+      </div>
+    </div>
+
+    <div
+      v-if="!loading && filteredActivities.length > 0"
+      class="activity-feed__footer"
+    >
+      <span class="activity-count"
+        >{{ filteredActivities.length }} of
+        {{ activities.length }} activities</span
+      >
+      <button
+        v-if="hasMore"
+        class="load-more-btn"
+        @click="loadMore"
+        :disabled="loadingMore"
+      >
+        {{ loadingMore ? "Loading..." : "Load More" }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, onUnmounted } from "vue";
+  import IconMovie from "@/icons/IconMovie.vue";
+  import IconPlay from "@/icons/IconPlay.vue";
+  import IconRequest from "@/icons/IconRequest.vue";
+  import IconProfile from "@/icons/IconProfile.vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+
+  type ActivityType = "request" | "download" | "user" | "movie";
+
+  interface Activity {
+    id: number;
+    type: ActivityType;
+    message: string;
+    timestamp: Date;
+    user?: string;
+    metadata?: string;
+    details?: any;
+  }
+
+  const activities = ref<Activity[]>([]);
+  const loading = ref(false);
+  const loadingMore = ref(false);
+  const error = ref("");
+  const typeFilter = ref<ActivityType | "">("");
+  const timeFilter = ref("24h");
+  const hasMore = ref(true);
+  const page = ref(1);
+
+  const filteredActivities = computed(() => {
+    let result = [...activities.value];
+
+    if (typeFilter.value) {
+      result = result.filter(a => a.type === typeFilter.value);
+    }
+
+    return result;
+  });
+
+  const getIcon = (type: string) => {
+    const icons: Record<string, any> = {
+      request: IconRequest,
+      download: IconPlay,
+      user: IconProfile,
+      movie: IconMovie
+    };
+    return icons[type] || IconMovie;
+  };
+
+  const formatTime = (date: Date): string => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (minutes < 1) return "Just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return `${days}d ago`;
+  };
+
+  const generateMockActivities = (
+    count: number,
+    startId: number
+  ): Activity[] => {
+    const types: ActivityType[] = ["request", "download", "user", "movie"];
+    const messages = {
+      request: [
+        "New request: Interstellar (2014)",
+        "Request approved: Oppenheimer",
+        "Request denied: The Matrix",
+        "Request fulfilled: Dune Part Two"
+      ],
+      download: [
+        "Torrent completed: Dune Part Two",
+        "Torrent started: Poor Things",
+        "Download failed: Network Error",
+        "Torrent paused by admin"
+      ],
+      user: [
+        "New user registered: john_doe",
+        "User upgraded to VIP: sarah_s",
+        "User login from new device: alex_p",
+        "Password changed: mike_r"
+      ],
+      movie: [
+        "Movie added to library: The Batman",
+        "Library scan completed: 12 new items",
+        "Show updated: Breaking Bad S5",
+        "Media deleted: Old Movie (1999)"
+      ]
+    };
+
+    const users = [
+      "admin",
+      "kevin_m",
+      "sarah_s",
+      "john_doe",
+      "alex_p",
+      "mike_r"
+    ];
+
+    return Array.from({ length: count }, (_, i) => {
+      const type = types[Math.floor(Math.random() * types.length)];
+      const typeMessages = messages[type];
+      const message =
+        typeMessages[Math.floor(Math.random() * typeMessages.length)];
+      const timeOffset = Math.random() * 24 * 60 * 60 * 1000; // Random time in last 24h
+
+      return {
+        id: startId + i,
+        type,
+        message,
+        timestamp: new Date(Date.now() - timeOffset),
+        user: users[Math.floor(Math.random() * users.length)],
+        metadata: type === "request" ? "Pending" : undefined
+      };
+    });
+  };
+
+  async function fetchActivities() {
+    loading.value = true;
+    error.value = "";
+    page.value = 1;
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      activities.value = generateMockActivities(15, 1).sort(
+        (a, b) => b.timestamp.getTime() - a.timestamp.getTime()
+      );
+
+      hasMore.value = true;
+    } catch (e) {
+      error.value = "Failed to load activities";
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function loadMore() {
+    if (!hasMore.value || loadingMore.value) return;
+
+    loadingMore.value = true;
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      const newActivities = generateMockActivities(
+        10,
+        activities.value.length + 1
+      );
+      activities.value = [...activities.value, ...newActivities].sort(
+        (a, b) => b.timestamp.getTime() - a.timestamp.getTime()
+      );
+
+      page.value += 1;
+
+      if (page.value >= 5) {
+        hasMore.value = false;
+      }
+    } finally {
+      loadingMore.value = false;
+    }
+  }
+
+  function handleActivityClick(activity: Activity) {
+    console.log("Activity clicked:", activity);
+  }
+
+  onMounted(fetchActivities);
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .activity-feed {
+    background-color: var(--background-color-secondary);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    overflow: hidden;
+
+    @include mobile-only {
+      background-color: transparent;
+      border-radius: 0;
+      padding: 0;
+      box-shadow: none;
+      width: 100%;
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.75rem;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+
+      @include mobile-only {
+        gap: 0.6rem;
+        margin-bottom: 0.6rem;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 400;
+      color: $text-color;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+
+      @include mobile-only {
+        font-size: 0.95rem;
+        width: 100%;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+
+      @include mobile-only {
+        width: 100%;
+        gap: 0.4rem;
+      }
+    }
+
+    &__filter {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--background-40);
+      border-radius: 0.25rem;
+      background-color: var(--background-color);
+      color: $text-color;
+      font-size: 0.85rem;
+      cursor: pointer;
+
+      @include mobile-only {
+        flex: 1;
+        font-size: 0.8rem;
+        padding: 0.4rem 0.5rem;
+        min-width: 0;
+        max-width: calc(50% - 0.2rem - 20px);
+      }
+
+      &:focus {
+        outline: none;
+        border-color: var(--highlight-color);
+      }
+    }
+
+    &__loading,
+    &__error {
+      padding: 2rem;
+      text-align: center;
+      color: $text-color-70;
+
+      @include mobile-only {
+        padding: 1.5rem;
+        font-size: 0.9rem;
+      }
+    }
+
+    &__error {
+      color: var(--color-error-highlight);
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+      max-height: 450px;
+      overflow-y: auto;
+      padding-right: 0.25rem;
+
+      @include mobile-only {
+        max-height: 350px;
+        gap: 0.35rem;
+      }
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: var(--background-40);
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--text-color-50);
+        border-radius: 3px;
+
+        &:hover {
+          background: var(--text-color-70);
+        }
+      }
+    }
+
+    &__empty {
+      padding: 2rem;
+      text-align: center;
+      color: $text-color-50;
+      font-style: italic;
+
+      @include mobile-only {
+        padding: 1.5rem;
+        font-size: 0.9rem;
+      }
+    }
+
+    &__footer {
+      margin-top: 1rem;
+      padding-top: 0.75rem;
+      border-top: 1px solid var(--background-40);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      @include mobile-only {
+        margin-top: 0.75rem;
+        padding-top: 0.5rem;
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: stretch;
+      }
+    }
+  }
+
+  .activity-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.65rem;
+    background-color: var(--background-ui);
+    border-radius: 0.5rem;
+    transition: background-color 0.2s;
+    cursor: pointer;
+    min-width: 0;
+
+    @include mobile-only {
+      gap: 0.6rem;
+      padding: 0.6rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    &:hover {
+      background-color: var(--background-40);
+    }
+
+    @include mobile-only {
+      &:hover {
+        background-color: var(--background-ui);
+      }
+
+      &:active {
+        background-color: var(--background-40);
+      }
+    }
+
+    &__icon {
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      @include mobile-only {
+        width: 26px;
+        height: 26px;
+      }
+
+      &--request {
+        background-color: #3b82f6;
+      }
+
+      &--download {
+        background-color: var(--highlight-color);
+      }
+
+      &--user {
+        background-color: #8b5cf6;
+      }
+
+      &--movie {
+        background-color: #f59e0b;
+      }
+
+      svg {
+        width: 14px;
+        height: 14px;
+        fill: $white;
+
+        @include mobile-only {
+          width: 13px;
+          height: 13px;
+        }
+      }
+    }
+
+    &__content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      min-width: 0;
+
+      @include mobile-only {
+        gap: 0.2rem;
+      }
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 0.4rem;
+    }
+
+    &__message {
+      font-size: 0.85rem;
+      color: $text-color;
+      line-height: 1.3;
+      flex: 1;
+      word-break: break-word;
+      overflow-wrap: break-word;
+
+      @include mobile-only {
+        font-size: 0.78rem;
+        line-height: 1.25;
+      }
+    }
+
+    &__badge {
+      flex-shrink: 0;
+      font-size: 0.7rem;
+      padding: 0.15rem 0.4rem;
+      border-radius: 0.25rem;
+      background-color: var(--color-warning);
+      color: $black;
+      font-weight: 500;
+      text-transform: uppercase;
+
+      @include mobile-only {
+        font-size: 0.6rem;
+        padding: 0.1rem 0.3rem;
+      }
+    }
+
+    &__footer {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      font-size: 0.75rem;
+
+      @include mobile-only {
+        font-size: 0.7rem;
+        gap: 0.35rem;
+      }
+    }
+
+    &__user {
+      color: $text-color-70;
+      font-weight: 500;
+
+      @include mobile-only {
+        font-size: 0.7rem;
+      }
+
+      &::before {
+        content: "@";
+        opacity: 0.7;
+      }
+    }
+
+    &__time {
+      color: $text-color-50;
+
+      @include mobile-only {
+        font-size: 0.7rem;
+      }
+
+      &::before {
+        content: "•";
+        margin-right: 0.5rem;
+
+        @include mobile-only {
+          margin-right: 0.3rem;
+        }
+      }
+    }
+  }
+
+  .refresh-btn {
+    background: none;
+    border: 1px solid var(--background-40);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 40px;
+      padding: 0.4rem;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-ui);
+      border-color: var(--highlight-color);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: $text-color;
+
+      @include mobile-only {
+        width: 16px;
+        height: 16px;
+      }
+
+      &.spin {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+
+  .load-more-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--background-40);
+    background-color: var(--background-ui);
+    color: $text-color;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.2s;
+
+    @include mobile-only {
+      width: 100%;
+      padding: 0.65rem 1rem;
+      font-size: 0.9rem;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-40);
+      border-color: var(--highlight-color);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .activity-count {
+    font-size: 0.8rem;
+    color: $text-color-50;
+
+    @include mobile-only {
+      font-size: 0.75rem;
+      text-align: center;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

src/components/admin/SystemStatusPanel.vue

@@ -0,0 +1,750 @@
+<template>
+  <div class="system-status">
+    <div class="system-status__header">
+      <h2 class="system-status__title">System Status</h2>
+      <button
+        class="refresh-btn"
+        @click="fetchSystemStatus"
+        :disabled="loading"
+      >
+        <IconActivity :class="{ spin: loading }" />
+      </button>
+    </div>
+
+    <div v-if="loading" class="system-status__loading">
+      Loading system status...
+    </div>
+
+    <div v-else class="system-status__items">
+      <div
+        class="status-item"
+        v-for="item in systemItems"
+        :key="item.name"
+        @click="showDetails(item)"
+      >
+        <div class="status-item__header">
+          <span class="status-item__name">{{ item.name }}</span>
+          <div class="status-item__indicator-wrapper">
+            <span class="status-item__uptime" v-if="item.uptime">{{
+              item.uptime
+            }}</span>
+            <span
+              :class="[
+                'status-item__indicator',
+                `status-item__indicator--${item.status}`
+              ]"
+              :title="`${item.status}`"
+            ></span>
+          </div>
+        </div>
+        <div class="status-item__details">
+          <span class="status-item__value">{{ item.value }}</span>
+          <span class="status-item__description">{{ item.description }}</span>
+        </div>
+        <div v-if="item.metrics" class="status-item__metrics">
+          <div
+            v-for="metric in item.metrics"
+            :key="metric.label"
+            class="metric"
+          >
+            <span class="metric__label">{{ metric.label }}</span>
+            <div class="metric__bar">
+              <div
+                class="metric__fill"
+                :style="{ width: `${metric.value}%` }"
+                :class="getMetricClass(metric.value)"
+              ></div>
+            </div>
+            <span class="metric__value">{{ metric.value }}%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Details Modal -->
+    <div v-if="selectedItem" class="modal-overlay" @click="closeDetails">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h3>{{ selectedItem.name }} Details</h3>
+          <button class="close-btn" @click="closeDetails">
+            <IconClose />
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="detail-row">
+            <span class="detail-label">Status:</span>
+            <span
+              :class="['detail-value', `detail-value--${selectedItem.status}`]"
+            >
+              {{ selectedItem.status.toUpperCase() }}
+            </span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">Current Value:</span>
+            <span class="detail-value">{{ selectedItem.value }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">Description:</span>
+            <span class="detail-value">{{ selectedItem.description }}</span>
+          </div>
+          <div v-if="selectedItem.uptime" class="detail-row">
+            <span class="detail-label">Uptime:</span>
+            <span class="detail-value">{{ selectedItem.uptime }}</span>
+          </div>
+          <div v-if="selectedItem.lastCheck" class="detail-row">
+            <span class="detail-label">Last Check:</span>
+            <span class="detail-value">{{ selectedItem.lastCheck }}</span>
+          </div>
+          <div v-if="selectedItem.logs" class="detail-logs">
+            <h4>Recent Logs</h4>
+            <div
+              class="log-entry"
+              v-for="(log, index) in selectedItem.logs"
+              :key="index"
+            >
+              <span class="log-time">{{ log.time }}</span>
+              <span class="log-message">{{ log.message }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="action-btn" @click="restartService(selectedItem)">
+            Restart Service
+          </button>
+          <button
+            class="action-btn action-btn--secondary"
+            @click="viewFullLogs(selectedItem)"
+          >
+            View Full Logs
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from "vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+  import IconClose from "@/icons/IconClose.vue";
+
+  interface Metric {
+    label: string;
+    value: number;
+  }
+
+  interface LogEntry {
+    time: string;
+    message: string;
+  }
+
+  interface SystemItem {
+    name: string;
+    status: "online" | "warning" | "offline";
+    value: string;
+    description: string;
+    uptime?: string;
+    lastCheck?: string;
+    metrics?: Metric[];
+    logs?: LogEntry[];
+  }
+
+  const systemItems = ref<SystemItem[]>([]);
+  const loading = ref(false);
+  const selectedItem = ref<SystemItem | null>(null);
+
+  const getMetricClass = (value: number) => {
+    if (value >= 90) return "metric__fill--critical";
+    if (value >= 70) return "metric__fill--warning";
+    return "metric__fill--good";
+  };
+
+  async function fetchSystemStatus() {
+    loading.value = true;
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      systemItems.value = [
+        {
+          name: "API Server",
+          status: "online",
+          value: "Running",
+          description: "All endpoints responding",
+          uptime: "15d 7h 23m",
+          lastCheck: "Just now",
+          metrics: [
+            { label: "CPU", value: 23 },
+            { label: "Memory", value: 45 }
+          ],
+          logs: [
+            { time: "2m ago", message: "Health check passed" },
+            { time: "5m ago", message: "Request handled: /api/v2/movie" },
+            { time: "7m ago", message: "Cache hit: user_settings" }
+          ]
+        },
+        {
+          name: "Disk Space",
+          status: "warning",
+          value: "45% Used",
+          description: "1.2 TB / 2.7 TB",
+          uptime: "15d 7h 23m",
+          lastCheck: "Just now",
+          metrics: [
+            { label: "System", value: 45 },
+            { label: "Media", value: 78 }
+          ],
+          logs: [
+            { time: "5m ago", message: "Disk usage check completed" },
+            { time: "10m ago", message: "Media folder: 78% full" }
+          ]
+        },
+        {
+          name: "Plex Connection",
+          status: "online",
+          value: "Connected",
+          description: "Server: Home",
+          uptime: "15d 7h 23m",
+          lastCheck: "Just now",
+          metrics: [{ label: "Response Time", value: 15 }],
+          logs: [
+            { time: "2m ago", message: "Plex API request successful" },
+            { time: "8m ago", message: "Library sync completed" }
+          ]
+        }
+      ];
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function showDetails(item: SystemItem) {
+    selectedItem.value = item;
+  }
+
+  function closeDetails() {
+    selectedItem.value = null;
+  }
+
+  function restartService(item: SystemItem) {
+    console.log(`Restarting service: ${item.name}`);
+    alert(`Restart initiated for ${item.name}`);
+    closeDetails();
+  }
+
+  function viewFullLogs(item: SystemItem) {
+    console.log(`Viewing full logs for: ${item.name}`);
+    alert(`Full logs for ${item.name} would open here`);
+  }
+
+  onMounted(fetchSystemStatus);
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .system-status {
+    background-color: var(--background-color-secondary);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    overflow: hidden;
+
+    @include mobile-only {
+      background-color: transparent;
+      border-radius: 0;
+      padding: 0;
+      box-shadow: none;
+      width: 100%;
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.75rem;
+
+      @include mobile-only {
+        margin-bottom: 0.6rem;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 400;
+      color: $text-color;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+
+      @include mobile-only {
+        font-size: 0.95rem;
+      }
+    }
+
+    &__loading {
+      padding: 1.5rem;
+      text-align: center;
+      color: $text-color-70;
+
+      @include mobile-only {
+        padding: 1rem;
+        font-size: 0.85rem;
+      }
+    }
+
+    &__items {
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+
+      @include mobile-only {
+        gap: 0.5rem;
+      }
+    }
+  }
+
+  .refresh-btn {
+    background: none;
+    border: 1px solid var(--background-40);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 40px;
+      padding: 0.4rem;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-ui);
+      border-color: var(--highlight-color);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: $text-color;
+
+      @include mobile-only {
+        width: 16px;
+        height: 16px;
+      }
+
+      &.spin {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+
+  .status-item {
+    padding: 0.65rem;
+    background-color: var(--background-ui);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 0;
+
+    @include mobile-only {
+      padding: 0.6rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    &:hover {
+      background-color: var(--background-40);
+      transform: translateX(2px);
+    }
+
+    @include mobile-only {
+      &:hover {
+        transform: none;
+      }
+
+      &:active {
+        background-color: var(--background-40);
+        transform: scale(0.98);
+      }
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.2rem;
+    }
+
+    &__name {
+      font-weight: 500;
+      color: $text-color;
+      font-size: 0.9rem;
+      line-height: 1.2;
+
+      @include mobile-only {
+        font-size: 0.82rem;
+      }
+    }
+
+    &__indicator-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      @include mobile-only {
+        gap: 0.35rem;
+      }
+    }
+
+    &__uptime {
+      font-size: 0.75rem;
+      color: $text-color-50;
+
+      @include mobile-only {
+        font-size: 0.7rem;
+      }
+    }
+
+    &__indicator {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+
+      @include mobile-only {
+        width: 8px;
+        height: 8px;
+      }
+
+      &--online {
+        background-color: var(--color-success-highlight);
+        box-shadow: 0 0 6px var(--color-success);
+      }
+
+      &--warning {
+        background-color: var(--color-warning-highlight);
+        box-shadow: 0 0 6px var(--color-warning);
+      }
+
+      &--offline {
+        background-color: var(--color-error-highlight);
+        box-shadow: 0 0 6px var(--color-error);
+      }
+    }
+
+    &__details {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.4rem;
+
+      @include mobile-only {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.15rem;
+        margin-bottom: 0.3rem;
+      }
+    }
+
+    &__value {
+      font-size: 0.8rem;
+      color: $text-color-70;
+      line-height: 1.2;
+
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+
+    &__description {
+      font-size: 0.75rem;
+      color: $text-color-50;
+      line-height: 1.2;
+
+      @include mobile-only {
+        font-size: 0.7rem;
+      }
+    }
+
+    &__metrics {
+      margin-top: 0.4rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+
+      @include mobile-only {
+        margin-top: 0.3rem;
+        gap: 0.3rem;
+      }
+    }
+  }
+
+  .metric {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.7rem;
+
+    &__label {
+      min-width: 65px;
+      color: $text-color-70;
+      line-height: 1;
+    }
+
+    &__bar {
+      flex: 1;
+      height: 5px;
+      background-color: var(--background-40);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+
+    &__fill {
+      height: 100%;
+      border-radius: 3px;
+      transition: width 0.3s ease;
+
+      &--good {
+        background-color: var(--color-success-highlight);
+      }
+
+      &--warning {
+        background-color: var(--color-warning-highlight);
+      }
+
+      &--critical {
+        background-color: var(--color-error-highlight);
+      }
+    }
+
+    &__value {
+      min-width: 35px;
+      text-align: right;
+      color: $text-color-50;
+    }
+  }
+
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1rem;
+
+    @include mobile-only {
+      padding: 0.5rem;
+      align-items: flex-end;
+    }
+  }
+
+  .modal-content {
+    background-color: var(--background-color-secondary);
+    border-radius: 0.5rem;
+    max-width: 600px;
+    width: 100%;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+
+    @include mobile-only {
+      max-height: 90vh;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--background-40);
+
+    @include mobile-only {
+      padding: 1rem;
+    }
+
+    h3 {
+      margin: 0;
+      color: $text-color;
+      font-weight: 400;
+
+      @include mobile-only {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--background-40);
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: $text-color;
+    }
+  }
+
+  .modal-body {
+    padding: 1.5rem;
+
+    @include mobile-only {
+      padding: 1rem;
+    }
+  }
+
+  .detail-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--background-40);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .detail-label {
+    font-weight: 500;
+    color: $text-color-70;
+  }
+
+  .detail-value {
+    color: $text-color;
+
+    &--online {
+      color: var(--color-success-highlight);
+    }
+
+    &--warning {
+      color: var(--color-warning-highlight);
+    }
+
+    &--offline {
+      color: var(--color-error-highlight);
+    }
+  }
+
+  .detail-logs {
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--background-40);
+
+    h4 {
+      margin: 0 0 0.75rem 0;
+      color: $text-color;
+      font-weight: 400;
+      font-size: 0.95rem;
+    }
+  }
+
+  .log-entry {
+    display: flex;
+    gap: 1rem;
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    background-color: var(--background-ui);
+    border-radius: 0.25rem;
+    margin-bottom: 0.5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .log-time {
+    min-width: 60px;
+    color: $text-color-50;
+  }
+
+  .log-message {
+    color: $text-color-70;
+  }
+
+  .modal-footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--background-40);
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+
+    @include mobile-only {
+      padding: 1rem;
+      flex-direction: column-reverse;
+    }
+  }
+
+  .action-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--highlight-color);
+    background-color: var(--highlight-color);
+    color: $white;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: var(--color-green-90);
+      border-color: var(--color-green-90);
+    }
+
+    &--secondary {
+      background-color: transparent;
+      color: $text-color;
+      border-color: var(--background-40);
+
+      &:hover {
+        background-color: var(--background-ui);
+      }
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+  }
+</style>

src/components/admin/TorrentManagementGrid.vue

@@ -0,0 +1,723 @@
+<template>
+  <div class="torrent-management">
+    <div class="torrent-management__header">
+      <h2 class="torrent-management__title">Torrent Management</h2>
+      <div class="torrent-management__controls">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search torrents..."
+          class="torrent-management__search"
+        />
+        <select v-model="statusFilter" class="torrent-management__filter">
+          <option value="">All Status</option>
+          <option value="seeding">Seeding</option>
+          <option value="downloading">Downloading</option>
+          <option value="paused">Paused</option>
+          <option value="stopped">Stopped</option>
+        </select>
+        <button class="refresh-btn" @click="fetchTorrents" :disabled="loading">
+          <IconActivity :class="{ spin: loading }" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="torrent-management__loading">
+      Loading torrents...
+    </div>
+    <div v-else-if="error" class="torrent-management__error">{{ error }}</div>
+
+    <table v-else class="torrent-management__table">
+      <thead>
+        <tr>
+          <th @click="sortBy('name')" class="sortable">
+            Name
+            <span v-if="sortColumn === 'name'">{{
+              sortDirection === "asc" ? "↑" : "↓"
+            }}</span>
+          </th>
+          <th v-if="!isMobile" @click="sortBy('size')" class="sortable">
+            Size
+            <span v-if="sortColumn === 'size'">{{
+              sortDirection === "asc" ? "↑" : "↓"
+            }}</span>
+          </th>
+          <th v-if="!isMobile" @click="sortBy('seeders')" class="sortable">
+            Seeders
+            <span v-if="sortColumn === 'seeders'">{{
+              sortDirection === "asc" ? "↑" : "↓"
+            }}</span>
+          </th>
+          <th v-if="!isMobile">Status</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="torrent in filteredTorrents"
+          :key="torrent.id"
+          :class="{ processing: torrent.processing }"
+        >
+          <td class="torrent-name" :title="torrent.name">
+            <div class="torrent-name__title">{{ torrent.name }}</div>
+            <div v-if="isMobile" class="torrent-name__meta">
+              <span class="meta-item">{{ torrent.size }}</span>
+              <span class="meta-separator">•</span>
+              <span class="meta-item">{{ torrent.seeders }} seeders</span>
+              <span class="meta-separator">•</span>
+              <span
+                :class="['status-badge', `status-badge--${torrent.status}`]"
+              >
+                {{ torrent.status }}
+              </span>
+            </div>
+          </td>
+          <td v-if="!isMobile">{{ torrent.size }}</td>
+          <td v-if="!isMobile">{{ torrent.seeders }}</td>
+          <td v-if="!isMobile">
+            <span :class="['status-badge', `status-badge--${torrent.status}`]">
+              {{ torrent.status }}
+            </span>
+          </td>
+          <td class="actions">
+            <button
+              v-if="
+                torrent.status === 'seeding' || torrent.status === 'downloading'
+              "
+              class="action-btn"
+              title="Pause"
+              @click="pauseTorrent(torrent)"
+              :disabled="torrent.processing"
+            >
+              <IconStop />
+            </button>
+            <button
+              v-if="torrent.status === 'paused' || torrent.status === 'stopped'"
+              class="action-btn"
+              title="Resume"
+              @click="resumeTorrent(torrent)"
+              :disabled="torrent.processing"
+            >
+              <IconPlay />
+            </button>
+            <button
+              class="action-btn action-btn--danger"
+              title="Delete"
+              @click="deleteTorrent(torrent)"
+              :disabled="torrent.processing"
+            >
+              <IconClose />
+            </button>
+            <button
+              class="action-btn"
+              title="Details"
+              @click="showDetails(torrent)"
+            >
+              <IconInfo />
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="torrent-management__footer">
+      <span class="torrent-count"
+        >{{ filteredTorrents.length }} of {{ torrents.length }} torrents</span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, onUnmounted } from "vue";
+  import IconStop from "@/icons/IconStop.vue";
+  import IconPlay from "@/icons/IconPlay.vue";
+  import IconClose from "@/icons/IconClose.vue";
+  import IconInfo from "@/icons/IconInfo.vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+
+  interface Torrent {
+    id: number;
+    name: string;
+    size: string;
+    seeders: number;
+    leechers: number;
+    uploaded: string;
+    downloaded: string;
+    ratio: number;
+    status: "seeding" | "downloading" | "paused" | "stopped";
+    processing?: boolean;
+  }
+
+  const torrents = ref<Torrent[]>([]);
+  const loading = ref(false);
+  const error = ref("");
+  const searchQuery = ref("");
+  const statusFilter = ref("");
+  const sortColumn = ref<keyof Torrent>("name");
+  const sortDirection = ref<"asc" | "desc">("asc");
+
+  const windowWidth = ref(window.innerWidth);
+  const isMobile = computed(() => windowWidth.value <= 768);
+
+  function handleResize() {
+    windowWidth.value = window.innerWidth;
+  }
+
+  const filteredTorrents = computed(() => {
+    let result = [...torrents.value];
+
+    if (searchQuery.value) {
+      const query = searchQuery.value.toLowerCase();
+      result = result.filter(t => t.name.toLowerCase().includes(query));
+    }
+
+    if (statusFilter.value) {
+      result = result.filter(t => t.status === statusFilter.value);
+    }
+
+    result.sort((a, b) => {
+      const aVal = a[sortColumn.value];
+      const bVal = b[sortColumn.value];
+
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return sortDirection.value === "asc"
+          ? aVal.localeCompare(bVal)
+          : bVal.localeCompare(aVal);
+      }
+
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        return sortDirection.value === "asc" ? aVal - bVal : bVal - aVal;
+      }
+
+      return 0;
+    });
+
+    return result;
+  });
+
+  function sortBy(column: keyof Torrent) {
+    if (sortColumn.value === column) {
+      sortDirection.value = sortDirection.value === "asc" ? "desc" : "asc";
+    } else {
+      sortColumn.value = column;
+      sortDirection.value = "asc";
+    }
+  }
+
+  async function fetchTorrents() {
+    loading.value = true;
+    error.value = "";
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      torrents.value = [
+        {
+          id: 1,
+          name: "Movie.Name.2024.1080p.BluRay.x264",
+          size: "2.4 GB",
+          seeders: 156,
+          leechers: 23,
+          uploaded: "45.2 GB",
+          downloaded: "2.4 GB",
+          ratio: 18.83,
+          status: "seeding"
+        },
+        {
+          id: 2,
+          name: "TV.Show.S01E01.720p.WEB-DL",
+          size: "1.2 GB",
+          seeders: 89,
+          leechers: 12,
+          uploaded: "12.8 GB",
+          downloaded: "1.2 GB",
+          ratio: 10.67,
+          status: "seeding"
+        },
+        {
+          id: 3,
+          name: "Documentary.2024.HDRip",
+          size: "890 MB",
+          seeders: 45,
+          leechers: 8,
+          uploaded: "2.1 GB",
+          downloaded: "650 MB",
+          ratio: 3.31,
+          status: "downloading"
+        },
+        {
+          id: 4,
+          name: "Anime.Series.S02E10.1080p",
+          size: "1.8 GB",
+          seeders: 234,
+          leechers: 56,
+          uploaded: "89.4 GB",
+          downloaded: "1.8 GB",
+          ratio: 49.67,
+          status: "seeding"
+        },
+        {
+          id: 5,
+          name: "Concert.2024.4K.UHD",
+          size: "12.5 GB",
+          seeders: 67,
+          leechers: 5,
+          uploaded: "0 B",
+          downloaded: "0 B",
+          ratio: 0,
+          status: "paused"
+        },
+        {
+          id: 6,
+          name: "Drama.Series.2024.S01E05.1080p",
+          size: "2.1 GB",
+          seeders: 112,
+          leechers: 34,
+          uploaded: "8.9 GB",
+          downloaded: "2.1 GB",
+          ratio: 4.24,
+          status: "seeding"
+        },
+        {
+          id: 7,
+          name: "Action.Movie.2024.BRRip",
+          size: "1.5 GB",
+          seeders: 0,
+          leechers: 0,
+          uploaded: "0 B",
+          downloaded: "0 B",
+          ratio: 0,
+          status: "stopped"
+        }
+      ];
+    } catch (e) {
+      error.value = "Failed to load torrents";
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function pauseTorrent(torrent: Torrent) {
+    torrent.processing = true;
+    await new Promise(resolve => setTimeout(resolve, 500));
+    torrent.status = "paused";
+    torrent.processing = false;
+  }
+
+  async function resumeTorrent(torrent: Torrent) {
+    torrent.processing = true;
+    await new Promise(resolve => setTimeout(resolve, 500));
+    torrent.status = "seeding";
+    torrent.processing = false;
+  }
+
+  async function deleteTorrent(torrent: Torrent) {
+    if (!confirm(`Are you sure you want to delete "${torrent.name}"?`)) return;
+
+    torrent.processing = true;
+    await new Promise(resolve => setTimeout(resolve, 500));
+    torrents.value = torrents.value.filter(t => t.id !== torrent.id);
+  }
+
+  function showDetails(torrent: Torrent) {
+    alert(
+      `Torrent Details:\n\nName: ${torrent.name}\nSize: ${torrent.size}\nSeeders: ${torrent.seeders}\nLeechers: ${torrent.leechers}\nUploaded: ${torrent.uploaded}\nDownloaded: ${torrent.downloaded}\nRatio: ${torrent.ratio.toFixed(2)}\nStatus: ${torrent.status}`
+    );
+  }
+
+  onMounted(() => {
+    fetchTorrents();
+    window.addEventListener("resize", handleResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", handleResize);
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .torrent-management {
+    background-color: var(--background-color-secondary);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+
+    @include mobile-only {
+      background-color: transparent;
+      border-radius: 0;
+      padding: 0;
+      box-shadow: none;
+      width: 100%;
+      overflow-x: auto;
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.75rem;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+
+      @include mobile-only {
+        gap: 0.6rem;
+        margin-bottom: 0.6rem;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 400;
+      color: $text-color;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+
+      @include mobile-only {
+        font-size: 0.95rem;
+        width: 100%;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+
+      @include mobile-only {
+        width: 100%;
+        gap: 0.4rem;
+      }
+    }
+
+    &__search {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--background-40);
+      border-radius: 0.25rem;
+      background-color: var(--background-color);
+      color: $text-color;
+      font-size: 0.85rem;
+
+      @include mobile-only {
+        flex: 1;
+        min-width: 0;
+        font-size: 0.8rem;
+        padding: 0.4rem 0.5rem;
+        max-width: calc(50% - 0.2rem - 20px);
+      }
+
+      &:focus {
+        outline: none;
+        border-color: var(--highlight-color);
+      }
+    }
+
+    &__filter {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--background-40);
+      border-radius: 0.25rem;
+      background-color: var(--background-color);
+      color: $text-color;
+      font-size: 0.85rem;
+      cursor: pointer;
+
+      @include mobile-only {
+        flex: 1;
+        font-size: 0.8rem;
+        padding: 0.4rem 0.5rem;
+        max-width: calc(50% - 0.2rem - 20px);
+      }
+
+      &:focus {
+        outline: none;
+        border-color: var(--highlight-color);
+      }
+    }
+
+    &__loading,
+    &__error {
+      padding: 2rem;
+      text-align: center;
+      color: $text-color-70;
+
+      @include mobile-only {
+        padding: 1.5rem;
+        font-size: 0.9rem;
+      }
+    }
+
+    &__error {
+      color: var(--color-error-highlight);
+    }
+
+    &__footer {
+      margin-top: 1rem;
+      padding-top: 0.75rem;
+      border-top: 1px solid var(--background-40);
+
+      @include mobile-only {
+        margin-top: 0.75rem;
+        padding-top: 0.5rem;
+      }
+    }
+
+    &__table {
+      width: 100%;
+      max-width: 100%;
+      border-spacing: 0;
+      border-radius: 0.5rem;
+      overflow: hidden;
+      table-layout: fixed;
+
+      @include mobile-only {
+        table-layout: auto;
+      }
+
+      th,
+      td {
+        padding: 0.75rem 1rem;
+        text-align: left;
+        border-bottom: 1px solid var(--background-40);
+
+        @include mobile-only {
+          padding: 0.5rem 0.4rem;
+          font-size: 0.75rem;
+        }
+      }
+
+      th {
+        background-color: var(--table-background-color);
+        color: var(--table-header-text-color);
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        letter-spacing: 0.5px;
+        font-weight: 400;
+
+        @include mobile-only {
+          font-size: 0.7rem;
+          letter-spacing: 0.3px;
+          white-space: nowrap;
+        }
+
+        &.sortable {
+          cursor: pointer;
+          user-select: none;
+
+          &:hover {
+            background-color: var(--background-80);
+          }
+        }
+      }
+
+      td {
+        font-size: 0.85rem;
+        color: $text-color;
+
+        @include mobile-only {
+          font-size: 0.75rem;
+          white-space: nowrap;
+        }
+      }
+
+      tbody tr {
+        background-color: var(--background-color);
+        transition: background-color 0.2s;
+
+        &:nth-child(even) {
+          background-color: var(--background-70);
+        }
+
+        &:hover {
+          background-color: var(--background-ui);
+        }
+
+        &.processing {
+          opacity: 0.6;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  .torrent-name {
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include mobile-only {
+      max-width: none;
+      white-space: normal;
+      overflow: visible;
+    }
+
+    &__title {
+      word-break: break-word;
+      overflow-wrap: break-word;
+
+      @include mobile-only {
+        font-size: 0.85rem;
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+      }
+    }
+
+    &__meta {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      flex-wrap: wrap;
+      font-size: 0.7rem;
+      color: var(--text-color-60);
+      margin-top: 0.25rem;
+
+      .meta-item {
+        white-space: nowrap;
+      }
+
+      .meta-separator {
+        color: var(--text-color-40);
+      }
+
+      .status-badge {
+        margin: 0;
+      }
+    }
+  }
+
+  .status-badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    font-weight: 500;
+
+    @include mobile-only {
+      font-size: 0.6rem;
+      padding: 0.2rem 0.35rem;
+    }
+
+    &--seeding {
+      background-color: var(--color-success);
+      color: var(--color-success-text);
+    }
+
+    &--downloading {
+      background-color: var(--color-warning);
+      color: $black;
+    }
+
+    &--paused {
+      background-color: var(--background-40);
+      color: $text-color-70;
+    }
+
+    &--stopped {
+      background-color: var(--color-error);
+      color: $white;
+    }
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .action-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.35rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-40);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &--danger:hover:not(:disabled) {
+      background-color: var(--color-error);
+
+      svg {
+        fill: $white;
+      }
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: $text-color;
+    }
+  }
+
+  .refresh-btn {
+    background: none;
+    border: 1px solid var(--background-40);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 40px;
+      padding: 0.4rem;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-ui);
+      border-color: var(--highlight-color);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: $text-color;
+
+      @include mobile-only {
+        width: 16px;
+        height: 16px;
+      }
+
+      &.spin {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+
+  .torrent-count {
+    font-size: 0.8rem;
+    color: $text-color-50;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

src/components/header/AutocompleteDropdown.vue

@@ -0,0 +1,276 @@
+<template>
+  <transition name="shut">
+    <ul class="dropdown">
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
+      <li
+        v-for="(result, _index) in searchResults"
+        :key="`${_index}-${result.title}-${result.type}`"
+        :class="`result di-${_index} ${_index === index ? 'active' : ''}`"
+        @click="openPopup(result)"
+      >
+        <IconMovie v-if="result.type == 'movie'" class="type-icon" />
+        <IconShow v-if="result.type == 'show'" class="type-icon" />
+        <span class="title">{{ result.title }}</span>
+      </li>
+
+      <li
+        v-if="searchResults.length"
+        :class="`info di-${searchResults.length}`"
+      >
+        <span> Select from list or press enter to search </span>
+      </li>
+    </ul>
+  </transition>
+</template>
+
+<script setup lang="ts">
+  import type { Ref } from "vue";
+  import { ref, watch, defineProps } from "vue";
+  import { useStore } from "vuex";
+  import IconMovie from "../../icons/IconMovie.vue";
+  import IconShow from "../../icons/IconShow.vue";
+  import { elasticSearchMoviesAndShows } from "../../api";
+  import { MediaTypes } from "../../interfaces/IList";
+  import type {
+    IAutocompleteResult,
+    IAutocompleteSearchResults
+  } from "../../interfaces/IAutocompleteSearch";
+
+  interface Props {
+    query?: string;
+    index?: number;
+    results?: Array<IAutocompleteResult>;
+  }
+
+  interface Emit {
+    (e: "update:results", value: Array<IAutocompleteResult>);
+  }
+
+  const numberOfResults = 10;
+  const props = defineProps<Props>();
+  const emit = defineEmits<Emit>();
+  const store = useStore();
+
+  const searchResults: Ref<Array<IAutocompleteResult>> = ref([]);
+  const keyboardNavigationIndex: Ref<number> = ref(0);
+
+  let disableOnFailure = false;
+
+  watch(
+    () => props.query,
+    newQuery => {
+      if (newQuery?.length > 0 && !disableOnFailure)
+        fetchAutocompleteResults(); /* eslint-disable-line no-use-before-define */
+    }
+  );
+
+  function openPopup(result: IAutocompleteResult) {
+    if (!result.id || !result.type) return;
+
+    store.dispatch("popup/open", { ...result });
+  }
+
+  function removeDuplicates(_searchResults: Array<IAutocompleteResult>) {
+    const filteredResults = [];
+    _searchResults.forEach(result => {
+      if (result === undefined) return;
+      const numberOfDuplicates = filteredResults.filter(
+        filterItem => filterItem.id === result.id
+      );
+      if (numberOfDuplicates.length >= 1) {
+        return;
+      }
+
+      filteredResults.push(result);
+    });
+
+    return filteredResults;
+  }
+
+  function elasticTypeToMediaType(type: string): MediaTypes {
+    if (type === "movie") return MediaTypes.Movie;
+    if (type === "tv_series") return MediaTypes.Show;
+
+    return null;
+  }
+
+  function parseElasticResponse(elasticResponse: IAutocompleteSearchResults) {
+    const { hits } = elasticResponse.hits;
+    const data = hits.length > 0 ? hits : (searchResults.value ?? []);
+
+    const results: Array<IAutocompleteResult> = [];
+
+    data.forEach(item => {
+      if (!item._index) return;
+
+      results.push({
+        title: item._source?.original_name || item._source.original_title,
+        id: item._source.id,
+        adult: item._source.adult,
+        type: elasticTypeToMediaType(item._source.type)
+      });
+    });
+
+    return removeDuplicates(results).map((el, index) => {
+      return { ...el, index };
+    });
+  }
+
+  async function fetchAutocompleteResults() {
+    keyboardNavigationIndex.value = 0;
+    searchResults.value = [];
+
+    return elasticSearchMoviesAndShows(props.query, numberOfResults)
+      .catch(error => {
+        // TODO display error
+        disableOnFailure = true;
+        throw error;
+      })
+      .then(elasticResponse => parseElasticResponse(elasticResponse))
+      .then(_searchResults => {
+        emit("update:results", _searchResults);
+        searchResults.value = _searchResults;
+      })
+      .catch(error => {
+        // TODO display error
+        disableOnFailure = true;
+        throw error;
+      });
+  }
+
+  // on load functions
+  fetchAutocompleteResults();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
+  $sizes: 22;
+
+  @for $i from 0 through $sizes {
+    .dropdown .di-#{$i} {
+      visibility: visible;
+      transform-origin: top center;
+      animation: scaleZ 200ms calc(50ms * #{$i}) ease-in forwards;
+    }
+  }
+
+  @keyframes scaleZ {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    80% {
+      transform: scale(1.07);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .dropdown {
+    top: var(--header-size);
+    position: relative;
+    height: 100%;
+    width: 100%;
+    max-width: 720px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    z-index: 5;
+
+    margin-top: -1px;
+    border-top: none;
+    padding: 0;
+
+    @include mobile {
+      position: fixed;
+      left: 0;
+      max-width: 100vw;
+    }
+
+    @include tablet-min {
+      top: unset;
+      --gutter: 1.5rem;
+      max-width: calc(100% - (2 * var(--gutter)));
+      margin: -1px var(--gutter) 0 var(--gutter);
+    }
+
+    @include desktop {
+      max-width: 720px;
+    }
+  }
+
+  li.result {
+    background-color: var(--background-95);
+    color: var(--text-color-50);
+    padding: 0.5rem 2rem;
+    list-style: none;
+
+    opacity: 0;
+    height: 56px;
+    width: 100%;
+    visibility: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 2rem;
+
+    font-size: 1.4rem;
+    text-transform: capitalize;
+    list-style: none;
+    cursor: pointer;
+    white-space: nowrap;
+
+    transition:
+      color 0.1s ease,
+      fill 0.4s ease;
+
+    span {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      transition: inherit;
+    }
+
+    &.active,
+    &:hover,
+    &:active {
+      color: var(--text-color);
+      border-bottom: 2px solid var(--color-green);
+
+      .type-icon {
+        fill: var(--text-color);
+      }
+    }
+
+    .type-icon {
+      width: 28px;
+      height: 28px;
+      margin-right: 1rem;
+      transition: inherit;
+      fill: var(--text-color-50);
+    }
+  }
+
+  li.info {
+    visibility: hidden;
+    opacity: 0;
+    display: flex;
+    justify-content: center;
+    padding: 0 1rem;
+    color: var(--text-color-50);
+    background-color: var(--background-95);
+    color: var(--text-color-50);
+    font-size: 0.6rem;
+    height: 16px;
+    width: 100%;
+  }
+
+  .shut-leave-to {
+    height: 0px;
+    transition: height 0.4s ease;
+    flex-wrap: no-wrap;
+    overflow: hidden;
+  }
+</style>

src/components/header/NavigationHeader.vue

@@ -0,0 +1,125 @@
+<template>
+  <nav>
+    <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
+    <a v-if="isHome" class="nav__logo" href="/">
+      <TmdbLogo class="logo" />
+    </a>
+
+    <router-link v-else class="nav__logo" to="/" exact>
+      <TmdbLogo class="logo" />
+    </router-link>
+
+    <SearchInput />
+
+    <Hamburger class="mobile-only" />
+    <NavigationIcon class="desktop-only" :route="profileRoute" />
+
+    <!-- <div class="navigation-icons-grid mobile-only" :class="{ open: isOpen }"> -->
+    <div v-if="isOpen" class="navigation-icons-grid mobile-only">
+      <NavigationIcons>
+        <NavigationIcon :route="profileRoute" />
+      </NavigationIcons>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+  import { useStore } from "vuex";
+  import { useRoute } from "vue-router";
+  import SearchInput from "@/components/header/SearchInput.vue";
+  import Hamburger from "@/components/ui/Hamburger.vue";
+  import NavigationIcons from "@/components/header/NavigationIcons.vue";
+  import NavigationIcon from "@/components/header/NavigationIcon.vue";
+  import TmdbLogo from "@/icons/tmdb-logo.vue";
+  import IconProfile from "@/icons/IconProfile.vue";
+  import IconProfileLock from "@/icons/IconProfileLock.vue";
+  import type INavigationIcon from "../../interfaces/INavigationIcon";
+
+  const route = useRoute();
+  const store = useStore();
+
+  const signinNavigationIcon: INavigationIcon = {
+    title: "Signin",
+    route: "/signin",
+    icon: IconProfileLock
+  };
+
+  const profileNavigationIcon: INavigationIcon = {
+    title: "Profile",
+    route: "/profile",
+    icon: IconProfile
+  };
+
+  const isHome = computed(() => route.path === "/");
+  const isOpen = computed(() => store.getters["hamburger/isOpen"]);
+  const loggedIn = computed(() => store.getters["user/loggedIn"]);
+
+  const profileRoute = computed(() =>
+    !loggedIn.value ? signinNavigationIcon : profileNavigationIcon
+  );
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .spacer {
+    @include mobile-only {
+      width: 100%;
+      height: $header-size;
+    }
+  }
+
+  nav {
+    display: grid;
+    grid-template-columns: var(--header-size) 1fr var(--header-size);
+
+    > * {
+      z-index: 10;
+    }
+  }
+
+  .nav__logo {
+    overflow: hidden;
+  }
+
+  .logo {
+    padding: 1rem;
+    fill: var(--color-green);
+    width: var(--header-size);
+    height: var(--header-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $background-nav-logo;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.08);
+    }
+
+    @include mobile {
+      padding: 0.5rem;
+    }
+  }
+
+  .navigation-icons-grid {
+    display: flex;
+    flex-wrap: wrap;
+    position: fixed;
+    top: var(--header-size);
+    left: 0;
+    width: 100%;
+    background-color: $background-95;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+
+    opacity: 1;
+    visibility: visible;
+
+    &.open {
+    }
+  }
+</style>

src/components/header/NavigationIcon.vue

@@ -0,0 +1,102 @@
+<template>
+  <router-link
+    v-if="route?.requiresAuth == undefined || (route?.requiresAuth && loggedIn)"
+    :key="route?.title"
+    :to="{ path: route?.route }"
+  >
+    <li
+      class="navigation-link"
+      :class="{ active: matchesActiveRoute(), 'nofill-stroke': useStroke }"
+    >
+      <component :is="route.icon" class="navigation-icon"></component>
+      <span>{{ route.title }}</span>
+    </li>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+  import { useStore } from "vuex";
+  import { computed } from "vue";
+  import type INavigationIcon from "../../interfaces/INavigationIcon";
+
+  interface Props {
+    route: INavigationIcon;
+    active?: string;
+    useStroke?: boolean;
+  }
+
+  const props = defineProps<Props>();
+
+  const store = useStore();
+  const loggedIn = computed(() => store.getters["user/loggedIn"]);
+
+  function matchesActiveRoute() {
+    const currentRoute = props.route.title.toLowerCase();
+    return props?.active?.includes(currentRoute);
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .navigation-link {
+    display: grid;
+    place-items: center;
+    min-height: var(--header-size);
+    list-style: none;
+    padding: 1rem 0.15rem;
+    text-align: center;
+    background-color: var(--background-color-secondary);
+    transition:
+      transform 0.3s ease,
+      color 0.3s ease,
+      stoke 0.3s ease,
+      fill 0.3s ease,
+      background-color 0.5s ease;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+
+    &:hover,
+    &.active {
+      background-color: var(--background-color);
+
+      span,
+      .navigation-icon {
+        color: var(--text-color);
+        fill: var(--text-color);
+      }
+    }
+
+    span {
+      text-transform: uppercase;
+      font-size: 11px;
+      margin-top: 0.25rem;
+      color: var(--text-color-70);
+    }
+
+    &.nofill-stroke {
+      .navigation-icon {
+        stroke: var(--text-color-70);
+        fill: none !important;
+      }
+
+      &:hover .navigation-icon,
+      &.active .navigation-icon {
+        stroke: var(--text-color);
+      }
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .navigation-icon {
+    width: 28px;
+    fill: var(--text-color-70);
+    transition: inherit;
+  }
+</style>

src/components/header/NavigationIcons.vue

@@ -0,0 +1,99 @@
+<template>
+  <ul class="navigation-icons">
+    <NavigationIcon
+      v-for="_route in routes"
+      :key="_route.route"
+      :route="_route"
+      :active="activeRoute"
+      :use-stroke="_route?.useStroke"
+    />
+    <slot></slot>
+  </ul>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from "vue";
+  import { useRoute } from "vue-router";
+  import NavigationIcon from "@/components/header/NavigationIcon.vue";
+  import IconInbox from "@/icons/IconInbox.vue";
+  import IconNowPlaying from "@/icons/IconNowPlaying.vue";
+  import IconPopular from "@/icons/IconPopular.vue";
+  import IconUpcoming from "@/icons/IconUpcoming.vue";
+  import IconSettings from "@/icons/IconSettings.vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+  import IconBinoculars from "@/icons/IconBinoculars.vue";
+  import type INavigationIcon from "../../interfaces/INavigationIcon";
+
+  const route = useRoute();
+  const activeRoute = ref(window?.location?.pathname);
+  const routes: INavigationIcon[] = [
+    {
+      title: "Requests",
+      route: "/list/requests",
+      icon: IconInbox
+    },
+    {
+      title: "Now Playing",
+      route: "/list/now_playing",
+      icon: IconNowPlaying
+    },
+    {
+      title: "Popular",
+      route: "/list/popular",
+      icon: IconPopular
+    },
+    {
+      title: "Upcoming",
+      route: "/list/upcoming",
+      icon: IconUpcoming
+    },
+    {
+      title: "Activity",
+      route: "/activity",
+      requiresAuth: true,
+      useStroke: true,
+      icon: IconActivity
+    },
+    {
+      title: "Torrents",
+      route: "/torrents",
+      requiresAuth: true,
+      icon: IconBinoculars
+    },
+    {
+      title: "Settings",
+      route: "/settings",
+      requiresAuth: true,
+      useStroke: true,
+      icon: IconSettings
+    }
+  ];
+
+  function setActiveRoute(_route: string) {
+    activeRoute.value = _route;
+  }
+
+  watch(route, () => setActiveRoute(window?.location?.pathname || ""));
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .navigation-icons {
+    display: grid;
+    grid-column: 1fr;
+    padding-left: 0;
+    margin: 0;
+    background-color: var(--background-color-secondary);
+    z-index: 15;
+    width: 100%;
+
+    @include desktop {
+      grid-template-rows: var(--header-size);
+    }
+
+    @include mobile {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+</style>

src/components/header/SearchInput.vue

@@ -0,0 +1,297 @@
+<template>
+  <div>
+    <div class="search" :class="{ active: inputIsActive }">
+      <IconSearch class="search-icon" tabindex="-1" />
+
+      <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
+      <input
+        ref="inputElement"
+        v-model="query"
+        type="text"
+        placeholder="Search for movie or show"
+        aria-label="Search input for finding a movie or show"
+        autocorrect="off"
+        autocapitalize="off"
+        tabindex="0"
+        @input="handleInput"
+        @click="focus"
+        @keydown.escape="handleEscape"
+        @keyup.enter="handleSubmit"
+        @keydown.up="navigateUp"
+        @keydown.down="navigateDown"
+        @focus="focus"
+        @blur="blur"
+      />
+
+      <IconClose
+        v-if="query && query.length"
+        tabindex="0"
+        aria-label="button"
+        class="close-icon"
+        @click="clearInput"
+        @keydown.enter.stop="clearInput"
+      />
+    </div>
+
+    <AutocompleteDropdown
+      v-if="showAutocompleteResults"
+      v-model:results="dropdownResults"
+      :query="query"
+      :index="dropdownIndex"
+    />
+  </div>
+</template>
+
+<!-- Handles constructing markup and state for dropdown.
+
+Markup:
+Consist of: search icon, input & close button.
+
+State:
+State is passing input variable `query` to dropdown and carrying state
+of selected dropdown element as variable `index`. This is because
+index is manipulated based on arrow key events from same input as
+the `query`.
+-->
+
+<script setup lang="ts">
+  import type { Ref } from "vue";
+  import { ref, computed } from "vue";
+  import { useStore } from "vuex";
+  import { useRouter, useRoute } from "vue-router";
+  import AutocompleteDropdown from "./AutocompleteDropdown.vue";
+  import IconSearch from "../../icons/IconSearch.vue";
+  import IconClose from "../../icons/IconClose.vue";
+  import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
+
+  const store = useStore();
+  const router = useRouter();
+  const route = useRoute();
+
+  const query: Ref<string> = ref(null);
+  const disabled: Ref<boolean> = ref(false);
+  const dropdownIndex: Ref<number> = ref(-1);
+  const dropdownResults: Ref<IAutocompleteResult[]> = ref([]);
+  const inputIsActive: Ref<boolean> = ref(false);
+  const inputElement: Ref<HTMLInputElement> = ref(null);
+
+  const isOpen = computed(() => store.getters["popup/isOpen"]);
+  const showAutocompleteResults = computed(() => {
+    return (
+      !disabled.value &&
+      inputIsActive.value &&
+      query.value &&
+      query.value.length > 0
+    );
+  });
+
+  const params = new URLSearchParams(window.location.search);
+  if (params && params.has("query")) {
+    query.value = decodeURIComponent(params.get("query"));
+  }
+
+  const ELASTIC_URL = import.meta.env.VITE_ELASTIC_URL;
+  const ELASTIC_API_KEY = import.meta.env.VITE_ELASTIC_API_KEY;
+  if (!ELASTIC_URL || !ELASTIC_API_KEY) {
+    disabled.value = true;
+  }
+
+  function navigateDown() {
+    if (dropdownIndex.value < dropdownResults.value.length - 1) {
+      dropdownIndex.value += 1;
+    }
+  }
+
+  function navigateUp() {
+    if (dropdownIndex.value > -1) dropdownIndex.value -= 1;
+
+    const textLength = inputElement.value.value.length;
+
+    setTimeout(() => {
+      inputElement.value.focus();
+      inputElement.value.setSelectionRange(textLength, textLength + 1);
+    }, 1);
+  }
+
+  function search() {
+    const encodedQuery = encodeURI(query.value.replace("/ /g", "+"));
+
+    router.push({
+      name: "search",
+      query: {
+        ...route.query,
+        query: encodedQuery
+      }
+    });
+  }
+
+  function handleInput() {
+    dropdownIndex.value = -1;
+  }
+
+  function focus() {
+    inputIsActive.value = true;
+  }
+
+  function reset() {
+    inputElement.value.blur();
+    dropdownIndex.value = -1;
+    inputIsActive.value = false;
+  }
+
+  function blur() {
+    return setTimeout(reset, 150);
+  }
+
+  function clearInput() {
+    query.value = "";
+    inputElement.value.focus();
+  }
+
+  function handleSubmit() {
+    if (!query.value || query.value.length === 0) return;
+
+    // if index is set, navigation has happened. Open popup else search
+    if (dropdownIndex.value >= 0) {
+      const resultItem = dropdownResults.value[dropdownIndex.value];
+
+      store.dispatch("popup/open", {
+        id: resultItem?.id,
+        type: resultItem?.type
+      });
+      return;
+    }
+
+    search();
+    reset();
+  }
+
+  function handleEscape() {
+    if (!isOpen.value) reset();
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
+
+  .close-icon {
+    position: absolute;
+    top: calc(50% - 12px);
+    right: 0;
+    cursor: pointer;
+    fill: var(--text-color);
+    height: 24px;
+    width: 24px;
+
+    @include tablet-min {
+      right: 6px;
+    }
+  }
+
+  .filter {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 2rem;
+
+    h2 {
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      font-weight: 400;
+    }
+
+    &-items {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      > :not(:first-child) {
+        margin-left: 1rem;
+      }
+    }
+  }
+
+  hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-bottom: 1px solid $text-color-50;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 90%;
+  }
+
+  .search.active {
+    input {
+      border-color: var(--color-green);
+    }
+
+    .search-icon {
+      fill: var(--color-green);
+    }
+  }
+
+  .search {
+    height: $header-size;
+    display: flex;
+    position: fixed;
+    flex-wrap: wrap;
+    z-index: 5;
+    border: 0;
+    background-color: $background-color-secondary;
+
+    // TODO check if this is for mobile
+    width: calc(100% - 110px);
+    top: 0;
+    right: 55px;
+
+    @include tablet-min {
+      position: relative;
+      width: 100%;
+      right: 0px;
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      padding: 13px 28px 13px 45px;
+      outline: none;
+      margin: 0;
+      border: 0;
+      background-color: $background-color-secondary;
+      font-weight: 300;
+      font-size: 18px;
+      color: $text-color;
+      border-bottom: 1px solid transparent;
+
+      &:focus {
+        // border-bottom: 1px solid var(--color-green);
+        border-color: var(--color-green);
+      }
+
+      @include tablet-min {
+        font-size: 24px;
+        padding: 13px 40px 13px 60px;
+      }
+    }
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      fill: var(--text-color-50);
+      pointer-events: none;
+      position: absolute;
+      left: 15px;
+      top: calc(50% - 10px);
+
+      @include tablet-min {
+        width: 24px;
+        height: 24px;
+        top: calc(50% - 12px);
+        left: 22px;
+      }
+    }
+  }
+</style>

src/components/plex/PlexAuthButton.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="plex-connect">
+    <div class="info-box">
+      <IconInfo class="info-icon" />
+      <p>
+        Sign in to your Plex account to get information about recently added
+        movies and to see your watch history
+      </p>
+    </div>
+    <div class="signin-container">
+      <button @click="handleAuth" :disabled="loading" class="plex-signin-btn">
+        {{ loading ? "Connecting..." : "Sign in with Plex" }}
+
+        <IconPlex v-if="!loading" class="plex-icon" />
+      </button>
+      <p class="popup-note">A popup window will open for authentication</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { usePlexAuth } from "@/composables/usePlexAuth";
+  import IconInfo from "@/icons/IconInfo.vue";
+  import IconPlex from "@/icons/IconPlex.vue";
+
+  const emit = defineEmits<{
+    authSuccess: [token: string];
+    authError: [message: string];
+  }>();
+
+  const { loading, openAuthPopup } = usePlexAuth();
+
+  function handleAuth() {
+    openAuthPopup(
+      token => emit("authSuccess", token),
+      error => emit("authError", error)
+    );
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .info-box {
+    display: flex;
+    gap: 0.65rem;
+    padding: 0.65rem;
+    background-color: var(--background-ui);
+    border-radius: 0.25rem;
+    margin-bottom: 0.85rem;
+    border-left: 3px solid var(--highlight-color);
+
+    @include mobile-only {
+      padding: 0.6rem;
+      gap: 0.55rem;
+      margin-bottom: 0.7rem;
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.9rem;
+      line-height: 1.4;
+
+      @include mobile-only {
+        font-size: 0.85rem;
+      }
+    }
+  }
+
+  .info-icon {
+    width: 20px;
+    height: 20px;
+    fill: var(--highlight-color);
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .signin-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .plex-signin-btn {
+    padding: 1rem 1.75rem;
+    background-color: #c87818;
+    color: $white;
+    border: none;
+    border-radius: 0.75rem;
+    font-size: 1.1rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    align-self: flex-start;
+    box-shadow: 0 4px 12px rgba(200, 120, 24, 0.25);
+    letter-spacing: -0.01em;
+
+    @include mobile-only {
+      width: 100%;
+      padding: 0.9rem 1.4rem;
+      font-size: 1rem;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: #b36a15;
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px rgba(200, 120, 24, 0.4);
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: 0 4px 12px rgba(200, 120, 24, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .plex-icon {
+      flex-shrink: 0;
+      --size: 24px;
+      width: var(--size);
+      height: var(--size);
+      fill: currentColor;
+    }
+  }
+
+  .popup-note {
+    margin: 0;
+    font-size: 0.85rem;
+    opacity: 0.65;
+  }
+</style>

src/components/plex/PlexLibraryItem.vue

@@ -0,0 +1,230 @@
+<template>
+  <a
+    v-if="item.plexUrl"
+    :href="item.plexUrl"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="plex-library-item"
+  >
+    <figure :class="`item-poster ${item.type}`">
+      <img
+        v-if="item.poster"
+        :src="item.poster"
+        :alt="item.title"
+        class="poster-image"
+        @error="handleImageError"
+      />
+      <div v-else class="poster-fallback">
+        <component :is="fallbackIconComponent" />
+      </div>
+    </figure>
+
+    <div class="item-details">
+      <p class="item-title">{{ item.title }}</p>
+      <div class="item-meta">
+        <span v-if="item.year" class="item-year">{{ item.year }}</span>
+        <span v-if="item.rating" class="item-rating">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+            <polygon
+              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+            />
+          </svg>
+          {{ item.rating }}
+        </span>
+      </div>
+      <div v-if="showExtras" class="item-extras">
+        <span v-if="item.artist">{{ item.artist }}</span>
+        <span v-if="item.episodes">{{ item.episodes }} episodes</span>
+        <span v-if="item.tracks">{{ item.tracks }} tracks</span>
+      </div>
+    </div>
+  </a>
+  <div v-else class="plex-library-item plex-library-item--no-link">
+    <figure class="item-poster">
+      <img
+        v-if="item.poster"
+        :src="item.poster"
+        :alt="item.title"
+        class="poster-image"
+        @error="handleImageError"
+      />
+      <div v-else class="poster-fallback">
+        <component :is="fallbackIconComponent" />
+      </div>
+    </figure>
+
+    <div class="item-details">
+      <p class="item-title">{{ item.title }}</p>
+      <div class="item-meta">
+        <span v-if="item.year" class="item-year">{{ item.year }}</span>
+        <span v-if="item.rating" class="item-rating">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+            <polygon
+              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+            />
+          </svg>
+          {{ item.rating }}
+        </span>
+      </div>
+      <div v-if="showExtras" class="item-extras">
+        <span v-if="item.artist">{{ item.artist }}</span>
+        <span v-if="item.episodes">{{ item.episodes }} episodes</span>
+        <span v-if="item.tracks">{{ item.tracks }} tracks</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+  import IconMovie from "@/icons/IconMovie.vue";
+  import IconShow from "@/icons/IconShow.vue";
+  import IconMusic from "@/icons/IconMusic.vue";
+
+  interface LibraryItem {
+    title: string;
+    poster?: string;
+    fallbackIcon?: string;
+    year?: number;
+    rating?: number;
+    artist?: string;
+    episodes?: number;
+    tracks?: number;
+    plexUrl?: string | null;
+  }
+
+  interface Props {
+    item: LibraryItem;
+    showExtras?: boolean;
+  }
+
+  const props = defineProps<Props>();
+
+  const fallbackIconComponent = computed(() => {
+    if (props.item.fallbackIcon === "🎬") return IconMovie;
+    if (props.item.fallbackIcon === "📺") return IconShow;
+    if (props.item.fallbackIcon === "🎵") return IconMusic;
+    return IconMovie; // Default fallback
+  });
+
+  function handleImageError(event: Event) {
+    const target = event.target as HTMLImageElement;
+    target.style.display = "none";
+  }
+</script>
+
+<style style="scss" scoped>
+  .plex-library-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    cursor: pointer;
+    transition: transform 0.2s;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .plex-library-item:hover {
+    transform: translateY(-4px);
+  }
+
+  .plex-library-item--no-link {
+    cursor: default;
+  }
+
+  .plex-library-item--no-link:hover {
+    transform: none;
+  }
+
+  .item-poster {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 2 / 3;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #333;
+    margin: 0;
+
+    &.music {
+      aspect-ratio: 1/1;
+    }
+  }
+
+  .poster-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .poster-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #333 0%, #222 100%);
+    padding: 20%;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: #666;
+    }
+  }
+
+  .item-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .item-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .item-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #888;
+  }
+
+  .item-year {
+    color: #aaa;
+  }
+
+  .item-rating {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #fbbf24;
+  }
+
+  .item-extras {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: 11px;
+    color: #888;
+  }
+
+  @media (max-width: 768px) {
+    .item-title {
+      font-size: 13px;
+    }
+
+    .item-meta {
+      font-size: 11px;
+    }
+  }
+</style>

src/components/plex/PlexLibraryModal.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="modal-overlay library-modal-overlay" @click="emit('close')">
+    <div class="library-modal-content" @click.stop>
+      <div class="library-modal-header">
+        <div class="library-header-title">
+          <div class="library-icon-large">
+            <component :is="libraryIconComponent" />
+          </div>
+          <div>
+            <h3>{{ getLibraryTitle(libraryType) }}</h3>
+            <p class="library-subtitle">{{ details.total }} items</p>
+          </div>
+        </div>
+        <button class="close-btn" @click="emit('close')">
+          <IconClose />
+        </button>
+      </div>
+
+      <div class="library-modal-body">
+        <!-- Stats Overview -->
+        <div class="library-stats-overview">
+          <div class="overview-stat">
+            <span class="overview-label">Total Items</span>
+            <span class="overview-value">{{
+              formatNumber(details.total)
+            }}</span>
+          </div>
+
+          <div class="overview-stat" v-if="libraryType === 'tv shows'">
+            <span class="overview-label">Seasons</span>
+            <span class="overview-value">{{
+              formatNumber(details?.childCount)
+            }}</span>
+          </div>
+          <div class="overview-stat" v-if="libraryType === 'tv shows'">
+            <span class="overview-label">Episodes</span>
+            <span class="overview-value">{{
+              formatNumber(details?.leafCount)
+            }}</span>
+          </div>
+
+          <div class="overview-stat" v-if="libraryType === 'music'">
+            <span class="overview-label">Tracks</span>
+            <span class="overview-value">{{ details?.totalTracks }}</span>
+          </div>
+          <div class="overview-stat">
+            <span class="overview-label">Duration</span>
+            <span class="overview-value">{{
+              convertSecondsToHumanReadable(details?.duration / 1000)
+            }}</span>
+          </div>
+        </div>
+
+        <!-- Recently Added -->
+        <div class="library-section">
+          <h4 class="section-title">Recently Added</h4>
+          <div class="recent-items-grid">
+            <PlexLibraryItem
+              v-for="(item, index) in recentlyAdded"
+              :key="index"
+              :item="item"
+              :show-extras="
+                libraryType === 'music' || libraryType === 'tv shows'
+              "
+            />
+          </div>
+        </div>
+
+        <!-- Top Genres -->
+        <div class="library-section">
+          <h4 class="section-title">Top Genres</h4>
+          <div class="genre-list">
+            <div
+              v-for="(genre, index) in details.genres"
+              :key="index"
+              class="genre-item"
+            >
+              <span class="genre-name">{{ genre.name }}</span>
+              <div class="genre-bar-container">
+                <div
+                  class="genre-bar"
+                  :style="{
+                    width: (genre.count / details.total) * 100 + '%'
+                  }"
+                ></div>
+              </div>
+              <span class="genre-count">{{ genre.count }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, onBeforeUnmount, ref } from "vue";
+  import IconClose from "@/icons/IconClose.vue";
+  import IconMovie from "@/icons/IconMovie.vue";
+  import IconShow from "@/icons/IconShow.vue";
+  import IconMusic from "@/icons/IconMusic.vue";
+  import PlexLibraryItem from "@/components/plex/PlexLibraryItem.vue";
+  import { getLibraryTitle } from "@/utils/plexHelpers";
+  import { plexRecentlyAddedInLibrary } from "@/api";
+  import { processLibraryItem } from "@/utils/plexHelpers";
+  import { formatNumber, convertSecondsToHumanReadable } from "@/utils";
+  import { usePlexAuth } from "@/composables/usePlexAuth";
+
+  const { getPlexAuthCookie } = usePlexAuth();
+  const authToken = getPlexAuthCookie();
+
+  interface LibraryDetails {
+    id: number;
+    title: string;
+    total: number;
+    childCount?: number;
+    leafCount?: number;
+    duration: number;
+    genres: Array<{
+      name: string;
+      count: number;
+    }>;
+  }
+
+  interface Props {
+    libraryType: string;
+    details: LibraryDetails;
+    serverUrl: string;
+    serverMachineId: string;
+  }
+
+  const props = defineProps<Props>();
+
+  let recentlyAdded = ref([]);
+
+  const emit = defineEmits<{
+    (e: "close"): void;
+  }>();
+
+  const libraryIconComponent = computed(() => {
+    if (props.libraryType === "movies") return IconMovie;
+    if (props.libraryType === "tv shows") return IconShow;
+    if (props.libraryType === "music") return IconMusic;
+    return IconMovie;
+  });
+
+  function fetchRecentlyAdded() {
+    plexRecentlyAddedInLibrary(props.details.id).then(added => {
+      recentlyAdded.value = added?.MediaContainer?.Metadata.map(el =>
+        processLibraryItem(
+          el,
+          props.libraryType,
+          authToken,
+          props.serverUrl,
+          props.serverMachineId
+        )
+      );
+    });
+  }
+
+  function checkEventForEscapeKey(event: KeyboardEvent) {
+    if (event.key !== "Escape") return;
+    emit("close");
+  }
+
+  window.addEventListener("keyup", checkEventForEscapeKey);
+
+  onMounted(() => {
+    fetchRecentlyAdded();
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("keyup", checkEventForEscapeKey);
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries.scss";
+
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 20px;
+
+    @include mobile {
+      padding: 0;
+    }
+  }
+
+  .library-modal-content {
+    background: #1a1a1a;
+    border-radius: 12px;
+    width: 100%;
+    max-width: 800px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+
+    @include mobile {
+      max-height: 100vh;
+      border-radius: unset;
+    }
+  }
+
+  .library-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 24px;
+    border-bottom: 1px solid #333;
+  }
+
+  .library-header-title {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .library-icon-large {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: var(--highlight-color);
+    }
+  }
+
+  .library-modal-header h3 {
+    margin: 0;
+    font-size: 24px;
+    color: #fff;
+  }
+
+  .library-subtitle {
+    margin: 4px 0 0;
+    font-size: 14px;
+    color: #888;
+  }
+
+  .close-btn {
+    --size: 2.4rem;
+    background: none;
+    border: none;
+    color: #888;
+    cursor: pointer;
+    padding: 0.5rem;
+    height: var(--size);
+    width: var(--size);
+    border-radius: 6px;
+    fill: white;
+    transition: all 0.2s;
+
+    @include mobile {
+      margin: auto 0;
+    }
+  }
+
+  .close-btn:hover {
+    background: #333;
+    color: #fff;
+  }
+
+  .library-modal-body {
+    padding: 24px;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .library-stats-overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+    margin-bottom: 32px;
+  }
+
+  .overview-stat {
+    background: #252525;
+    padding: 16px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .overview-label {
+    font-size: 12px;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .overview-value {
+    font-size: 24px;
+    font-weight: 600;
+    color: #fff;
+  }
+
+  .library-section {
+    margin-bottom: 32px;
+  }
+
+  .section-title {
+    margin: 0 0 16px;
+    font-size: 18px;
+    color: #fff;
+    font-weight: 600;
+  }
+
+  .recent-items-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 20px;
+  }
+
+  .genre-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .genre-item {
+    display: grid;
+    grid-template-columns: 120px 1fr 60px;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .genre-name {
+    font-size: 14px;
+    color: #fff;
+  }
+
+  .genre-bar-container {
+    height: 8px;
+    background: #333;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .genre-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #e5a00d 0%, #ffbf3f 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  .genre-count {
+    font-size: 14px;
+    color: #888;
+    text-align: right;
+  }
+
+  @media (max-width: 768px) {
+    .library-stats-overview {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .recent-items-grid {
+      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+      gap: 16px;
+    }
+
+    .genre-item {
+      grid-template-columns: 100px 1fr 50px;
+    }
+  }
+</style>

src/components/plex/PlexLibraryStats.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="library-stats">
+    <div
+      v-for="stat in displayStats"
+      :key="stat.key"
+      class="stat-card"
+      :class="{
+        disabled: stat.value === undefined || stat.value === 0 || loading,
+        unclickable: !!!stat.clickable
+      }"
+      @click="
+        stat.clickable && stat.value?.total > 0 && !loading && handleClick(stat.key)
+      "
+    >
+      <div class="stat-icon">
+        <component :is="stat.icon" />
+      </div>
+      <div class="stat-content">
+        <div class="stat-value" v-if="!loading">{{ formatNumber(stat.value?.total) }}</div>
+        <div class="stat-value loading-dots" v-else>...</div>
+        <div class="stat-label">{{ stat.label }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+  import { formatNumber } from '@/utils'
+  import IconMovie from "@/icons/IconMovie.vue";
+  import IconShow from "@/icons/IconShow.vue";
+  import IconMusic from "@/icons/IconMusic.vue";
+  import IconClock from "@/icons/IconClock.vue";
+
+  interface LibraryStat {
+    id: number;
+    title: string;
+    total: number;
+    childCount?: number;
+    leafCount?: number;
+  }
+
+  interface Props {
+    movies: LibraryStat;
+    shows: LibraryStat;
+    music: LibraryStat;
+    watchtime: number;
+    loading?: boolean;
+  }
+
+  const props = defineProps<Props>();
+
+  const emit = defineEmits<{
+    openLibrary: [type: string];
+  }>();
+
+  const displayStats = computed(() => [
+    {
+      key: "movies",
+      icon: IconMovie,
+      value: props.movies,
+      label: "Movies",
+      clickable: true
+    },
+    {
+      key: "tv shows",
+      icon: IconShow,
+      value: props.shows,
+      label: "TV Shows",
+      clickable: true
+    },
+    {
+      key: "music",
+      icon: IconMusic,
+      value: props.music,
+      label: "Albums",
+      clickable: true
+    },
+    {
+      key: "watchtime",
+      icon: IconClock,
+      value: props.watchtime,
+      label: "Hours Watched",
+      clickable: false
+    }
+  ]);
+
+  function handleClick(type: string) {
+    emit("openLibrary", type);
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .library-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.75rem;
+    margin-bottom: 0.85rem;
+
+    @include tablet-only {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @include mobile-only {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0.65rem;
+    }
+  }
+
+  .stat-card {
+    background-color: var(--background-ui);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+
+    @include mobile-only {
+      padding: 0.85rem 0.75rem;
+    }
+
+    &:hover:not(.disabled, .unclickable) {
+      background-color: var(--background-40);
+      border-color: var(--highlight-color);
+      cursor: pointer;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    &.disabled {
+      opacity: 0.6;
+
+      &:hover {
+        transform: none;
+        border-color: transparent;
+      }
+    }
+  }
+
+  .stat-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mobile-only {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: var(--highlight-color);
+      transition: fill 0.2s ease;
+    }
+  }
+
+  .stat-card:hover:not(.disabled) .stat-icon svg {
+    fill: var(--color-green-90);
+  }
+
+  .stat-content {
+    text-align: center;
+  }
+
+  .stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    line-height: 1;
+    margin-bottom: 0.25rem;
+
+    @include mobile-only {
+      font-size: 1.3rem;
+    }
+  }
+
+  .stat-label {
+    font-size: 0.75rem;
+    color: var(--text-color-60);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+
+    @include mobile-only {
+      font-size: 0.7rem;
+    }
+  }
+
+  .loading-dots {
+    animation: loadingDots 1.5s infinite;
+  }
+
+  @keyframes loadingDots {
+    0%,
+    20% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.3;
+    }
+  }
+</style>

src/components/plex/PlexProfileCard.vue

@@ -0,0 +1,309 @@
+<template>
+  <div v-if="username" class="plex-profile-card">
+    <div class="profile-header">
+      <img
+        v-if="userData?.thumb"
+        :src="userData.thumb"
+        alt="Profile"
+        class="profile-avatar"
+      />
+      <div v-else class="profile-avatar-placeholder">
+        {{ username.charAt(0).toUpperCase() }}
+      </div>
+      <div class="profile-info">
+        <div class="username-row">
+          <h3 class="profile-username">{{ username }}</h3>
+          <svg
+            class="connected-checkmark"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </div>
+        <div v-if="userData?.email" class="profile-email">
+          {{ userData.email }}
+        </div>
+        <div class="profile-badges">
+          <div
+            v-if="userData?.subscription?.active"
+            class="profile-badge plex-pass"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 256 256"
+              fill="currentColor"
+            >
+              <path
+                d="M128 0C57.3 0 0 57.3 0 128s57.3 128 128 128 128-57.3 128-128S198.7 0 128 0zm0 230.4C66.9 230.4 25.6 189.1 25.6 128S66.9 25.6 128 25.6 230.4 66.9 230.4 128 189.1 230.4 128 230.4z"
+              />
+            </svg>
+            Plex Pass
+          </div>
+          <div v-if="userData?.joined_at" class="profile-badge member-since">
+            {{ formatMemberSince(userData.joined_at) }}
+          </div>
+          <div
+            v-if="userData?.two_factor_enabled"
+            class="profile-badge two-factor"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+              <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+            </svg>
+            2FA
+          </div>
+          <div
+            v-if="userData?.experimental_features"
+            class="profile-badge experimental"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+            >
+              <path
+                d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+              ></path>
+            </svg>
+            Labs
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    username: string;
+    userData: any;
+  }
+
+  defineProps<Props>();
+
+  function formatMemberSince(dateString: string) {
+    try {
+      const date = new Date(dateString);
+      const now = new Date();
+      const years = now.getFullYear() - date.getFullYear();
+
+      if (years === 0) return "New Member";
+      if (years === 1) return "1 Year";
+      return `${years} Years`;
+    } catch {
+      return "Member";
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .plex-profile-card {
+    background-color: var(--background-ui);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-bottom: 0.85rem;
+    border: 1px solid var(--background-40);
+
+    @include mobile-only {
+      padding: 0.85rem;
+    }
+  }
+
+  .profile-header {
+    display: flex;
+    gap: 0.85rem;
+    align-items: center;
+  }
+
+  .profile-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--highlight-color);
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  .profile-avatar-placeholder {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      var(--highlight-color),
+      var(--background-40)
+    );
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-color);
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 50px;
+      height: 50px;
+      font-size: 1.3rem;
+    }
+  }
+
+  .profile-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .username-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .profile-username {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-color);
+
+    @include mobile-only {
+      font-size: 1.1rem;
+    }
+  }
+
+  .connected-checkmark {
+    color: var(--color-success-highlight);
+    flex-shrink: 0;
+    animation: checkmarkPop 0.3s ease-out;
+
+    @include mobile-only {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  @keyframes checkmarkPop {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .profile-email {
+    font-size: 0.85rem;
+    color: var(--text-color-60);
+    margin-bottom: 0.4rem;
+    word-break: break-all;
+
+    @include mobile-only {
+      font-size: 0.8rem;
+    }
+  }
+
+  .profile-badges {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.4rem;
+  }
+
+  .profile-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.25rem 0.65rem;
+    border-radius: 1rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+
+    @include mobile-only {
+      font-size: 0.65rem;
+      padding: 0.2rem 0.55rem;
+    }
+
+    &.plex-pass {
+      background-color: #cc7b19;
+      color: $white;
+      text-transform: uppercase;
+
+      svg {
+        width: 12px;
+        height: 12px;
+
+        @include mobile-only {
+          width: 11px;
+          height: 11px;
+        }
+      }
+    }
+
+    &.member-since {
+      background-color: var(--background-40);
+      color: var(--text-color-70);
+    }
+
+    &.two-factor {
+      background-color: var(--color-success);
+      color: $white;
+
+      svg {
+        width: 11px;
+        height: 11px;
+
+        @include mobile-only {
+          width: 10px;
+          height: 10px;
+        }
+      }
+    }
+
+    &.experimental {
+      background-color: #8b5cf6;
+      color: $white;
+
+      svg {
+        width: 11px;
+        height: 11px;
+
+        @include mobile-only {
+          width: 10px;
+          height: 10px;
+        }
+      }
+    }
+  }
+</style>

src/components/plex/PlexServerInfo.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="plex-server-info">
+    <div class="plex-details">
+      <div class="detail-row">
+        <span class="detail-label">
+          <IconServer class="label-icon" />
+          Plex server name
+        </span>
+        <span class="detail-value">{{ serverName || "Unknown" }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">
+          <IconSync class="label-icon" />
+          Last Sync
+        </span>
+        <span class="detail-value">{{ lastSync || "Never" }}</span>
+      </div>
+    </div>
+
+    <div class="plex-actions">
+      <seasoned-button @click="$emit('sync')" :disabled="syncing">
+        <IconSync v-if="!syncing" class="button-icon" />
+        {{ syncing ? "Syncing..." : "Sync Library" }}
+      </seasoned-button>
+      <seasoned-button @click="$emit('unlink')">
+        Unlink Account
+      </seasoned-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import IconServer from "@/icons/IconServer.vue";
+  import IconSync from "@/icons/IconSync.vue";
+
+  interface Props {
+    serverName: string;
+    lastSync: string;
+    syncing?: boolean;
+  }
+
+  defineProps<Props>();
+  defineEmits<{
+    sync: [];
+    unlink: [];
+  }>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .plex-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    margin-bottom: 0.85rem;
+  }
+
+  .detail-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.55rem 0.65rem;
+    background-color: var(--background-ui);
+    border-radius: 0.25rem;
+
+    @include mobile-only {
+      padding: 0.5rem 0.6rem;
+    }
+  }
+
+  .detail-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    @include mobile-only {
+      font-size: 0.8rem;
+    }
+
+    svg {
+      color: var(--text-color-60);
+      flex-shrink: 0;
+    }
+
+    .label-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .detail-value {
+    font-size: 0.95rem;
+
+    @include mobile-only {
+      font-size: 0.9rem;
+    }
+  }
+
+  .plex-actions {
+    display: flex;
+    gap: 0.65rem;
+
+    @include mobile-only {
+      flex-direction: column;
+      gap: 0.6rem;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      svg {
+        flex-shrink: 0;
+      }
+
+      .button-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+</style>

src/components/plex/PlexUnlinkModal.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="modal-overlay" @click="emit('cancel')">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h3>Unlink Plex Account</h3>
+        <button class="close-btn" @click="emit('cancel')">
+          <IconClose />
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Are you sure you want to unlink your Plex account? You will lose
+          access to:
+        </p>
+        <ul>
+          <li>Watch history tracking</li>
+          <li>Recently added content notifications</li>
+          <li>Real-time download progress</li>
+        </ul>
+      </div>
+      <div class="modal-footer">
+        <button class="cancel-btn" @click="emit('cancel')">Cancel</button>
+        <button class="confirm-btn" @click="emit('confirm')">
+          Unlink Account
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import IconClose from "@/icons/IconClose.vue";
+
+  const emit = defineEmits<{
+    (e: "confirm"): void;
+    (e: "cancel"): void;
+  }>();
+</script>
+
+<style scoped>
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 20px;
+  }
+
+  .modal-content {
+    background: #1a1a1a;
+    border-radius: 12px;
+    width: 100%;
+    max-width: 480px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  }
+
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px;
+    border-bottom: 1px solid #333;
+  }
+
+  .modal-header h3 {
+    margin: 0;
+    font-size: 20px;
+    color: #fff;
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    color: #888;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 6px;
+    transition: all 0.2s;
+  }
+
+  .close-btn:hover {
+    background: #333;
+    color: #fff;
+  }
+
+  .modal-body {
+    padding: 24px;
+  }
+
+  .modal-body p {
+    margin: 0 0 16px;
+    color: #ccc;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .modal-body ul {
+    margin: 0;
+    padding-left: 20px;
+    color: #aaa;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+
+  .modal-body li {
+    margin-bottom: 8px;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid #333;
+  }
+
+  .cancel-btn,
+  .confirm-btn {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+  }
+
+  .cancel-btn {
+    background: #333;
+    color: #fff;
+  }
+
+  .cancel-btn:hover {
+    background: #444;
+  }
+
+  .confirm-btn {
+    background: #dc2626;
+    color: #fff;
+  }
+
+  .confirm-btn:hover {
+    background: #b91c1c;
+  }
+</style>

src/components/popup/ActionButton.vue

@@ -0,0 +1,96 @@
+<template>
+  <li
+    class="sidebar-list-element"
+    :class="{ active, disabled }"
+    :tabindex="disabled ? -1 : 0"
+    role="button"
+    :aria-disabled="disabled"
+    @click="emit('click')"
+    @keydown.enter.prevent="emit('click')"
+    @keydown.space.prevent="emit('click')"
+  >
+    <slot></slot>
+  </li>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    active?: boolean;
+    disabled?: boolean;
+  }
+
+  interface Emit {
+    (e: "click");
+  }
+
+  const emit = defineEmits<Emit>();
+  defineProps<Props>();
+</script>
+
+<style lang="scss">
+  @import "scss/media-queries";
+
+  li.sidebar-list-element {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    color: var(--text-color-50);
+    font-size: 12px;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--text-color-5);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &:first-of-type {
+      padding-top: 0;
+    }
+
+    div > svg,
+    svg {
+      width: 26px;
+      height: 26px;
+      margin-right: 1rem;
+      transition: all 0.3s ease;
+      fill: var(--text-color-70);
+    }
+
+    &:hover,
+    &:focus,
+    &.active {
+      color: var(--text-color);
+      outline: none;
+
+      div > svg,
+      svg {
+        fill: var(--text-color);
+        transform: scale(1.1, 1.1);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--highlight-color);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
+    &.active > div > svg,
+    &.active > svg {
+      fill: var(--highlight-color);
+    }
+
+    &.disabled {
+      cursor: default;
+    }
+
+    .pending {
+      color: #f8bd2d;
+    }
+
+    .meta {
+      margin-left: auto;
+      text-align: right;
+    }
+  }
+</style>

src/components/popup/Description.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    ref="descriptionElement"
+    class="movie-description noselect"
+    @click="overflow ? (truncated = !truncated) : null"
+    @keydown.enter="overflow ? (truncated = !truncated) : null"
+  >
+    <span :class="{ truncated }">{{ description }}</span>
+
+    <button v-if="description && overflow" class="truncate-toggle">
+      <IconArrowDown :class="{ rotate: !truncated }" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from "vue";
+  import type { Ref } from "vue";
+  import IconArrowDown from "../../icons/IconArrowDown.vue";
+
+  interface Props {
+    description: string;
+  }
+
+  const props = defineProps<Props>();
+  const truncated: Ref<boolean> = ref(true);
+  const overflow: Ref<boolean> = ref(false);
+  const descriptionElement: Ref<HTMLElement> = ref(null);
+
+  function removeElements(elems: NodeListOf<Element>) {
+    elems.forEach(el => el.remove());
+  }
+
+  // The description element overflows text after 4 rows with css
+  // line-clamp this takes the same text and adds to a temporary
+  // element without css overflow. If the temp element is
+  // higher then description element, we display expand button
+  function checkDescriptionOverflowing() {
+    const element = descriptionElement?.value;
+    if (!element) return;
+
+    const { height, width } = element.getBoundingClientRect();
+    const { fontSize, lineHeight } = getComputedStyle(element);
+
+    const descriptionComparisonElement = document.createElement("div");
+    descriptionComparisonElement.setAttribute(
+      "style",
+      `max-width: ${Math.ceil(
+        width + 10
+      )}px; display: block; font-size: ${fontSize}; line-height: ${lineHeight};`
+    );
+    // Don't know why need to add 10px to width, but works out perfectly
+
+    descriptionComparisonElement.classList.add("dummy-non-overflow");
+    descriptionComparisonElement.innerText = props.description;
+
+    document.body.appendChild(descriptionComparisonElement);
+    const elemWithoutOverflowHeight =
+      descriptionComparisonElement.getBoundingClientRect().height;
+
+    overflow.value = elemWithoutOverflowHeight > height;
+    removeElements(document.querySelectorAll(".dummy-non-overflow"));
+  }
+
+  onMounted(checkDescriptionOverflowing);
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .movie-description {
+    font-weight: 300;
+    font-size: 13px;
+    line-height: 1.8;
+    margin-bottom: 20px;
+    transition: all 1s ease;
+
+    @include tablet-min {
+      margin-bottom: 30px;
+      font-size: 14px;
+    }
+  }
+
+  span.truncated {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
+
+  .truncate-toggle {
+    border: none;
+    background: none;
+    width: 100%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: var(--text-color);
+    margin-top: 1rem;
+    cursor: pointer;
+
+    svg {
+      transition: 0.4s ease all;
+      height: 22px;
+      width: 22px;
+      fill: var(--text-color);
+
+      &.rotate {
+        transform: rotateX(180deg);
+      }
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      flex: 1;
+      border-bottom: 1px solid var(--text-color-50);
+    }
+    &::before {
+      margin-right: 1rem;
+    }
+    &::after {
+      margin-left: 1rem;
+    }
+  }
+</style>

src/components/popup/Detail.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="movie-detail">
+    <h2 class="title">{{ title }}</h2>
+    <span v-if="detail" class="info">{{ detail }}</span>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    title: string;
+    detail?: string | number;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .movie-detail {
+    margin-bottom: 20px;
+
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
+
+    @include tablet-min {
+      margin-bottom: 30px;
+    }
+
+    h2.title {
+      margin: 0;
+      font-weight: 400;
+      text-transform: uppercase;
+      font-size: 1.2rem;
+      color: var(--highlight-color);
+
+      @include mobile {
+        font-size: 1.1rem;
+      }
+    }
+
+    span.info {
+      font-weight: 300;
+      font-size: 1rem;
+      letter-spacing: 0.8px;
+      margin-top: 5px;
+    }
+  }
+</style>

src/components/popup/Movie.vue

@@ -0,0 +1,594 @@
+<template>
+  <section class="movie">
+    <!-- HEADER w/ POSTER -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
+    <header
+      ref="backdropElement"
+      :class="compact ? 'compact' : ''"
+      @click="compact = !compact"
+    >
+      <figure class="movie__poster">
+        <img
+          ref="poster-image"
+          class="movie-item__img is-loaded"
+          alt="Movie poster"
+          :src="poster"
+        />
+      </figure>
+
+      <div v-if="media" class="movie__title">
+        <h1>{{ media.title }}</h1>
+        <i>{{ media.tagline }}</i>
+      </div>
+      <loading-placeholder v-else :count="2" />
+    </header>
+
+    <!-- Siderbar and movie info -->
+    <div class="movie__main">
+      <div class="movie__wrap movie__wrap--main">
+        <!-- SIDEBAR ACTIONS -->
+        <div v-if="media" class="movie__actions">
+          <action-button :active="media?.exists_in_plex" :disabled="true">
+            <IconThumbsUp v-if="media?.exists_in_plex" />
+            <IconThumbsDown v-else />
+            {{
+              !media?.exists_in_plex
+                ? "Not yet available"
+                : "Already available 🎉"
+            }}
+          </action-button>
+
+          <action-button :active="requested" @click="sendRequest">
+            <transition name="fade" mode="out-in">
+              <div v-if="!requested" key="request"><IconRequest /></div>
+              <div v-else key="requested"><IconRequested /></div>
+            </transition>
+            {{ !requested ? `Request ${type}?` : "Already requested" }}
+          </action-button>
+
+          <action-button
+            v-if="plexUserId && media?.exists_in_plex"
+            @click="openInPlex"
+          >
+            <IconPlay />
+            Open and watch in plex now!
+          </action-button>
+
+          <action-button
+            v-if="cast?.length"
+            :active="showCast"
+            @click="() => (showCast = !showCast)"
+          >
+            <IconProfile class="icon" />
+            {{ showCast ? "Hide cast" : "Show cast" }}
+          </action-button>
+
+          <action-button
+            v-if="admin === true"
+            :active="showTorrents"
+            @click="showTorrents = !showTorrents"
+          >
+            <IconBinoculars />
+            Search for torrents
+            <span v-if="numberOfTorrentResults" class="meta">{{
+              numberOfTorrentResults
+            }}</span>
+          </action-button>
+
+          <action-button @click="openTmdb">
+            <IconInfo />
+            See more info
+          </action-button>
+        </div>
+
+        <!-- Loading placeholder -->
+        <div v-else class="movie__actions text-input__loading">
+          <div
+            v-for="index in admin ? Array(4) : Array(3)"
+            :key="index"
+            class="movie__actions-link"
+          >
+            <div
+              class="movie__actions-text text-input__loading--line"
+              style="margin: 9px; margin-left: -3px"
+            ></div>
+          </div>
+        </div>
+
+        <!-- MOVIE INFO -->
+        <div class="movie__info">
+          <!-- Loading placeholder -->
+          <div v-if="loading">
+            <loading-placeholder :count="5" />
+          </div>
+
+          <Description
+            v-if="!loading && media && media.overview"
+            :description="media.overview"
+          />
+
+          <div v-if="media" class="movie__details">
+            <Detail
+              v-if="media.year"
+              title="Release date"
+              :detail="media.year"
+            />
+            <Detail
+              v-if="media.type === MediaTypes.Movie && media.rating"
+              title="Rating"
+              :detail="media.rating"
+            />
+            <Detail
+              v-if="media.type == MediaTypes.Show"
+              title="Seasons"
+              :detail="media.seasons"
+            />
+            <Detail
+              v-if="media.genres && media.genres.length"
+              title="Genres"
+              :detail="media.genres.join(', ')"
+            />
+            <Detail
+              v-if="
+                media.production_status &&
+                media.production_status !== 'Released'
+              "
+              title="Production status"
+              :detail="media.production_status"
+            />
+            <Detail
+              v-if="media.runtime"
+              title="Runtime"
+              :detail="humanMinutes(media.runtime)"
+            />
+          </div>
+        </div>
+
+        <!-- TODO: change this classname, this is general  -->
+
+        <div v-if="showCast && cast?.length" class="movie__admin">
+          <Detail title="cast">
+            <CastList :cast="cast" />
+          </Detail>
+        </div>
+      </div>
+
+      <!-- TORRENT LIST -->
+      <TorrentList
+        v-if="media && admin && showTorrents"
+        class="torrents"
+        :query="media?.title"
+        :tmdb-id="id"
+      ></TorrentList>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from "vue";
+  import { useStore } from "vuex";
+  import type { Ref } from "vue";
+
+  // import img from "@/directives/v-image";
+  import IconProfile from "../../icons/IconProfile.vue";
+  import IconThumbsUp from "../../icons/IconThumbsUp.vue";
+  import IconThumbsDown from "../../icons/IconThumbsDown.vue";
+  import IconInfo from "../../icons/IconInfo.vue";
+  import IconRequest from "../../icons/IconRequest.vue";
+  import IconRequested from "../../icons/IconRequested.vue";
+  import IconBinoculars from "../../icons/IconBinoculars.vue";
+  import IconPlay from "../../icons/IconPlay.vue";
+  import TorrentList from "../torrent/TruncatedTorrentResults.vue";
+  import CastList from "../CastList.vue";
+  import Detail from "./Detail.vue";
+  import ActionButton from "./ActionButton.vue";
+  import Description from "./Description.vue";
+  import LoadingPlaceholder from "../ui/LoadingPlaceholder.vue";
+  import type { IColors } from "../../interfaces/IColors.ts";
+  import type {
+    IMovie,
+    IShow,
+    IMediaCredits,
+    ICast
+  } from "../../interfaces/IList";
+  import type {
+    IRequestStatusResponse,
+    IRequestSubmitResponse
+  } from "../../interfaces/IRequestResponse";
+  import { MediaTypes } from "../../interfaces/IList";
+
+  import { humanMinutes } from "../../utils";
+  import {
+    getMovie,
+    getShow,
+    getMovieCredits,
+    getShowCredits,
+    request,
+    getRequestStatus
+    // watchLink
+  } from "../../api";
+
+  interface Props {
+    id: number;
+    type: MediaTypes.Movie | MediaTypes.Show;
+  }
+
+  const props = defineProps<Props>();
+  const ASSET_URL = "https://image.tmdb.org/t/p/";
+  // const COLORS_URL = "https://colors.schleppe.cloud/colors";
+  const COLORS_URL = "http://localhost:8080/colors";
+  const ASSET_SIZES = ["w500", "w780", "original"];
+
+  const media: Ref<IMovie | IShow> = ref();
+  const requested: Ref<boolean> = ref();
+  const showTorrents: Ref<boolean> = ref();
+  const showCast: Ref<boolean> = ref();
+  const cast: Ref<ICast[]> = ref([]);
+  const compact: Ref<boolean> = ref();
+  const loading: Ref<boolean> = ref();
+  const backdropElement: Ref<HTMLElement> = ref();
+
+  const store = useStore();
+
+  const admin = computed(() => store.getters["user/admin"]);
+  const plexUserId = computed(() => store.getters["user/plexUserId"]);
+
+  const poster = computed(() => {
+    if (!media.value) return "/assets/placeholder.png";
+    if (!media.value?.poster) return "/assets/no-image.svg";
+
+    // compute & update highlight colors from poster image
+    colorsFromPoster(media.value.poster); // eslint-disable-line
+    return `${ASSET_URL}${ASSET_SIZES[0]}${media.value.poster}`;
+  });
+
+  const numberOfTorrentResults = computed(() => {
+    const count = store.getters["torrentModule/resultCount"];
+    return count ? `${count} results` : null;
+  });
+
+  function setCast(_cast: ICast[]) {
+    cast.value = _cast;
+  }
+  function setRequested(
+    requestResponse: IRequestStatusResponse | IRequestSubmitResponse
+  ) {
+    if (requestResponse?.success) {
+      requested.value = requestResponse?.success;
+      return;
+    }
+
+    requested.value = false;
+  }
+
+  function setBackdrop(): void {
+    if (
+      !media.value?.backdrop ||
+      !backdropElement.value?.style ||
+      backdropElement.value?.style?.backgroundImage !== ""
+    )
+      return;
+
+    const backdropURL = `${ASSET_URL}${ASSET_SIZES[1]}${media.value.backdrop}`;
+    backdropElement.value.style.backgroundImage = `url(${backdropURL})`;
+  }
+
+  function getCredits(
+    type: MediaTypes.Movie | MediaTypes.Show
+  ): Promise<IMediaCredits> {
+    if (type === MediaTypes.Movie) {
+      return getMovieCredits(props.id);
+    }
+    if (type === MediaTypes.Show) {
+      return getShowCredits(props.id);
+    }
+
+    return Promise.reject();
+  }
+
+  function setAndReturnMedia(_media: IMovie | IShow) {
+    media.value = _media;
+    return _media;
+  }
+
+  function fetchMedia() {
+    if (!props.id || !props.type) {
+      console.error("Unable to fetch media, requires id & type"); // eslint-disable-line no-console
+      return;
+    }
+
+    let apiFunction: typeof getMovie;
+    let parameters: {
+      checkExistance: boolean;
+      credits: boolean;
+      releaseDates?: boolean;
+    };
+
+    if (props.type === MediaTypes.Movie) {
+      apiFunction = getMovie;
+      parameters = { checkExistance: true, credits: false };
+    } else if (props.type === MediaTypes.Show) {
+      apiFunction = getShow;
+      parameters = { checkExistance: true, credits: false };
+    }
+
+    apiFunction(props.id, { ...parameters })
+      .then(setAndReturnMedia)
+      .then(() => getCredits(props.type))
+      .then(credits => setCast(credits?.cast || []))
+      .then(() => getRequestStatus(props.id, props.type))
+      .then(requestResponse => setRequested(requestResponse))
+      .then(setBackdrop);
+  }
+
+  function sendRequest() {
+    request(props.id, props.type).then(requestResponse =>
+      setRequested(requestResponse)
+    );
+  }
+
+  function openInPlex(): boolean {
+    // watchLink()
+    return false;
+  }
+
+  function openTmdb() {
+    const tmdbType = props.type === MediaTypes.Show ? "tv" : props.type;
+    const tmdbURL = `https://www.themoviedb.org/${tmdbType}/${props.id}`;
+    window.location.href = tmdbURL;
+  }
+  function colorMain(colors: IColors) {
+    const parent = document.getElementsByClassName(
+      "movie-popup"
+    )[0] as HTMLElement;
+    parent.style.setProperty("--highlight-color", colors.s ?? colors.p);
+    parent.style.setProperty("--highlight-bg", colors.bg);
+    parent.style.setProperty("--highlight-secondary", colors.p);
+    parent.style.setProperty("--text-color", "#ffffff");
+    parent.style.setProperty("--text-color-90", "rgba(255, 255, 255, 0.9)");
+    parent.style.setProperty("--text-color-70", "rgba(255, 255, 255, 0.7)");
+    parent.style.setProperty("--text-color-50", "rgba(255, 255, 255, 0.5)");
+    parent.style.setProperty("--text-color-10", "rgba(255, 255, 255, 0.1)");
+    parent.style.setProperty("--text-color-5", "rgba(255, 255, 255, 0.05)");
+  }
+
+  async function colorsFromPoster(posterPath: string) {
+    const url = new URL(COLORS_URL);
+    url.searchParams.append("id", posterPath.replace("/", ""));
+    url.searchParams.append("size", "w342");
+
+    fetch(url.href)
+      .then(resp => {
+        if (resp.ok) return resp.json();
+        throw new Error(`invalid status: '${resp.status}' from server.`);
+      })
+      .then(colorMain)
+      .catch(error => console.log("unable to get colors, error:", error)); // eslint-disable-line no-console
+  }
+
+  // On created functions
+  fetchMedia();
+  store.dispatch("torrentModule/setResultCount", null);
+  // End on create functions
+
+  onMounted(setBackdrop);
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
+
+  header {
+    $duration: 0.2s;
+    transform: scaleY(1);
+    transition: height $duration ease;
+    transform-origin: top;
+    position: relative;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-color: $background-color;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: 350px;
+
+    @include mobile {
+      grid-template-columns: 1fr;
+      height: 250px;
+      place-items: center;
+    }
+
+    * {
+      z-index: 2;
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      background: $background-dark-85;
+    }
+
+    @include mobile {
+      &.compact {
+        height: 100px;
+      }
+    }
+  }
+
+  .movie__poster {
+    display: none;
+    border-radius: 1.6rem;
+
+    @include desktop {
+      background: var(--background-color);
+      height: auto;
+      display: block;
+      width: calc(100% - 80px);
+      margin: 40px;
+
+      > img {
+        width: 100%;
+        border-radius: calc(1.6rem - 1px);
+      }
+    }
+  }
+
+  .movie {
+    &__wrap {
+      &--header {
+        align-items: center;
+        height: 100%;
+      }
+      &--main {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        @include tablet-min {
+          flex-direction: row;
+        }
+
+        background-color: var(--highlight-bg, var(--background-color));
+        color: var(--text-color);
+      }
+    }
+
+    &__img {
+      display: block;
+      width: 100%;
+      opacity: 0;
+      transform: scale(0.97) translateZ(0);
+      transition:
+        opacity 0.5s ease,
+        transform 0.5s ease;
+
+      &.is-loaded {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    &__title {
+      position: relative;
+      padding: 20px;
+      text-align: center;
+      width: 100%;
+      height: fit-content;
+
+      @include tablet-min {
+        text-align: left;
+        padding: 140px 30px 0 40px;
+      }
+
+      h1 {
+        color: var(--highlight-color);
+        font-weight: 500;
+        line-height: 1.2;
+        font-size: 2.2rem;
+        font-weight: 600;
+        letter-spacing: 1px;
+        margin-bottom: 0;
+
+        @include tablet-min {
+          font-size: 30px;
+          font-size: 2.2rem;
+        }
+      }
+
+      i {
+        display: block;
+        color: rgba(255, 255, 255, 0.8);
+        color: var(--highlight-secondary);
+        margin-top: 1rem;
+      }
+    }
+
+    &__actions {
+      text-align: center;
+      width: 100%;
+      order: 2;
+      padding: 20px;
+      border-top: 1px solid var(--text-color-50);
+      @include tablet-min {
+        order: 1;
+        width: 45%;
+        padding: 185px 0 40px 40px;
+        border-top: 0;
+      }
+    }
+    &__info {
+      width: 100%;
+      padding: 20px;
+      order: 1;
+      @include tablet-min {
+        order: 2;
+        padding: 40px;
+        width: 55%;
+        margin-left: 45%;
+      }
+    }
+    &__info {
+      margin-left: 0;
+    }
+    &__details {
+      display: flex;
+      flex-wrap: wrap;
+
+      > * {
+        margin-right: 30px;
+
+        @include mobile {
+          margin-right: 20px;
+        }
+      }
+    }
+    &__admin {
+      width: 100%;
+      padding: 20px;
+      order: 2;
+      @include tablet-min {
+        order: 3;
+        padding: 40px;
+        padding-top: 0px;
+        width: 100%;
+      }
+      &-title {
+        margin: 0;
+        font-weight: 400;
+        text-transform: uppercase;
+        text-align: center;
+        font-size: 14px;
+        color: $green;
+        padding-bottom: 20px;
+        @include tablet-min {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .torrents {
+      background-color: var(--highlight-bg, var(--background-color));
+      padding: 0 1rem;
+
+      @include mobile {
+        padding: 0 0.5rem;
+      }
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.4s;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>

src/components/popup/Person.vue

@@ -0,0 +1,278 @@
+<template>
+  <section class="person">
+    <header ref="header">
+      <div class="info">
+        <h1 v-if="person">
+          {{ person.name }}
+        </h1>
+        <div v-else>
+          <loading-placeholder :count="1" />
+          <loading-placeholder :count="1" line-class="short" :top="3.5" />
+        </div>
+
+        <span v-if="person && person['known_for_department']" class="known-for">
+          {{
+            person.known_for_department === "Acting"
+              ? "Actor"
+              : person.known_for_department
+          }}
+        </span>
+      </div>
+
+      <figure class="person__poster">
+        <img
+          ref="poster-image"
+          class="person-item__img is-loaded"
+          alt="Image of person"
+          :src="poster"
+        />
+      </figure>
+    </header>
+
+    <div v-if="loading">
+      <loading-placeholder :count="6" />
+      <loading-placeholder line-class="short" :top="3" />
+      <loading-placeholder :count="6" line-class="fullwidth" />
+      <loading-placeholder line-class="short" :top="4.5" />
+      <loading-placeholder />
+    </div>
+
+    <div v-if="person">
+      <Detail v-if="age" title="Age" :detail="age" />
+
+      <Detail
+        v-if="person"
+        title="Born"
+        :detail="person.place_of_birth ? person.place_of_birth : '(Not found)'"
+      />
+
+      <Detail v-if="person.biography" title="Biography">
+        <Description :description="person.biography" />
+      </Detail>
+
+      <Detail
+        v-if="creditedMovies.length"
+        title="movies"
+        :detail="`Credited in ${creditedMovies.length} movies`"
+      >
+        <CastList :cast="creditedMovies" />
+      </Detail>
+
+      <Detail
+        v-if="creditedShows.length"
+        title="shows"
+        :detail="`Credited in ${creditedShows.length} shows`"
+      >
+        <CastList :cast="creditedShows" />
+      </Detail>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from "vue";
+  import CastList from "@/components/CastList.vue";
+  import Detail from "@/components/popup/Detail.vue";
+  import Description from "@/components/popup/Description.vue";
+  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
+  import type { Ref, ComputedRef } from "vue";
+  import { getPerson, getPersonCredits } from "../../api";
+  import type {
+    IPerson,
+    IPersonCredits,
+    IMovie,
+    IShow
+  } from "../../interfaces/IList";
+  import { MediaTypes } from "../../interfaces/IList";
+
+  interface Props {
+    id: number;
+  }
+
+  const props = defineProps<Props>();
+  const ASSET_URL = "https://image.tmdb.org/t/p/";
+  const ASSET_SIZES = ["w500", "w780", "original"];
+
+  const person: Ref<IPerson> = ref();
+  const credits: Ref<IPersonCredits> = ref();
+  const loading: Ref<boolean> = ref(false);
+  const creditedMovies: Ref<Array<IMovie | IShow>> = ref([]);
+  const creditedShows: Ref<Array<IMovie | IShow>> = ref([]);
+
+  const poster: ComputedRef<string> = computed(() => {
+    if (!person.value) return "/assets/placeholder.png";
+    if (!person.value?.poster) return "/assets/no-image.svg";
+
+    return `${ASSET_URL}${ASSET_SIZES[0]}${person.value.poster}`;
+  });
+
+  const age: ComputedRef<string> = computed(() => {
+    if (!person.value?.birthday) return "";
+
+    const today = new Date().getFullYear();
+    const birthYear = new Date(person.value.birthday).getFullYear();
+    return `${today - birthYear} years old`;
+  });
+
+  function setCredits(_credits: IPersonCredits) {
+    credits.value = _credits;
+  }
+
+  function setPerson(_person: IPerson) {
+    person.value = _person;
+  }
+
+  function sortPopularity(a: IMovie | IShow, b: IMovie | IShow): number {
+    return a.popularity < b.popularity ? 1 : -1;
+  }
+
+  function alreadyExists(
+    item: IMovie | IShow,
+    pos: number,
+    self: Array<IMovie | IShow>
+  ) {
+    const names = self.map(_item => _item.title);
+    return names.indexOf(item.title) === pos;
+  }
+
+  function personCreditedFrom(cast: Array<IMovie | IShow>): void {
+    creditedMovies.value = cast
+      .filter(credit => credit.type === MediaTypes.Movie)
+      .filter(alreadyExists)
+      .sort(sortPopularity);
+
+    creditedShows.value = cast
+      .filter(credit => credit.type === MediaTypes.Show)
+      .filter(alreadyExists)
+      .sort(sortPopularity);
+  }
+
+  function fetchPerson() {
+    if (!props.id) {
+      console.error("Unable to fetch person, missing id!"); // eslint-disable-line no-console
+      return;
+    }
+
+    getPerson(props.id)
+      .then(setPerson)
+      .then(() => getPersonCredits(person.value?.id))
+      .then(setCredits)
+      .then(() => personCreditedFrom(credits.value?.cast));
+  }
+
+  // On create functions
+  fetchPerson();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
+
+  section.person {
+    overflow: hidden;
+    position: relative;
+    padding: 40px;
+    background-color: var(--background-color);
+
+    @include mobile {
+      padding: 50px 20px 10px;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -130px;
+      left: -100px;
+      z-index: 1;
+      width: 1000px;
+      height: 500px;
+      transform: rotate(21deg);
+      background-color: #062541;
+
+      @include mobile {
+        // top: -52vw;
+        top: -215px;
+      }
+    }
+  }
+
+  header {
+    $duration: 0.2s;
+    transition: height $duration ease;
+    position: relative;
+    background-color: transparent;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: 350px;
+    z-index: 2;
+
+    @include mobile {
+      height: 180px;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      padding: 30px;
+      padding-left: 0;
+      text-align: left;
+
+      @include mobile {
+        padding: 0;
+      }
+    }
+
+    h1 {
+      color: $green;
+      width: 100%;
+      font-weight: 500;
+      line-height: 1.4;
+      font-size: 30px;
+      margin-top: 0;
+
+      @include mobile {
+        font-size: 24px;
+        margin: 10px 0;
+        // padding: 30px 30px 30px 40px;
+      }
+    }
+
+    .known-for {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 1.2rem;
+    }
+  }
+
+  .person__poster {
+    display: block;
+    margin: auto;
+    width: fit-content;
+    border-radius: 10px;
+    background-color: grey;
+    animation: pulse 1s infinite ease-in-out;
+
+    @keyframes pulse {
+      0% {
+        background-color: rgba(165, 165, 165, 0.1);
+      }
+      50% {
+        background-color: rgba(165, 165, 165, 0.3);
+      }
+      100% {
+        background-color: rgba(165, 165, 165, 0.1);
+      }
+    }
+
+    > img {
+      border-radius: 10px;
+      width: 100%;
+
+      @include mobile {
+        max-width: 225px;
+      }
+    }
+  }
+</style>

src/components/profile/ChangePassword.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="change-password">
+    <div class="password-card">
+      <form class="password-form" @submit.prevent>
+        <seasoned-input
+          v-model="oldPassword"
+          placeholder="Current password"
+          icon="Keyhole"
+          type="password"
+        />
+
+        <div class="password-generator">
+          <button class="generator-toggle" @click="toggleGenerator">
+            <IconKey class="toggle-icon" />
+            <span>{{
+              showGenerator ? "Hide" : "Generate Strong Password"
+            }}</span>
+          </button>
+          <div v-if="showGenerator">
+            <password-generator @password-generated="handleGeneratedPassword" />
+          </div>
+        </div>
+
+        <seasoned-input
+          v-model="newPassword"
+          placeholder="New password"
+          icon="Keyhole"
+          type="password"
+        />
+
+        <seasoned-input
+          v-model="newPasswordRepeat"
+          placeholder="Confirm new password"
+          icon="Keyhole"
+          type="password"
+        />
+
+        <seasoned-button @click="changePassword" :disabled="loading">
+          {{ loading ? "Updating..." : "Change Password" }}
+        </seasoned-button>
+      </form>
+      <seasoned-messages v-model:messages="messages" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import SeasonedInput from "@/components/ui/SeasonedInput.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import PasswordGenerator from "@/components/settings/PasswordGenerator.vue";
+  import IconKey from "@/icons/IconKey.vue";
+  import type { Ref } from "vue";
+  import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
+  import type { IErrorMessage } from "../../interfaces/IErrorMessage";
+
+  const showGenerator = ref(false);
+  const oldPassword: Ref<string> = ref("");
+  const newPassword: Ref<string> = ref("");
+  const newPasswordRepeat: Ref<string> = ref("");
+  const messages: Ref<IErrorMessage[]> = ref([]);
+  const loading = ref(false);
+
+  function handleGeneratedPassword(password: string) {
+    newPassword.value = password;
+    newPasswordRepeat.value = password;
+  }
+
+  async function changePassword(event: CustomEvent) {
+    try {
+      messages.value.push({
+        message: "Password change is currently disabled",
+        title: "Feature Disabled",
+        type: ErrorMessageTypes.Warning
+      } as IErrorMessage);
+
+      // Clear form
+      oldPassword.value = "";
+      newPassword.value = "";
+      newPasswordRepeat.value = "";
+
+      loading.value = false;
+    } catch (error) {
+      console.log("not valid! error:", error); // eslint-disable-line no-console
+      loading.value = false;
+    }
+  }
+
+  function toggleGenerator() {
+    showGenerator.value = !showGenerator.value;
+    /*
+    if (showGenerator.value && !generatedPassword.value) {
+      generateWordsPassword();
+    }
+    */
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .password-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+  }
+
+  .password-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+  }
+
+  .generator-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background-color: var(--background-ui);
+    border: 1px solid var(--background-40);
+    border-radius: 0.5rem;
+    color: $text-color;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+
+    &:hover {
+      background-color: var(--background-40);
+      border-color: var(--highlight-color);
+    }
+  }
+
+  .toggle-icon {
+    width: 18px;
+    height: 18px;
+    fill: var(--highlight-color);
+  }
+
+  .btn-icon {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+</style>

src/components/profile/LinkPlexAccount.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <h3 class="settings__header">Plex account</h3>
+
+    <div v-if="!plexUserId">
+      <span class="info"
+        >Sign in to your plex account to get information about recently added
+        movies and to see your watch history</span
+      >
+
+      <form class="form">
+        <seasoned-input
+          v-model="username"
+          placeholder="plex username"
+          type="email"
+        />
+        <seasoned-input
+          v-model="password"
+          placeholder="plex password"
+          type="password"
+          @enter="authenticatePlex"
+        >
+        </seasoned-input>
+
+        <seasoned-button @click="authenticatePlex"
+          >link plex account</seasoned-button
+        >
+      </form>
+    </div>
+
+    <div v-else>
+      <span class="info"
+        >Awesome, your account is already authenticated with plex! Enjoy viewing
+        your seasoned search history, plex watch history and real-time torrent
+        download progress.</span
+      >
+      <seasoned-button @click="unauthenticatePlex"
+        >un-link plex account</seasoned-button
+      >
+    </div>
+    <seasoned-messages v-model:messages="messages" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from "vue";
+  import { useStore } from "vuex";
+  import seasonedInput from "@/components/ui/SeasonedInput.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import type { Ref, ComputedRef } from "vue";
+  import { linkPlexAccount, unlinkPlexAccount } from "../../api";
+  import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
+  import type { IErrorMessage } from "../../interfaces/IErrorMessage";
+
+  interface Emit {
+    (e: "reload");
+  }
+
+  const username: Ref<string> = ref("");
+  const password: Ref<string> = ref("");
+  const messages: Ref<IErrorMessage[]> = ref([]);
+
+  const store = useStore();
+  const emit = defineEmits<Emit>();
+
+  const plexUserId: ComputedRef<boolean> = computed(
+    () => store.getters["user/plexUserId"]
+  );
+
+  async function authenticatePlex() {
+    const { success, message } = await linkPlexAccount(
+      username.value,
+      password.value
+    );
+
+    if (success) {
+      username.value = "";
+      password.value = "";
+      emit("reload");
+    }
+
+    messages.value.push({
+      type: success ? ErrorMessageTypes.Success : ErrorMessageTypes.Error,
+      title: success ? "Authenticated with plex" : "Something went wrong",
+      message
+    } as IErrorMessage);
+  }
+
+  async function unauthenticatePlex() {
+    const response = await unlinkPlexAccount();
+
+    if (response?.success) {
+      emit("reload");
+    }
+
+    messages.value.push({
+      type: response.success
+        ? ErrorMessageTypes.Success
+        : ErrorMessageTypes.Error,
+      title: response.success
+        ? "Unlinked plex account "
+        : "Something went wrong",
+      message: response.message
+    } as IErrorMessage);
+  }
+</script>
+
+<style lang="scss" scoped>
+  .info {
+    display: block;
+    margin-bottom: 25px;
+  }
+</style>

src/components/settings/DangerZoneAction.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="danger-zone">
+    <h3 class="danger-zone__title">{{ title }}</h3>
+    <p class="danger-zone__description">
+      {{ description }}
+    </p>
+    <button class="danger-zone__button" @click="$emit('action')">
+      {{ buttonText }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    title: string;
+    description: string;
+    buttonText: string;
+  }
+
+  interface Emit {
+    (e: "action"): void;
+  }
+
+  defineProps<Props>();
+  defineEmits<Emit>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .danger-zone {
+    padding: 1.25rem;
+    background: rgba(220, 48, 35, 0.1);
+    border: 1px solid var(--color-error-highlight);
+    border-radius: 0.5rem;
+
+    @include mobile-only {
+      padding: 1rem;
+    }
+
+    &__title {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--color-error-highlight);
+    }
+
+    &__description {
+      margin: 0 0 1rem 0;
+      font-size: 0.875rem;
+      color: var(--text-color-70);
+      line-height: 1.5;
+    }
+
+    &__button {
+      padding: 0.625rem 1.25rem;
+      background: var(--color-error);
+      color: white;
+      border: 1px solid var(--color-error-highlight);
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: var(--color-error-highlight);
+      }
+    }
+  }
+</style>

src/components/settings/DataExport.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="data-export">
+    <div class="export-options">
+      <!-- Request History Card -->
+      <RequestHistory :data="requestStats" />
+
+      <!-- Export Data Card -->
+      <ExportSection :data="requestStats" />
+
+      <!-- Local Storage Items -->
+      <StorageManager />
+
+      <!-- Delete Account -->
+      <DangerZoneAction
+        title="Delete Account"
+        description="Permanently delete your account and all associated data. This action cannot be undone."
+        button-text="Delete My Account"
+        @action="confirmDelete"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import StorageManager from "./StorageManager.vue";
+  import ExportSection from "./ExportSection.vue"
+  import RequestHistory from "./RequestHistory.vue"
+  import DangerZoneAction from "./DangerZoneAction.vue";
+
+  const requestStats = ref({
+    total: 45,
+    approved: 38,
+    pending: 7
+  });
+
+  function confirmDelete() {
+    const confirmed = confirm(
+      "Are you sure you want to *permanently delete* your account and all associated data? This action cannot be undone."
+    );
+
+    if (!confirmed) return;
+  }
+</script>
+
+<style lang="scss" scoped>
+  .export-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    gap: 2rem;
+  }
+</style>

src/components/settings/ExportSection.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="settings-section-card">
+    <div class="settings-section-header">
+      <h2>Export Your Data</h2>
+      <p>
+        Download a copy of your account data including requests, watch history,
+        and preferences.
+      </p>
+    </div>
+
+    <!-- Export to JSON & CSV section -->
+    <div class="export-actions">
+      <button
+        class="export-btn"
+        @click="() => exportData('json')"
+        :disabled="exporting"
+      >
+        <IconActivity v-if="exporting" class="spin" />
+        <span v-else>Export as JSON</span>
+      </button>
+      <button
+        class="export-btn"
+        @click="() => exportData('csv')"
+        :disabled="exporting"
+      >
+        <IconActivity v-if="exporting" class="spin" />
+        <span v-else>Export as CSV</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps } from "vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+
+  interface Props {
+    data: any;
+  }
+
+  const props = defineProps<Props>();
+
+  const exporting = ref(false);
+
+  async function exportData(format: "json" | "csv") {
+    exporting.value = true;
+
+    // Mock export
+    await new Promise(resolve => setTimeout(resolve, 1500));
+
+    const data = {
+      username: "user123",
+      requests: props?.data,
+      exportDate: new Date().toISOString()
+    };
+
+    const blob = new Blob(
+      [format === "json" ? JSON.stringify(data, null, 2) : convertToCSV(data)],
+      { type: format === "json" ? "application/json" : "text/csv" }
+    );
+
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `seasoned-data-export.${format}`;
+    link.click();
+    URL.revokeObjectURL(url);
+
+    exporting.value = false;
+  }
+
+  function convertToCSV(data: any): string {
+    return `Username,Total Requests,Approved,Pending,Export Date\n${data.username},${data.requests.total},${data.requests.approved},${data.requests.pending},${data.exportDate}`;
+  }
+
+
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+  @import "scss/shared-settings";
+
+  .export-actions {
+    display: flex;
+    gap: 0.55rem;
+
+    @include mobile-only {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+  }
+
+  .export-btn {
+    flex: 1;
+    padding: 0.55rem 0.85rem;
+    background-color: var(--highlight-color);
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-green-90);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: white;
+
+      &.spin {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+</style>

src/components/settings/PasswordGenerator.vue

@@ -0,0 +1,597 @@
+<template>
+  <div class="password-generator">
+    <div class="generator-panel">
+      <div class="generator-tabs">
+        <button
+          :class="['tab', { 'tab--active': mode === 'words' }]"
+          @click="mode = 'words'"
+        >
+          Passphrase
+        </button>
+        <button
+          :class="['tab', { 'tab--active': mode === 'chars' }]"
+          @click="mode = 'chars'"
+        >
+          Random
+        </button>
+      </div>
+
+      <div v-if="mode === 'words'" class="generator-content">
+        <div class="generator-header">
+          <h4>Passphrase Generator</h4>
+          <p>Create a memorable password using random words</p>
+        </div>
+
+        <div class="password-display" @click="copyPassword">
+          <span class="password-text password-text--mono">{{
+            generatedPassword
+          }}</span>
+          <button
+            class="copy-btn"
+            :title="copied ? 'Copied!' : 'Click to copy'"
+          >
+            {{ copied ? "✓" : "📋" }}
+          </button>
+        </div>
+
+        <div class="generator-options">
+          <div class="option-row">
+            <div class="slider-header">
+              <label>Words</label>
+              <span class="slider-value">{{ wordCount }}</span>
+            </div>
+            <input
+              v-model.number="wordCount"
+              type="range"
+              min="3"
+              max="7"
+              class="slider"
+              @input="generateWordsPassword"
+            />
+            <div class="slider-labels">
+              <span>3</span>
+              <span>7</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="generator-content">
+        <div class="generator-header">
+          <h4>Random Password Generator</h4>
+          <p>Generate a secure random password</p>
+        </div>
+
+        <div class="password-display" @click="copyPassword">
+          <span class="password-text password-text--mono">{{
+            generatedPassword
+          }}</span>
+          <button
+            class="copy-btn"
+            :title="copied ? 'Copied!' : 'Click to copy'"
+          >
+            {{ copied ? "✓" : "📋" }}
+          </button>
+        </div>
+
+        <div class="generator-options">
+          <div class="option-row">
+            <div class="slider-header">
+              <label>Length</label>
+              <span class="slider-value">{{ charLength }}</span>
+            </div>
+            <input
+              v-model.number="charLength"
+              type="range"
+              min="12"
+              max="46"
+              class="slider"
+              @input="generateCharsPassword"
+            />
+            <div class="slider-labels">
+              <span>12</span>
+              <span>46</span>
+            </div>
+          </div>
+
+          <div class="option-row checkbox-row">
+            <label>
+              <input
+                v-model="includeUppercase"
+                type="checkbox"
+                @change="generateCharsPassword"
+              />
+              Uppercase (A-Z)
+            </label>
+            <label>
+              <input
+                v-model="includeLowercase"
+                type="checkbox"
+                @change="generateCharsPassword"
+              />
+              Lowercase (a-z)
+            </label>
+            <label>
+              <input
+                v-model="includeNumbers"
+                type="checkbox"
+                @change="generateCharsPassword"
+              />
+              Numbers (0-9)
+            </label>
+            <label>
+              <input
+                v-model="includeSymbols"
+                type="checkbox"
+                @change="generateCharsPassword"
+              />
+              Symbols (!@#$)
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="generator-actions">
+        <button class="action-btn action-btn--secondary" @click="regenerate">
+          <IconActivity class="btn-icon" />
+          Regenerate
+        </button>
+        <button class="action-btn action-btn--primary" @click="usePassword">
+          Use This Password
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, onMounted } from "vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+  import { useRandomWords } from "@/composables/useRandomWords";
+
+  interface Emit {
+    (e: "passwordGenerated", password: string): void;
+  }
+
+  const emit = defineEmits<Emit>();
+
+  const mode = ref<"words" | "chars">("words");
+  const generatedPassword = ref("");
+  const copied = ref(false);
+
+  // Words mode options
+  const wordCount = ref(4);
+  const separator = ref("-");
+
+  // Chars mode options
+  const charLength = ref(16);
+  const includeUppercase = ref(true);
+  const includeLowercase = ref(true);
+  const includeNumbers = ref(true);
+  const includeSymbols = ref(true);
+
+  const { getRandomWords } = useRandomWords();
+
+  async function generateWordsPassword() {
+    const words = await getRandomWords(wordCount.value);
+    const password = words.join(separator.value);
+    generatedPassword.value = password;
+  }
+
+  function generateCharsPassword() {
+    let charset = "";
+
+    if (includeUppercase.value) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    if (includeLowercase.value) charset += "abcdefghijklmnopqrstuvwxyz";
+    if (includeNumbers.value) charset += "0123456789";
+    if (includeSymbols.value) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";
+
+    if (charset === "") charset = "abcdefghijklmnopqrstuvwxyz";
+
+    let password = "";
+    for (let i = 0; i < charLength.value; i++) {
+      password += charset.charAt(Math.floor(Math.random() * charset.length));
+    }
+
+    generatedPassword.value = password;
+  }
+
+  async function regenerate() {
+    if (mode.value === "words") {
+      await generateWordsPassword();
+    } else {
+      generateCharsPassword();
+    }
+  }
+
+  async function copyPassword() {
+    try {
+      await navigator.clipboard.writeText(generatedPassword.value);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }
+
+  function usePassword() {
+    emit("passwordGenerated", generatedPassword.value);
+    // TODO: emit
+    // showGenerator.value = false;
+  }
+
+  watch(mode, async () => {
+    if (mode.value === "words") {
+      await generateWordsPassword();
+    } else {
+      generateCharsPassword();
+    }
+  });
+
+  onMounted(generateWordsPassword);
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .password-generator {
+    margin-bottom: 1rem;
+  }
+
+  .generator-panel {
+    margin-top: 0.75rem;
+    padding: 1rem;
+    background-color: var(--background-ui);
+    border-radius: 0.5rem;
+    border: 1px solid var(--background-40);
+
+    @include mobile-only {
+      padding: 0.75rem;
+    }
+  }
+
+  .generator-tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .tab {
+    flex: 1;
+    padding: 0.65rem 1rem;
+    background-color: transparent;
+    border: 1px solid var(--background-40);
+    border-radius: 0.25rem;
+    color: $text-color-70;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+
+    &:hover {
+      background-color: var(--background-40);
+    }
+
+    &--active {
+      background-color: var(--highlight-color);
+      border-color: var(--highlight-color);
+      color: $white;
+    }
+  }
+
+  .generator-content {
+    margin-bottom: 1rem;
+  }
+
+  .generator-header {
+    margin-bottom: 0.75rem;
+
+    h4 {
+      margin: 0 0 0.15rem 0;
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: $text-color;
+      line-height: 1.3;
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.8rem;
+      color: $text-color-70;
+      line-height: 1.3;
+    }
+  }
+
+  .password-display {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background-color: var(--background-color);
+    border: 2px solid var(--highlight-color);
+    border-radius: 0.5rem;
+    margin-bottom: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: var(--background-40);
+    }
+
+    @include mobile-only {
+      padding: 0.6rem;
+    }
+  }
+
+  .password-text {
+    flex: 1;
+    font-size: 1.8rem;
+    font-weight: 500;
+    color: var(--highlight-color);
+    user-select: all;
+    word-break: break-all;
+    word-break: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+
+    @include mobile-only {
+      font-size: 0.95rem;
+    }
+
+    &--mono {
+      font-family: "Courier New", monospace;
+
+      @include mobile-only {
+        font-size: 0.85rem;
+      }
+    }
+  }
+
+  .copy-btn {
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 0.25rem;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .generator-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .option-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    label {
+      font-size: 0.95rem;
+      color: $text-color;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    &.checkbox-row {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+
+      @include mobile-only {
+        flex-direction: column;
+        gap: 0.6rem;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        font-weight: 400;
+        cursor: pointer;
+        font-size: 0.85rem;
+
+        input[type="checkbox"] {
+          cursor: pointer;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+
+  .slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
+
+  .slider-value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--highlight-color);
+    min-width: 2.5rem;
+    text-align: right;
+  }
+
+  .slider-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: $text-color-50;
+    margin-top: 0.25rem;
+    padding: 0 0.25rem;
+  }
+
+  .slider {
+    width: 100%;
+    height: 10px;
+    border-radius: 5px;
+    background: var(--background-40);
+    outline: none;
+    appearance: none;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin: 0.5rem 0;
+
+    @include mobile-only {
+      height: 12px;
+    }
+
+    &:hover {
+      background: var(--background-40);
+    }
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--highlight-color);
+      cursor: grab;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      transition: all 0.2s;
+      margin-top: -7px;
+
+      @include mobile-only {
+        width: 28px;
+        height: 28px;
+        margin-top: -8px;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+      }
+
+      &:active {
+        cursor: grabbing;
+        transform: scale(1.05);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--highlight-color);
+      cursor: grab;
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      transition: all 0.2s;
+
+      @include mobile-only {
+        width: 28px;
+        height: 28px;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+      }
+
+      &:active {
+        cursor: grabbing;
+        transform: scale(1.05);
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      height: 10px;
+      border-radius: 5px;
+
+      @include mobile-only {
+        height: 12px;
+      }
+    }
+
+    &::-moz-range-track {
+      height: 10px;
+      border-radius: 5px;
+      background: var(--background-40);
+
+      @include mobile-only {
+        height: 12px;
+      }
+    }
+  }
+
+  .separator-input {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--background-40);
+    border-radius: 0.25rem;
+    background-color: var(--background-color);
+    color: $text-color;
+    font-size: 0.85rem;
+    font-family: "Courier New", monospace;
+    text-align: center;
+
+    &:focus {
+      outline: none;
+      border-color: var(--highlight-color);
+    }
+
+    &::placeholder {
+      color: $text-color-50;
+      font-family: inherit;
+    }
+  }
+
+  .generator-actions {
+    display: flex;
+    gap: 0.5rem;
+
+    @include mobile-only {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+  }
+
+  .action-btn {
+    flex: 1;
+    padding: 0.6rem 1rem;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+
+    &--secondary {
+      background-color: var(--background-color);
+      color: $text-color;
+      border: 1px solid var(--background-40);
+
+      &:hover {
+        background-color: var(--background-40);
+      }
+    }
+
+    &--primary {
+      background-color: var(--highlight-color);
+      color: $white;
+
+      &:hover {
+        background-color: var(--color-green-90);
+      }
+    }
+  }
+
+  .btn-icon {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+</style>

src/components/settings/PlexSettings.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="plex-settings">
+    <!-- Unconnected state -->
+    <PlexAuthButton
+      v-if="!showPlexInformation"
+      @auth-success="handleAuthSuccess"
+      @auth-error="handleAuthError"
+    />
+
+    <!-- Connected state -->
+    <div v-else class="plex-connected">
+      <PlexProfileCard
+        v-if="plexUsername"
+        :username="plexUsername"
+        :userData="plexUserData"
+      />
+
+      <PlexLibraryStats
+        :movies="libraryStats?.movies"
+        :shows="libraryStats?.['tv shows']"
+        :music="libraryStats?.music"
+        :watchtime="libraryStats?.watchtime || 0"
+        :loading="syncingLibrary"
+        @open-library="showLibraryDetails"
+      />
+
+      <PlexServerInfo
+        :serverName="plexServer"
+        :lastSync="lastSync"
+        :syncing="syncingServer"
+        @sync="syncLibrary"
+        @unlink="() => (showUnlinkModal = true)"
+      />
+    </div>
+
+    <!-- Messages -->
+    <SeasonedMessages v-model:messages="messages" />
+
+    <!-- Unlink Confirmation Modal -->
+    <PlexUnlinkModal
+      v-if="showUnlinkModal"
+      @confirm="unauthenticatePlex"
+      @cancel="() => (showUnlinkModal = false)"
+    />
+
+    <!-- Library Details Modal -->
+    <PlexLibraryModal
+      v-if="showLibraryModal && selectedLibrary"
+      :libraryType="selectedLibrary"
+      :details="libraryStats[selectedLibrary]"
+      :serverUrl="plexServerUrl"
+      :serverMachineId="plexMachineId"
+      @close="closeLibraryModal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from "vue";
+  import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import PlexAuthButton from "@/components/plex/PlexAuthButton.vue";
+  import PlexProfileCard from "@/components/plex/PlexProfileCard.vue";
+  import PlexLibraryStats from "@/components/plex/PlexLibraryStats.vue";
+  import PlexServerInfo from "@/components/plex/PlexServerInfo.vue";
+  import PlexUnlinkModal from "@/components/plex/PlexUnlinkModal.vue";
+  import PlexLibraryModal from "@/components/plex/PlexLibraryModal.vue";
+  import { usePlexAuth } from "@/composables/usePlexAuth";
+  import {
+    fetchPlexServers,
+    fetchPlexUserData,
+    fetchLibraryDetails
+  } from "@/composables/usePlexApi";
+  import type { Ref } from "vue";
+  import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
+  import type { IErrorMessage } from "../../interfaces/IErrorMessage";
+
+  const messages: Ref<IErrorMessage[]> = ref([]);
+  const syncingServer = ref(false);
+  const syncingLibrary = ref(false);
+  const showUnlinkModal = ref(false);
+  const plexUsername = ref<string>("");
+  const plexUserData = ref<any>(null);
+  const showPlexInformation = ref<boolean>(false);
+  const hasLocalStorageData = ref<boolean>(false);
+  const showLibraryModal = ref<boolean>(false);
+  const selectedLibrary = ref<string>("");
+
+  const plexServer = ref("");
+  const plexServerUrl = ref("");
+  const plexMachineId = ref("");
+  const lastSync = ref(sessionStorage.getItem("plex_library_last_sync"));
+  const libraryStats = ref({
+    movies: 0,
+    shows: 0,
+    music: 0,
+    watchtime: 0
+  });
+
+  const emit = defineEmits<{
+    (e: "reload"): void;
+  }>();
+
+  // Composables
+  const { getPlexAuthCookie, setPlexAuthCookie, cleanup } = usePlexAuth();
+
+  // ----- Connection check -----
+  function checkPlexConnection() {
+    const authToken = getPlexAuthCookie();
+    showPlexInformation.value = !!authToken;
+    return showPlexInformation.value;
+  }
+
+  // ----- Library loading -----
+  async function loadPlexServer() {
+    // return cached value from sessionStorage if exists
+    const cacheKey = "plex_server_data";
+    const cachedData = sessionStorage.getItem(cacheKey);
+    if (cachedData) {
+      const server = JSON.parse(cachedData);
+      plexServer.value = server?.name;
+      plexServerUrl.value = server?.url;
+      plexMachineId.value = server?.machineIdentifier;
+      return;
+    }
+
+    // get token from cookie
+    const authToken = getPlexAuthCookie();
+    if (!authToken) return;
+
+    // make api call for data
+    syncingServer.value = true;
+    const server = await fetchPlexServers(authToken);
+
+    if (server) {
+      // set server name & id
+      plexServer.value = server?.name;
+      plexServerUrl.value = server?.url;
+      plexMachineId.value = server?.machineIdentifier;
+      // cache in sessionStorage
+      sessionStorage.setItem(cacheKey, JSON.stringify(server));
+
+      // set last-sync date
+      const now = new Date().toLocaleString();
+      lastSync.value = now;
+      sessionStorage.setItem("plex_library_last_sync", now);
+    } else {
+      console.log("unable to load plex server informmation");
+    }
+
+    syncingServer.value = false;
+  }
+
+  // ----- User data loading -----
+  async function loadPlexUserData() {
+    // return cached value from sessionStorage if exists
+    const cacheKey = "plex_user_data";
+    const cachedData = sessionStorage.getItem(cacheKey);
+    hasLocalStorageData.value = !!cachedData;
+    if (cachedData) {
+      plexUserData.value = JSON.parse(cachedData);
+      plexUsername.value = plexUserData.value.username;
+      return;
+    }
+
+    // get token from cookie
+    const authToken = getPlexAuthCookie();
+    if (!authToken) return;
+
+    // make api call for data
+    const userData = await fetchPlexUserData(authToken);
+
+    if (userData) {
+      // set plex user data
+      plexUserData.value = userData;
+      plexUsername.value = userData?.username;
+
+      // cache in sessionStorage
+      sessionStorage.setItem(cacheKey, JSON.stringify(userData));
+    } else {
+      console.log("unable to load user data from plex");
+    }
+  }
+
+  // ----- Load plex libary details -----
+  async function loadPlexLibraries() {
+    // return cached value from sessionStorage if exists
+    const cacheKey = "plex_library_data";
+    const cachedData = sessionStorage.getItem(cacheKey);
+    hasLocalStorageData.value = !!cachedData;
+    if (cachedData) {
+      libraryStats.value = JSON.parse(cachedData);
+      return;
+    }
+
+    // get token from cookie
+    const authToken = getPlexAuthCookie();
+    if (!authToken) return;
+
+    // make api call for data
+    syncingLibrary.value = true;
+    const library = await fetchLibraryDetails();
+
+    if (library) {
+      libraryStats.value = library;
+      // cache in sessionStorage
+      sessionStorage.setItem(cacheKey, JSON.stringify(library));
+    } else {
+      console.log("unable to load plex library details");
+    }
+
+    syncingLibrary.value = false;
+  }
+
+  // ----- OAuth flow (handlers for PlexAuthButton events) -----
+  async function handleAuthSuccess(authToken: string) {
+    setPlexAuthCookie(authToken);
+    checkPlexConnection();
+    const success = await loadAll();
+
+    if (success) {
+      messages.value.push({
+        type: ErrorMessageTypes.Success,
+        title: "Authenticated with Plex",
+        message: "Successfully connected your Plex account"
+      } as IErrorMessage);
+    } else {
+      console.error("[PlexSettings] Error in handleAuthSuccess:");
+
+      messages.value.push({
+        type: ErrorMessageTypes.Error,
+        title: "Authentication failed",
+        message: "An error occurred while connecting to Plex"
+      } as IErrorMessage);
+    }
+  }
+
+  function handleAuthError(errorMessage: string) {
+    messages.value.push({
+      type: ErrorMessageTypes.Error,
+      title: "Authentication failed",
+      message: errorMessage
+    } as IErrorMessage);
+  }
+
+  // ----- Unlink flow -----
+  async function unauthenticatePlex() {
+    showUnlinkModal.value = false;
+    sessionStorage.removeItem("plex_user_data");
+    sessionStorage.removeItem("plex_server_data");
+    sessionStorage.removeItem("plex_library_data");
+    sessionStorage.removeItem("plex_library_last_sync");
+    document.cookie =
+      "plex_auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Strict";
+    plexUserData.value = null;
+    plexUsername.value = "";
+    showPlexInformation.value = false;
+    emit("reload");
+
+    messages.value.push({
+      type: ErrorMessageTypes.Success,
+      title: "Unlinked Plex account",
+      message: "All browser storage has been clear of plex account"
+    } as IErrorMessage);
+  }
+
+  // ----- Library modal -----
+  function showLibraryDetails(type: string) {
+    selectedLibrary.value = type;
+    document.getElementsByTagName("body")[0].classList.add("no-scroll");
+    showLibraryModal.value = true;
+  }
+  function closeLibraryModal() {
+    showLibraryModal.value = false;
+    document.getElementsByTagName("body")[0].classList.remove("no-scroll");
+    selectedLibrary.value = "";
+  }
+
+  // ----- Sync -----
+  async function syncLibrary() {
+    const authToken = getPlexAuthCookie();
+    if (!authToken) {
+      messages.value.push({
+        type: ErrorMessageTypes.Error,
+        title: "Sync failed",
+        message: "No authentication token found"
+      } as IErrorMessage);
+      return;
+    }
+
+    sessionStorage.removeItem("plex_user_data");
+    sessionStorage.removeItem("plex_server_data");
+    sessionStorage.removeItem("plex_library_data");
+
+    const success = await loadAll();
+
+    if (success) {
+      messages.value.push({
+        type: ErrorMessageTypes.Success,
+        title: "Library synced",
+        message: "Your Plex library has been successfully synced"
+      } as IErrorMessage);
+    } else {
+      messages.value.push({
+        type: ErrorMessageTypes.Error,
+        title: "Sync failed",
+        message: "An error occurred while syncing your library"
+      } as IErrorMessage);
+    }
+  }
+
+  // ---- Helper load all ----
+  async function loadAll() {
+    let success = false;
+
+    try {
+      await Promise.all([
+        loadPlexServer(),
+        loadPlexUserData(),
+        loadPlexLibraries()
+      ]);
+
+      success = true;
+    } catch (error) {
+      console.log("loadall error, some info might be missing");
+    }
+
+    checkPlexConnection();
+    return success;
+  }
+
+  // ---- Lifecycle functions ----
+  onMounted(loadAll);
+
+  onUnmounted(() => {
+    cleanup();
+  });
+</script>
+
+<style scoped>
+  .plex-settings {
+    max-width: 800px;
+  }
+
+  .plex-connected {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+</style>

src/components/settings/ProfileHero.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="profile-hero">
+    <div class="profile-hero__main">
+      <div class="profile-hero__avatar">
+        <div class="avatar-large">{{ userInitials }}</div>
+      </div>
+      <div class="profile-hero__info">
+        <h1 class="profile-hero__name">{{ username }}</h1>
+        <span :class="['profile-hero__badge', `badge--${userRole}`]">
+          <a v-if="userRole === 'admin'" href="/admin">{{ userRole }}</a>
+          <span v-else>{{ userRole }}</span>
+        </span>
+        <p class="profile-hero__member">Member since {{ memberSince }}</p>
+      </div>
+    </div>
+
+    <div class="profile-hero__stats">
+      <div class="stat-large">
+        <span class="stat-large__value">{{ stats.totalRequests }}</span>
+        <span class="stat-large__label">Requests</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat-large">
+        <span class="stat-large__value">{{ stats.magnetsAdded }}</span>
+        <span class="stat-large__label">Magnets Added</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+  import { useStore } from "vuex";
+
+  const store = useStore();
+
+  const username = computed(() => store.getters["user/username"] || "User");
+  const userRole = computed(() =>
+    store.getters["user/admin"] ? "admin" : "user"
+  );
+
+  const userInitials = computed(() => {
+    return username.value.slice(0, 2).toUpperCase();
+  });
+
+  const memberSince = computed(() => {
+    const date = new Date();
+    date.setMonth(date.getMonth() - 6);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric"
+    });
+  });
+
+  const stats = {
+    totalRequests: 45,
+    magnetsAdded: 127
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .profile-hero {
+    background-color: var(--background-color-secondary);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    border: 1px solid var(--background-40);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+
+    @include mobile-only {
+      flex-direction: column;
+      padding: 1.5rem 1.25rem;
+      border-radius: 0.5rem;
+      text-align: center;
+      gap: 1rem;
+    }
+
+    &__main {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+
+      @include mobile-only {
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+    }
+
+    &__avatar {
+      flex-shrink: 0;
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+
+      @include mobile-only {
+        align-items: center;
+      }
+    }
+
+    &__name {
+      margin: 0;
+      font-size: 1.75rem;
+      font-weight: 600;
+      line-height: 1.1;
+
+      @include mobile-only {
+        font-size: 1.5rem;
+      }
+    }
+
+    &__badge {
+      display: inline-block;
+      padding: 0.25rem 0.7rem;
+      border-radius: 2rem;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      font-weight: 600;
+      width: fit-content;
+
+      @include mobile-only {
+        padding: 0.2rem 0.6rem;
+        font-size: 0.7rem;
+      }
+
+      &.badge--admin {
+        background-color: var(--color-warning);
+        color: black;
+      }
+
+      &.badge--user {
+        background-color: var(--background-40);
+      }
+    }
+
+    &__member {
+      margin: 0;
+      font-size: 0.85rem;
+      color: var(--text-color-70);
+
+      @include mobile-only {
+        font-size: 0.8rem;
+      }
+    }
+
+    &__stats {
+      display: flex;
+      align-items: center;
+      gap: 1.75rem;
+      padding-left: 1.75rem;
+      border-left: 1px solid var(--background-40);
+
+      @include mobile-only {
+        width: 100%;
+        padding: 1rem 0 0 0;
+        border-left: none;
+        border-top: 1px solid var(--background-40);
+        justify-content: center;
+        gap: 1.25rem;
+      }
+    }
+  }
+
+  .avatar-large {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      var(--highlight-color),
+      var(--color-green-70)
+    );
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+
+    @include mobile-only {
+      width: 80px;
+      height: 80px;
+      font-size: 2rem;
+    }
+  }
+
+  .stat-large {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+
+    &__value {
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: var(--highlight-color);
+      line-height: 1;
+
+      @include mobile-only {
+        font-size: 1.75rem;
+      }
+    }
+
+    &__label {
+      font-size: 0.75rem;
+      color: var(--text-color-70);
+      text-transform: uppercase;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  .stat-divider {
+    width: 1px;
+    height: 45px;
+    background-color: var(--background-40);
+
+    @include mobile-only {
+      height: 45px;
+    }
+  }
+</style>

src/components/settings/RequestHistory.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="export-card">
+    <div class="settings-section-header">
+      <h2>Request History</h2>
+      <p>View and download your complete request history.</p>
+    </div>
+
+    <div class="stats-grid">
+      <div class="stat-mini">
+        <span class="stat-mini__value">{{ data.total }}</span>
+        <span class="stat-mini__label">Total</span>
+      </div>
+      <div class="stat-mini">
+        <span class="stat-mini__value">{{ data.approved }}</span>
+        <span class="stat-mini__label">Approved</span>
+      </div>
+      <div class="stat-mini">
+        <span class="stat-mini__value">{{ data.pending }}</span>
+        <span class="stat-mini__label">Pending</span>
+      </div>
+    </div>
+
+    <button class="view-btn" @click="viewHistory">View Full History</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps } from "vue";
+  import { useRouter } from "vue-router";
+
+  interface Props {
+    data: any;
+  }
+
+  defineProps<Props>();
+  const router = useRouter();
+
+  function viewHistory() {
+    router.push({ name: "profile" });
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+  @import "scss/shared-settings";
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin-bottom: 0.65rem;
+  }
+
+  .stat-mini {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.5rem 0.4rem;
+    background-color: var(--background-color);
+    border-radius: 0.25rem;
+
+    @include mobile-only {
+      padding: 0.45rem 0.35rem;
+    }
+
+    &__value {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: var(--highlight-color);
+
+      @include mobile-only {
+        font-size: 1.1rem;
+      }
+    }
+
+    &__label {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      margin-top: 0.15rem;
+
+      @include mobile-only {
+        font-size: 0.65rem;
+      }
+    }
+  }
+
+  .view-btn {
+    width: 100%;
+    padding: 0.55rem 0.85rem;
+    background-color: var(--background-color);
+    border: 1px solid var(--background-40);
+    border-radius: 0.25rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: var(--text-color);
+
+    &:hover {
+      background-color: var(--background-40);
+      border-color: var(--highlight-color);
+    }
+  }
+</style>

src/components/settings/SecuritySettings.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="security-settings">
+    <div class="security-settings__intro">
+      <h2 class="security-settings__title">Security</h2>
+      <p class="security-settings__description">
+        Keep your account safe by using a strong, unique password. We recommend
+        using a passphrase or generated password that's hard to guess.
+      </p>
+    </div>
+
+    <change-password />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import ChangePassword from "@/components/profile/ChangePassword.vue";
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .security-settings {
+    &__intro {
+      margin-bottom: 1rem;
+
+      @include mobile-only {
+        margin-bottom: 0.85rem;
+      }
+    }
+
+    &__title {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1.3;
+    }
+
+    &__description {
+      margin: 0;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      color: var(--text-color-70);
+    }
+  }
+</style>

src/components/settings/StorageManager.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="storage-manager">
+    <StorageSectionBrowser
+      :sections="storageSections"
+      @clear-item="clearItem"
+    />
+
+    <DangerZoneAction
+      title="Clear All Browser Data"
+      description="Remove all locally stored data at once. This includes preferences, history, and cached information."
+      button-text="Clear All Data"
+      @action="clearAllData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, inject } from "vue";
+  import IconCookie from "@/icons/IconCookie.vue";
+  import IconDatabase from "@/icons/IconDatabase.vue";
+  import IconTimer from "@/icons/IconTimer.vue";
+  import StorageSectionBrowser from "./StorageSectionBrowser.vue";
+  import DangerZoneAction from "./DangerZoneAction.vue";
+  import { formatBytes } from "../../utils";
+
+  interface StorageItem {
+    key: string;
+    description: string;
+    size: string;
+    type: "local" | "session" | "cookie";
+  }
+
+  const notifications: {
+    success: (options: {
+      title: string;
+      description?: string;
+      timeout?: number;
+    }) => void;
+    error: (options: {
+      title: string;
+      description?: string;
+      timeout?: number;
+    }) => void;
+  } = inject("notifications");
+
+  const dict = {
+    commandPalette_stats: "Usage statistics for command palette navigation",
+    "theme-preference": "Your selected color theme",
+    plex_user_data: "Cached Plex account information",
+    plex_library_data: "Cached Plex library details per section",
+    plex_server_data: "Cached Plex server information",
+    plex_library_last_sync: "UTC time string for last synced Plex data",
+    plex_auth_token: "Authorized token from Plex.tv",
+    authorization: "This sites user login token"
+  };
+
+  const storageItems = computed<StorageItem[]>(() => {
+    const items: StorageItem[] = [];
+
+    // local storage
+    Object.keys(localStorage).map(key => {
+      items.push({
+        key,
+        description: dict[key] ?? "",
+        size: formatBytes(localStorage[key]?.length || 0),
+        type: "local"
+      });
+    });
+
+    // session storage
+    Object.keys(sessionStorage).map(key => {
+      items.push({
+        key,
+        description: dict[key] ?? "",
+        size: formatBytes(sessionStorage[key]?.length || 0),
+        type: "session"
+      });
+    });
+
+    // cookies
+    if (document.cookie) {
+      document.cookie.split(";").forEach(cookie => {
+        const [key, _] = cookie.trim().split("=");
+        if (key) {
+          items.push({
+            key,
+            description: dict[key] ?? "",
+            size: formatBytes(cookie.length || 0),
+            type: "cookie"
+          });
+        }
+      });
+    }
+
+    return items;
+  });
+
+  const getTotalSize = (items: StorageItem[]) => {
+    const totalBytes = items.reduce((acc, item) => {
+      const match = item.size.match(/^([\d.]+)\s*(\w+)$/);
+      if (!match) return acc;
+      const value = parseFloat(match[1]);
+      const unit = match[2];
+      return (
+        acc +
+        (unit === "KB"
+          ? value * 1024
+          : unit === "MB"
+            ? value * 1024 * 1024
+            : value)
+      );
+    }, 0);
+    return formatBytes(totalBytes);
+  };
+
+  const storageSections = computed(() => [
+    {
+      type: "local" as const,
+      title: "LocalStorage",
+      iconComponent: IconDatabase,
+      description:
+        "LocalStorage keeps data permanently on your device, even after closing your browser. It's used to remember your preferences and settings between visits.",
+      items: storageItems.value.filter(item => item.type === "local"),
+      get totalSize() {
+        return getTotalSize(this.items);
+      }
+    },
+    {
+      type: "session" as const,
+      title: "SessionStorage",
+      iconComponent: IconTimer,
+      description:
+        "SessionStorage keeps data temporarily while you browse. It's automatically cleared when you close your browser tab or window.",
+      items: storageItems.value.filter(item => item.type === "session"),
+      get totalSize() {
+        return getTotalSize(this.items);
+      }
+    },
+    {
+      type: "cookie" as const,
+      title: "Cookies",
+      iconComponent: IconCookie,
+      description:
+        "Cookies are small text files stored by your browser. They can be temporary (session cookies) or persistent, and are often used for authentication and tracking your activity.",
+      items: storageItems.value.filter(item => item.type === "cookie"),
+      get totalSize() {
+        return getTotalSize(this.items);
+      }
+    }
+  ]);
+
+  function clearItem(key: string, type: "local" | "session" | "cookie") {
+    try {
+      if (type === "local") {
+        localStorage.removeItem(key);
+      } else if (type === "session") {
+        sessionStorage.removeItem(key);
+      } else if (type === "cookie") {
+        document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+      }
+
+      notifications.success({
+        title: "Data Cleared",
+        description: `${key} has been cleared`,
+        timeout: 3000
+      });
+
+      // Force re-render
+      storageItems.value;
+    } catch (error) {
+      notifications.error({
+        title: "Error",
+        description: `Failed to clear ${key}`,
+        timeout: 5000
+      });
+    }
+  }
+
+  function clearAllData() {
+    const confirmed = confirm(
+      "Are you sure you want to clear all locally stored data? This action cannot be undone."
+    );
+
+    if (!confirmed) return;
+
+    try {
+      localStorage.clear();
+      sessionStorage.clear();
+      document.cookie.split(";").forEach(cookie => {
+        const eqPos = cookie.indexOf("=");
+        const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
+        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+      });
+
+      notifications.success({
+        title: "All Data Cleared",
+        description: "All locally stored data has been removed",
+        timeout: 3000
+      });
+    } catch (error) {
+      notifications.error({
+        title: "Error",
+        description: "Failed to clear all data",
+        timeout: 5000
+      });
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .storage-manager {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/components/settings/StorageSectionBrowser.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="browser-storage">
+    <div class="settings-section-header">
+      <h2>Browser Storage</h2>
+      <p>
+        Your browser stores data locally to make this site faster and remember
+        your settings. View what's saved on this device and remove items
+        anytime.
+      </p>
+    </div>
+
+    <div class="storage-sections">
+      <div
+        v-for="section in sections"
+        :key="section.type"
+        :class="`storage-section storage-section--${section.type}`"
+      >
+        <button
+          class="storage-section__header"
+          @click="
+            expandedSections[section.type] = !expandedSections[section.type]
+          "
+        >
+          <div class="storage-section__header-content">
+            <component :is="section.iconComponent" class="section-icon" />
+            <h3 class="storage-section__title">{{ section.title }}</h3>
+            <span class="storage-section__count">{{
+              section.items.length
+            }}</span>
+            <span class="storage-section__size">{{ section.totalSize }}</span>
+          </div>
+          <svg
+            class="storage-section__chevron"
+            :class="{
+              'storage-section__chevron--expanded':
+                expandedSections[section.type]
+            }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+        <div
+          v-if="expandedSections[section.type]"
+          class="storage-section__content"
+        >
+          <p class="storage-section__description">{{ section.description }}</p>
+          <div class="storage-items">
+            <div
+              v-for="item in section.items"
+              :key="item.key"
+              :class="`storage-item storage-item--${section.type}`"
+            >
+              <component :is="section.iconComponent" class="type-icon" />
+              <div class="storage-item__info">
+                <h4 class="storage-item__title">{{ item.key }}</h4>
+                <p class="storage-item__description">
+                  <span v-if="item.description">{{ item.description }} · </span>
+                  <span class="storage-item__size">{{ item.size }}</span>
+                </p>
+              </div>
+              <button
+                class="storage-item__delete"
+                @click="$emit('clear-item', item.key, section.type)"
+                :title="`Clear ${item.key}`"
+              >
+                <IconClose />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import IconClose from "@/icons/IconClose.vue";
+
+  interface StorageItem {
+    key: string;
+    description: string;
+    size: string;
+    type: "local" | "session" | "cookie";
+  }
+
+  interface StorageSection {
+    type: "local" | "session" | "cookie";
+    title: string;
+    description: string;
+    iconComponent: any;
+    items: StorageItem[];
+    totalSize: string;
+  }
+
+  defineProps<{
+    sections: StorageSection[];
+  }>();
+
+  defineEmits<{
+    "clear-item": [key: string, type: "local" | "session" | "cookie"];
+  }>();
+
+  const expandedSections = ref<Record<string, boolean>>({
+    local: false,
+    session: false,
+    cookie: false
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/shared-settings";
+
+  .browser-storage {
+    &__intro {
+      margin-bottom: 2rem;
+    }
+  }
+
+  .storage-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .storage-section {
+    border-radius: 0.5rem;
+    background: var(--background-ui);
+    overflow: hidden;
+    border: 2px solid transparent;
+    transition: border-color 0.2s ease;
+
+    &--local {
+      border-color: rgba(139, 92, 246, 0.2);
+      .section-icon,
+      .type-icon {
+        stroke: #8b5cf6;
+      }
+    }
+    &--session {
+      border-color: rgba(245, 158, 11, 0.2);
+      .section-icon,
+      .type-icon {
+        stroke: #f59e0b;
+      }
+    }
+    &--cookie {
+      border-color: rgba(236, 72, 153, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #ec4899;
+      }
+    }
+
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      &:hover {
+        background: var(--background-40);
+      }
+    }
+
+    &__header-content {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      .section-icon {
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+    }
+    &__count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 24px;
+      height: 24px;
+      padding: 0 0.5rem;
+      background: var(--background-40);
+      border-radius: 12px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-color-70);
+    }
+    &__size {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+    &__chevron {
+      width: 20px;
+      height: 20px;
+      stroke: var(--text-color-70);
+      transition: transform 0.2s ease;
+      &--expanded {
+        transform: rotate(180deg);
+      }
+    }
+    &__content {
+      border-top: 1px solid var(--background-40);
+    }
+    &__description {
+      margin: 0;
+      padding: 1rem 1.25rem;
+      font-size: 0.9rem;
+      line-height: 1.6;
+      color: var(--text-color-70);
+      background: var(--background-color);
+      font-style: italic;
+    }
+  }
+
+  .storage-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem 1rem 1rem;
+  }
+
+  .storage-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    background: var(--background-color);
+    border-radius: 0.25rem;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    border-left: 3px solid;
+
+    &--local {
+      border-color: #8b5cf6;
+      background: linear-gradient(
+        90deg,
+        rgba(139, 92, 246, 0.1),
+        var(--background-color)
+      );
+    }
+    &--session {
+      border-color: #f59e0b;
+      background: linear-gradient(
+        90deg,
+        rgba(245, 158, 11, 0.1),
+        var(--background-color)
+      );
+    }
+    &--cookie {
+      border-color: #ec4899;
+      background: linear-gradient(
+        90deg,
+        rgba(236, 72, 153, 0.1),
+        var(--background-color)
+      );
+    }
+
+    &:hover .storage-item__delete {
+      background: var(--color-error-highlight);
+    }
+    &:hover .type-icon {
+      opacity: 1;
+    }
+
+    .type-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+      margin: auto 1.5rem;
+      @include mobile-only {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin: auto 1rem;
+      }
+    }
+
+    &__info {
+      min-width: 0;
+      padding: 0.85rem 0.85rem 0.85rem 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      @include mobile-only {
+        padding: 0.75rem 0.75rem 0.75rem 0;
+      }
+    }
+
+    &__title {
+      margin: 0 0 0.3rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+      @include mobile-only {
+        font-size: 1rem;
+      }
+    }
+    &__description {
+      margin: 0;
+      font-size: 0.8rem;
+      color: var(--text-color-70);
+      line-height: 1.4;
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+    &__size {
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+
+    &__delete {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-error);
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s;
+      @include mobile-only {
+        width: 60px;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+        fill: white;
+        transition: transform 0.2s;
+        @include mobile-only {
+          width: 18px;
+          height: 18px;
+        }
+      }
+      &:hover {
+        background: var(--color-error-highlight);
+        svg {
+          transform: scale(1.1);
+        }
+      }
+      &:active svg {
+        transform: scale(0.9);
+      }
+    }
+  }
+</style>

src/components/settings/StorageSectionServer.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class="server-storage">
+    <div class="server-storage__intro">
+      <h2 class="server-storage__title">Server Storage</h2>
+      <p class="server-storage__description">
+        Data stored on our servers to sync across your devices and provide
+        personalized features.
+      </p>
+    </div>
+
+    <div class="server-sections">
+      <div
+        v-for="section in serverSections"
+        :key="section.type"
+        :class="`server-section server-section--${section.type}`"
+      >
+        <button
+          class="server-section__header"
+          @click="
+            expandedSections[section.type] = !expandedSections[section.type]
+          "
+        >
+          <div class="server-section__header-content">
+            <component :is="section.iconComponent" class="section-icon" />
+            <h3 class="server-section__title">{{ section.title }}</h3>
+            <span class="server-section__count">{{
+              section.items.length
+            }}</span>
+            <span class="server-section__size">{{ section.totalSize }}</span>
+          </div>
+          <svg
+            class="server-section__chevron"
+            :class="{
+              'server-section__chevron--expanded':
+                expandedSections[section.type]
+            }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+        <div
+          v-if="expandedSections[section.type]"
+          class="server-section__content"
+        >
+          <p class="server-section__description">{{ section.description }}</p>
+          <div class="server-items">
+            <div
+              v-for="item in section.items"
+              :key="item.key"
+              :class="`server-item server-item--${section.type}`"
+            >
+              <component :is="section.iconComponent" class="type-icon" />
+              <div class="server-item__info">
+                <h4 class="server-item__title">{{ item.key }}</h4>
+                <p class="server-item__description">
+                  <span v-if="item.description">{{ item.description }} · </span>
+                  <span class="server-item__size">{{ item.size }}</span>
+                  <span v-if="item.lastSynced" class="server-item__synced">
+                    · Last synced: {{ item.lastSynced }}</span
+                  >
+                </p>
+              </div>
+              <button
+                class="server-item__delete"
+                @click="$emit('clear-item', item.key, section.type)"
+                :title="`Delete ${item.key}`"
+              >
+                <IconClose />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from "vue";
+  import IconClose from "@/icons/IconClose.vue";
+  import IconProfile from "@/icons/IconProfile.vue";
+  import IconSettings from "@/icons/IconSettings.vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+
+  interface ServerItem {
+    key: string;
+    description: string;
+    size: string;
+    lastSynced?: string;
+  }
+
+  defineEmits<{
+    "clear-item": [key: string, type: string];
+  }>();
+
+  const expandedSections = ref<Record<string, boolean>>({
+    profile: false,
+    preferences: false,
+    activity: false
+  });
+
+  // Mock server data
+  const serverSections = computed(() => [
+    {
+      type: "profile",
+      title: "Profile Data",
+      iconComponent: IconProfile,
+      description:
+        "Your account information, settings, and preferences stored on our servers.",
+      items: [
+        {
+          key: "user_profile",
+          description: "User account details",
+          size: "2.4 KB",
+          lastSynced: "2 hours ago"
+        },
+        {
+          key: "avatar_image",
+          description: "Profile picture",
+          size: "145 KB",
+          lastSynced: "1 day ago"
+        },
+        {
+          key: "email_preferences",
+          description: "Notification settings",
+          size: "512 Bytes",
+          lastSynced: "3 days ago"
+        }
+      ],
+      totalSize: "147.9 KB"
+    },
+    {
+      type: "preferences",
+      title: "Synced Preferences",
+      iconComponent: IconSettings,
+      description:
+        "Settings that sync across all your devices when you sign in.",
+      items: [
+        {
+          key: "theme_settings",
+          description: "Color theme and appearance",
+          size: "1.1 KB",
+          lastSynced: "5 hours ago"
+        },
+        {
+          key: "playback_settings",
+          description: "Video and audio preferences",
+          size: "856 Bytes",
+          lastSynced: "1 day ago"
+        },
+        {
+          key: "library_filters",
+          description: "Saved filters and sorting",
+          size: "2.3 KB",
+          lastSynced: "2 days ago"
+        }
+      ],
+      totalSize: "4.3 KB"
+    },
+    {
+      type: "activity",
+      title: "Activity History",
+      iconComponent: IconActivity,
+      description:
+        "Your viewing history and watch progress stored on our servers.",
+      items: [
+        {
+          key: "watch_history",
+          description: "Recently watched items",
+          size: "12.5 KB",
+          lastSynced: "1 hour ago"
+        },
+        {
+          key: "watch_progress",
+          description: "Playback positions",
+          size: "8.2 KB",
+          lastSynced: "30 minutes ago"
+        },
+        {
+          key: "favorites",
+          description: "Starred and favorited content",
+          size: "3.7 KB",
+          lastSynced: "6 hours ago"
+        }
+      ],
+      totalSize: "24.4 KB"
+    }
+  ]);
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .server-storage {
+    &__intro {
+      margin-bottom: 2rem;
+    }
+
+    &__title {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text-color);
+    }
+
+    &__description {
+      margin: 0;
+      color: var(--text-color-70);
+      font-size: 0.95rem;
+      line-height: 1.6;
+    }
+  }
+
+  .server-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .server-section {
+    border-radius: 0.5rem;
+    background: var(--background-ui);
+    overflow: hidden;
+    border: 2px solid transparent;
+    transition: border-color 0.2s ease;
+
+    &--profile {
+      border-color: rgba(59, 130, 246, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #3b82f6;
+      }
+    }
+    &--preferences {
+      border-color: rgba(16, 185, 129, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #10b981;
+      }
+    }
+    &--activity {
+      border-color: rgba(245, 158, 11, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #f59e0b;
+      }
+    }
+
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      &:hover {
+        background: var(--background-40);
+      }
+    }
+
+    &__header-content {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      .section-icon {
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+    }
+    &__count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 24px;
+      height: 24px;
+      padding: 0 0.5rem;
+      background: var(--background-40);
+      border-radius: 12px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-color-70);
+    }
+    &__size {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+    &__chevron {
+      width: 20px;
+      height: 20px;
+      stroke: var(--text-color-70);
+      transition: transform 0.2s ease;
+      &--expanded {
+        transform: rotate(180deg);
+      }
+    }
+    &__content {
+      border-top: 1px solid var(--background-40);
+    }
+    &__description {
+      margin: 0;
+      padding: 1rem 1.25rem;
+      font-size: 0.9rem;
+      line-height: 1.6;
+      color: var(--text-color-70);
+      background: var(--background-color);
+      font-style: italic;
+    }
+  }
+
+  .server-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem 1rem 1rem;
+  }
+
+  .server-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    background: var(--background-color);
+    border-radius: 0.25rem;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    border-left: 3px solid;
+
+    &--profile {
+      border-color: #3b82f6;
+      background: linear-gradient(
+        90deg,
+        rgba(59, 130, 246, 0.1),
+        var(--background-color)
+      );
+    }
+    &--preferences {
+      border-color: #10b981;
+      background: linear-gradient(
+        90deg,
+        rgba(16, 185, 129, 0.1),
+        var(--background-color)
+      );
+    }
+    &--activity {
+      border-color: #f59e0b;
+      background: linear-gradient(
+        90deg,
+        rgba(245, 158, 11, 0.1),
+        var(--background-color)
+      );
+    }
+
+    &:hover .server-item__delete {
+      background: var(--color-error-highlight);
+    }
+    &:hover .type-icon {
+      opacity: 1;
+    }
+
+    .type-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+      margin: auto 1.5rem;
+      @include mobile-only {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin: auto 1rem;
+      }
+    }
+
+    &__info {
+      min-width: 0;
+      padding: 0.85rem 0.85rem 0.85rem 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      @include mobile-only {
+        padding: 0.75rem 0.75rem 0.75rem 0;
+      }
+    }
+
+    &__title {
+      margin: 0 0 0.3rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+      @include mobile-only {
+        font-size: 1rem;
+      }
+    }
+    &__description {
+      margin: 0;
+      font-size: 0.8rem;
+      color: var(--text-color-70);
+      line-height: 1.4;
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+    &__size {
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+    &__synced {
+      color: var(--text-color-50);
+      font-style: italic;
+    }
+
+    &__delete {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-error);
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s;
+      @include mobile-only {
+        width: 60px;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+        fill: white;
+        transition: transform 0.2s;
+        @include mobile-only {
+          width: 18px;
+          height: 18px;
+        }
+      }
+      &:hover {
+        background: var(--color-error-highlight);
+        svg {
+          transform: scale(1.1);
+        }
+      }
+      &:active svg {
+        transform: scale(0.9);
+      }
+    }
+  }
+</style>

src/components/settings/ThemePreferences.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="theme-preferences">
+    <div class="current-theme">
+      <div class="theme-display">
+        <div class="theme-icon" :data-theme="selectedTheme">
+          <div class="icon-inner"></div>
+        </div>
+        <div class="theme-info">
+          <span class="theme-label">Current Theme</span>
+          <h3 class="theme-name">{{ currentThemeName }}</h3>
+        </div>
+      </div>
+    </div>
+
+    <div class="theme-grid">
+      <button
+        v-for="theme in themes"
+        :key="theme.value"
+        :class="['theme-card', { active: selectedTheme === theme.value }]"
+        @click="selectTheme(theme.value)"
+      >
+        <div class="theme-card__preview" :data-theme="theme.value">
+          <div class="preview-circle"></div>
+        </div>
+        <span class="theme-card__name">{{ theme.label }}</span>
+        <div v-if="selectedTheme === theme.value" class="theme-card__badge">
+          Active
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted } from "vue";
+  import { useTheme } from "@/composables/useTheme";
+
+  const themes = [
+    { value: "auto", label: "Auto" },
+    { value: "light", label: "Light" },
+    { value: "dark", label: "Dark" },
+    { value: "ocean", label: "Ocean" },
+    { value: "nordic", label: "Nordic" },
+    { value: "halloween", label: "Halloween" }
+  ] as const;
+
+  const { currentTheme, savedTheme, setTheme } = useTheme();
+  const selectedTheme = currentTheme;
+
+  const currentThemeName = computed(
+    () => themes.find(t => t.value === selectedTheme.value)?.label ?? "Auto"
+  );
+
+  function selectTheme(theme: string) {
+    setTheme(theme as any);
+  }
+
+  onMounted(() => {
+    selectedTheme.value = savedTheme.value;
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .current-theme {
+    margin-bottom: 2rem;
+    padding: 1rem 2rem;
+    background-color: var(--background-ui);
+    border-radius: 1rem;
+    border: 2px solid var(--background-40);
+
+    @include mobile-only {
+      margin-bottom: 1.5rem;
+      padding: 1.5rem;
+      border-radius: 0.75rem;
+    }
+
+    .theme-display {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+
+      @include mobile-only {
+        gap: 1.25rem;
+      }
+    }
+
+    .theme-icon {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      overflow: hidden;
+      flex-shrink: 0;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+      @include mobile-only {
+        width: 70px;
+        height: 70px;
+      }
+
+      .icon-inner {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 3px solid;
+      }
+
+      &[data-theme="light"] .icon-inner {
+        background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
+        border-color: #01d277;
+      }
+      &[data-theme="dark"] .icon-inner {
+        background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
+        border-color: #01d277;
+      }
+      &[data-theme="ocean"] .icon-inner {
+        background: linear-gradient(135deg, #0f2027, #2c5364);
+        border-color: #00d4ff;
+      }
+      &[data-theme="nordic"] .icon-inner {
+        background: linear-gradient(135deg, #f5f0e8, #d8cdb9);
+        border-color: #3d6e4e;
+      }
+      &[data-theme="halloween"] .icon-inner {
+        background: linear-gradient(135deg, #1a0e2e, #2d1b3d);
+        border-color: #ff6600;
+      }
+      &[data-theme="auto"] .icon-inner {
+        background: conic-gradient(#f8f8f8 0deg 180deg, #1a1a1a 180deg);
+        border-color: #01d277;
+      }
+    }
+
+    .theme-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+    }
+
+    span {
+      font-size: 0.85rem;
+      color: $text-color-70;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 500;
+
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 1.75rem;
+      font-weight: 700;
+      line-height: 1;
+
+      @include mobile-only {
+        font-size: 1.4rem;
+      }
+    }
+  }
+
+  .theme-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.25rem;
+
+    @include mobile-only {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+
+    .theme-card {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      padding: 1rem;
+      background-color: var(--background-ui);
+      border-radius: 0.75rem;
+      cursor: pointer;
+      transition: all 0.2s;
+      border: 2px solid transparent;
+      text-align: center;
+
+      @include mobile-only {
+        padding: 0.85rem;
+        border-radius: 0.5rem;
+        &:hover {
+          transform: none;
+        }
+        &:active {
+          transform: scale(0.97);
+        }
+      }
+
+      &:hover {
+        border-color: var(--highlight-color);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+      }
+
+      &.active {
+        border-color: var(--highlight-color);
+        background-color: var(--background-40);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      &__preview {
+        width: 100%;
+        height: 120px;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        margin-bottom: 0.75rem;
+        position: relative;
+        border: 1px solid var(--background-40);
+
+        @include mobile-only {
+          height: 100px;
+          margin-bottom: 0.6rem;
+        }
+
+        .preview-circle {
+          position: absolute;
+          bottom: 8px;
+          left: 8px;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 8px;
+          left: 8px;
+          right: 8px;
+          height: 20px;
+          border-radius: 4px;
+          border: 1px solid;
+        }
+      }
+
+      &__preview[data-theme="light"] {
+        background: #f8f8f8;
+        .preview-circle {
+          background: #01d277;
+        }
+        &::before {
+          background: #fff;
+          border-color: rgba(8, 28, 36, 0.1);
+        }
+      }
+
+      &__preview[data-theme="dark"] {
+        background: #111;
+        .preview-circle {
+          background: #01d277;
+        }
+        &::before {
+          background: #060708;
+          border-color: rgba(255, 255, 255, 0.1);
+        }
+      }
+
+      &__preview[data-theme="ocean"] {
+        background: #0f2027;
+        .preview-circle {
+          background: #00d4ff;
+        }
+        &::before {
+          background: #203a43;
+          border-color: rgba(0, 212, 255, 0.2);
+        }
+      }
+
+      &__preview[data-theme="nordic"] {
+        background: #f5f0e8;
+        .preview-circle {
+          background: #3d6e4e;
+        }
+        &::before {
+          background: #fffef9;
+          border-color: rgba(61, 110, 78, 0.2);
+        }
+      }
+
+      &__preview[data-theme="halloween"] {
+        background: #1a0e2e;
+        .preview-circle {
+          background: #ff6600;
+        }
+        &::before {
+          background: #2d1b3d;
+          border-color: rgba(255, 102, 0, 0.2);
+        }
+      }
+
+      &__preview[data-theme="auto"] {
+        border-color: black;
+        background: linear-gradient(
+          135deg,
+          #f8f8f8 0%,
+          #f8f8f8 50%,
+          #111 50%,
+          #111 100%
+        );
+        .preview-circle {
+          left: auto;
+          right: 8px;
+          background: #01d277;
+        }
+        &::before {
+          right: auto;
+          width: calc(50% - 10px);
+          background: #fff;
+          border-color: rgba(8, 28, 36, 0.1);
+        }
+      }
+
+      &__name {
+        font-size: 0.9rem;
+        font-weight: 600;
+        line-height: 1;
+        color: var(--text-color);
+        @include mobile-only {
+          font-size: 0.85rem;
+        }
+      }
+
+      &__badge {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        background-color: var(--highlight-color);
+        color: white;
+        border-radius: 1rem;
+        font-size: 0.65rem;
+        font-weight: 600;
+        text-transform: uppercase;
+
+        @include mobile-only {
+          top: 0.4rem;
+          right: 0.4rem;
+          padding: 0.2rem 0.4rem;
+          font-size: 0.6rem;
+        }
+      }
+    }
+  }
+</style>

src/components/settings/UserProfile.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="user-profile">
+    <div class="profile-card">
+      <div class="avatar-circle">{{ userInitials }}</div>
+      <div class="profile-details">
+        <div class="name-row">
+          <span class="username">{{ username }}</span>
+          <span :class="['role-badge', `role-badge--${userRole}`]">{{
+            userRole
+          }}</span>
+          <span
+            v-if="plexUsername"
+            class="role-badge role-badge--plex"
+            :title="`Connected as ${plexUsername}`"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 256 256"
+              fill="currentColor"
+            >
+              <path
+                d="M128 0C57.3 0 0 57.3 0 128s57.3 128 128 128 128-57.3 128-128S198.7 0 128 0zm57.7 128.7l-48 48c-.4.4-.9.7-1.4.9-.5.2-1.1.4-1.6.4s-1.1-.1-1.6-.4c-.5-.2-1-.5-1.4-.9l-48-48c-1.6-1.6-1.6-4.1 0-5.7 1.6-1.6 4.1-1.6 5.7 0l41.1 41.1V80c0-2.2 1.8-4 4-4s4 1.8 4 4v84.1l41.1-41.1c1.6-1.6 4.1-1.6 5.7 0 .8.8 1.2 1.8 1.2 2.8s-.4 2.1-1.2 2.9z"
+              />
+            </svg>
+            Plex
+          </span>
+        </div>
+        <span class="member-info">Member since {{ memberSince }}</span>
+        <span v-if="plexUsername" class="plex-info"
+          >Connected as {{ plexUsername }}</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from "vue";
+  import { useStore } from "vuex";
+
+  const store = useStore();
+  const plexUsername = ref<string>("");
+
+  const username = computed(() => store.getters["user/username"] || "User");
+
+  const userRole = computed(() =>
+    store.getters["user/admin"] ? "admin" : "user"
+  );
+
+  const userInitials = computed(() => username.value.slice(0, 2).toUpperCase());
+
+  const memberSinceDate = computed(() => {
+    const date = new Date();
+    date.setMonth(date.getMonth() - 6);
+    return date;
+  });
+
+  const memberSince = computed(() =>
+    memberSinceDate.value.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric"
+    })
+  );
+
+  const monthsActive = computed(() => {
+    const now = new Date();
+    return (
+      (now.getFullYear() - memberSinceDate.value.getFullYear()) * 12 +
+      now.getMonth() -
+      memberSinceDate.value.getMonth()
+    );
+  });
+
+  // Load Plex username from localStorage
+  function loadPlexUsername() {
+    const cachedData = localStorage.getItem("plex_user_data");
+    if (cachedData) {
+      try {
+        const plexData = JSON.parse(cachedData);
+        plexUsername.value = plexData.username || "";
+      } catch (error) {
+        console.error("Error parsing cached Plex data:", error);
+      }
+    }
+  }
+
+  onMounted(() => {
+    loadPlexUsername();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .user-profile {
+    @include mobile-only {
+      width: 100%;
+    }
+  }
+
+  .profile-card {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    padding: 0.85rem;
+    background-color: var(--background-ui);
+    border-radius: 0.25rem;
+
+    @include mobile-only {
+      padding: 0.75rem;
+      gap: 0.75rem;
+    }
+  }
+
+  .avatar-circle {
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      var(--highlight-color),
+      var(--color-green-70)
+    );
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: $white;
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 48px;
+      height: 48px;
+      font-size: 1.1rem;
+    }
+  }
+
+  .profile-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+  }
+
+  .name-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .username {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: $text-color;
+    line-height: 1.2;
+
+    @include mobile-only {
+      font-size: 0.95rem;
+    }
+  }
+
+  .member-info {
+    font-size: 0.8rem;
+    color: $text-color-70;
+    line-height: 1.2;
+
+    @include mobile-only {
+      font-size: 0.75rem;
+    }
+  }
+
+  .plex-info {
+    font-size: 0.75rem;
+    color: #cc7b19;
+    line-height: 1.2;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+
+    @include mobile-only {
+      font-size: 0.7rem;
+    }
+  }
+
+  .role-badge {
+    padding: 0.2rem 0.55rem;
+    border-radius: 0.25rem;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    &--admin {
+      background-color: var(--color-warning);
+      color: $black;
+    }
+
+    &--user {
+      background-color: var(--background-40);
+      color: $text-color;
+    }
+
+    &--plex {
+      background-color: #cc7b19;
+      color: $white;
+      cursor: help;
+
+      svg {
+        flex-shrink: 0;
+      }
+    }
+  }
+</style>