Version 1.4.0

Adding new games is easier
2023-11-09 21:01:55 +01:00 · 2023-11-09 21:01:01 +01:00
124 changed files with 1911 additions and 7281 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -5,13 +5,4 @@
 .venv
 .vscode
 node_modules
-static
-.drone.yml
-.editorconfig
-.gitignore
-Caddyfile
-CHANGELOG.md
-db.sqlite3
-docker-compose*
-Dockerfile
-Makefile
+src/timetracker/static/*
--- a/.drone.yml
+++ b/.drone.yml
@ -5,12 +5,11 @@ name: default

 steps:
 - name: test
-  image: python:3.12
+  image: python:3.10
  commands:
    - python -m pip install poetry
    - poetry install
    - poetry env info
-    - poetry run python manage.py migrate
    - poetry run pytest

 - name: build-prod
--- a/.envrc
+++ b/.envrc
@ -1 +0,0 @@
-use nix
--- a/.github/workflows/build-docker.yml
+++ b/.github/workflows/build-docker.yml
@ -1,36 +0,0 @@
-name: Django CI/CD
-
-on:
-  push:
-    paths-ignore: [ 'README.md' ]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-python@v4
-        with:
-          python-version: 3.12
-      - run: |
-          python -m pip install poetry
-          poetry install
-          poetry env info
-          poetry run python manage.py migrate
-          # PROD=1 poetry run pytest
-  build-and-push:
-    needs: test
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-    steps:
-      - uses: actions/checkout@v4
-      - uses: docker/setup-buildx-action@v3
-      - uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: |
-            registry.kucharczyk.xyz/timetracker:latest
-            registry.kucharczyk.xyz/timetracker:${{ env.VERSION_NUMBER }}          
-    env:
-      VERSION_NUMBER: 1.5.1
--- a/.gitignore
+++ b/.gitignore
@ -1,12 +1,9 @@
 __pycache__
 .mypy_cache
 .pytest_cache
-.venv/
+.venv
 node_modules
 package-lock.json
 db.sqlite3
 /static/
-dist/
-.DS_Store
-.python-version
-.direnv
+dist/
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@ -1,20 +0,0 @@
-repos:
-# disable due to incomaptible formatting between
-# black and ruff
-# TODO: replace with ruff when it works on NixOS
-# -   repo: https://github.com/psf/black
-#     rev: 24.8.0
-#     hooks:
-#     -   id: black
- repo: https://github.com/pycqa/isort
-  rev: 5.13.2
-  hooks:
-    - id: isort
-      name: isort (python)
- repo: https://github.com/Riverside-Healthcare/djLint
-  rev: v1.34.0
-  hooks:
-    - id: djlint-reformat-django
-      args: ["--ignore", "H011"]
-    - id: djlint-django
-      args: ["--ignore", "H011"]
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,11 +0,0 @@
-{
-    "recommendations": [
-        "charliermarsh.ruff",
-        "ms-python.python",
-        "ms-python.vscode-pylance",
-        "ms-python.debugpy",
-        "batisteo.vscode-django",
-        "bradlc.vscode-tailwindcss",
-        "EditorConfig.EditorConfig"
-    ]
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -4,30 +4,8 @@
    ],
    "python.testing.unittestEnabled": false,
    "python.testing.pytestEnabled": true,
-    "python.analysis.typeCheckingMode": "strict",
+    "python.analysis.typeCheckingMode": "basic",
    "[python]": {
-        "editor.defaultFormatter": "charliermarsh.ruff",
-        "editor.formatOnSave": true,
-        "editor.codeActionsOnSave": {
-            "source.fixAll": "explicit",
-            "source.organizeImports": "explicit"
-        },
+        "editor.defaultFormatter": "ms-python.black-formatter"
    },
-    "ruff.path": ["/nix/store/jaibb3v0rrnlw5ib54qqq3452yhp1xcb-ruff-0.5.7/bin/ruff"],
-    "tailwind-fold.supportedLanguages": [
-        "html",
-        "typescriptreact",
-        "javascriptreact",
-        "typescript",
-        "javascript",
-        "vue-html",
-        "vue",
-        "php",
-        "markdown",
-        "coffeescript",
-        "svelte",
-        "astro",
-        "erb",
-        "django-html"
-    ]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,58 +1,3 @@
-## Unreleased
-
-## New
-* Render notes as Markdown
-* Require login by default
-* Add stats for dropped purchases, monthly playtimes
-* Allow deleting purchases
-* Add all-time stats
-* Manage purchases
-
-## Improved
-* mark refunded purchases red on game overview
-* increase session count on game overview when starting a new session
-* game overview:
-  * sort purchases also by date purchased (on top of date released)
-  * improve header format, make it more appealing
-  * ignore manual sessions when calculating session average
-* stats: improve purchase name consistency
-* session list: use display name instead of sort name
-* unify the appearance of game links, and make them expand to full size on hover
-
-## Fixed
-* Fix title not being displayed on the Recent sessions page
-* Avoid errors when displaying game overview with zero sessions
-
-## 1.5.2 / 2024-01-14 21:27+01:00
-
-## Improved
-* game overview:
-  * improve how editions and purchases are displayed
-  * make it possible to end session from overview
-* add purchase: only allow choosing purchases of selected edition
-* session list:
-  * starting and ending sessions is much faster/doest not reload the page
-  * listing sessions is much faster
-
-## 1.5.1 / 2023-11-14 21:10+01:00
-
-## Improved
-* Disallow choosing non-game purchase as related purchase
-* Improve display of purchases
-
-## 1.5.0 / 2023-11-14 19:27+01:00
-
-## New
-* Add stat for finished this year's games
-* Add purchase types:
-  * Game (previously all of them were this type)
-  * DLC
-  * Season Pass
-  * Battle Pass
-
-## Fixed
-* Order purchases by date on game view
-
 ## 1.4.0 / 2023-11-09 21:01+01:00

 ### New
--- a/46
+++ b/46
@ -1,45 +1,27 @@
-FROM python:3.12.0-slim-bullseye
+FROM node as css
+WORKDIR /app
+COPY . /app
+RUN npm install && \
+    npx tailwindcss -i ./common/input.css -o ./static/base.css --minify

-ENV VERSION_NUMBER=1.5.2 \
-    PROD=1 \
-    PYTHONUNBUFFERED=1 \
-    PYTHONFAULTHANDLER=1 \
-    PYTHONHASHSEED=random \
-    PYTHONDONTWRITEBYTECODE=1 \
-    PIP_NO_CACHE_DIR=1 \
-    PIP_DISABLE_PIP_VERSION_CHECK=1 \
-    PIP_DEFAULT_TIMEOUT=100 \
-    PIP_ROOT_USER_ACTION=ignore \
-    POETRY_NO_INTERACTION=1 \
-    POETRY_VIRTUALENVS_CREATE=false \
-    POETRY_CACHE_DIR='/var/cache/pypoetry' \
-    POETRY_HOME='/usr/local'
+FROM python:3.10.9-slim-bullseye

-RUN apt-get update && apt-get upgrade -y \
-  && apt-get install --no-install-recommends -y \
-    bash \
-    curl \
-  && curl -sSL 'https://install.python-poetry.org' | python - \
-  && poetry --version \
-  && apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false \
-  && apt-get clean -y && rm -rf /var/lib/apt/lists/*
+ENV VERSION_NUMBER 1.4.0
+ENV PROD 1
+ENV PYTHONUNBUFFERED=1

-RUN useradd -m --uid 1000 timetracker \
-    && mkdir -p '/var/www/django/static' \
-    && chown timetracker:timetracker '/var/www/django/static'
+RUN useradd -m --uid 1000 timetracker
 WORKDIR /home/timetracker/app
 COPY . /home/timetracker/app/
 RUN chown -R timetracker:timetracker /home/timetracker/app
+COPY --from=css ./app/static/base.css /home/timetracker/app/static/base.css
 COPY entrypoint.sh /
 RUN chmod +x /entrypoint.sh

-RUN --mount=type=cache,target="$POETRY_CACHE_DIR" \
-    echo "$PROD" \
-    && poetry version \
-    && poetry run pip install -U pip \
-    && poetry install --only main --no-interaction --no-ansi --sync
-
 USER timetracker
+ENV PATH="$PATH:/home/timetracker/.local/bin"
+RUN pip install --no-cache-dir poetry
+RUN poetry install

 EXPOSE 8000
 CMD [ "/entrypoint.sh" ]
--- a/20
+++ b/20
@ -3,7 +3,6 @@ all: css migrate
 initialize: npm css migrate sethookdir loadplatforms

 HTMLFILES := $(shell find games/templates -type f)
-PYTHON_VERSION = 3.12

 npm:
 	npm install
@ -11,26 +10,17 @@ npm:
 css: common/input.css
 	npx tailwindcss -i ./common/input.css -o  ./games/static/base.css

+css-dev: css
+	npx tailwindcss -i ./common/input.css -o  ./games/static/base.css --watch
+
 makemigrations:
 	poetry run python manage.py makemigrations

 migrate: makemigrations
 	poetry run python manage.py migrate

-init:
-	pyenv install -s $(PYTHON_VERSION)
-	pyenv local $(PYTHON_VERSION)
-	pip install poetry
-	poetry install
-	npm install
-
-dev:
-	@npx concurrently \
-		--names "Django,Tailwind" \
-		--prefix-colors "blue,green" \
-		"poetry run python -Wa manage.py runserver" \
-		"npx tailwindcss -i ./common/input.css -o ./games/static/base.css --watch"
-
+dev: migrate
+	poetry run python manage.py runserver

 caddy:
 	caddy run --watch
--- a/README.md
+++ b/README.md
@ -1,15 +1,3 @@
 # Timetracker

-A simple game catalogue and play session tracker.
-
-# Development
-
-The project uses `pyenv` to manage installed Python versions.
-If you have `pyenv` installed, you can simply run:
-
-```
-make init
-```
-
-This will make sure the correct Python version is installed, and it will install all dependencies using `poetry`.
-Afterwards, you can start the development server using `make dev`.
+A simple game catalogue and play session tracker.
--- a/common/components.py
+++ b/common/components.py
@ -1,117 +0,0 @@
-from random import choices as random_choices
-from string import ascii_lowercase
-from typing import Any, Callable
-
-from django.template.loader import render_to_string
-from django.urls import NoReverseMatch, reverse
-from django.utils.safestring import mark_safe
-
-HTMLAttribute = tuple[str, str | int | bool]
-HTMLTag = str
-
-
-def Component(
-    attributes: list[HTMLAttribute] = [],
-    children: list[HTMLTag] | HTMLTag = [],
-    template: str = "",
-    tag_name: str = "",
-) -> HTMLTag:
-    if not tag_name and not template:
-        raise ValueError("One of template or tag_name is required.")
-    if isinstance(children, str):
-        children = [children]
-    childrenBlob = "\n".join(children)
-    attributesList = [f'{name} = "{value}"' for name, value in attributes]
-    attributesBlob = " ".join(attributesList)
-    tag: str = ""
-    if tag_name != "":
-        tag = f"<a {attributesBlob}>{childrenBlob}</a>"
-    elif template != "":
-        tag = render_to_string(
-            template,
-            {name: value for name, value in attributes}
-            | {"slot": mark_safe("\n".join(children))},
-        )
-    return mark_safe(tag)
-
-
-def randomid(seed: str = "", length: int = 10) -> str:
-    return seed + "".join(random_choices(ascii_lowercase, k=length))
-
-
-def Popover(
-    popover_content: str,
-    wrapped_content: str = "",
-    children: list[HTMLTag] = [],
-    attributes: list[HTMLAttribute] = [],
-) -> str:
-    if not wrapped_content and not children:
-        raise ValueError("One of wrapped_content or children is required.")
-    id = randomid()
-    return Component(
-        attributes=attributes
-        + [
-            ("id", id),
-            ("wrapped_content", wrapped_content),
-            ("popover_content", popover_content),
-        ],
-        children=children,
-        template="cotton/popover.html",
-    )
-
-
-def A(
-    attributes: list[HTMLAttribute] = [],
-    children: list[HTMLTag] | HTMLTag = [],
-    url: str | Callable[..., Any] = "",
-):
-    """
-    Returns the HTML tag "a".
-    "url" can either be:
-        - URL (string)
-        - path name passed to reverse() (string)
-        - function
-    """
-    additional_attributes = []
-    if url:
-        if type(url) is str:
-            try:
-                url_result = reverse(url)
-            except NoReverseMatch:
-                url_result = url
-        elif callable(url):
-            url_result = url()
-        else:
-            raise TypeError("'url' is neither str nor function.")
-        additional_attributes = [("href", url_result)]
-    return Component(
-        tag_name="a", attributes=attributes + additional_attributes, children=children
-    )
-
-
-def Button(
-    attributes: list[HTMLAttribute] = [],
-    children: list[HTMLTag] | HTMLTag = [],
-    size: str = "base",
-    icon: bool = False,
-    color: str = "blue",
-):
-    return Component(
-        template="cotton/button.html",
-        attributes=attributes + [("size", size), ("icon", icon), ("color", color)],
-        children=children,
-    )
-
-
-def Div(
-    attributes: list[HTMLAttribute] = [],
-    children: list[HTMLTag] | HTMLTag = [],
-):
-    return Component(tag_name="div", attributes=attributes, children=children)
-
-
-def Icon(
-    name: str,
-    attributes: list[HTMLAttribute] = [],
-):
-    return Component(template=f"cotton/icon/{name}.html", attributes=attributes)
--- a/common/input.css
+++ b/common/input.css
@ -4,7 +4,7 @@

@font-face {
  font-family: "IBM Plex Mono";
-  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
+  src: url("fonts/IBMPlexMono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
 }
@ -23,33 +23,12 @@
  font-style: normal;
 }

-@font-face {
-  font-family: "IBM Plex Serif";
-  src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "IBM Plex Sans Condensed";
-  src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-
-
-/* a:hover {
-  text-decoration-color: #ff4400;
-  color: rgb(254, 185, 160);
-  transition: all 0.2s ease-out;
-} */
-
 form label {
  @apply dark:text-slate-400;
 }

 .responsive-table {
-  @apply dark:text-white mx-auto table-fixed;
+  @apply dark:text-white mx-auto;
 }

 .responsive-table tr:nth-child(even) {
@ -70,20 +49,11 @@ form label {
 }

@layer utilities {
-  .min-w-20char {
-    min-width: 20ch;
-  }
  .max-w-20char {
    max-width: 20ch;
  }
-  .min-w-30char {
-    min-width: 30ch;
-  }
-  .max-w-30char {
-    max-width: 30ch;
-  }
  .max-w-35char {
-    max-width: 35ch;
+    max-width: 40ch;
  }
  .max-w-40char {
    max-width: 40ch;
@ -96,16 +66,6 @@ textarea {
  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
 }

-form input:disabled,
-select:disabled,
-textarea:disabled {
-  @apply dark:bg-slate-700 dark:text-slate-400;
-}
-
-.errorlist {
-  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
-}
-
@media screen and (min-width: 768px) {
  form input,
  select,
@ -126,6 +86,14 @@ textarea:disabled {
  @apply mx-1;
 }

+th {
+  @apply text-right;
+}
+
+th label {
+  @apply mr-4;
+}
+
 .basic-button-container {
  @apply flex space-x-2 justify-center;
 }
@ -133,39 +101,3 @@ textarea:disabled {
 .basic-button {
  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
 }
-
-.markdown-content ul {
-  list-style-type: disc;
-  list-style-position: inside;
-  padding-left: 1em;
-}
-
-.markdown-content ol {
-  list-style-type: decimal;
-  list-style-position: inside;
-  padding-left: 1em;
-}
-
-.markdown-content ul, 
-.markdown-content ol {
-    list-style-position: outside;
-    padding-left: 1em;
-}
-
-.markdown-content ul ul, 
-.markdown-content ul ol, 
-.markdown-content ol ul, 
-.markdown-content ol ol {
-    list-style-type: circle;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    padding-left: 1em;
-}
-
-/* .truncate-container {
-  @apply inline-block relative;
-  a {
-    @apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4;
-    
-  }  
-} */
--- a/common/time.py
+++ b/common/time.py
@ -1,15 +1,12 @@
 import re
-from datetime import date, datetime, timedelta
+from datetime import datetime, timedelta
+from zoneinfo import ZoneInfo

-from django.utils import timezone
+from django.conf import settings

-from common.utils import generate_split_ranges

-dateformat: str = "%d/%m/%Y"
-datetimeformat: str = "%d/%m/%Y %H:%M"
-timeformat: str = "%H:%M"
-durationformat: str = "%2.1H hours"
-durationformat_manual: str = "%H hours"
+def now() -> datetime:
+    return datetime.now(ZoneInfo(settings.TIME_ZONE))


 def _safe_timedelta(duration: timedelta | int | None):
@ -22,7 +19,7 @@ def _safe_timedelta(duration: timedelta | int | None):


 def format_duration(
-    duration: timedelta | int | float | None, format_string: str = "%H hours"
+    duration: timedelta | int | None, format_string: str = "%H hours"
 ) -> str:
    """
    Format timedelta into the specified format_string.
@ -47,7 +44,7 @@ def format_duration(
    # timestamps where end is before start
    if seconds_total < 0:
        seconds_total = 0
-    days = hours = hours_float = minutes = seconds = 0
+    days = hours = minutes = seconds = 0
    remainder = seconds = seconds_total
    if "%d" in format_string:
        days, remainder = divmod(seconds_total, day_seconds)
@ -58,7 +55,7 @@ def format_duration(
        minutes, seconds = divmod(remainder, minute_seconds)
    literals = {
        "d": str(days),
-        "H": str(hours) if "m" not in format_string else str(hours_float),
+        "H": str(hours),
        "m": str(minutes),
        "s": str(seconds),
        "r": str(seconds_total),
@ -80,86 +77,3 @@ def format_duration(
                rf"%\d*\.?\d*{pattern}", replacement, formatted_string
            )
    return formatted_string
-
-
-def local_strftime(datetime: datetime, format: str = datetimeformat) -> str:
-    return timezone.localtime(datetime).strftime(format)
-
-
-def daterange(start: date, end: date, end_inclusive: bool = False) -> list[date]:
-    time_between: timedelta = end - start
-    if (days_between := time_between.days) < 1:
-        raise ValueError("start and end have to be at least 1 day apart.")
-    if end_inclusive:
-        print(f"{end_inclusive=}")
-        print(f"{days_between=}")
-        days_between += 1
-    print(f"{days_between=}")
-    return [start + timedelta(x) for x in range(days_between)]
-
-
-def streak(datelist: list[date]) -> dict[str, int | tuple[date, date]]:
-    if len(datelist) == 1:
-        return {"days": 1, "dates": (datelist[0], datelist[0])}
-    else:
-        print(f"Processing {len(datelist)} dates.")
-        missing = sorted(
-            set(
-                datelist[0] + timedelta(x)
-                for x in range((datelist[-1] - datelist[0]).days)
-            )
-            - set(datelist)
-        )
-        print(f"{len(missing)} days missing.")
-        datelist_with_missing = sorted(datelist + missing)
-        ranges = list(generate_split_ranges(datelist_with_missing, missing))
-        print(f"{len(ranges)} ranges calculated.")
-        longest_consecutive_days = timedelta(0)
-        longest_range: tuple[date, date] = (date(1970, 1, 1), date(1970, 1, 1))
-        for start, end in ranges:
-            if (current_streak := end - start) > longest_consecutive_days:
-                longest_consecutive_days = current_streak
-                longest_range = (start, end)
-        return {"days": longest_consecutive_days.days + 1, "dates": longest_range}
-
-
-def streak_bruteforce(datelist: list[date]) -> dict[str, int | tuple[date, date]]:
-    if (datelist_length := len(datelist)) == 0:
-        raise ValueError("Number of dates in the list is 0.")
-    datelist.sort()
-    current_streak = 1
-    current_start = datelist[0]
-    current_end = datelist[0]
-    current_date = datelist[0]
-    highest_streak = 1
-    highest_streak_daterange = (current_start, current_end)
-
-    def update_highest_streak():
-        nonlocal highest_streak, highest_streak_daterange
-        if current_streak > highest_streak:
-            highest_streak = current_streak
-            highest_streak_daterange = (current_start, current_end)
-
-    def reset_streak():
-        nonlocal current_start, current_end, current_streak
-        current_start = current_end = current_date
-        current_streak = 1
-
-    def increment_streak():
-        nonlocal current_end, current_streak
-        current_end = current_date
-        current_streak += 1
-
-    for i, datelist_item in enumerate(datelist, start=1):
-        current_date = datelist_item
-        if current_date == current_start or current_date == current_end:
-            continue
-        if current_date - timedelta(1) != current_end and i != datelist_length:
-            update_highest_streak()
-            reset_streak()
-        elif current_date - timedelta(1) == current_end and i == datelist_length:
-            increment_streak()
-            update_highest_streak()
-        else:
-            increment_streak()
-    return {"days": highest_streak, "dates": highest_streak_daterange}
--- a/common/utils.py
+++ b/common/utils.py
@ -1,9 +1,3 @@
-from datetime import date
-from typing import Any, Generator, TypeVar
-
-from common.components import Popover
-
-
 def safe_division(numerator: int | float, denominator: int | float) -> int | float:
    """
    Divides without triggering division by zero exception.
@ -13,59 +7,3 @@ def safe_division(numerator: int | float, denominator: int | float) -> int | flo
        return numerator / denominator
    except ZeroDivisionError:
        return 0
-
-
-def safe_getattr(obj: object, attr_chain: str, default: Any | None = None) -> object:
-    """
-    Safely get the nested attribute from an object.
-
-    Parameters:
-    obj (object): The object from which to retrieve the attribute.
-    attr_chain (str): The chain of attributes, separated by dots.
-    default: The default value to return if any attribute in the chain does not exist.
-
-    Returns:
-    The value of the nested attribute if it exists, otherwise the default value.
-    """
-    attrs = attr_chain.split(".")
-    for attr in attrs:
-        try:
-            obj = getattr(obj, attr)
-        except AttributeError:
-            return default
-    return obj
-
-
-def truncate(input_string: str, length: int = 30, ellipsis: str = "…") -> str:
-    return (
-        (f"{input_string[:length-len(ellipsis)]}{ellipsis}")
-        if len(input_string) > 30
-        else input_string
-    )
-
-
-def truncate_with_popover(input_string: str) -> str:
-    if (truncated := truncate(input_string)) != input_string:
-        return Popover(wrapped_content=truncated, popover_content=input_string)
-    else:
-        return input_string
-
-
-T = TypeVar("T", str, int, date)
-
-
-def generate_split_ranges(
-    value_list: list[T], split_points: list[T]
-) -> Generator[tuple[T, T], None, None]:
-    for x in range(0, len(split_points) + 1):
-        if x == 0:
-            start = 0
-        elif x >= len(split_points):
-            start = value_list.index(split_points[x - 1]) + 1
-        else:
-            start = value_list.index(split_points[x - 1]) + 1
-        try:
-            end = value_list.index(split_points[x])
-        except IndexError:
-            end = len(value_list)
-        yield (value_list[start], value_list[end - 1])
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -10,14 +10,13 @@ services:
      - CSRF_TRUSTED_ORIGINS="https://tracker.kucharczyk.xyz"
    user: "1000"
    volumes:
-      - "static-files:/var/www/django/static"
-      - "$PWD/db.sqlite3:/home/timetracker/app/db.sqlite3"
+      - "static-files:/home/timetracker/app/static"
    restart: unless-stopped

  frontend:
    image: caddy
    volumes:
-      - "static-files:/usr/share/caddy:ro"
+      - "static-files:/usr/share/caddy"
      - "$PWD/Caddyfile:/etc/caddy/Caddyfile"
    ports:
      - "8000:8000"
@ -27,4 +26,3 @@ services:
 volumes:
  static-files:
    
-    
--- a/games/admin.py
+++ b/games/admin.py
@ -1,6 +1,6 @@
 from django.contrib import admin

-from games.models import Device, Edition, Game, Platform, Purchase, Session
+from games.models import Game, Platform, Purchase, Session, Edition, Device

 # Register your models here.
 admin.site.register(Game)
--- a/games/forms.py
+++ b/games/forms.py
@ -1,8 +1,6 @@
 from django import forms
-from django.urls import reverse

-from common.utils import safe_getattr
-from games.models import Device, Edition, Game, Platform, Purchase, Session
+from games.models import Game, Platform, Purchase, Session, Edition, Device

 custom_date_widget = forms.DateInput(attrs={"type": "date"})
 custom_datetime_widget = forms.DateTimeInput(
@ -46,45 +44,23 @@ class EditionChoiceField(forms.ModelChoiceField):
 class IncludePlatformSelect(forms.Select):
    def create_option(self, name, value, *args, **kwargs):
        option = super().create_option(name, value, *args, **kwargs)
-        if platform_id := safe_getattr(value, "instance.platform.id"):
-            option["attrs"]["data-platform"] = platform_id
+        if value:
+            option["attrs"]["data-platform"] = value.instance.platform.id
        return option


 class PurchaseForm(forms.ModelForm):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-
-        # Automatically update related_purchase <select/>
-        # to only include purchases of the selected edition.
-        related_purchase_by_edition_url = reverse("related_purchase_by_edition")
-        self.fields["edition"].widget.attrs.update(
-            {
-                "hx-trigger": "load, click",
-                "hx-get": related_purchase_by_edition_url,
-                "hx-target": "#id_related_purchase",
-                "hx-swap": "outerHTML",
-            }
-        )
-
    edition = EditionChoiceField(
        queryset=Edition.objects.order_by("sort_name"),
        widget=IncludePlatformSelect(attrs={"autoselect": "autoselect"}),
    )
    platform = forms.ModelChoiceField(queryset=Platform.objects.order_by("name"))
-    related_purchase = forms.ModelChoiceField(
-        queryset=Purchase.objects.filter(type=Purchase.GAME).order_by(
-            "edition__sort_name"
-        ),
-        required=False,
-    )

    class Meta:
        widgets = {
            "date_purchased": custom_date_widget,
            "date_refunded": custom_date_widget,
            "date_finished": custom_date_widget,
-            "date_dropped": custom_date_widget,
        }
        model = Purchase
        fields = [
@ -93,37 +69,11 @@ class PurchaseForm(forms.ModelForm):
            "date_purchased",
            "date_refunded",
            "date_finished",
-            "date_dropped",
-            "infinite",
            "price",
            "price_currency",
            "ownership_type",
-            "type",
-            "related_purchase",
-            "name",
        ]

-    def clean(self):
-        cleaned_data = super().clean()
-        purchase_type = cleaned_data.get("type")
-        related_purchase = cleaned_data.get("related_purchase")
-        name = cleaned_data.get("name")
-
-        # Set the type on the instance to use get_type_display()
-        # This is safe because we're not saving the instance.
-        self.instance.type = purchase_type
-
-        if purchase_type != Purchase.GAME:
-            type_display = self.instance.get_type_display()
-            if not related_purchase:
-                self.add_error(
-                    "related_purchase",
-                    f"{type_display} must have a related purchase.",
-                )
-            if not name:
-                self.add_error("name", f"{type_display} must have a name.")
-        return cleaned_data
-

 class IncludeNameSelect(forms.Select):
    def create_option(self, name, value, *args, **kwargs):
--- a/games/graphql/mutations/init.py
+++ b/games/graphql/mutations/init.py
@ -1 +0,0 @@
-from .game import Mutation as GameMutation
--- a/games/graphql/mutations/game.py
+++ b/games/graphql/mutations/game.py
@ -1,29 +0,0 @@
-import graphene
-
-from games.graphql.types import Game
-from games.models import Game as GameModel
-
-
-class UpdateGameMutation(graphene.Mutation):
-    class Arguments:
-        id = graphene.ID(required=True)
-        name = graphene.String()
-        year_released = graphene.Int()
-        wikidata = graphene.String()
-
-    game = graphene.Field(Game)
-
-    def mutate(self, info, id, name=None, year_released=None, wikidata=None):
-        game_instance = GameModel.objects.get(pk=id)
-        if name is not None:
-            game_instance.name = name
-        if year_released is not None:
-            game_instance.year_released = year_released
-        if wikidata is not None:
-            game_instance.wikidata = wikidata
-        game_instance.save()
-        return UpdateGameMutation(game=game_instance)
-
-
-class Mutation(graphene.ObjectType):
-    update_game = UpdateGameMutation.Field()
--- a/games/graphql/queries/init.py
+++ b/games/graphql/queries/init.py
@ -1,6 +0,0 @@
-from .device import Query as DeviceQuery
-from .edition import Query as EditionQuery
-from .game import Query as GameQuery
-from .platform import Query as PlatformQuery
-from .purchase import Query as PurchaseQuery
-from .session import Query as SessionQuery
--- a/games/graphql/queries/device.py
+++ b/games/graphql/queries/device.py
@ -1,11 +0,0 @@
-import graphene
-
-from games.graphql.types import Device
-from games.models import Device as DeviceModel
-
-
-class Query(graphene.ObjectType):
-    devices = graphene.List(Device)
-
-    def resolve_devices(self, info, **kwargs):
-        return DeviceModel.objects.all()
--- a/games/graphql/queries/edition.py
+++ b/games/graphql/queries/edition.py
@ -1,11 +0,0 @@
-import graphene
-
-from games.graphql.types import Edition
-from games.models import Game as EditionModel
-
-
-class Query(graphene.ObjectType):
-    editions = graphene.List(Edition)
-
-    def resolve_editions(self, info, **kwargs):
-        return EditionModel.objects.all()
--- a/games/graphql/queries/game.py
+++ b/games/graphql/queries/game.py
@ -1,18 +0,0 @@
-import graphene
-
-from games.graphql.types import Game
-from games.models import Game as GameModel
-
-
-class Query(graphene.ObjectType):
-    games = graphene.List(Game)
-    game_by_name = graphene.Field(Game, name=graphene.String(required=True))
-
-    def resolve_games(self, info, **kwargs):
-        return GameModel.objects.all()
-
-    def resolve_game_by_name(self, info, name):
-        try:
-            return GameModel.objects.get(name=name)
-        except GameModel.DoesNotExist:
-            return None
--- a/games/graphql/queries/platform.py
+++ b/games/graphql/queries/platform.py
@ -1,11 +0,0 @@
-import graphene
-
-from games.graphql.types import Platform
-from games.models import Platform as PlatformModel
-
-
-class Query(graphene.ObjectType):
-    platforms = graphene.List(Platform)
-
-    def resolve_platforms(self, info, **kwargs):
-        return PlatformModel.objects.all()
--- a/games/graphql/queries/purchase.py
+++ b/games/graphql/queries/purchase.py
@ -1,11 +0,0 @@
-import graphene
-
-from games.graphql.types import Purchase
-from games.models import Purchase as PurchaseModel
-
-
-class Query(graphene.ObjectType):
-    purchases = graphene.List(Purchase)
-
-    def resolve_purchases(self, info, **kwargs):
-        return PurchaseModel.objects.all()
--- a/games/graphql/queries/session.py
+++ b/games/graphql/queries/session.py
@ -1,11 +0,0 @@
-import graphene
-
-from games.graphql.types import Session
-from games.models import Session as SessionModel
-
-
-class Query(graphene.ObjectType):
-    sessions = graphene.List(Session)
-
-    def resolve_sessions(self, info, **kwargs):
-        return SessionModel.objects.all()
--- a/games/graphql/types.py
+++ b/games/graphql/types.py
@ -1,44 +0,0 @@
-from graphene_django import DjangoObjectType
-
-from games.models import Device as DeviceModel
-from games.models import Edition as EditionModel
-from games.models import Game as GameModel
-from games.models import Platform as PlatformModel
-from games.models import Purchase as PurchaseModel
-from games.models import Session as SessionModel
-
-
-class Game(DjangoObjectType):
-    class Meta:
-        model = GameModel
-        fields = "__all__"
-
-
-class Edition(DjangoObjectType):
-    class Meta:
-        model = EditionModel
-        fields = "__all__"
-
-
-class Purchase(DjangoObjectType):
-    class Meta:
-        model = PurchaseModel
-        fields = "__all__"
-
-
-class Session(DjangoObjectType):
-    class Meta:
-        model = SessionModel
-        fields = "__all__"
-
-
-class Platform(DjangoObjectType):
-    class Meta:
-        model = PlatformModel
-        fields = "__all__"
-
-
-class Device(DjangoObjectType):
-    class Meta:
-        model = DeviceModel
-        fields = "__all__"
--- a/games/migrations/0007_alter_purchase_game_alter_purchase_platform_and_more.py
+++ b/games/migrations/0007_alter_purchase_game_alter_purchase_platform_and_more.py
@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-01-19 18:30

-import django.db.models.deletion
 from django.db import migrations, models
+import django.db.models.deletion


 class Migration(migrations.Migration):
--- a/games/migrations/0008_edition.py
+++ b/games/migrations/0008_edition.py
@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-02-18 16:29

-import django.db.models.deletion
 from django.db import migrations, models
+import django.db.models.deletion


 class Migration(migrations.Migration):
--- a/games/migrations/0010_alter_purchase_game.py
+++ b/games/migrations/0010_alter_purchase_game.py
@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-02-18 19:06

-import django.db.models.deletion
 from django.db import migrations, models
+import django.db.models.deletion


 class Migration(migrations.Migration):
--- a/games/migrations/0014_device_session_device.py
+++ b/games/migrations/0014_device_session_device.py
@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-02-18 19:59

-import django.db.models.deletion
 from django.db import migrations, models
+import django.db.models.deletion


 class Migration(migrations.Migration):
--- a/games/migrations/0016_alter_edition_platform_alter_edition_year_released_and_more.py
+++ b/games/migrations/0016_alter_edition_platform_alter_edition_year_released_and_more.py
@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-11-06 11:10

-import django.db.models.deletion
 from django.db import migrations, models
+import django.db.models.deletion


 class Migration(migrations.Migration):
--- a/games/migrations/0016_alter_edition_platform_alter_edition_year_released_and_more_squashed_0022_rename_year_game_year_released.py
+++ b/games/migrations/0016_alter_edition_platform_alter_edition_year_released_and_more_squashed_0022_rename_year_game_year_released.py
@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-11-06 18:14

-import django.db.models.deletion
 from django.db import migrations, models
+import django.db.models.deletion


 def rename_duplicates(apps, schema_editor):
--- a/games/migrations/0017_alter_device_type_alter_purchase_platform.py
+++ b/games/migrations/0017_alter_device_type_alter_purchase_platform.py
@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-11-06 16:53

-import django.db.models.deletion
 from django.db import migrations, models
+import django.db.models.deletion


 class Migration(migrations.Migration):
--- a/games/migrations/0026_purchase_type.py
+++ b/games/migrations/0026_purchase_type.py
@ -1,27 +0,0 @@
-# Generated by Django 4.1.5 on 2023-11-14 08:35
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0025_game_sort_name"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="purchase",
-            name="type",
-            field=models.CharField(
-                choices=[
-                    ("game", "Game"),
-                    ("dlc", "DLC"),
-                    ("season_pass", "Season Pass"),
-                    ("battle_pass", "Battle Pass"),
-                ],
-                default="game",
-                max_length=255,
-            ),
-        ),
-    ]
--- a/games/migrations/0027_purchase_related_purchase.py
+++ b/games/migrations/0027_purchase_related_purchase.py
@ -1,25 +0,0 @@
-# Generated by Django 4.1.5 on 2023-11-14 08:41
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0026_purchase_type"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="purchase",
-            name="related_purchase",
-            field=models.ForeignKey(
-                blank=True,
-                default=None,
-                null=True,
-                on_delete=django.db.models.deletion.SET_NULL,
-                to="games.purchase",
-            ),
-        ),
-    ]
--- a/games/migrations/0028_purchase_name.py
+++ b/games/migrations/0028_purchase_name.py
@ -1,26 +0,0 @@
-# Generated by Django 4.1.5 on 2023-11-14 11:05
-
-from django.db import migrations, models
-
-from games.models import Purchase
-
-
-def null_game_name(apps, schema_editor):
-    Purchase.objects.filter(type=Purchase.GAME).update(name=None)
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("games", "0027_purchase_related_purchase"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="purchase",
-            name="name",
-            field=models.CharField(
-                blank=True, default="Unknown Name", max_length=255, null=True
-            ),
-        ),
-        migrations.RunPython(null_game_name),
-    ]
--- a/games/migrations/0029_alter_purchase_related_purchase.py
+++ b/games/migrations/0029_alter_purchase_related_purchase.py
@ -1,26 +0,0 @@
-# Generated by Django 4.1.5 on 2023-11-14 21:19
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0028_purchase_name"),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name="purchase",
-            name="related_purchase",
-            field=models.ForeignKey(
-                blank=True,
-                default=None,
-                null=True,
-                on_delete=django.db.models.deletion.SET_NULL,
-                related_name="related_purchases",
-                to="games.purchase",
-            ),
-        ),
-    ]
--- a/games/migrations/0030_alter_purchase_name.py
+++ b/games/migrations/0030_alter_purchase_name.py
@ -1,18 +0,0 @@
-# Generated by Django 4.1.5 on 2023-11-15 12:04
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0029_alter_purchase_related_purchase"),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name="purchase",
-            name="name",
-            field=models.CharField(blank=True, default="", max_length=255, null=True),
-        ),
-    ]
--- a/games/migrations/0031_device_created_at_edition_created_at_game_created_at_and_more.py
+++ b/games/migrations/0031_device_created_at_edition_created_at_game_created_at_and_more.py
@ -1,44 +0,0 @@
-# Generated by Django 4.1.5 on 2023-11-15 13:51
-
-import django.utils.timezone
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0030_alter_purchase_name"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="device",
-            name="created_at",
-            field=models.DateTimeField(default=django.utils.timezone.now),
-        ),
-        migrations.AddField(
-            model_name="edition",
-            name="created_at",
-            field=models.DateTimeField(default=django.utils.timezone.now),
-        ),
-        migrations.AddField(
-            model_name="game",
-            name="created_at",
-            field=models.DateTimeField(default=django.utils.timezone.now),
-        ),
-        migrations.AddField(
-            model_name="platform",
-            name="created_at",
-            field=models.DateTimeField(default=django.utils.timezone.now),
-        ),
-        migrations.AddField(
-            model_name="purchase",
-            name="created_at",
-            field=models.DateTimeField(default=django.utils.timezone.now),
-        ),
-        migrations.AddField(
-            model_name="session",
-            name="created_at",
-            field=models.DateTimeField(default=django.utils.timezone.now),
-        ),
-    ]
--- a/games/migrations/0032_alter_session_options_session_modified_at_and_more.py
+++ b/games/migrations/0032_alter_session_options_session_modified_at_and_more.py
@ -1,52 +0,0 @@
-# Generated by Django 4.1.5 on 2023-11-15 18:02
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0031_device_created_at_edition_created_at_game_created_at_and_more"),
-    ]
-
-    operations = [
-        migrations.AlterModelOptions(
-            name="session",
-            options={"get_latest_by": "timestamp_start"},
-        ),
-        migrations.AddField(
-            model_name="session",
-            name="modified_at",
-            field=models.DateTimeField(auto_now=True),
-        ),
-        migrations.AlterField(
-            model_name="device",
-            name="created_at",
-            field=models.DateTimeField(auto_now_add=True),
-        ),
-        migrations.AlterField(
-            model_name="edition",
-            name="created_at",
-            field=models.DateTimeField(auto_now_add=True),
-        ),
-        migrations.AlterField(
-            model_name="game",
-            name="created_at",
-            field=models.DateTimeField(auto_now_add=True),
-        ),
-        migrations.AlterField(
-            model_name="platform",
-            name="created_at",
-            field=models.DateTimeField(auto_now_add=True),
-        ),
-        migrations.AlterField(
-            model_name="purchase",
-            name="created_at",
-            field=models.DateTimeField(auto_now_add=True),
-        ),
-        migrations.AlterField(
-            model_name="session",
-            name="created_at",
-            field=models.DateTimeField(auto_now_add=True),
-        ),
-    ]
--- a/games/migrations/0033_alter_edition_unique_together.py
+++ b/games/migrations/0033_alter_edition_unique_together.py
@ -1,17 +0,0 @@
-# Generated by Django 4.2.7 on 2023-11-28 13:43
-
-from django.db import migrations
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0032_alter_session_options_session_modified_at_and_more"),
-    ]
-
-    operations = [
-        migrations.AlterUniqueTogether(
-            name="edition",
-            unique_together={("name", "platform", "year_released")},
-        ),
-    ]
--- a/games/migrations/0034_purchase_date_dropped_purchase_infinite.py
+++ b/games/migrations/0034_purchase_date_dropped_purchase_infinite.py
@ -1,23 +0,0 @@
-# Generated by Django 4.2.7 on 2024-01-03 21:27
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0033_alter_edition_unique_together"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="purchase",
-            name="date_dropped",
-            field=models.DateField(blank=True, null=True),
-        ),
-        migrations.AddField(
-            model_name="purchase",
-            name="infinite",
-            field=models.BooleanField(default=False),
-        ),
-    ]
--- a/games/migrations/0035_alter_session_device.py
+++ b/games/migrations/0035_alter_session_device.py
@ -1,25 +0,0 @@
-# Generated by Django 5.1 on 2024-08-11 15:50
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("games", "0034_purchase_date_dropped_purchase_infinite"),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name="session",
-            name="device",
-            field=models.ForeignKey(
-                blank=True,
-                default=None,
-                null=True,
-                on_delete=django.db.models.deletion.SET_DEFAULT,
-                to="games.device",
-            ),
-        ),
-    ]
--- a/games/migrations/0036_alter_edition_platform.py
+++ b/games/migrations/0036_alter_edition_platform.py
@ -1,19 +0,0 @@
-# Generated by Django 5.1 on 2024-08-11 16:48
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('games', '0035_alter_session_device'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='edition',
-            name='platform',
-            field=models.ForeignKey(blank=True, default=None, null=True, on_delete=django.db.models.deletion.SET_DEFAULT, to='games.platform'),
-        ),
-    ]
--- a/games/models.py
+++ b/games/models.py
@ -1,11 +1,11 @@
-from datetime import timedelta
-
-from django.core.exceptions import ValidationError
-from django.db import models
-from django.db.models import F, Sum
-from django.utils import timezone
+from datetime import datetime, timedelta
+from typing import Any
+from zoneinfo import ZoneInfo

 from common.time import format_duration
+from django.conf import settings
+from django.db import models
+from django.db.models import F, Manager, Sum


 class Game(models.Model):
@ -13,41 +13,53 @@ class Game(models.Model):
    sort_name = models.CharField(max_length=255, null=True, blank=True, default=None)
    year_released = models.IntegerField(null=True, blank=True, default=None)
    wikidata = models.CharField(max_length=50, null=True, blank=True, default=None)
-    created_at = models.DateTimeField(auto_now_add=True)
-
-    session_average: float | int | timedelta | None
-    session_count: int | None

    def __str__(self):
        return self.name

+    def save(self, *args, **kwargs):
+        def get_sort_name(name):
+            articles = ["a", "an", "the"]
+            name_parts = name.split()
+            first_word = name_parts[0].lower()
+            if first_word in articles:
+                return f"{' '.join(name_parts[1:])}, {name_parts[0]}"
+            else:
+                return name

-class Platform(models.Model):
-    name = models.CharField(max_length=255)
-    group = models.CharField(max_length=255, null=True, blank=True, default=None)
-    created_at = models.DateTimeField(auto_now_add=True)
-
-    def __str__(self):
-        return self.name
+        self.sort_name = get_sort_name(self.name)
+        super().save(*args, **kwargs)


 class Edition(models.Model):
    class Meta:
-        unique_together = [["name", "platform", "year_released"]]
+        unique_together = [["name", "platform"]]

-    game = models.ForeignKey(Game, on_delete=models.CASCADE)
+    game = models.ForeignKey("Game", on_delete=models.CASCADE)
    name = models.CharField(max_length=255)
    sort_name = models.CharField(max_length=255, null=True, blank=True, default=None)
    platform = models.ForeignKey(
-        Platform, on_delete=models.SET_DEFAULT, null=True, blank=True, default=None
+        "Platform", on_delete=models.CASCADE, null=True, blank=True, default=None
    )
    year_released = models.IntegerField(null=True, blank=True, default=None)
    wikidata = models.CharField(max_length=50, null=True, blank=True, default=None)
-    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.sort_name

+    def save(self, *args, **kwargs):
+        def get_sort_name(name):
+            articles = ["a", "an", "the"]
+            name_parts = name.split()
+            first_word = name_parts[0].lower()
+            if first_word in articles:
+                return f"{' '.join(name_parts[1:])}, {name_parts[0]}"
+            else:
+                return name
+
+        self.sort_name = get_sort_name(self.name)
+        super().save(*args, **kwargs)
+

 class PurchaseQueryset(models.QuerySet):
    def refunded(self):
@ -59,9 +71,6 @@ class PurchaseQueryset(models.QuerySet):
    def finished(self):
        return self.filter(date_finished__isnull=False)

-    def games_only(self):
-        return self.filter(type=Purchase.GAME)
-

 class Purchase(models.Model):
    PHYSICAL = "ph"
@ -82,69 +91,35 @@ class Purchase(models.Model):
        (DEMO, "Demo"),
        (PIRATED, "Pirated"),
    ]
-    GAME = "game"
-    DLC = "dlc"
-    SEASONPASS = "season_pass"
-    BATTLEPASS = "battle_pass"
-    TYPES = [
-        (GAME, "Game"),
-        (DLC, "DLC"),
-        (SEASONPASS, "Season Pass"),
-        (BATTLEPASS, "Battle Pass"),
-    ]

    objects = PurchaseQueryset().as_manager()

-    edition = models.ForeignKey(Edition, on_delete=models.CASCADE)
+    edition = models.ForeignKey("Edition", on_delete=models.CASCADE)
    platform = models.ForeignKey(
-        Platform, on_delete=models.CASCADE, default=None, null=True, blank=True
+        "Platform", on_delete=models.CASCADE, default=None, null=True, blank=True
    )
    date_purchased = models.DateField()
    date_refunded = models.DateField(blank=True, null=True)
    date_finished = models.DateField(blank=True, null=True)
-    date_dropped = models.DateField(blank=True, null=True)
-    infinite = models.BooleanField(default=False)
    price = models.IntegerField(default=0)
    price_currency = models.CharField(max_length=3, default="USD")
    ownership_type = models.CharField(
        max_length=2, choices=OWNERSHIP_TYPES, default=DIGITAL
    )
-    type = models.CharField(max_length=255, choices=TYPES, default=GAME)
-    name = models.CharField(max_length=255, default="", null=True, blank=True)
-    related_purchase = models.ForeignKey(
-        "self",
-        on_delete=models.SET_NULL,
-        default=None,
-        null=True,
-        blank=True,
-        related_name="related_purchases",
-    )
-    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
-        additional_info = [
-            self.get_type_display() if self.type != Purchase.GAME else "",
-            (
-                f"{self.edition.platform} version on {self.platform}"
-                if self.platform != self.edition.platform
-                else self.platform
-            ),
-            self.edition.year_released,
-            self.get_ownership_type_display(),
-        ]
-        return f"{self.edition} ({', '.join(filter(None, map(str, additional_info)))})"
+        platform_info = self.platform
+        if self.platform != self.edition.platform:
+            platform_info = f"{self.edition.platform} version on {self.platform}"
+        return f"{self.edition} ({platform_info}, {self.edition.year_released}, {self.get_ownership_type_display()})"

-    def is_game(self):
-        return self.type == self.GAME

-    def save(self, *args, **kwargs):
-        if self.type == Purchase.GAME:
-            self.name = ""
-        elif self.type != Purchase.GAME and not self.related_purchase:
-            raise ValidationError(
-                f"{self.get_type_display()} must have a related purchase."
-            )
-        super().save(*args, **kwargs)
+class Platform(models.Model):
+    name = models.CharField(max_length=255)
+    group = models.CharField(max_length=255, null=True, blank=True, default=None)
+
+    def __str__(self):
+        return self.name


 class SessionQuerySet(models.QuerySet):
@ -157,56 +132,38 @@ class SessionQuerySet(models.QuerySet):
        )
        return result["duration"]

-    def calculated_duration_formatted(self):
-        return format_duration(self.calculated_duration_unformatted())
-
-    def calculated_duration_unformatted(self):
-        result = self.aggregate(duration=Sum(F("duration_calculated")))
-        return result["duration"]
-
-    def without_manual(self):
-        return self.exclude(duration_calculated__iexact=0)
-
-    def only_manual(self):
-        return self.filter(duration_calculated__iexact=0)
-

 class Session(models.Model):
-    class Meta:
-        get_latest_by = "timestamp_start"
-
-    purchase = models.ForeignKey(Purchase, on_delete=models.CASCADE)
+    purchase = models.ForeignKey("Purchase", on_delete=models.CASCADE)
    timestamp_start = models.DateTimeField()
    timestamp_end = models.DateTimeField(blank=True, null=True)
    duration_manual = models.DurationField(blank=True, null=True, default=timedelta(0))
    duration_calculated = models.DurationField(blank=True, null=True)
    device = models.ForeignKey(
        "Device",
-        on_delete=models.SET_DEFAULT,
+        on_delete=models.CASCADE,
        null=True,
        blank=True,
        default=None,
    )
    note = models.TextField(blank=True, null=True)
-    created_at = models.DateTimeField(auto_now_add=True)
-    modified_at = models.DateTimeField(auto_now=True)

    objects = SessionQuerySet.as_manager()

    def __str__(self):
-        mark = ", manual" if self.is_manual() else ""
+        mark = ", manual" if self.duration_manual != None else ""
        return f"{str(self.purchase)} {str(self.timestamp_start.date())} ({self.duration_formatted()}{mark})"

    def finish_now(self):
-        self.timestamp_end = timezone.now()
+        self.timestamp_end = datetime.now(ZoneInfo(settings.TIME_ZONE))

    def start_now():
-        self.timestamp_start = timezone.now()
+        self.timestamp_start = datetime.now(ZoneInfo(settings.TIME_ZONE))

    def duration_seconds(self) -> timedelta:
        manual = timedelta(0)
        calculated = timedelta(0)
-        if self.is_manual() and isinstance(self.duration_manual, timedelta):
+        if not self.duration_manual in (None, 0, timedelta(0)):
            manual = self.duration_manual
        if self.timestamp_end != None and self.timestamp_start != None:
            calculated = self.timestamp_end - self.timestamp_start
@ -216,22 +173,16 @@ class Session(models.Model):
        result = format_duration(self.duration_seconds(), "%02.0H:%02.0m")
        return result

-    def is_manual(self) -> bool:
-        return not self.duration_manual == timedelta(0)
-
    @property
    def duration_sum(self) -> str:
        return Session.objects.all().total_duration_formatted()

-    def save(self, *args, **kwargs) -> None:
+    def save(self, *args, **kwargs):
        if self.timestamp_start != None and self.timestamp_end != None:
            self.duration_calculated = self.timestamp_end - self.timestamp_start
        else:
            self.duration_calculated = timedelta(0)

-        if not isinstance(self.duration_manual, timedelta):
-            self.duration_manual = timedelta(0)
-
        if not self.device:
            default_device, _ = Device.objects.get_or_create(
                type=Device.UNKNOWN, defaults={"name": "Unknown"}
@ -257,7 +208,6 @@ class Device(models.Model):
    ]
    name = models.CharField(max_length=255)
    type = models.CharField(max_length=3, choices=DEVICE_TYPES, default=UNKNOWN)
-    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f"{self.name} ({self.get_type_display()})"
--- a/games/schema.py
+++ b/games/schema.py
@ -1,30 +0,0 @@
-import graphene
-
-from games.graphql.mutations import GameMutation
-from games.graphql.queries import (
-    DeviceQuery,
-    EditionQuery,
-    GameQuery,
-    PlatformQuery,
-    PurchaseQuery,
-    SessionQuery,
-)
-
-
-class Query(
-    GameQuery,
-    EditionQuery,
-    DeviceQuery,
-    PlatformQuery,
-    PurchaseQuery,
-    SessionQuery,
-    graphene.ObjectType,
-):
-    pass
-
-
-class Mutation(GameMutation, graphene.ObjectType):
-    pass
-
-
-schema = graphene.Schema(query=Query, mutation=Mutation)
--- a/games/static/base.css
+++ b/games/static/base.css
--- a/games/static/fonts/IBMPlexSansCondensed-Regular.woff2
+++ b/games/static/fonts/IBMPlexSansCondensed-Regular.woff2
--- a/games/static/fonts/IBMPlexSerif-Bold.woff2
+++ b/games/static/fonts/IBMPlexSerif-Bold.woff2
--- a/games/static/js/add_edition.js
+++ b/games/static/js/add_edition.js
@ -1,24 +1,24 @@
-import { syncSelectInputUntilChanged } from "./utils.js";
+import { syncSelectInputUntilChanged } from './utils.js';

 let syncData = [
  {
-    source: "#id_game",
-    source_value: "dataset.name",
-    target: "#id_name",
-    target_value: "value",
+    "source": "#id_game",
+    "source_value": "dataset.name",
+    "target": "#id_name",
+    "target_value": "value"
  },
  {
-    source: "#id_game",
-    source_value: "textContent",
-    target: "#id_sort_name",
-    target_value: "value",
+    "source": "#id_game",
+    "source_value": "textContent",
+    "target": "#id_sort_name",
+    "target_value": "value"
  },
  {
-    source: "#id_game",
-    source_value: "dataset.year",
-    target: "#id_year_released",
-    target_value: "value",
-  },
-];
+    "source": "#id_game",
+    "source_value": "dataset.year",
+    "target": "#id_year_released",
+    "target_value": "value"
+  },  
+]

 syncSelectInputUntilChanged(syncData, "form");
--- a/games/static/js/add_game.js
+++ b/games/static/js/add_game.js
@ -1,12 +1,12 @@
-import { syncSelectInputUntilChanged } from "./utils.js";
+import { syncSelectInputUntilChanged } from './utils.js'

 let syncData = [
  {
-    source: "#id_name",
-    source_value: "value",
-    target: "#id_sort_name",
-    target_value: "value",
-  },
-];
+    "source": "#id_name",
+    "source_value": "value",
+    "target": "#id_sort_name",
+    "target_value": "value"
+  }
+]

-syncSelectInputUntilChanged(syncData, "form");
+syncSelectInputUntilChanged(syncData, "form")
--- a/games/static/js/add_purchase.js
+++ b/games/static/js/add_purchase.js
@ -1,47 +1,12 @@
-import {
-  syncSelectInputUntilChanged,
-  getEl,
-  disableElementsWhenTrue,
-  disableElementsWhenValueNotEqual,
-} from "./utils.js";
+import { syncSelectInputUntilChanged } from './utils.js'

 let syncData = [
  {
-    source: "#id_edition",
-    source_value: "dataset.platform",
-    target: "#id_platform",
-    target_value: "value",
-  },
-];
-
-syncSelectInputUntilChanged(syncData, "form");
-
-function setupElementHandlers() {
-  disableElementsWhenTrue("#id_type", "game", [
-    "#id_name",
-    "#id_related_purchase",
-  ]);
-  disableElementsWhenValueNotEqual(
-    "#id_type",
-    ["game", "dlc"],
-    ["#id_date_finished"]
-  );
-}
-
-document.addEventListener("DOMContentLoaded", setupElementHandlers);
-document.addEventListener("htmx:afterSwap", setupElementHandlers);
-getEl("#id_type").onchange = () => {
-  setupElementHandlers();
-};
-
-document.body.addEventListener("htmx:beforeRequest", function (event) {
-  // Assuming 'Purchase1' is the element that triggers the HTMX request
-  if (event.target.id === "id_edition") {
-    var idEditionValue = document.getElementById("id_edition").value;
-
-    // Condition to check - replace this with your actual logic
-    if (idEditionValue != "") {
-      event.preventDefault(); // This cancels the HTMX request
-    }
+    "source": "#id_edition",
+    "source_value": "dataset.platform",
+    "target": "#id_platform",
+    "target_value": "value"
  }
-});
+]
+
+syncSelectInputUntilChanged(syncData, "form")
--- a/games/static/js/add_session.js
+++ b/games/static/js/add_session.js
@ -7,14 +7,10 @@ for (let button of document.querySelectorAll("[data-target]")) {
  button.addEventListener("click", (event) => {
    event.preventDefault();
    if (type == "now") {
-      targetElement.value = toISOUTCString(new Date());
+      targetElement.value = toISOUTCString(new Date);
    } else if (type == "copy") {
-      const oppositeName =
-        targetElement.name == "timestamp_start"
-          ? "timestamp_end"
-          : "timestamp_start";
-      document.querySelector(`[name='${oppositeName}']`).value =
-        targetElement.value;
+      const oppositeName = targetElement.name == "timestamp_start" ? "timestamp_end" : "timestamp_start";
+      document.querySelector(`[name='${oppositeName}']`).value = targetElement.value;
    } else if (type == "toggle") {
      if (targetElement.type == "datetime-local") targetElement.type = "text";
      else targetElement.type = "datetime-local";
--- a/games/static/js/utils.js
+++ b/games/static/js/utils.js
@ -75,10 +75,7 @@ function syncSelectInputUntilChanged(syncData, parentSelector = document) {
 * @param {string} property - The property to retrieve the value from.
 */
 function getValueFromProperty(sourceElement, property) {
-  let source =
-    sourceElement instanceof HTMLSelectElement
-      ? sourceElement.selectedOptions[0]
-      : sourceElement;
+  let source = (sourceElement instanceof HTMLSelectElement) ? sourceElement.selectedOptions[0] : sourceElement
  if (property.startsWith("dataset.")) {
    let datasetKey = property.slice(8); // Remove 'dataset.' part
    return source.dataset[datasetKey];
@ -90,118 +87,4 @@ function getValueFromProperty(sourceElement, property) {
  }
 }

-/**
- * @description Returns a single element by name.
- * @param {string} selector The selector to look for.
- */
-function getEl(selector) {
-  if (selector.startsWith("#")) {
-    return document.getElementById(selector.slice(1));
-  } else if (selector.startsWith(".")) {
-    return document.getElementsByClassName(selector);
-  } else {
-    return document.getElementsByTagName(selector);
-  }
-}
-
-/**
- * @description Applies different behaviors to elements based on multiple conditional configurations.
- * Each configuration is an array containing a condition function, an array of target element selectors,
- * and two callback functions for handling matched and unmatched conditions.
- * @param {...Array} configs Each configuration is an array of the form:
- *   - 0: {function(): boolean} condition - Function that returns true or false based on a condition.
- *   - 1: {string[]} targetElements - Array of CSS selectors for target elements.
- *   - 2: {function(HTMLElement): void} callbackfn1 - Function to execute when condition is true.
- *   - 3: {function(HTMLElement): void} callbackfn2 - Function to execute when condition is false.
- */
-function conditionalElementHandler(...configs) {
-  configs.forEach(([condition, targetElements, callbackfn1, callbackfn2]) => {
-    if (condition()) {
-      targetElements.forEach((elementName) => {
-        let el = getEl(elementName);
-        if (el === null) {
-          console.error(`Element ${elementName} doesn't exist.`);
-        } else {
-          callbackfn1(el);
-        }
-      });
-    } else {
-      targetElements.forEach((elementName) => {
-        let el = getEl(elementName);
-        if (el === null) {
-          console.error(`Element ${elementName} doesn't exist.`);
-        } else {
-          callbackfn2(el);
-        }
-      });
-    }
-  });
-}
-
-function disableElementsWhenValueNotEqual(
-  targetSelect,
-  targetValue,
-  elementList
-) {
-  return conditionalElementHandler([
-    () => {
-      let target = getEl(targetSelect);
-      console.debug(
-        `${disableElementsWhenTrue.name}: triggered on ${target.id}`
-      );
-      console.debug(`
-      ${disableElementsWhenTrue.name}: matching against value(s): ${targetValue}`);
-      if (targetValue instanceof Array) {
-        if (targetValue.every((value) => target.value != value)) {
-          console.debug(
-            `${disableElementsWhenTrue.name}: none of the values is equal to ${target.value}, returning true.`
-          );
-          return true;
-        }
-      } else {
-        console.debug(
-          `${disableElementsWhenTrue.name}: none of the values is equal to ${target.value}, returning true.`
-        );
-        return target.value != targetValue;
-      }
-    },
-    elementList,
-    (el) => {
-      console.debug(
-        `${disableElementsWhenTrue.name}: evaluated true, disabling ${el.id}.`
-      );
-      el.disabled = "disabled";
-    },
-    (el) => {
-      console.debug(
-        `${disableElementsWhenTrue.name}: evaluated false, NOT disabling ${el.id}.`
-      );
-      el.disabled = "";
-    },
-  ]);
-}
-
-function disableElementsWhenTrue(targetSelect, targetValue, elementList) {
-  return conditionalElementHandler([
-    () => {
-      return getEl(targetSelect).value == targetValue;
-    },
-    elementList,
-    (el) => {
-      el.disabled = "disabled";
-    },
-    (el) => {
-      el.disabled = "";
-    },
-  ]);
-}
-
-export {
-  toISOUTCString,
-  syncSelectInputUntilChanged,
-  getEl,
-  conditionalElementHandler,
-  disableElementsWhenValueNotEqual,
-  disableElementsWhenTrue,
-  getValueFromProperty,
-};
+export { toISOUTCString, syncSelectInputUntilChanged };
--- a/games/templates/add.html
+++ b/games/templates/add.html
@ -1,24 +1,25 @@
 {% extends "base.html" %}
 {% load static %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% block content %}
    <form method="post" enctype="multipart/form-data">
        <table class="mx-auto">
-            {% csrf_token %}
-            {{ form.as_table }}
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit" value="Submit" />
-                </td>
-            </tr>
+        {% csrf_token %}
+
+        {{ form.as_table }}
+        <tr>
+            <td></td>
+            <td><input type="submit" value="Submit"/></td>
+        </tr>
        </table>
    </form>
 {% endblock content %}
+
 {% block scripts %}
    {% if script_name %}
        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
    {% endif %}
 {% endblock scripts %}
+        
--- a/games/templates/add_edition.html
+++ b/games/templates/add_edition.html
@ -1,32 +1,29 @@
 {% extends "base.html" %}
 {% load static %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% block content %}
    <form method="post" enctype="multipart/form-data">
        <table class="mx-auto">
-            {% csrf_token %}
-            {{ form.as_table }}
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit" name="submit" value="Submit" />
-                </td>
-            </tr>
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit"
-                           name="submit_and_redirect"
-                           value="Submit & Create Purchase" />
-                </td>
-            </tr>
+        {% csrf_token %}
+
+        {{ form.as_table }}
+        <tr>
+            <td></td>
+            <td><input type="submit" name="submit" value="Submit"/></td>
+        </tr>
+        <tr>
+            <td></td>
+            <td><input type="submit" name="submit_and_redirect" value="Submit & Create Purchase"/></td>
+        </tr>
        </table>
    </form>
 {% endblock content %}
+
 {% block scripts %}
    {% if script_name %}
        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
    {% endif %}
 {% endblock scripts %}
+        
--- a/games/templates/add_game.html
+++ b/games/templates/add_game.html
@ -1,32 +1,29 @@
 {% extends "base.html" %}
 {% load static %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% block content %}
    <form method="post" enctype="multipart/form-data">
        <table class="mx-auto">
-            {% csrf_token %}
-            {{ form.as_table }}
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit" name="submit" value="Submit" />
-                </td>
-            </tr>
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit"
-                           name="submit_and_redirect"
-                           value="Submit & Create Edition" />
-                </td>
-            </tr>
+        {% csrf_token %}
+
+        {{ form.as_table }}
+        <tr>
+            <td></td>
+            <td><input type="submit" name="submit" value="Submit"/></td>
+        </tr>
+        <tr>
+            <td></td>
+            <td><input type="submit" name="submit_and_redirect" value="Submit & Create Edition"/></td>
+        </tr>
        </table>
    </form>
 {% endblock content %}
+
 {% block scripts %}
    {% if script_name %}
        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
    {% endif %}
 {% endblock scripts %}
+        
--- a/games/templates/add_purchase.html
+++ b/games/templates/add_purchase.html
@ -1,42 +1,29 @@
 {% extends "base.html" %}
 {% load static %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% block content %}
    <form method="post" enctype="multipart/form-data">
        <table class="mx-auto">
-            {% csrf_token %}
-            {{ form.as_table }}
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit" name="submit" value="Submit" />
-                </td>
-            </tr>
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit"
-                           name="submit_and_redirect"
-                           value="Submit & Create Session" />
-                </td>
-            </tr>
-            {% if purchase_id %}
-                <tr>
-                    <td></td>
-                    <td>
-                        <a href="{% url 'delete_purchase' purchase_id %}"
-                           class="text-red-600"
-                           onclick="return confirm('Are you sure you want to delete this purchase?');">Delete</a>
-                    </td>
-                </tr>
-            {% endif %}
+        {% csrf_token %}
+
+        {{ form.as_table }}
+        <tr>
+            <td></td>
+            <td><input type="submit" name="submit" value="Submit"/></td>
+        </tr>
+        <tr>
+            <td></td>
+            <td><input type="submit" name="submit_and_redirect" value="Submit & Create Session"/></td>
+        </tr>
        </table>
    </form>
 {% endblock content %}
+
 {% block scripts %}
    {% if script_name %}
        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
    {% endif %}
 {% endblock scripts %}
+        
--- a/games/templates/add_session.html
+++ b/games/templates/add_session.html
@ -1,38 +1,35 @@
 {% extends "base.html" %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% block content %}
    <form method="post" enctype="multipart/form-data">
        <table class="mx-auto">
-            {% csrf_token %}
-            {% for field in form %}
-                <tr>
-                    <th>{{ field.label_tag }}</th>
-                    {% if field.name == "note" %}
-                        <td>{{ field }}</td>
-                    {% else %}
-                        <td>{{ field }}</td>
-                    {% endif %}
-                    {% if field.name == "timestamp_start" or field.name == "timestamp_end" %}
-                        <td>
-                            <div class="basic-button-container" hx-boost="false">
-                                <button class="basic-button" data-target="{{ field.name }}" data-type="now">Set to now</button>
-                                <button class="basic-button"
-                                        data-target="{{ field.name }}"
-                                        data-type="toggle">Toggle text</button>
-                                <button class="basic-button" data-target="{{ field.name }}" data-type="copy">Copy</button>
-                            </div>
-                        </td>
-                    {% endif %}
-                </tr>
-            {% endfor %}
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit" value="Submit" />
-                </td>
-            </tr>
+        {% csrf_token %}
+
+        {% for field in form %}
+        <tr>
+            <th>{{ field.label_tag }}</th>
+            {% if field.name == "note" %}
+            <td>{{ field }}</td>
+            {% else %}
+            <td>{{ field }}</td>
+            {% endif %}
+            {% if field.name == "timestamp_start" or field.name == "timestamp_end" %}
+            <td>
+                <div class="basic-button-container">
+                    <button class="basic-button" data-target="{{field.name}}" data-type="now">Set to now</button>
+                    <button class="basic-button" data-target="{{field.name}}" data-type="toggle">Toggle text</button>
+                    <button class="basic-button" data-target="{{field.name}}" data-type="copy">Copy</button>
+                </div>
+            </td>
+            {% endif %}
+        </tr>
+        {% endfor %}
+        <tr>
+            <td></td>
+            <td><input type="submit" value="Submit"/></td>
+        </tr>
        </table>
    </form>
    {% load static %}
--- a/games/templates/base.html
+++ b/games/templates/base.html
@ -1,90 +1,72 @@
-{% load django_htmx %}
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+
    {% load static %}
+
    <head>
-        <meta charset="utf-8" />
-        <meta name="description" content="Self-hosted time-tracker." />
-        <meta name="keywords" content="time, tracking, video games, self-hosted" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>Timetracker -
-            {% block title %}
-                Untitled
-            {% endblock title %}
-        </title>
+        <meta charset="utf-8"/>
+        <meta name="description" content="Self-hosted time-tracker."/>
+        <meta name="keywords" content="time, tracking, video games, self-hosted"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <title>Timetracker - {% block title %}Untitled{% endblock title %}</title>
        <script src="{% static 'js/htmx.min.js' %}"></script>
-        {% django_htmx_script %}
        <link rel="stylesheet" href="{% static 'base.css' %}" />
-        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
-        <script>
-        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-                document.documentElement.classList.add('dark');
-            } else {
-                document.documentElement.classList.remove('dark')
-            }
-        </script>
    </head>
-    <body hx-indicator="#indicator">
-        <img id="indicator"
-             src="{% static 'icons/loading.png' %}"
-             class="absolute right-3 top-3 animate-spin htmx-indicator"
-             height="24"
-             width="24"
-             alt="loading indicator" />
-        <div class="flex flex-col min-h-screen">
-            {% include "navbar.html" %}
-            <div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">
-                {% block content %}
-                    No content here.
-                {% endblock content %}
-            </div>
-            {% load version %}
-            <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
+    
+    <body class="dark">
+        <img id="indicator" src="{% static 'icons/loading.png' %}" class="absolute right-3 top-3 animate-spin htmx-indicator" />
+        <div class="dark:bg-gray-800 min-h-screen">
+            <nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
+                <div class="container flex flex-wrap items-center justify-between mx-auto">
+                    <a href="{% url 'list_sessions_recent' %}" class="flex items-center">
+                        <span class="text-4xl"><img src="{% static 'icons/schedule.png' %}" width="48" class="mr-4" /></span>
+                        <span class="self-center text-xl font-semibold whitespace-nowrap text-white">Timetracker</span>
+                    </a>
+                    <div class="w-full md:block md:w-auto">
+                        <ul
+                            class="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
+                            <li class="relative group">
+                                <a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_game' %}">New</a>
+                                <ul class="absolute hidden text-gray-700 pt-1 group-hover:block  w-auto whitespace-nowrap">
+                                    {% if purchase_available %}
+                                        <li><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="{% url 'add_device' %}">Device</a></li>
+                                    {% endif %}
+                                    <li><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="{% url 'add_game' %}">Game</a></li>
+                                    {% if game_available and platform_available %}
+                                        <li><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="{% url 'add_edition' %}">Edition</a></li>
+                                    {% endif %}
+                                    <li><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="{% url 'add_platform' %}">Platform</a></li>
+                                    {% if edition_available %}
+                                        <li><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="{% url 'add_purchase' %}">Purchase</a></li>
+                                    {% endif %}
+                                    {% if purchase_available %}
+                                        <li><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="{% url 'add_session' %}">Session</a></li>
+                                    {% endif %}
+                                    
+                                </ul>
+                            </li>
+                            {% if session_count > 0 %}
+                                    <li class="relative group">
+                                        <a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'stats_current_year' %}">Stats</a>
+                                        <ul class="absolute hidden text-gray-700 pt-1 group-hover:block">
+                                            {% for year in stats_dropdown_year_range %}
+                                                <li>
+                                                    <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="{% url 'stats_by_year' year %}">{{ year }}</a>
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    </li>
+                                <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'list_sessions' %}">All Sessions</a></li>
+                            {% endif %}
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+            {% block content %}No content here.{% endblock content %}
        </div>
-        {% block scripts %}
-        {% endblock scripts %}
-        <script>
-            var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
-            var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-
-        // Change the icons inside the button based on previous settings
-            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-                themeToggleLightIcon.classList.remove('hidden');
-            } else {
-                themeToggleDarkIcon.classList.remove('hidden');
-            }
-
-            var themeToggleBtn = document.getElementById('theme-toggle');
-
-            themeToggleBtn.addEventListener('click', function () {
-
-            // toggle icons inside button
-                themeToggleDarkIcon.classList.toggle('hidden');
-                themeToggleLightIcon.classList.toggle('hidden');
-
-            // if set via local storage previously
-                if (localStorage.getItem('color-theme')) {
-                    if (localStorage.getItem('color-theme') === 'light') {
-                        document.documentElement.classList.add('dark');
-                        localStorage.setItem('color-theme', 'dark');
-                    } else {
-                        document.documentElement.classList.remove('dark');
-                        localStorage.setItem('color-theme', 'light');
-                    }
-
-                // if NOT set via local storage previously
-                } else {
-                    if (document.documentElement.classList.contains('dark')) {
-                        document.documentElement.classList.remove('dark');
-                        localStorage.setItem('color-theme', 'light');
-                    } else {
-                        document.documentElement.classList.add('dark');
-                        localStorage.setItem('color-theme', 'dark');
-                    }
-                }
-
-            });
-        </script>
+        {% load version %}
+        <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
+    {% block scripts %}{% endblock scripts %}
    </body>
+
 </html>
--- a/games/templates/components/button.html
+++ b/games/templates/components/button.html
@ -0,0 +1,26 @@
+{% comment %} 
+title
+text
+{% endcomment %}
+<a
+  href="{{ link }}"
+  title="{{ title }}"
+  class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-sm"
+>
+  {% comment %} <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="self-center w-6 h-6 inline"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
+      /> 
+    </svg>
+    {% endcomment %}
+  {{ text }}
+</a>
--- a/games/templates/components/button_start.html
+++ b/games/templates/components/button_start.html
@ -0,0 +1,26 @@
+{% comment %} 
+title
+text
+{% endcomment %}
+<button
+  type="button"
+  title="{{ title }}"
+  autofocus
+  class="truncate max-w-xs sm:max-w-md lg:max-w-lg py-1 px-2 bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="self-center w-6 h-6 inline"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
+    />
+  </svg>
+  {{ text }}
+</button>
--- a/games/templates/components/edit_button.html
+++ b/games/templates/components/edit_button.html
@ -0,0 +1,21 @@
+<a href="{{ edit_url }}">
+  <button
+    type="button"
+    title="Edit"
+    class="ml-1 py-1 px-2 flex justify-center items-center bg-violet-600 hover:bg-violet-700 focus:ring-violet-500 focus:ring-offset-violet-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 w-7 h-4 rounded-lg"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class="w-5 h-5"
+    >
+      <path
+        d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
+      />
+      <path
+        d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
+      />
+    </svg>
+  </button>
+</a>
--- a/games/templates/cotton/button.html
+++ b/games/templates/cotton/button.html
@ -1,6 +0,0 @@
-<c-vars color="blue" size="base" />
-<button type="button"
-        title="{{ title }}"
-        class=" {% if color == "blue" %} bg-blue-700 dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 hover:bg-blue-800 text-white {% elif color == "red" %} bg-red-700 dark:bg-red-600 dark:focus:ring-red-900 dark:hover:bg-red-700 focus:ring-red-300 hover:bg-red-800 text-white {% elif color == "gray" %} bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-400 focus:ring-gray-100 hover:bg-gray-100 hover:text-blue-700 text-gray-900 border {% elif color == "green" %} bg-green-700 dark:bg-green-600 dark:focus:ring-green-800 dark:hover:bg-green-700 focus:ring-green-300 hover:bg-green-800 text-white {% endif %} focus:outline-none focus:ring-4 font-medium mb-2 me-2 rounded-lg {% if size == "xs" %} px-3 py-2 text-xs {% elif size == "sm" %} px-3 py-2 text-sm {% elif size == "base" %} px-5 py-2.5 text-sm {% elif size == "lg" %} px-5 py-3 text-base {% elif size == "xl" %} px-6 py-3.5 text-base {% endif %} {% if icon %} inline-flex text-center items-center gap-2 {% else %} {% endif %} ">
-    {{ slot }}
-</button>
--- a/games/templates/cotton/button_group.html
+++ b/games/templates/cotton/button_group.html
@ -1,8 +0,0 @@
-<div class="inline-flex rounded-md shadow-sm" role="group">
-    {% if slot %}{{ slot }}{% endif %}
-    {% for button in buttons %}
-        {% if button.slot %}
-            <c-button-group-button-sm :href=button.href :slot=button.slot :color=button.color :hover=button.hover :title=button.title />
-        {% endif %}
-    {% endfor %}
-</div>
--- a/games/templates/cotton/button_group_button_sm.html
+++ b/games/templates/cotton/button_group_button_sm.html
@ -1,23 +0,0 @@
-<c-vars color="gray" />
-<a href="{{ href }}"
-   class="[&:first-of-type_button]:rounded-s-lg [&:last-of-type_button]:rounded-e-lg">
-    {% if color == "gray" %}
-        <button type="button"
-                title="{{ title }}"
-                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
-            {{ slot }}
-        </button>
-    {% elif color == "red" %}
-        <button type="button"
-                title="{{ title }}"
-                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-red-500 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-red-700 dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
-            {{ slot }}
-        </button>
-    {% elif color == "green" %}
-        <button type="button"
-                title="{{ title }}"
-                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-green-500 hover:border-green-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-green-700 dark:hover:bg-green-600 dark:focus:ring-green-500 dark:focus:text-white">
-            {{ slot }}
-        </button>
-    {% endif %}
-</a>
--- a/games/templates/cotton/button_old.html
+++ b/games/templates/cotton/button_old.html
@ -1,13 +0,0 @@
-{% comment %}
-title
-text
-{% endcomment %}
-<a href="{{ link }}"
-   title="{{ title }}"
-   class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-sm">
-    {% comment %} <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="self-center w-6 h-6 inline">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" /> 
-    </svg>
-    {% endcomment %}
-    {{ text }}
-</a>
--- a/games/templates/cotton/button_start.html
+++ b/games/templates/cotton/button_start.html
@ -1,18 +0,0 @@
-{% comment %}
-title
-text
-{% endcomment %}
-<button type="button"
-        title="{{ title }}"
-        autofocus
-        class="truncate max-w-xs sm:max-w-md lg:max-w-lg py-1 px-2 bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg">
-    <svg xmlns="http://www.w3.org/2000/svg"
-         fill="none"
-         viewBox="0 0 24 24"
-         stroke-width="1.5"
-         stroke="currentColor"
-         class="self-center w-6 h-6 inline">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
-    </svg>
-    {{ text }}
-</button>
--- a/games/templates/cotton/gamelink.html
+++ b/games/templates/cotton/gamelink.html
@ -1,10 +0,0 @@
-<span class="truncate-container">
-    <a class="underline decoration-slate-500 sm:decoration-2"
-       href="{% url 'view_game' game_id %}">
-        {% if slot %}
-            {{ slot }}
-        {% else %}
-            {{ name }}
-        {% endif %}
-    </a>
-</span>
--- a/games/templates/cotton/h1.html
+++ b/games/templates/cotton/h1.html
@ -1,8 +0,0 @@
-<h1 class="{% if badge %}flex items-center {% endif %}mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white">
-    {{ slot }}
-    {% if badge %}
-        <span class="bg-blue-100 text-blue-800 text-2xl font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-2">
-            {{ badge }}
-        </span>
-    {% endif %}
-</h1>
--- a/games/templates/cotton/icon/checkmark.html
+++ b/games/templates/cotton/icon/checkmark.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 43.470703 8.9863281 A 1.50015 1.50015 0 0 0 42.439453 9.4394531 L 16.5 35.378906 L 5.5605469 24.439453 A 1.50015 1.50015 0 1 0 3.4394531 26.560547 L 15.439453 38.560547 A 1.50015 1.50015 0 0 0 17.560547 38.560547 L 44.560547 11.560547 A 1.50015 1.50015 0 0 0 43.470703 8.9863281 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/delete.html
+++ b/games/templates/cotton/icon/delete.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 24 4 C 20.491685 4 17.570396 6.6214322 17.080078 10 L 10.238281 10 A 1.50015 1.50015 0 0 0 9.9804688 9.9785156 A 1.50015 1.50015 0 0 0 9.7578125 10 L 6.5 10 A 1.50015 1.50015 0 1 0 6.5 13 L 8.6386719 13 L 11.15625 39.029297 C 11.427329 41.835926 13.811782 44 16.630859 44 L 31.367188 44 C 34.186411 44 36.570826 41.836168 36.841797 39.029297 L 39.361328 13 L 41.5 13 A 1.50015 1.50015 0 1 0 41.5 10 L 38.244141 10 A 1.50015 1.50015 0 0 0 37.763672 10 L 30.919922 10 C 30.429604 6.6214322 27.508315 4 24 4 z M 24 7 C 25.879156 7 27.420767 8.2681608 27.861328 10 L 20.138672 10 C 20.579233 8.2681608 22.120844 7 24 7 z M 11.650391 13 L 36.347656 13 L 33.855469 38.740234 C 33.730439 40.035363 32.667963 41 31.367188 41 L 16.630859 41 C 15.331937 41 14.267499 40.033606 14.142578 38.740234 L 11.650391 13 z M 20.476562 17.978516 A 1.50015 1.50015 0 0 0 19 19.5 L 19 34.5 A 1.50015 1.50015 0 1 0 22 34.5 L 22 19.5 A 1.50015 1.50015 0 0 0 20.476562 17.978516 z M 27.476562 17.978516 A 1.50015 1.50015 0 0 0 26 19.5 L 26 34.5 A 1.50015 1.50015 0 1 0 29 34.5 L 29 19.5 A 1.50015 1.50015 0 0 0 27.476562 17.978516 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/edit.html
+++ b/games/templates/cotton/icon/edit.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 40.5 6 C 40.11625 6 39.732453 6.1464531 39.439453 6.4394531 L 21.462891 24.417969 L 20 28 L 23.582031 26.537109 L 41.560547 8.5605469 C 42.145547 7.9745469 42.145547 7.0254531 41.560547 6.4394531 C 41.267547 6.1464531 40.88375 6 40.5 6 z M 12.5 7 C 9.4802259 7 7 9.4802259 7 12.5 L 7 35.5 C 7 38.519774 9.4802259 41 12.5 41 L 35.5 41 C 38.519774 41 41 38.519774 41 35.5 L 41 18.5 A 1.50015 1.50015 0 1 0 38 18.5 L 38 35.5 C 38 36.898226 36.898226 38 35.5 38 L 12.5 38 C 11.101774 38 10 36.898226 10 35.5 L 10 12.5 C 10 11.101774 11.101774 10 12.5 10 L 29.5 10 A 1.50015 1.50015 0 1 0 29.5 7 L 12.5 7 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/eject.html
+++ b/games/templates/cotton/icon/eject.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 24 5.0507812 C 22.945045 5.0507812 21.890232 5.4877258 21.160156 6.3613281 L 7.0566406 23.257812 C 5.2226244 25.45627 6.8812774 29 9.7441406 29 L 38.255859 29 C 41.119312 29 42.778426 25.453888 40.943359 23.255859 L 26.839844 6.3613281 C 26.109768 5.4877258 25.054955 5.0507812 24 5.0507812 z M 24 8.015625 C 24.194045 8.015625 24.387185 8.105759 24.537109 8.2851562 L 38.638672 25.179688 C 38.977605 25.585659 38.784407 26 38.255859 26 L 9.7441406 26 C 9.2150038 26 9.0213443 25.58723 9.3613281 25.179688 L 23.462891 8.2851562 C 23.612815 8.1057586 23.805955 8.015625 24 8.015625 z M 10.5 33 C 8.0324991 33 6 35.032499 6 37.5 L 6 38.5 C 6 40.967501 8.0324991 43 10.5 43 L 37.5 43 C 39.967501 43 42 40.967501 42 38.5 L 42 37.5 C 42 35.032499 39.967501 33 37.5 33 L 10.5 33 z M 10.5 36 L 37.5 36 C 38.346499 36 39 36.653501 39 37.5 L 39 38.5 C 39 39.346499 38.346499 40 37.5 40 L 10.5 40 C 9.6535009 40 9 39.346499 9 38.5 L 9 37.5 C 9 36.653501 9.6535009 36 10.5 36 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/end.html
+++ b/games/templates/cotton/icon/end.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 35.5 6 C 33.585045 6 32 7.5850452 32 9.5 L 32 19.365234 L 11.339844 6.6074219 C 9.0734225 5.2081236 6 6.9228749 6 9.5859375 L 6 38.414062 C 6 41.077126 9.0734225 42.791876 11.339844 41.392578 L 32 28.634766 L 32 38.5 C 32 40.414955 33.585045 42 35.5 42 L 38.5 42 C 40.414955 42 42 40.414955 42 38.5 L 42 9.5 C 42 7.5850452 40.414955 6 38.5 6 L 35.5 6 z M 35.5 9 L 38.5 9 C 38.795045 9 39 9.2049548 39 9.5 L 39 38.5 C 39 38.795045 38.795045 39 38.5 39 L 35.5 39 C 35.204955 39 35 38.795045 35 38.5 L 35 9.5 C 35 9.2049548 35.204955 9 35.5 9 z M 9.4765625 9.0566406 C 9.5668015 9.0647233 9.6637771 9.0984812 9.7636719 9.1601562 L 32 22.892578 L 32 25.107422 L 9.7636719 38.839844 C 9.364093 39.086546 9 38.883001 9 38.414062 L 9 9.5859375 C 9 9.3514688 9.091623 9.1841053 9.2324219 9.1054688 C 9.3028213 9.0661502 9.3863235 9.048558 9.4765625 9.0566406 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/finish.html
+++ b/games/templates/cotton/icon/finish.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 7.4765625 4.9785156 A 1.50015 1.50015 0 0 0 6 6.5 L 6 31.5 L 6 43.5 A 1.50015 1.50015 0 1 0 9 43.5 L 9 33 L 40.5 33 C 41.329 33 42 32.328 42 31.5 L 42 6.5 C 42 5.672 41.329 5 40.5 5 L 7.7460938 5 A 1.50015 1.50015 0 0 0 7.4765625 4.9785156 z M 16 8 L 24 8 L 24 15 L 32 15 L 32 8 L 39 8 L 39 15 L 32 15 L 32 23 L 39 23 L 39 30 L 32 30 L 32 23 L 24 23 L 24 30 L 16 30 L 16 23 L 9 23 L 9 15 L 16 15 L 16 8 z M 16 15 L 16 23 L 24 23 L 24 15 L 16 15 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/play.html
+++ b/games/templates/cotton/icon/play.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 11.396484 4.1113281 C 9.1042001 4.2020187 7 6.0721788 7 8.5917969 L 7 39.408203 C 7 42.767694 10.742758 44.971891 13.681641 43.34375 L 41.490234 27.935547 C 44.513674 26.260259 44.513674 21.739741 41.490234 20.064453 L 13.681641 4.65625 C 12.94692 4.2492148 12.160579 4.0810979 11.396484 4.1113281 z M 11.431641 7.0664062 C 11.690234 7.0652962 11.961284 7.1323321 12.226562 7.2792969 L 40.037109 22.6875 C 41.13567 23.296212 41.13567 24.703788 40.037109 25.3125 L 12.226562 40.720703 C 11.165446 41.308562 10 40.620712 10 39.408203 L 10 8.5917969 C 10 7.9855423 10.290709 7.5116121 10.714844 7.2617188 C 10.926911 7.136772 11.173048 7.0675163 11.431641 7.0664062 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/plus.html
+++ b/games/templates/cotton/icon/plus.html
@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     width="50"
-     height="50"
-     viewBox="0 0 48 48"
-     class="w-4 h-4">
-    <path fill="currentColor" d="M 23.976562 4.9785156 A 1.50015 1.50015 0 0 0 22.5 6.5 L 22.5 22.5 L 6.5 22.5 A 1.50015 1.50015 0 1 0 6.5 25.5 L 22.5 25.5 L 22.5 41.5 A 1.50015 1.50015 0 1 0 25.5 41.5 L 25.5 25.5 L 41.5 25.5 A 1.50015 1.50015 0 1 0 41.5 22.5 L 25.5 22.5 L 25.5 6.5 A 1.50015 1.50015 0 0 0 23.976562 4.9785156 z">
-    </path>
-</svg>
--- a/games/templates/cotton/icon/refund.html
+++ b/games/templates/cotton/icon/refund.html
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     x="0px"
-     y="0px"
-     viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
-    <path fill="currentColor" d="M 26 3 C 20.494917 3 16 7.494921 16 13 C 16 18.505079 20.494917 23 26 23 C 31.505083 23 36 18.505079 36 13 C 36 7.494921 31.505083 3 26 3 z M 26 6 C 29.883764 6 33 9.1162385 33 13 C 33 16.883762 29.883764 20 26 20 C 22.116236 20 19 16.883762 19 13 C 19 9.1162385 22.116236 6 26 6 z M 24.75 9 C 24.273 9 23.862531 9.3366875 23.769531 9.8046875 L 23.269531 12.304688 C 23.210531 12.598688 23.286562 12.903766 23.476562 13.134766 C 23.666562 13.366766 23.95 13.5 24.25 13.5 L 26.25 13.5 C 26.664 13.5 27 13.836 27 14.25 C 27 14.765 26.481 15 26 15 C 25.115 15 24.583922 14.685156 24.544922 14.660156 C 24.085922 14.363156 23.472969 14.489313 23.167969 14.945312 C 22.861969 15.405313 22.986313 16.026031 23.445312 16.332031 C 23.548313 16.400031 24.491 17 26 17 C 27.71 17 29 15.818 29 14.25 C 29 12.733 27.767 11.5 26.25 11.5 L 25.470703 11.5 L 25.570312 11 L 27.5 11 C 28.052 11 28.5 10.552 28.5 10 C 28.5 9.448 28.052 9 27.5 9 L 24.75 9 z M 41.613281 22.019531 C 40.493082 22.029231 39.429184 22.473279 38.484375 23.175781 C 37.470126 23.929243 34.418425 26.208042 31.777344 28.179688 C 31.204622 26.351508 29.505924 25 27.5 25 L 23.107422 25 C 20.296203 25 18.985532 24.772226 17.859375 24.533203 C 16.733218 24.29418 15.646783 24 13.826172 24 C 9.9413941 24 7.0123317 26.492986 5.09375 28.791016 C 3.1751683 31.089045 2.1347656 33.384766 2.1347656 33.384766 A 1.5002787 1.5002787 0 1 0 4.8652344 34.628906 C 4.8652344 34.628906 5.7643161 32.669814 7.3964844 30.714844 C 9.0286527 28.759873 11.25995 27 13.826172 27 C 15.347561 27 16.006735 27.20582 17.236328 27.466797 C 18.465921 27.727774 20.123641 28 23.107422 28 L 27.5 28 C 28.346499 28 29 28.653501 29 29.5 C 29 29.969499 28.794195 30.374296 28.470703 30.646484 C 28.470416 30.646699 28.429688 30.677734 28.429688 30.677734 A 1.5001988 1.5001988 0 0 0 28.345703 30.748047 A 1.5001988 1.5001988 0 0 0 28.34375 30.75 C 28.105295 30.908613 27.816466 31 27.5 31 L 20.5 31 A 1.50015 1.50015 0 1 0 20.5 34 L 27.5 34 C 28.440637 34 29.315307 33.701451 30.041016 33.199219 C 30.042186 33.198409 30.043753 33.198076 30.044922 33.197266 A 1.5001988 1.5001988 0 0 0 30.224609 33.082031 C 30.224609 33.082031 38.775959 26.696426 40.273438 25.583984 A 1.50015 1.50015 0 0 0 40.273438 25.582031 C 40.837627 25.162534 41.309824 25.022381 41.640625 25.019531 C 41.971426 25.016631 42.218287 25.096901 42.560547 25.439453 C 43.150922 26.029324 43.147391 26.935102 42.572266 27.533203 C 37.217133 32.036197 33.848465 35.036886 31.623047 36.794922 C 29.369881 38.574924 28.424996 39 27.5 39 C 23.847885 39 19.80067 38 15.5 38 C 13 38 11.242781 39.343609 10.300781 40.599609 C 9.3587815 41.855609 9.0449219 43.136719 9.0449219 43.136719 A 1.50015 1.50015 0 1 0 11.955078 43.863281 C 11.955078 43.863281 12.141219 43.144391 12.699219 42.400391 C 13.257219 41.656391 14 41 15.5 41 C 19.30733 41 23.336115 42 27.5 42 C 29.402004 42 31.084837 41.044435 33.482422 39.150391 C 35.849764 37.280238 39.175413 34.30991 44.498047 29.833984 A 1.50015 1.50015 0 0 0 44.681641 29.681641 C 44.688541 29.674741 44.690436 29.665143 44.697266 29.658203 L 44.701172 29.662109 L 44.753906 29.607422 A 1.50015 1.50015 0 0 0 45.083984 29.074219 C 46.330485 27.321792 46.248887 24.884269 44.681641 23.318359 C 43.8529 22.488911 42.73348 22.009881 41.613281 22.019531 z">
-    </path>
-</svg>
--- a/games/templates/cotton/popover.html
+++ b/games/templates/cotton/popover.html
@ -1,8 +0,0 @@
-<span data-popover-target={{ id }} class="{{ class }}">{{ wrapped_content|default:slot }}</span>
-<div data-popover
-     id="{{ id }}"
-     role="tooltip"
-     class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
-    <div class="px-3 py-2">{{ popover_content }}</div>
-    <div data-popper-arrow></div>
-</div>
--- a/games/templates/cotton/simple_table.html
+++ b/games/templates/cotton/simple_table.html
@ -1,55 +0,0 @@
-{% load param_utils %}
-<div class="shadow-md" hx-boost="false">
-    <div class="relative overflow-x-auto sm:rounded-t-lg">
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-            {% if header_action %}
-                <c-table-header>
-                {{ header_action }}
-                </c-table-header>
-            {% endif %}
-            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                <tr>
-                    {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
-                </tr>
-            </thead>
-            <tbody class="dark:divide-y">
-                {% for row in rows %}<c-table-row :data=row />{% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% if page_obj and elided_page_range %}
-        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
-             aria-label="Table navigation">
-            <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
-            <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
-                <li>
-                    {% if page_obj.has_previous %}
-                        <a href="?{% param_replace page=page_obj.previous_page_number %}"
-                           class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
-                    {% else %}
-                        <a aria-current="page"
-                           class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Previous</a>
-                    {% endif %}
-                    {% for page in elided_page_range %}
-                        <li>
-                            {% if page != page_obj.number %}
-                                <a href="?{% param_replace page=page %}"
-                                   class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a>
-                            {% else %}
-                                <a aria-current="page"
-                                   class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-white border bg-gray-400 border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200">{{ page }}</a>
-                            {% endif %}
-                        </li>
-                    {% endfor %}
-                    {% if page_obj.has_next %}
-                        <a href="?{% param_replace page=page_obj.next_page_number %}"
-                           class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
-                    {% else %}
-                        <a aria-current="page"
-                           class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Next</a>
-                    {% endif %}
-                </li>
-            </ul>
-        </nav>
-    {% endif %}
-</div>
--- a/games/templates/cotton/table.html
+++ b/games/templates/cotton/table.html
@ -1,12 +0,0 @@
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-            <tr>
-                {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
-            </tr>
-        </thead>
-        <tbody>
-            {{ slot }}
-        </tbody>
-    </table>
-</div>
--- a/games/templates/cotton/table_header.html
+++ b/games/templates/cotton/table_header.html
@ -1,3 +0,0 @@
-<caption class="p-2 text-lg font-semibold rtl:text-left text-right text-gray-900 bg-white dark:text-white dark:bg-gray-900">
-    {{ slot }}
-</caption>
--- a/games/templates/cotton/table_row.html
+++ b/games/templates/cotton/table_row.html
@ -1,16 +0,0 @@
-<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-2 [&_:last-child]:text-right">
-    {% if slot %}
-        {{ slot }}
-    {% else %}
-        {% for td in data %}
-            {% if forloop.first %}
-                <th scope="row"
-                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ td }}</th>
-            {% else %}
-                <c-table-td>
-                {{ td }}
-                </c-table-td>
-            {% endif %}
-        {% endfor %}
-    {% endif %}
-</tr>
--- a/games/templates/cotton/table_td.html
+++ b/games/templates/cotton/table_td.html
@ -1 +0,0 @@
-<td class="px-6 py-4 min-w-20-char max-w-20-char">{{ slot }}</td>
--- a/games/templates/index.html
+++ b/games/templates/index.html
@ -1,7 +1,7 @@
 {% extends "base.html" %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% block content %}
    <div class="text-slate-300 mx-auto max-w-screen-lg text-center">
        {% if session_count > 0 %}
--- a/games/templates/list_purchases.html
+++ b/games/templates/list_purchases.html
@ -1,10 +0,0 @@
-{% extends "base.html" %}
-{% load static %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
-{% block content %}
-    <div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
-        <c-simple-table :columns=data.columns :rows=data.rows :page_obj=page_obj :elided_page_range=elided_page_range :header_action=data.header_action />
-    </div>
-{% endblock content %}
--- a/games/templates/list_sessions.html
+++ b/games/templates/list_sessions.html
@ -1,74 +1,77 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
+
 {% load static %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% block content %}
-    <div class="flex-col">
-        {% if dataset_count >= 1 %}
-            {% url 'list_sessions_start_session_from_session' last.id as start_session_url %}
-            <div class="mx-auto text-center my-4">
-                <a id="last-session-start"
-                   href="{{ start_session_url }}"
-                   hx-get="{{ start_session_url }}"
-                   hx-swap="afterbegin"
-                   hx-target=".responsive-table tbody"
-                   onClick="document.querySelector('#last-session-start').classList.add('invisible')"
-                   class="{% if last.timestamp_end == null %}invisible{% endif %}">
-                    {% include "components/button_start.html" with text=last.purchase title="Start session of last played game" only %}
-                </a>
-            </div>
-        {% endif %}
-        {% if dataset_count != 0 %}
-            <table class="responsive-table">
-                <thead>
-                    <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
-                        <th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
-                        <th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for session in dataset %}
-                        {% partialdef session-row inline=True %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name relative align-top w-24 h-12 group">
-                                <span class="inline-block relative">
-                                    <a class="underline decoration-slate-500 sm:decoration-2 inline-block truncate max-w-20char group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4 group-hover:decoration-purple-900 group-hover:text-purple-100"
-                                       href="{% url 'view_game' session.purchase.edition.game.id %}">
-                                        {{ session.purchase.edition.name }}
-                                    </a>
-                                </span>
-                            </td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
-                                {{ session.timestamp_start | date:"d/m/Y H:i" }}
-                            </td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
-                                {% if not session.timestamp_end %}
-                                    {% url 'list_sessions_end_session' session.id as end_session_url %}
-                                    <a href="{{ end_session_url }}"
-                                       hx-get="{{ end_session_url }}"
-                                       hx-target="closest tr"
-                                       hx-swap="outerHTML"
-                                       hx-indicator="#indicator"
-                                       onClick="document.querySelector('#last-session-start').classList.remove('invisible')">
-                                        <span class="text-yellow-300">Finish now?</span>
-                                    </a>
-                                {% elif session.duration_manual %}
-                                    --
-                                {% else %}
-                                    {{ session.timestamp_end | date:"d/m/Y H:i" }}
-                                {% endif %}
-                            </td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ session.duration_formatted }}</td>
-                        </tr>
-                    {% endpartialdef %}
-                {% endfor %}
-            </tbody>
-        </table>
-    {% else %}
-        <div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div>
-    {% endif %}
+
+{% if dataset.count >= 1 %}
+<div class="mx-auto text-center my-4">
+  <a
+    id="last-session-start"
+    href="{% url 'start_session_same_as_last' last.id %}"
+    hx-get="{% url 'start_session_same_as_last' last.id %}"
+    hx-indicator="#indicator"
+    hx-swap="afterbegin"
+    hx-target=".responsive-table tbody"
+    hx-select=".responsive-table tbody tr:first-child"
+    onClick="document.querySelector('#last-session-start').classList.add('invisible')"
+    class="{% if last.timestamp_end == null %}invisible{% endif %}"
+  >
+    {% include 'components/button_start.html' with text=last.purchase title="Start session of last played game" only %}
+  </a>
 </div>
+{% endif %}
+
+<table class="responsive-table">
+  <thead>
+    <tr>
+      <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
+      <th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
+      <th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
+      <th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for data in dataset %}
+    <tr>
+      <td
+        class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char md:max-w-40char"
+      >
+        <a
+          class="underline decoration-slate-500 sm:decoration-2"
+          href="{% url 'view_game' data.purchase.edition.game.id %}">
+            {{ data.purchase.edition }}
+        </a>
+      </td>
+      <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
+        {{ data.timestamp_start | date:"d/m/Y H:i" }}
+      </td>
+      <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
+        {% if data.unfinished %}
+        <a
+          href="{% url 'update_session' data.id %}"
+          hx-get="{% url 'update_session' data.id %}"
+          hx-swap="outerHTML"
+          hx-target=".responsive-table tbody tr:first-child"
+          hx-select=".responsive-table tbody tr:first-child"
+          hx-indicator="#indicator"
+          onClick="document.querySelector('#last-session-start').classList.remove('invisible')"
+          >
+            <span class="text-yellow-300">Finish now?</span>
+        </a>
+        {% elif data.duration_manual %}
+            -- 
+        {% else %}
+            {{ data.timestamp_end | date:"d/m/Y H:i" }}
+        {% endif %}
+      </td>
+      <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
+        {{ data.duration_formatted }}
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
 {% endblock content %}
--- a/games/templates/navbar.html
+++ b/games/templates/navbar.html
@ -1,136 +0,0 @@
-{% load static %}
-<nav class="bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
-    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <a href="{% url 'index' %}"
-           class="flex items-center space-x-3 rtl:space-x-reverse">
-            <img src="{% static 'icons/schedule.png' %}"
-                 height="48"
-                 width="48"
-                 alt="Timetracker Logo"
-                 class="mr-4" />
-            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Timetracker</span>
-        </a>
-        <button data-collapse-toggle="navbar-dropdown"
-                type="button"
-                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-                aria-controls="navbar-dropdown"
-                aria-expanded="false">
-            <span class="sr-only">Open main menu</span>
-            <svg class="w-5 h-5"
-                 aria-hidden="true"
-                 xmlns="http://www.w3.org/2000/svg"
-                 fill="none"
-                 viewBox="0 0 17 14">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
-            </svg>
-        </button>
-        <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
-            <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
-                <li>
-                    <a href="#"
-                       class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent"
-                       aria-current="page">Home</a>
-                </li>
-                <li>
-                    <button id="dropdownNavbarNewLink"
-                            data-dropdown-toggle="dropdownNavbarNew"
-                            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
-                        New
-                        <svg class="w-2.5 h-2.5 ms-2.5"
-                             aria-hidden="true"
-                             xmlns="http://www.w3.org/2000/svg"
-                             fill="none"
-                             viewBox="0 0 10 6">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
-                        </svg>
-                    </button>
-                    <!-- Dropdown menu -->
-                    <div id="dropdownNavbarNew"
-                         class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
-                        <ul class="py-2 text-sm text-gray-700 dark:text-gray-400"
-                            aria-labelledby="dropdownLargeButton">
-                            <li>
-                                <a href="{% url 'add_device' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Device</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'add_game' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Game</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'add_edition' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edition</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'add_platform' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Platform</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'add_purchase' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Purchase</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'add_session' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Session</a>
-                            </li>
-                        </ul>
-                    </div>
-                </li>
-                <li>
-                    <button id="dropdownNavbarManageLink"
-                            data-dropdown-toggle="dropdownNavbarManage"
-                            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
-                        Manage
-                        <svg class="w-2.5 h-2.5 ms-2.5"
-                             aria-hidden="true"
-                             xmlns="http://www.w3.org/2000/svg"
-                             fill="none"
-                             viewBox="0 0 10 6">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
-                        </svg>
-                    </button>
-                    <!-- Dropdown menu -->
-                    <div id="dropdownNavbarManage"
-                         class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
-                        <ul class="py-2 text-sm text-gray-700 dark:text-gray-400"
-                            aria-labelledby="dropdownLargeButton">
-                            <li>
-                                <a href="{% url 'list_devices' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Devices</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'list_games' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Games</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'list_editions' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Editions</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'list_platforms' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Platforms</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'list_purchases' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Purchases</a>
-                            </li>
-                            <li>
-                                <a href="{% url 'list_sessions' %}"
-                                   class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sessions</a>
-                            </li>
-                        </ul>
-                    </div>
-                </li>
-                <li>
-                    <a href="{% url 'stats_by_year' 0 %}"
-                       class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Stats</a>
-                </li>
-                <li>
-                    <a href="{% url 'logout' %}"
-                       class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Log
-                    out</a>
-                </li>
-            </ul>
-        </div>
-    </div>
-</nav>
--- a/games/templates/partials/related_purchase_field.html
+++ b/games/templates/partials/related_purchase_field.html
@ -1 +0,0 @@
-{{ form.related_purchase }}
--- a/games/templates/registration/login.html
+++ b/games/templates/registration/login.html
@ -1,22 +0,0 @@
-{% extends "base.html" %}
-{% load static %}
-{% block title %}
-    Login
-{% endblock title %}
-{% block content %}
-    <div class="flex items-center flex-col">
-        <h2 class="text-3xl text-white mb-8">Please log in to continue</h2>
-        <form method="post">
-            <table>
-                {% csrf_token %}
-                {{ form.as_table }}
-                <tr>
-                    <td></td>
-                    <td>
-                        <input type="submit" value="Login" />
-                    </td>
-                </tr>
-            </form>
-        </table>
-    </div>
-{% endblock content %}
--- a/games/templates/showcase/buttons.html
+++ b/games/templates/showcase/buttons.html
@ -1,155 +0,0 @@
-{% extends "base.html" %}
-{% load static %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
-{% block content %}
-    <div class="flex self-center m-4 flex-col gap-4 [&_h1]:mb-2">
-        <div>
-            <h1 class="text-white text-lg">No size</h1>
-            <c-button>
-            No attributes
-            </c-button>
-            <c-button color="blue">
-            No attributes, blue
-            </c-button>
-            <c-button color="red">
-            No attributes, red
-            </c-button>
-            <c-button color="green">
-            No attributes, green
-            </c-button>
-            <c-button color="gray">
-            No attributes, gray
-            </c-button>
-        </div>
-        <div>
-            <h1 class="text-white text-lg">No size, icons</h1>
-            <c-button>
-            <c-icon.edit />
-            </c-button>
-            <c-button>
-            <c-icon.finish />
-            </c-button>
-            <c-button>
-            <c-icon.end />
-            </c-button>
-            <c-button>
-            <c-icon.delete />
-            </c-button>
-            <c-button>
-            <c-icon.play />
-            </c-button>
-        </div>
-        <div>
-            <h1 class="text-white text-lg">Extra Small, icons</h1>
-            <c-button icon="true" size="xs">
-            <c-icon.edit /> Edit
-            </c-button>
-            <c-button icon="true" size="xs">
-            <c-icon.finish />
-            </c-button>
-            <c-button icon="true" size="xs">
-            <c-icon.end />
-            </c-button>
-            <c-button icon="true" size="xs">
-            <c-icon.delete />
-            </c-button>
-            <c-button icon="true" size="xs">
-            <c-icon.play />
-            </c-button>
-        </div>
-        <div>
-            <h1 class="text-white text-lg">Small, icons</h1>
-            <c-button icon="true" size="sm">
-            <c-icon.edit /> Edit
-            </c-button>
-            <c-button icon="true" size="sm">
-            <c-icon.finish />
-            </c-button>
-            <c-button icon="true" size="sm">
-            <c-icon.end />
-            </c-button>
-            <c-button icon="true" size="sm">
-            <c-icon.delete />
-            </c-button>
-            <c-button icon="true" size="sm">
-            <c-icon.play />
-            </c-button>
-        </div>
-        <div>
-            <h1 class="text-white text-lg">Base, icons</h1>
-            <c-button icon="true" size="base">
-            <c-icon.edit /> Edit
-            </c-button>
-            <c-button icon="true" size="base">
-            <c-icon.finish />
-            </c-button>
-            <c-button icon="true" size="base">
-            <c-icon.end />
-            </c-button>
-            <c-button icon="true" size="base">
-            <c-icon.delete />
-            </c-button>
-            <c-button icon="true" size="base">
-            <c-icon.play />
-            </c-button>
-        </div>
-        <div>
-            <h1 class="text-white text-lg">Large, icons</h1>
-            <c-button icon="true" size="lg">
-            <c-icon.edit /> Edit
-            </c-button>
-            <c-button icon="true" size="lg">
-            <c-icon.finish />
-            </c-button>
-            <c-button icon="true" size="lg">
-            <c-icon.end />
-            </c-button>
-            <c-button icon="true" size="lg">
-            <c-icon.delete />
-            </c-button>
-            <c-button icon="true" size="lg">
-            <c-icon.play />
-            </c-button>
-        </div>
-        <div>
-            <h1 class="text-white text-lg">Extra Large, icons</h1>
-            <c-button icon="true" size="xl">
-            <c-icon.edit /> Edit
-            </c-button>
-            <c-button icon="true" size="xl">
-            <c-icon.finish />
-            </c-button>
-            <c-button icon="true" size="xl">
-            <c-icon.end />
-            </c-button>
-            <c-button icon="true" size="xl">
-            <c-icon.delete />
-            </c-button>
-            <c-button icon="true" size="xl">
-            <c-icon.play />
-            </c-button>
-        </div>
-        <div>
-            <h1 class="text-white text-lg">Group (sm)</h1>
-            <c-button-group>
-            <c-button-group-button-sm>
-            No attributes
-            </c-button-group-button-sm>
-            <c-button-group-button-sm color="blue">
-            No attributes, blue
-            </c-button-group-button-sm>
-            <c-button-group-button-sm color="red">
-            No attributes, red
-            </c-button-group-button-sm>
-            <c-button-group-button-sm color="green">
-            No attributes, green
-            </c-button-group-button-sm>
-            <c-button-group-button-sm color="gray">
-            No attributes, gray
-            </c-button-group-button-sm>
-            </c-button-group>
-        </div>
-    </div>
-{% endblock content %}
--- a/games/templates/stats.html
+++ b/games/templates/stats.html
@ -1,145 +1,81 @@
 {% extends "base.html" %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% load static %}
-{% partialdef purchase-name %}
-{% if purchase.type != 'game' %}
-    <c-gamelink :game_id=purchase.edition.game.id>
-    {{ purchase.name }} ({{ purchase.edition.name }} {{ purchase.get_type_display }})
-    </c-gamelink>
-{% else %}
-    <c-gamelink :game_id=purchase.edition.game.id :name=purchase.edition.name />
-{% endif %}
-{% endpartialdef %}
+
 {% block content %}
    <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
        <div class="flex justify-center items-center">
            <form method="get" class="text-center">
                <label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
-                <select name="year"
-                        id="yearSelect"
-                        onchange="this.form.submit();"
-                        class="mx-2">
+                <select name="year" id="yearSelect" onchange="this.form.submit();" class="mx-2">
                    {% for year_item in stats_dropdown_year_range %}
-                        <option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
+                    <option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>
-        <h1 class="text-5xl text-center my-6">Playtime</h1>
-        <table class="responsive-table">
-            <tbody>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Hours</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Sessions</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_sessions }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Days</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ unique_days }} ({{ unique_days_percent }}%)</td>
-                </tr>
-                {% if total_games %}
-                    <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2">Games</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
-                    </tr>
-                {% endif %}
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Games ({{ year }})</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_2023_games }}</td>
-                </tr>
-                {% if all_finished_this_year_count %}
-                    <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2">Finished</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year_count }}</td>
-                    </tr>
-                {% endif %}
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Finished ({{ year }})</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ this_year_finished_this_year_count }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Longest session</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        {{ longest_session_time }} (<c-gamelink :game_id=longest_session_game.id :name=longest_session_game.name />)
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Most sessions</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        {{ highest_session_count }} (<c-gamelink :game_id=highest_session_count_game.id :name=highest_session_count_game.name />)
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Highest session average</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        {{ highest_session_average }} (<c-gamelink :game_id=highest_session_average_game.id :name=highest_session_average_game.name />)
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">First play</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        <c-gamelink :game_id=first_play_game.id :name=first_play_game.name /> ({{ first_play_date }})
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Last play</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        <c-gamelink :game_id=last_play_game.id :name=last_play_game.name /> ({{ last_play_date }})
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        {% if month_playtime %}
-            <h1 class="text-5xl text-center my-6">Playtime per month</h1>
-            <table class="responsive-table">
-                <tbody>
-                    {% for month in month_playtimes %}
+        <div class="flex flex-column flex-wrap justify-center">
+            <div class="md:w-1/2">
+                <h1 class="text-5xl text-center my-6">Playtime</h1>
+                <table class="responsive-table">
+                    <tbody>
                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2">{{ month.month | date:"F" }}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ month.playtime }}</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Hours</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        <h1 class="text-5xl text-center my-6">Purchases</h1>
-        <table class="responsive-table">
-            <tbody>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Total</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_this_year_count }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Refunded</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        {{ all_purchased_refunded_this_year_count }} ({{ refunded_percent }}%)
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Dropped</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ dropped_count }} ({{ dropped_percentage }}%)</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Unfinished</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        {{ purchased_unfinished_count }} ({{ unfinished_purchases_percent }}%)
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Backlog Decrease</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ backlog_decrease_count }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_spent }} ({{ spent_per_game }}/game)</td>
-                </tr>
-            </tbody>
-        </table>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Sessions</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_sessions }}</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Days</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ unique_days }} ({{ unique_days_percent }}%)</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Games</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Games ({{ year }})</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_2023_games }}</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Finished</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year.count }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="md:w-1/2">
+                <h1 class="text-5xl text-center my-6">Purchases</h1>
+                <table class="responsive-table">
+                    <tbody>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Total</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_this_year.count }}</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Refunded</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_refunded_this_year.count }} ({{ refunded_percent }}%)</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Unfinished</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchased_unfinished.count }} ({{ unfinished_purchases_percent }}%)</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Backlog Decrease</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ backlog_decrease_count }}</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
+                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_spent }} ({{ spent_per_game }}/game)</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
        <h1 class="text-5xl text-center my-6">Top games by playtime</h1>
        <table class="responsive-table">
            <thead>
@ -150,12 +86,14 @@
            </thead>
            <tbody>
                {% for game in top_10_games_by_playtime %}
-                    <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                            <c-gamelink :game_id=game.id :name=game.name />
-                        </td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td>
-                    </tr>
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
+                        <a class="underline decoration-slate-500 sm:decoration-2" href="{% url 'view_game' game.id  %}">{{ game.name }}
+
+                        </a>
+                    </td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td>
+                </tr>
                {% endfor %}
            </tbody>
        </table>
@ -169,111 +107,82 @@
            </thead>
            <tbody>
                {% for item in total_playtime_per_platform %}
-                    <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.formatted_playtime }}</td>
-                    </tr>
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}</td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.formatted_playtime }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        <h1 class="text-5xl text-center my-6">Finished</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in all_finished_this_year %}
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"><a class="underline decoration-slate-500 sm:decoration-2" href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a></td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        <h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in this_year_finished_this_year %}
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"><a class="underline decoration-slate-500 sm:decoration-2" href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a></td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        <h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in purchased_this_year_finished_this_year %}
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"><a class="underline decoration-slate-500 sm:decoration-2" href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a></td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        <h1 class="text-5xl text-center my-6">All Purchases</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in all_purchased_this_year %}
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"><a class="underline decoration-slate-500 sm:decoration-2" href="{% url 'edit_purchase' purchase.id %}">{{ purchase.edition.name }}</a></td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
+                </tr>
                {% endfor %}
            </tbody>
        </table>
-        {% if all_finished_this_year %}
-            <h1 class="text-5xl text-center my-6">Finished</h1>
-            <table class="responsive-table">
-                <thead>
-                    <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in all_finished_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if this_year_finished_this_year %}
-            <h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
-            <table class="responsive-table">
-                <thead>
-                    <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in this_year_finished_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if purchased_this_year_finished_this_year %}
-            <h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
-            <table class="responsive-table">
-                <thead>
-                    <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in purchased_this_year_finished_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if purchased_unfinished %}
-            <h1 class="text-5xl text-center my-6">Unfinished Purchases</h1>
-            <table class="responsive-table">
-                <thead>
-                    <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in purchased_unfinished %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if all_purchased_this_year %}
-            <h1 class="text-5xl text-center my-6">All Purchases</h1>
-            <table class="responsive-table">
-                <thead>
-                    <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in all_purchased_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
    </div>
 {% endblock content %}
--- a/games/templates/view_game.html
+++ b/games/templates/view_game.html
@ -1,94 +1,87 @@
 {% extends "base.html" %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+
+{% block title %}{{ title }}{% endblock title %}
+
 {% load static %}
-{% load markdown_extras %}
+
 {% block content %}
    <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
-        <div id="game-info" class="mb-10">
-            <div class="flex gap-5 mb-3">
-                <span class="text-balance max-w-[30rem] text-4xl">
-                    <span class="font-bold font-serif">{{ game.name }}</span>&nbsp;<c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>
-                    </span>
-                </div>
-                <div class="flex gap-4 dark:text-slate-400 mb-3">
-                    <c-popover id="popover-hours" popover_content="Total hours played" class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                    </svg>
-                    {{ hours_sum }}
-                    </c-popover>
-                    <c-popover id="popover-sessions" popover_content="Number of sessions" class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
-                    </svg>
-                    {{ session_count }}
-                    </c-popover>
-                    <c-popover id="popover-average" popover_content="Average playtime per session" class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
-                    </svg>
-                    {{ session_average_without_manual }}
-                    </c-popover>
-                    <c-popover id="popover-playrange" popover_content="Earliest and latest dates played" class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
-                    </svg>
-                    {{ playrange }}
-                    </c-popover>
-                </div>
-                <div class="inline-flex rounded-md shadow-sm mb-3" role="group">
-                    <a href="{% url 'edit_game' game.id %}">
-                        <button type="button"
-                                class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
-                            Edit
-                        </button>
+        <h1 class="text-4xl flex items-center">
+            {{ game.name }}
+            <span class="dark:text-slate-500">(#{{ game.pk }})</span>
+            {% url 'edit_game' game.id as edit_url %}
+            {% include 'components/edit_button.html' with edit_url=edit_url %}
+        </h1>
+        <h2 class="text-lg my-2 ml-2">
+            {{ total_hours }} <span class="dark:text-slate-500">total</span>
+            {{ session_average }} <span class="dark:text-slate-500">avg</span> 
+            ({{ playrange }}) </h2>
+        <hr class="border-slate-500">
+        <h1 class="text-3xl mt-4 mb-1">Editions <span class="dark:text-slate-500">({{ editions.count }})</span></h1>
+        <ul>
+            {% for edition in editions %}
+            <li class="sm:pl-2 flex items-center">
+                {{ edition.name }} ({{ edition.platform }}, {{ edition.year_released }})
+                {% if edition.wikidata %}
+                <span class="hidden sm:inline">
+                    <a href="https://www.wikidata.org/wiki/{{ edition.wikidata }}">
+                        <img class="inline mx-2 w-6" src="{% static 'icons/wikidata.png' %}"/>
                    </a>
-                    <a href="{% url 'delete_game' game.id %}">
-                        <button type="button"
-                                class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
-                            Delete
-                        </button>
-                    </a>
-                </div>
-            </div>
-            <c-h1 :badge=edition_count>Editions</c-h1>
-            <div class="mb-6">
-                <c-simple-table :rows=edition_data.rows :columns=edition_data.columns />
-            </div>
-            <div class="mb-6">
-                <c-h1 :badge=purchase_count>Purchases</c-h1>
-                <c-simple-table :rows=purchase_data.rows :columns=purchase_data.columns />
-            </div>
-            <div class="mb-6">
-                <c-h1 :badge=session_count>Sessions</c-h1>
-                <c-simple-table :rows=session_data.rows :columns=session_data.columns :header_action=session_data.header_action :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
-            </div>
-        </div>
-        <script>
-        function getSessionCount() {
-            return document.getElementById('session-count').textContent.match("[0-9]+");
-        }
-        </script>
-    {% endblock content %}
+                </span>
+                {% endif %}
+                {% url 'edit_edition' edition.id as edit_url %}
+                {% include 'components/edit_button.html' with edit_url=edit_url %}
+            </li>
+            {% endfor %}
+        </ul>
+        <h1 class="text-3xl mt-4 mb-1">Purchases <span class="dark:text-slate-500">({{ purchases.count }})</span></h1>
+        <ul>
+            {% for purchase in purchases %}
+            <li class="sm:pl-2 flex items-center">
+                {{ purchase.platform }}
+                ({{ purchase.get_ownership_type_display }}, {{ purchase.date_purchased | date:"Y" }}, {{ purchase.price }} {{ purchase.price_currency}})
+                {% url 'edit_purchase' purchase.id as edit_url %}
+                {% include 'components/edit_button.html' with edit_url=edit_url %}
+            </li>
+            {% endfor %}
+        </ul>
+        <h1 class="text-3xl mt-4 mb-1 flex gap-2 items-center">
+            Sessions
+            <span class="dark:text-slate-500">
+                ({{ sessions.count }})
+            </span>
+            {% url 'start_game_session' game.id as add_session_link %}
+            {% include 'components/button.html' with title="Start new session" text="New" link=add_session_link %}
+        </h1>
+        <ul>
+            {% for session in sessions %}
+            <li class="sm:pl-2 flex items-center">
+                {{ session.timestamp_start | date:"d/m/Y" }}
+                ({{ session.device.get_type_display | default:"Unknown" }}, {{ session.duration_formatted }})
+                {% url 'edit_session' session.id as edit_url %}
+                {% include 'components/edit_button.html' with edit_url=edit_url %}
+            </li>
+            {% endfor %}
+        </ul>
+        <h1 class="text-3xl mt-4 mb-1">Notes <span class="dark:text-slate-500">({{ sessions_with_notes.count }})</span></h1>
+        <ul>
+            {% for session in sessions_with_notes %}
+            <li class="sm:pl-2">
+                <ul>
+                    <li class="block dark:text-slate-500">
+                        <span class="flex items-center">
+                            {{ session.timestamp_start | date:"d/m/Y H:m" }}
+                            {% url 'edit_session' session.id as edit_session_url %}
+                            {% include 'components/edit_button.html' with edit_url=edit_session_url %}
+                        </span>
+                    </li>
+                    <li class="sm:pl-4 italic">
+                        {{ session.note|linebreaks }}
+                    </li>
+                </ul>
+            </li>
+            {% endfor %}
+        </ul>
+        
+    </div>
+{% endblock content %}
--- a/games/templatetags/markdown_extras.py
+++ b/games/templatetags/markdown_extras.py
@ -1,10 +0,0 @@
-import markdown
-from django import template
-from django.utils.safestring import mark_safe
-
-register = template.Library()
-
-
-@register.filter(name="markdown")
-def markdown_format(text):
-    return mark_safe(markdown.markdown(text))
--- a/games/templatetags/param_utils.py
+++ b/games/templatetags/param_utils.py
@ -1,18 +0,0 @@
-from typing import Any
-
-from django import template
-from django.http import QueryDict
-
-register = template.Library()
-
-
-@register.simple_tag(takes_context=True)
-def param_replace(context: dict[Any, Any], **kwargs):
-    """
-    Return encoded URL parameters that are the same as the current
-    request's parameters, only with the specified GET parameters added or changed.
-    """
-    d: QueryDict = context["request"].GET.copy()
-    for k, v in kwargs.items():
-        d[k] = v
-    return d.urlencode()
--- a/games/templatetags/randomid.py
+++ b/games/templatetags/randomid.py
@ -1,11 +0,0 @@
-import random
-import string
-
-from django import template
-
-register = template.Library()
-
-
-@register.simple_tag
-def randomid(seed: str = "") -> str:
-    return str(hash(seed + "".join(random.choices(string.ascii_lowercase, k=10))))
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Lukáš Kucharczyk	394dd4f9f8	Version 1.4.0 All checks were successful continuous-integration/drone/push Build is passing Details	2023-11-09 21:01:55 +01:00
Lukáš Kucharczyk	c358b1aaa0	Adding new games is easier	2023-11-09 21:01:01 +01:00
				`@ -1 +0,0 @@`
				`<td class="px-6 py-4 min-w-20-char max-w-20-char">{{ slot }}</td>`