add backend functionality

also add link styles for links in a table row

.dockerignore

@@ -5,4 +5,13 @@
 .venv
 .vscode
 node_modules
-src/timetracker/static/*
+static
+.drone.yml
+.editorconfig
+.gitignore
+Caddyfile
+CHANGELOG.md
+db.sqlite3
+docker-compose*
+Dockerfile
+Makefile

.drone.yml

@@ -5,23 +5,28 @@ name: default
 
 steps:
 - name: test
-  image: python:3.10
+  image: python:3.12
   commands:
     - python -m pip install poetry
     - poetry install
     - poetry env info
+    - poetry run python manage.py migrate
     - poetry run pytest
-- name: build container (prod)
+
+- name: build-prod
   image: plugins/docker
   settings:
     repo: registry.kucharczyk.xyz/timetracker
     tags:
       - latest
+      - 1.1.0
+  depends_on:
+    - "test"
   when:
     branch:
       - main
 
-- name: build container (non-prod)
+- name: build-non-prod
   image: plugins/docker
   settings:
     repo: registry.kucharczyk.xyz/timetracker
@@ -32,9 +37,20 @@ steps:
     branch:
       exclude:
         - main
+  depends_on:
+    - "test"
+
+- name: redeploy on portainer
+  image: plugins/webhook
+  settings:
+    urls:
+      from_secret: PORTAINER_TIMETRACKER_WEBHOOK_URL
+  depends_on:
+    - "build-prod"
+    
     
     
 trigger:
   event:
   - push
-  - cron
+  - cron

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+[**/*.js]
+indent_style = space
+indent_size = 2

.envrc

@@ -0,0 +1 @@
+use nix

.github/workflows/build-docker.yml

@@ -0,0 +1,36 @@
+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

.gitignore

@@ -1,10 +1,12 @@
 __pycache__
 .mypy_cache
 .pytest_cache
-.venv
+.venv/
 node_modules
 package-lock.json
 db.sqlite3
-static/admin/
-static/django_extensions/
-dist/
+/static/
+dist/
+.DS_Store
+.python-version
+.direnv

.pre-commit-config.yaml

@@ -0,0 +1,20 @@
+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"]

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+    "recommendations": [
+        "charliermarsh.ruff",
+        "ms-python.python",
+        "ms-python.vscode-pylance",
+        "ms-python.debugpy",
+        "batisteo.vscode-django",
+        "bradlc.vscode-tailwindcss",
+        "EditorConfig.EditorConfig"
+    ]
+}

.vscode/settings.json

@@ -4,5 +4,30 @@
     ],
     "python.testing.unittestEnabled": false,
     "python.testing.pytestEnabled": true,
-    "python.analysis.typeCheckingMode": "basic"
-}
+    "python.analysis.typeCheckingMode": "strict",
+    "[python]": {
+        "editor.defaultFormatter": "charliermarsh.ruff",
+        "editor.formatOnSave": true,
+        "editor.codeActionsOnSave": {
+            "source.fixAll": "explicit",
+            "source.organizeImports": "explicit"
+        },
+    },
+    "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"
+    ]
+}

CHANGELOG.md

@@ -1,3 +1,157 @@
+## 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
+* More fields are now optional. This is to make it easier to add new items in bulk.
+  * Game: Wikidata ID
+  * Edition: Platform, Year
+  * Purchase: Platform
+  * Platform: Group
+  * Session: Device
+* New fields:
+  * Game: Year Released
+    * To record original year of release
+    * Upon migration, this will be set to a year of any of the game's edition that has it set
+  * Purchase: Date Finished
+* Editions are now unique combination of name and platform
+* Add more stats:
+  * All finished games
+  * All finished 2023 games
+  * All finished games that were purchased this year
+  * Sessions (count)
+  * Days played
+  * Finished (count)
+  * Unfinished (count)
+  * Refunded (count)
+  * Backlog Decrease (count)
+* New workflow:
+  * Adding Game, Edition, Purchase, and Session in a row is now much faster
+
+### Improved
+* game overview: simplify playtime range display
+* new session: order devices alphabetically
+* ignore English articles when sorting names
+  * added a new sort_name field that gets automatically created
+* automatically fill certain values in forms:
+  * new game: name and sort name after typing
+  * new edition: name, sort name, and year when selecting game
+  * new purchase: platform when selecting edition
+
+## 1.3.0 / 2023-11-05 15:09+01:00
+
+### New
+* Add Stats to the main navigation
+* Allow selecting year on the Stats page
+
+### Improved
+* Make some pages redirect back instead to session list
+
+### Improved
+* Make navigation more compact
+
+### Fixed
+* Correctly limit sessions to a single year for stats
+
+## 1.2.0 / 2023-11-01 20:18+01:00
+
+### New
+* Add yearly stats page (https://git.kucharczyk.xyz/lukas/timetracker/issues/15)
+
+### Enhancements
+* Add a button to start session from game overview
+
+## 1.1.2 / 2023-10-13 16:30+02:00
+
+### Enhancements
+* Durations are formatted in a consisent manner across all pages
+
+### Fixes
+* Game Overview: display duration when >1 hour instead of displaying 0
+
+## 1.1.1 / 2023-10-09 20:52+02:00
+
+### New
+* Add notes section to game overview
+
+### Enhancements
+* Make it possible to add any data on the game overview page
+
+## 1.1.0 / 2023-10-09 00:01+02:00
+
+### New
+* Add game overview page (https://git.kucharczyk.xyz/lukas/timetracker/issues/8)
+* Add helper buttons next to datime fields
+* Add copy button on Add session page to copy times between fields
+* Change fonts to IBM Plex
+
+### Enhancements
+* Improve form appearance
+* Focus important fields on forms
+* Use the same form when editing a session as when adding a session
+* Change recent session view to current year instead of last 30 days
+* Add a hacky way not to reload a page when starting or ending a session (https://git.kucharczyk.xyz/lukas/timetracker/issues/52)
+* Improve session list (https://git.kucharczyk.xyz/lukas/timetracker/issues/53)
+
+### Fixes
+
+* Fix session being wrongly considered in progress if it had a certain amount of manual hours (https://git.kucharczyk.xyz/lukas/timetracker/issues/58)
+* Fix bug when filtering only manual sessions (https://git.kucharczyk.xyz/lukas/timetracker/issues/51)
+
+
 ## 1.0.3 / 2023-02-20 17:16+01:00
 
 * Add wikidata ID and year for editions

Dockerfile

@@ -1,34 +1,45 @@
-FROM node as css
-WORKDIR /app
-COPY . /app
-RUN npm install && \
-    npx tailwindcss -i ./common/input.css -o ./static/base.css --minify
+FROM python:3.12.0-slim-bullseye
 
-FROM python:3.10.9-slim-bullseye
+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'
 
-ENV VERSION_NUMBER 1.0.3
-ENV PROD 1
-ENV PYTHONUNBUFFERED=1
-
-RUN apt update && \
-    apt install -y \
+RUN apt-get update && apt-get upgrade -y \
+  && apt-get install --no-install-recommends -y \
     bash \
-    vim \
-    curl && \
-    rm -rf /var/lib/apt/lists/*
+    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/*
 
-RUN useradd -m --uid 1000 timetracker
+RUN useradd -m --uid 1000 timetracker \
+    && mkdir -p '/var/www/django/static' \
+    && chown timetracker:timetracker '/var/www/django/static'
 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 --without dev
 
 EXPOSE 8000
-CMD [ "/entrypoint.sh" ]
+CMD [ "/entrypoint.sh" ]

Makefile

@@ -3,6 +3,7 @@ all: css migrate
 initialize: npm css migrate sethookdir loadplatforms
 
 HTMLFILES := $(shell find games/templates -type f)
+PYTHON_VERSION = 3.12
 
 npm:
 	npm install
@@ -10,17 +11,26 @@ 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
 
-dev: migrate
-	poetry run python manage.py runserver
+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"
+
 
 caddy:
 	caddy run --watch

README.md

@@ -1,3 +1,15 @@
 # Timetracker
 
-A simple game catalogue and play session tracker.
+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`.

common/input.css

@@ -2,45 +2,170 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "IBM Plex Serif";
+  src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
+  font-weight: 400;
+  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;
+}
+
+.responsive-table tr:nth-child(even) {
+  @apply bg-slate-800
+}
+
+.responsive-table tbody tr:nth-child(odd) {
+  @apply bg-slate-900
+}
+
+.responsive-table thead th {
+  @apply text-left border-b-2 border-b-slate-500 text-xl;
+}
+
+.responsive-table thead th:not(:first-child),
+.responsive-table td:not(:first-child) {
+  @apply border-l border-l-slate-500;
+}
+
+@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-w-40char {
+    max-width: 40ch;
+  }
+}
+
 form input,
 select,
 textarea {
   @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
 }
 
-#session-table {
-  display: grid;
-  grid-template-columns: 3fr 2fr repeat(2, 1fr) 0.5fr 1fr;
+form input:disabled,
+select:disabled,
+textarea:disabled {
+  @apply dark:bg-slate-700 dark:text-slate-400;
 }
 
-.purchase-name > span:nth-child(2) {
-  @apply ml-4
+.errorlist {
+  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
 }
 
-.purchase-name > span:nth-child(2) > a > img {
-  @apply opacity-0 transition-opacity duration-500
+@media screen and (min-width: 768px) {
+  form input,
+  select,
+  textarea {
+    width: 300px;
+  }
 }
 
-.purchase-name:hover > span:nth-child(2) > a > img {
-  @apply opacity-50
-}
-
-.purchase-name > span:nth-child(2) > a > img:hover {
-  @apply opacity-100
+@media screen and (max-width: 768px) {
+  form input,
+  select,
+  textarea {
+    width: 150px;
+  }
 }
 
 #button-container button {
   @apply mx-1;
 }
 
-th {
-  @apply text-left;
+.basic-button-container {
+  @apply flex space-x-2 justify-center;
 }
 
-th label {
-  @apply mr-4;
+.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;
+    
+  }  
+} */

common/plots.py

@@ -1,95 +0,0 @@
-import base64
-from datetime import datetime
-from io import BytesIO
-
-import matplotlib.pyplot as plt
-import matplotlib.dates as mdates
-import pandas as pd
-from django.db.models import F, IntegerField, QuerySet, Sum
-from django.db.models.functions import TruncDay
-from games.models import Session
-
-
-def key_value_to_value_value(data):
-    return {data["date"]: data["hours"]}
-
-
-def playtime_over_time_chart(queryset: QuerySet = Session.objects):
-    microsecond_in_second = 1000000
-    result = (
-        queryset.exclude(timestamp_end__exact=None)
-        .annotate(date=TruncDay("timestamp_start"))
-        .values("date")
-        .annotate(
-            hours=Sum(
-                F("duration_calculated"),
-                output_field=IntegerField(),
-            )
-        )
-        .values("date", "hours")
-    )
-    keys = []
-    values = []
-    running_total = int(0)
-    for item in result:
-        # date_value = datetime.strftime(item["date"], "%d-%m-%Y")
-        date_value = item["date"]
-        keys.append(date_value)
-        running_total += int(item["hours"] / (3600 * microsecond_in_second))
-        values.append(running_total)
-    data = [keys, values]
-    return get_chart(
-        data,
-        title="Playtime over time (manual excluded)",
-        xlabel="Date",
-        ylabel="Hours",
-    )
-
-
-def get_graph():
-    buffer = BytesIO()
-    plt.savefig(buffer, format="svg", transparent=True)
-    buffer.seek(0)
-    image_png = buffer.getvalue()
-    graph = base64.b64encode(image_png)
-    graph = graph.decode("utf-8")
-    buffer.close()
-    return graph
-
-
-def get_chart(data, title="", xlabel="", ylabel=""):
-    x = data[0]
-    y = data[1]
-    plt.style.use("dark_background")
-    plt.switch_backend("SVG")
-    fig, ax = plt.subplots()
-    fig.set_size_inches(10, 4)
-    lines = ax.plot(x, y, "-o")
-    first = x[0]
-    last = x[-1]
-    difference = last - first
-    if difference.days <= 14:
-        ax.xaxis.set_major_locator(mdates.DayLocator())
-    elif difference.days < 60 or len(x) < 60:
-        ax.xaxis.set_major_locator(mdates.WeekdayLocator())
-        ax.xaxis.set_minor_locator(mdates.DayLocator())
-    elif difference.days < 720:
-        ax.xaxis.set_major_locator(mdates.MonthLocator())
-        ax.xaxis.set_minor_locator(mdates.WeekdayLocator())
-        for line in lines:
-            line.set_marker("")
-    else:
-        for line in lines:
-            line.set_marker("")
-        ax.xaxis.set_major_locator(mdates.YearLocator())
-        ax.xaxis.set_minor_locator(mdates.MonthLocator())
-
-    ax.xaxis.set_major_formatter(mdates.DateFormatter("%Y-%m-%d"))
-    for label in ax.get_xticklabels(which="major"):
-        label.set(rotation=30, horizontalalignment="right")
-    ax.set_xlabel(xlabel)
-    ax.set_ylabel(ylabel)
-    ax.set_title(title)
-    fig.tight_layout()
-    chart = get_graph()
-    return chart

common/time.py

@@ -1,12 +1,5 @@
 import re
-from datetime import datetime, timedelta
-from zoneinfo import ZoneInfo
-
-from django.conf import settings
-
-
-def now() -> datetime:
-    return datetime.now(ZoneInfo(settings.TIME_ZONE))
+from datetime import timedelta
 
 
 def _safe_timedelta(duration: timedelta | int | None):
@@ -19,7 +12,7 @@ def _safe_timedelta(duration: timedelta | int | None):
 
 
 def format_duration(
-    duration: timedelta | int | None, format_string: str = "%H hours"
+    duration: timedelta | int | float | None, format_string: str = "%H hours"
 ) -> str:
     """
     Format timedelta into the specified format_string.
@@ -32,32 +25,48 @@ def format_duration(
     from the formatting string. For example:
     - 61 seconds as "%s" = 61 seconds
     - 61 seconds as "%m %s" = 1 minutes 1 seconds"
+    Format specifiers can include width and precision options:
+    - %5.2H: hours formatted with width 5 and 2 decimal places (padded with zeros)
     """
     minute_seconds = 60
     hour_seconds = 60 * minute_seconds
     day_seconds = 24 * hour_seconds
-    duration = _safe_timedelta(duration)
+    safe_duration = _safe_timedelta(duration)
     # we don't need float
-    seconds_total = int(duration.total_seconds())
+    seconds_total = int(safe_duration.total_seconds())
     # timestamps where end is before start
     if seconds_total < 0:
         seconds_total = 0
-    days = hours = minutes = seconds = 0
+    days = hours = hours_float = minutes = seconds = 0
     remainder = seconds = seconds_total
     if "%d" in format_string:
         days, remainder = divmod(seconds_total, day_seconds)
-    if "%H" in format_string:
-        hours, remainder = divmod(remainder, hour_seconds)
-    if "%m" in format_string:
+    if re.search(r"%\d*\.?\d*H", format_string):
+        hours_float, remainder = divmod(remainder, hour_seconds)
+        hours = float(hours_float) + remainder / hour_seconds
+    if re.search(r"%\d*\.?\d*m", format_string):
         minutes, seconds = divmod(remainder, minute_seconds)
     literals = {
-        "%d": str(days),
-        "%H": str(hours),
-        "%m": str(minutes),
-        "%s": str(seconds),
-        "%r": str(seconds_total),
+        "d": str(days),
+        "H": str(hours) if "m" not in format_string else str(hours_float),
+        "m": str(minutes),
+        "s": str(seconds),
+        "r": str(seconds_total),
     }
     formatted_string = format_string
     for pattern, replacement in literals.items():
-        formatted_string = re.sub(pattern, replacement, formatted_string)
+        # Match format specifiers with optional width and precision
+        match = re.search(rf"%(\d*\.?\d*){pattern}", formatted_string)
+        if match:
+            format_spec = match.group(1)
+            if "." in format_spec:
+                # Format the number as float if precision is specified
+                replacement = f"{float(replacement):{format_spec}f}"
+            else:
+                # Format the number as integer if no precision is specified
+                replacement = f"{int(float(replacement)):>{format_spec}}"
+            # Replace the format specifier with the formatted number
+            formatted_string = re.sub(
+                rf"%\d*\.?\d*{pattern}", replacement, formatted_string
+            )
     return formatted_string

common/utils.py

@@ -0,0 +1,147 @@
+from random import 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
+
+
+def Popover(
+    wrapped_content: str,
+    popover_content: str = "",
+) -> str:
+    id = randomid()
+    if popover_content == "":
+        popover_content = wrapped_content
+    content = f"<span data-popover-target={id}>{wrapped_content}</span>"
+    result = mark_safe(
+        str(content)
+        + render_to_string(
+            "cotton/popover.html",
+            {
+                "id": id,
+                "slot": popover_content,
+            },
+        )
+    )
+    return result
+
+
+HTMLAttribute = tuple[str, str]
+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": "\n".join(children)},
+        )
+    return mark_safe(tag)
+
+
+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 = [],
+):
+    return Component(
+        template="cotton/button.html", attributes=attributes, children=children
+    )
+
+
+def safe_division(numerator: int | float, denominator: int | float) -> int | float:
+    """
+    Divides without triggering division by zero exception.
+    Returns 0 if denominator is 0.
+    """
+    try:
+        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:
+        print(f"Not the same after: {truncated=}")
+        return Popover(wrapped_content=truncated, popover_content=input_string)
+    else:
+        print("Strings are the same!")
+        return input_string
+
+
+def randomid(seed: str = "", length: int = 10) -> str:
+    return seed + "".join(choices(ascii_lowercase, k=length))

docker-compose.yml

@@ -10,13 +10,14 @@ services:
       - CSRF_TRUSTED_ORIGINS="https://tracker.kucharczyk.xyz"
     user: "1000"
     volumes:
-      - "static-files:/home/timetracker/app/static"
+      - "static-files:/var/www/django/static"
+      - "$PWD/db.sqlite3:/home/timetracker/app/db.sqlite3"
     restart: unless-stopped
 
   frontend:
     image: caddy
     volumes:
-      - "static-files:/usr/share/caddy"
+      - "static-files:/usr/share/caddy:ro"
       - "$PWD/Caddyfile:/etc/caddy/Caddyfile"
     ports:
       - "8000:8000"
@@ -26,3 +27,4 @@ services:
 volumes:
   static-files:
     
+    

entrypoint.sh

@@ -7,5 +7,13 @@ poetry run python manage.py migrate
 echo "Collect static files"
 poetry run python manage.py collectstatic --clear --no-input
 
+_term() {
+  echo "Caught SIGTERM signal!"
+  kill -SIGTERM "$gunicorn_pid"
+}
+trap _term SIGTERM
+
 echo "Starting app"
-poetry run python -m gunicorn --bind 0.0.0.0:8001 timetracker.asgi:application -k uvicorn.workers.UvicornWorker --access-logfile - --error-logfile -
+poetry run python -m gunicorn --bind 0.0.0.0:8001 timetracker.asgi:application -k uvicorn.workers.UvicornWorker --access-logfile - --error-logfile - & gunicorn_pid=$!
+
+wait "$gunicorn_pid"

games/admin.py

@@ -1,9 +1,11 @@
 from django.contrib import admin
 
-from games.models import Game, Platform, Purchase, Session
+from games.models import Device, Edition, Game, Platform, Purchase, Session
 
 # Register your models here.
 admin.site.register(Game)
 admin.site.register(Purchase)
 admin.site.register(Platform)
 admin.site.register(Session)
+admin.site.register(Edition)
+admin.site.register(Device)

games/forms.py

@@ -1,14 +1,32 @@
 from django import forms
+from django.urls import reverse
 
-from games.models import Game, Platform, Purchase, Session, Edition, Device
+from common.utils import safe_getattr
+from games.models import Device, Edition, Game, Platform, Purchase, Session
+
+custom_date_widget = forms.DateInput(attrs={"type": "date"})
+custom_datetime_widget = forms.DateTimeInput(
+    attrs={"type": "datetime-local"}, format="%Y-%m-%d %H:%M"
+)
+autofocus_input_widget = forms.TextInput(attrs={"autofocus": "autofocus"})
 
 
 class SessionForm(forms.ModelForm):
+    # purchase = forms.ModelChoiceField(
+    #     queryset=Purchase.objects.filter(date_refunded=None).order_by("edition__name")
+    # )
     purchase = forms.ModelChoiceField(
-        queryset=Purchase.objects.order_by("edition__name")
+        queryset=Purchase.objects.order_by("edition__sort_name"),
+        widget=forms.Select(attrs={"autofocus": "autofocus"}),
     )
 
+    device = forms.ModelChoiceField(queryset=Device.objects.order_by("name"))
+
     class Meta:
+        widgets = {
+            "timestamp_start": custom_datetime_widget,
+            "timestamp_end": custom_datetime_widget,
+        }
         model = Session
         fields = [
             "purchase",
@@ -22,47 +40,136 @@ class SessionForm(forms.ModelForm):
 
 class EditionChoiceField(forms.ModelChoiceField):
     def label_from_instance(self, obj) -> str:
-        return f"{obj.name} ({obj.platform}, {obj.year_released})"
+        return f"{obj.sort_name} ({obj.platform}, {obj.year_released})"
+
+
+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
+        return option
 
 
 class PurchaseForm(forms.ModelForm):
-    edition = EditionChoiceField(queryset=Edition.objects.order_by("name"))
+    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 = [
             "edition",
             "platform",
             "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):
+        option = super().create_option(name, value, *args, **kwargs)
+        if value:
+            option["attrs"]["data-name"] = value.instance.name
+            option["attrs"]["data-year"] = value.instance.year_released
+        return option
+
+
+class GameModelChoiceField(forms.ModelChoiceField):
+    def label_from_instance(self, obj):
+        # Use sort_name as the label for the option
+        return obj.sort_name
+
 
 class EditionForm(forms.ModelForm):
-    platform = forms.ModelChoiceField(queryset=Platform.objects.order_by("name"))
+    game = GameModelChoiceField(
+        queryset=Game.objects.order_by("sort_name"),
+        widget=IncludeNameSelect(attrs={"autofocus": "autofocus"}),
+    )
+    platform = forms.ModelChoiceField(
+        queryset=Platform.objects.order_by("name"), required=False
+    )
 
     class Meta:
         model = Edition
-        fields = ["game", "name", "platform", "year_released", "wikidata"]
+        fields = ["game", "name", "sort_name", "platform", "year_released", "wikidata"]
 
 
 class GameForm(forms.ModelForm):
     class Meta:
         model = Game
-        fields = ["name", "wikidata"]
+        fields = ["name", "sort_name", "year_released", "wikidata"]
+        widgets = {"name": autofocus_input_widget}
 
 
 class PlatformForm(forms.ModelForm):
     class Meta:
         model = Platform
         fields = ["name", "group"]
+        widgets = {"name": autofocus_input_widget}
 
 
 class DeviceForm(forms.ModelForm):
     class Meta:
         model = Device
         fields = ["name", "type"]
+        widgets = {"name": autofocus_input_widget}

games/graphql/mutations/__init__.py

@@ -0,0 +1 @@
+from .game import Mutation as GameMutation

games/graphql/mutations/game.py

@@ -0,0 +1,29 @@
+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()

games/graphql/queries/__init__.py

@@ -0,0 +1,6 @@
+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

games/graphql/queries/device.py

@@ -0,0 +1,11 @@
+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()

games/graphql/queries/edition.py

@@ -0,0 +1,11 @@
+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()

games/graphql/queries/game.py

@@ -0,0 +1,18 @@
+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

games/graphql/queries/platform.py

@@ -0,0 +1,11 @@
+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()

games/graphql/queries/purchase.py

@@ -0,0 +1,11 @@
+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()

games/graphql/queries/session.py

@@ -0,0 +1,11 @@
+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()

games/graphql/types.py

@@ -0,0 +1,44 @@
+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__"

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
 
-from django.db import migrations, models
 import django.db.models.deletion
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):

games/migrations/0008_edition.py

@@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-02-18 16:29
 
-from django.db import migrations, models
 import django.db.models.deletion
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):

games/migrations/0010_alter_purchase_game.py

@@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-02-18 19:06
 
-from django.db import migrations, models
 import django.db.models.deletion
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):

games/migrations/0014_device_session_device.py

@@ -1,7 +1,7 @@
 # Generated by Django 4.1.5 on 2023-02-18 19:59
 
-from django.db import migrations, models
 import django.db.models.deletion
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):

games/migrations/0016_alter_edition_platform_alter_edition_year_released_and_more.py

@@ -0,0 +1,51 @@
+# Generated by Django 4.1.5 on 2023-11-06 11:10
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("games", "0015_edition_wikidata_edition_year_released"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="edition",
+            name="platform",
+            field=models.ForeignKey(
+                blank=True,
+                default=None,
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="games.platform",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="edition",
+            name="year_released",
+            field=models.IntegerField(blank=True, default=None, null=True),
+        ),
+        migrations.AlterField(
+            model_name="game",
+            name="wikidata",
+            field=models.CharField(blank=True, default=None, max_length=50, null=True),
+        ),
+        migrations.AlterField(
+            model_name="platform",
+            name="group",
+            field=models.CharField(blank=True, default=None, max_length=255, null=True),
+        ),
+        migrations.AlterField(
+            model_name="session",
+            name="device",
+            field=models.ForeignKey(
+                blank=True,
+                default=None,
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="games.device",
+            ),
+        ),
+    ]

games/migrations/0016_alter_edition_platform_alter_edition_year_released_and_more_squashed_0022_rename_year_game_year_released.py

@@ -0,0 +1,141 @@
+# Generated by Django 4.1.5 on 2023-11-06 18:14
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+def rename_duplicates(apps, schema_editor):
+    Edition = apps.get_model("games", "Edition")
+
+    duplicates = (
+        Edition.objects.values("name", "platform")
+        .annotate(name_count=models.Count("id"))
+        .filter(name_count__gt=1)
+    )
+
+    for duplicate in duplicates:
+        counter = 1
+        duplicate_editions = Edition.objects.filter(
+            name=duplicate["name"], platform_id=duplicate["platform"]
+        ).order_by("id")
+
+        for edition in duplicate_editions[1:]:  # Skip the first one
+            edition.name = f"{edition.name} {counter}"
+            edition.save()
+            counter += 1
+
+
+def update_game_year(apps, schema_editor):
+    Game = apps.get_model("games", "Game")
+    Edition = apps.get_model("games", "Edition")
+
+    for game in Game.objects.filter(year__isnull=True):
+        # Try to get the first related edition with a non-null year_released
+        edition = Edition.objects.filter(game=game, year_released__isnull=False).first()
+        if edition:
+            # If an edition is found, update the game's year
+            game.year = edition.year_released
+            game.save()
+
+
+class Migration(migrations.Migration):
+    replaces = [
+        ("games", "0016_alter_edition_platform_alter_edition_year_released_and_more"),
+        ("games", "0017_alter_device_type_alter_purchase_platform"),
+        ("games", "0018_auto_20231106_1825"),
+        ("games", "0019_alter_edition_unique_together"),
+        ("games", "0020_game_year"),
+        ("games", "0021_auto_20231106_1909"),
+        ("games", "0022_rename_year_game_year_released"),
+    ]
+
+    dependencies = [
+        ("games", "0015_edition_wikidata_edition_year_released"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="edition",
+            name="platform",
+            field=models.ForeignKey(
+                blank=True,
+                default=None,
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="games.platform",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="edition",
+            name="year_released",
+            field=models.IntegerField(blank=True, default=None, null=True),
+        ),
+        migrations.AlterField(
+            model_name="game",
+            name="wikidata",
+            field=models.CharField(blank=True, default=None, max_length=50, null=True),
+        ),
+        migrations.AlterField(
+            model_name="platform",
+            name="group",
+            field=models.CharField(blank=True, default=None, max_length=255, null=True),
+        ),
+        migrations.AlterField(
+            model_name="session",
+            name="device",
+            field=models.ForeignKey(
+                blank=True,
+                default=None,
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="games.device",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="device",
+            name="type",
+            field=models.CharField(
+                choices=[
+                    ("pc", "PC"),
+                    ("co", "Console"),
+                    ("ha", "Handheld"),
+                    ("mo", "Mobile"),
+                    ("sbc", "Single-board computer"),
+                    ("un", "Unknown"),
+                ],
+                default="un",
+                max_length=3,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="purchase",
+            name="platform",
+            field=models.ForeignKey(
+                blank=True,
+                default=None,
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="games.platform",
+            ),
+        ),
+        migrations.RunPython(
+            code=rename_duplicates,
+        ),
+        migrations.AlterUniqueTogether(
+            name="edition",
+            unique_together={("name", "platform")},
+        ),
+        migrations.AddField(
+            model_name="game",
+            name="year",
+            field=models.IntegerField(blank=True, default=None, null=True),
+        ),
+        migrations.RunPython(
+            code=update_game_year,
+        ),
+        migrations.RenameField(
+            model_name="game",
+            old_name="year",
+            new_name="year_released",
+        ),
+    ]

games/migrations/0017_alter_device_type_alter_purchase_platform.py

@@ -0,0 +1,41 @@
+# Generated by Django 4.1.5 on 2023-11-06 16:53
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("games", "0016_alter_edition_platform_alter_edition_year_released_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="device",
+            name="type",
+            field=models.CharField(
+                choices=[
+                    ("pc", "PC"),
+                    ("co", "Console"),
+                    ("ha", "Handheld"),
+                    ("mo", "Mobile"),
+                    ("sbc", "Single-board computer"),
+                    ("un", "Unknown"),
+                ],
+                default="un",
+                max_length=3,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="purchase",
+            name="platform",
+            field=models.ForeignKey(
+                blank=True,
+                default=None,
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="games.platform",
+            ),
+        ),
+    ]

games/migrations/0018_auto_20231106_1825.py

@@ -0,0 +1,34 @@
+# Generated by Django 4.1.5 on 2023-11-06 17:25
+
+from django.db import migrations, models
+
+
+def rename_duplicates(apps, schema_editor):
+    Edition = apps.get_model("games", "Edition")
+
+    duplicates = (
+        Edition.objects.values("name", "platform")
+        .annotate(name_count=models.Count("id"))
+        .filter(name_count__gt=1)
+    )
+
+    for duplicate in duplicates:
+        counter = 1
+        duplicate_editions = Edition.objects.filter(
+            name=duplicate["name"], platform_id=duplicate["platform"]
+        ).order_by("id")
+
+        for edition in duplicate_editions[1:]:  # Skip the first one
+            edition.name = f"{edition.name} {counter}"
+            edition.save()
+            counter += 1
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("games", "0017_alter_device_type_alter_purchase_platform"),
+    ]
+
+    operations = [
+        migrations.RunPython(rename_duplicates),
+    ]

games/migrations/0019_alter_edition_unique_together.py

@@ -0,0 +1,17 @@
+# Generated by Django 4.1.5 on 2023-11-06 17:26
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("games", "0018_auto_20231106_1825"),
+    ]
+
+    operations = [
+        migrations.AlterUniqueTogether(
+            name="edition",
+            unique_together={("name", "platform")},
+        ),
+    ]

games/migrations/0020_game_year.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.5 on 2023-11-06 18:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("games", "0019_alter_edition_unique_together"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="game",
+            name="year",
+            field=models.IntegerField(blank=True, default=None, null=True),
+        ),
+    ]

games/migrations/0021_auto_20231106_1909.py

@@ -0,0 +1,24 @@
+from django.db import migrations
+
+
+def update_game_year(apps, schema_editor):
+    Game = apps.get_model("games", "Game")
+    Edition = apps.get_model("games", "Edition")
+
+    for game in Game.objects.filter(year__isnull=True):
+        # Try to get the first related edition with a non-null year_released
+        edition = Edition.objects.filter(game=game, year_released__isnull=False).first()
+        if edition:
+            # If an edition is found, update the game's year
+            game.year = edition.year_released
+            game.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("games", "0020_game_year"),
+    ]
+
+    operations = [
+        migrations.RunPython(update_game_year),
+    ]

games/migrations/0022_rename_year_game_year_released.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.5 on 2023-11-06 18:12
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("games", "0021_auto_20231106_1909"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="game",
+            old_name="year",
+            new_name="year_released",
+        ),
+    ]

games/migrations/0023_purchase_date_finished.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.1.5 on 2023-11-06 18:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        (
+            "games",
+            "0016_alter_edition_platform_alter_edition_year_released_and_more_squashed_0022_rename_year_game_year_released",
+        ),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="purchase",
+            name="date_finished",
+            field=models.DateField(blank=True, null=True),
+        ),
+    ]

games/migrations/0024_edition_sort_name.py

@@ -0,0 +1,39 @@
+# Generated by Django 4.1.5 on 2023-11-09 09:32
+
+from django.db import migrations, models
+
+
+def create_sort_name(apps, schema_editor):
+    Edition = apps.get_model(
+        "games", "Edition"
+    )  # Replace 'your_app_name' with the actual name of your app
+
+    for edition in Edition.objects.all():
+        name = edition.name
+        # Check for articles at the beginning of the name and move them to the end
+        if name.lower().startswith("the "):
+            sort_name = f"{name[4:]}, The"
+        elif name.lower().startswith("a "):
+            sort_name = f"{name[2:]}, A"
+        elif name.lower().startswith("an "):
+            sort_name = f"{name[3:]}, An"
+        else:
+            sort_name = name
+        # Save the sort_name back to the database
+        edition.sort_name = sort_name
+        edition.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("games", "0023_purchase_date_finished"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="edition",
+            name="sort_name",
+            field=models.CharField(blank=True, default=None, max_length=255, null=True),
+        ),
+        migrations.RunPython(create_sort_name),
+    ]

games/migrations/0025_game_sort_name.py

@@ -0,0 +1,39 @@
+# Generated by Django 4.1.5 on 2023-11-09 09:32
+
+from django.db import migrations, models
+
+
+def create_sort_name(apps, schema_editor):
+    Game = apps.get_model(
+        "games", "Game"
+    )  # Replace 'your_app_name' with the actual name of your app
+
+    for game in Game.objects.all():
+        name = game.name
+        # Check for articles at the beginning of the name and move them to the end
+        if name.lower().startswith("the "):
+            sort_name = f"{name[4:]}, The"
+        elif name.lower().startswith("a "):
+            sort_name = f"{name[2:]}, A"
+        elif name.lower().startswith("an "):
+            sort_name = f"{name[3:]}, An"
+        else:
+            sort_name = name
+        # Save the sort_name back to the database
+        game.sort_name = sort_name
+        game.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("games", "0024_edition_sort_name"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="game",
+            name="sort_name",
+            field=models.CharField(blank=True, default=None, max_length=255, null=True),
+        ),
+        migrations.RunPython(create_sort_name),
+    ]

games/migrations/0026_purchase_type.py

@@ -0,0 +1,27 @@
+# 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,
+            ),
+        ),
+    ]

games/migrations/0027_purchase_related_purchase.py

@@ -0,0 +1,25 @@
+# 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",
+            ),
+        ),
+    ]

games/migrations/0028_purchase_name.py

@@ -0,0 +1,26 @@
+# 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),
+    ]

games/migrations/0029_alter_purchase_related_purchase.py

@@ -0,0 +1,26 @@
+# 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",
+            ),
+        ),
+    ]

games/migrations/0030_alter_purchase_name.py

@@ -0,0 +1,18 @@
+# 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),
+        ),
+    ]

games/migrations/0031_device_created_at_edition_created_at_game_created_at_and_more.py

@@ -0,0 +1,44 @@
+# 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),
+        ),
+    ]

games/migrations/0032_alter_session_options_session_modified_at_and_more.py

@@ -0,0 +1,52 @@
+# 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),
+        ),
+    ]

games/migrations/0033_alter_edition_unique_together.py

@@ -0,0 +1,17 @@
+# 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")},
+        ),
+    ]

games/migrations/0034_purchase_date_dropped_purchase_infinite.py

@@ -0,0 +1,23 @@
+# 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),
+        ),
+    ]

games/migrations/0035_alter_session_device.py

@@ -0,0 +1,25 @@
+# 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",
+            ),
+        ),
+    ]

games/migrations/0036_alter_edition_platform.py

@@ -0,0 +1,19 @@
+# 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'),
+        ),
+    ]

games/models.py

@@ -1,30 +1,66 @@
-from datetime import datetime, timedelta
-from typing import Any
-from zoneinfo import ZoneInfo
+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 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):
     name = models.CharField(max_length=255)
-    wikidata = models.CharField(max_length=50)
+    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
+
+
+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
 
 
 class Edition(models.Model):
-    game = models.ForeignKey("Game", on_delete=models.CASCADE)
+    class Meta:
+        unique_together = [["name", "platform", "year_released"]]
+
+    game = models.ForeignKey(Game, on_delete=models.CASCADE)
     name = models.CharField(max_length=255)
-    platform = models.ForeignKey("Platform", on_delete=models.CASCADE)
-    year_released = models.IntegerField(default=datetime.today().year)
+    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
+    )
+    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.name
+        return self.sort_name
+
+
+class PurchaseQueryset(models.QuerySet):
+    def refunded(self):
+        return self.filter(date_refunded__isnull=False)
+
+    def not_refunded(self):
+        return self.filter(date_refunded__isnull=True)
+
+    def finished(self):
+        return self.filter(date_finished__isnull=False)
+
+    def games_only(self):
+        return self.filter(type=Purchase.GAME)
 
 
 class Purchase(models.Model):
@@ -46,83 +82,161 @@ 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"),
+    ]
 
-    edition = models.ForeignKey("Edition", on_delete=models.CASCADE)
-    platform = models.ForeignKey("Platform", on_delete=models.CASCADE)
+    objects = PurchaseQueryset().as_manager()
+
+    edition = models.ForeignKey(Edition, on_delete=models.CASCADE)
+    platform = models.ForeignKey(
+        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):
-        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()})"
+        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)))})"
 
+    def is_game(self):
+        return self.type == self.GAME
 
-class Platform(models.Model):
-    name = models.CharField(max_length=255)
-    group = models.CharField(max_length=255)
-
-    def __str__(self):
-        return self.name
+    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 SessionQuerySet(models.QuerySet):
-    def total_duration(self):
+    def total_duration_formatted(self):
+        return format_duration(self.total_duration_unformatted())
+
+    def total_duration_unformatted(self):
         result = self.aggregate(
             duration=Sum(F("duration_calculated") + F("duration_manual"))
         )
-        return format_duration(result["duration"])
+        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):
-    purchase = models.ForeignKey("Purchase", on_delete=models.CASCADE)
+    class Meta:
+        get_latest_by = "timestamp_start"
+
+    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.CASCADE, null=True)
+    device = models.ForeignKey(
+        "Device",
+        on_delete=models.SET_DEFAULT,
+        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.duration_manual != None else ""
+        mark = ", manual" if self.is_manual() else ""
         return f"{str(self.purchase)} {str(self.timestamp_start.date())} ({self.duration_formatted()}{mark})"
 
     def finish_now(self):
-        self.timestamp_end = datetime.now(ZoneInfo(settings.TIME_ZONE))
+        self.timestamp_end = timezone.now()
 
     def start_now():
-        self.timestamp_start = datetime.now(ZoneInfo(settings.TIME_ZONE))
+        self.timestamp_start = timezone.now()
 
     def duration_seconds(self) -> timedelta:
         manual = timedelta(0)
         calculated = timedelta(0)
-        if not self.duration_manual in (None, 0, timedelta(0)):
+        if self.is_manual() and isinstance(self.duration_manual, timedelta):
             manual = self.duration_manual
         if self.timestamp_end != None and self.timestamp_start != None:
             calculated = self.timestamp_end - self.timestamp_start
         return timedelta(seconds=(manual + calculated).total_seconds())
 
     def duration_formatted(self) -> str:
-        result = format_duration(self.duration_seconds(), "%H:%m")
+        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()
+        return Session.objects.all().total_duration_formatted()
 
-    def save(self, *args, **kwargs):
+    def save(self, *args, **kwargs) -> None:
         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"}
+            )
+            self.device = default_device
         super(Session, self).save(*args, **kwargs)
 
 
@@ -132,15 +246,18 @@ class Device(models.Model):
     HANDHELD = "ha"
     MOBILE = "mo"
     SBC = "sbc"
+    UNKNOWN = "un"
     DEVICE_TYPES = [
         (PC, "PC"),
         (CONSOLE, "Console"),
         (HANDHELD, "Handheld"),
         (MOBILE, "Mobile"),
         (SBC, "Single-board computer"),
+        (UNKNOWN, "Unknown"),
     ]
     name = models.CharField(max_length=255)
-    type = models.CharField(max_length=3, choices=DEVICE_TYPES, default=PC)
+    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()})"

games/schema.py

@@ -0,0 +1,30 @@
+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)

games/static/js/add_edition.js

@@ -0,0 +1,24 @@
+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: "textContent",
+    target: "#id_sort_name",
+    target_value: "value",
+  },
+  {
+    source: "#id_game",
+    source_value: "dataset.year",
+    target: "#id_year_released",
+    target_value: "value",
+  },
+];
+
+syncSelectInputUntilChanged(syncData, "form");

games/static/js/add_game.js

@@ -0,0 +1,12 @@
+import { syncSelectInputUntilChanged } from "./utils.js";
+
+let syncData = [
+  {
+    source: "#id_name",
+    source_value: "value",
+    target: "#id_sort_name",
+    target_value: "value",
+  },
+];
+
+syncSelectInputUntilChanged(syncData, "form");

games/static/js/add_purchase.js

@@ -0,0 +1,47 @@
+import {
+  syncSelectInputUntilChanged,
+  getEl,
+  disableElementsWhenTrue,
+  disableElementsWhenValueNotEqual,
+} 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
+    }
+  }
+});

games/static/js/add_session.js

@@ -0,0 +1,23 @@
+import { toISOUTCString } from "./utils.js";
+
+for (let button of document.querySelectorAll("[data-target]")) {
+  let target = button.getAttribute("data-target");
+  let type = button.getAttribute("data-type");
+  let targetElement = document.querySelector(`#id_${target}`);
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (type == "now") {
+      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;
+    } else if (type == "toggle") {
+      if (targetElement.type == "datetime-local") targetElement.type = "text";
+      else targetElement.type = "datetime-local";
+    }
+  });
+}

games/static/js/utils.js

@@ -0,0 +1,207 @@
+/**
+ * @description Formats Date to a UTC string accepted by the datetime-local input field.
+ * @param {Date} date
+ * @returns {string}
+ */
+function toISOUTCString(date) {
+  function stringAndPad(number) {
+    return number.toString().padStart(2, 0);
+  }
+  const year = date.getFullYear();
+  const month = stringAndPad(date.getMonth() + 1);
+  const day = stringAndPad(date.getDate());
+  const hours = stringAndPad(date.getHours());
+  const minutes = stringAndPad(date.getMinutes());
+  return `${year}-${month}-${day}T${hours}:${minutes}`;
+}
+
+/**
+ * @description Sync values between source and target elements based on syncData configuration.
+ * @param {Array} syncData - Array of objects to define source and target elements with their respective value types.
+ */
+function syncSelectInputUntilChanged(syncData, parentSelector = document) {
+  const parentElement =
+    parentSelector === document
+      ? document
+      : document.querySelector(parentSelector);
+
+  if (!parentElement) {
+    console.error(`The parent selector "${parentSelector}" is not valid.`);
+    return;
+  }
+  // Set up a single change event listener on the document for handling all source changes
+  parentElement.addEventListener("change", function (event) {
+    // Loop through each sync configuration item
+    syncData.forEach((syncItem) => {
+      // Check if the change event target matches the source selector
+      if (event.target.matches(syncItem.source)) {
+        const sourceElement = event.target;
+        const valueToSync = getValueFromProperty(
+          sourceElement,
+          syncItem.source_value
+        );
+        const targetElement = document.querySelector(syncItem.target);
+
+        if (targetElement && valueToSync !== null) {
+          targetElement[syncItem.target_value] = valueToSync;
+        }
+      }
+    });
+  });
+
+  // Set up a single focus event listener on the document for handling all target focuses
+  parentElement.addEventListener(
+    "focus",
+    function (event) {
+      // Loop through each sync configuration item
+      syncData.forEach((syncItem) => {
+        // Check if the focus event target matches the target selector
+        if (event.target.matches(syncItem.target)) {
+          // Remove the change event listener to stop syncing
+          // This assumes you want to stop syncing once any target receives focus
+          // You may need a more sophisticated way to remove listeners if you want to stop
+          // syncing selectively based on other conditions
+          document.removeEventListener("change", syncSelectInputUntilChanged);
+        }
+      });
+    },
+    true
+  ); // Use capture phase to ensure the event is captured during focus, not bubble
+}
+
+/**
+ * @description Retrieve the value from the source element based on the provided property.
+ * @param {Element} sourceElement - The source HTML element.
+ * @param {string} property - The property to retrieve the value from.
+ */
+function getValueFromProperty(sourceElement, property) {
+  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];
+  } else if (property in source) {
+    return source[property];
+  } else {
+    console.error(`Property ${property} is not valid for the option element.`);
+    return null;
+  }
+}
+
+/**
+ * @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,
+};

games/static/main.js

@@ -0,0 +1,43 @@
+function elt(type, props, ...children) {
+  let dom = document.createElement(type);
+  if (props) Object.assign(dom, props);
+  for (let child of children) {
+    if (typeof child != "string") dom.appendChild(child);
+    else dom.appendChild(document.createTextNode(child));
+  }
+  return dom;
+}
+
+/**
+ * @param {Node} targetNode
+ */
+function addToggleButton(targetNode) {
+  let manualToggleButton = elt(
+    "td",
+    {},
+    elt(
+      "div",
+      { className: "basic-button" },
+      elt(
+        "button",
+        {
+          onclick: (event) => {
+            let textInputField = elt("input", { type: "text", id: targetNode.id });
+            targetNode.replaceWith(textInputField);
+            event.target.addEventListener("click", (event) => {
+              textInputField.replaceWith(targetNode);
+            });
+          },
+        },
+        "Toggle manual"
+      )
+    )
+  );
+  targetNode.parentElement.appendChild(manualToggleButton);
+}
+
+const toggleableFields = ["#id_game", "#id_edition", "#id_platform"];
+
+toggleableFields.map((selector) => {
+  addToggleButton(document.querySelector(selector));
+});

games/static/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

games/templates/add.html

@@ -1,16 +1,24 @@
 {% extends "base.html" %}
-
-{% block title %}{{ title }}{% endblock title %}
-
+{% load static %}
+{% 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><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 %}
+{% endblock content %}
+{% block scripts %}
+    {% if script_name %}
+        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
+    {% endif %}
+{% endblock scripts %}

games/templates/add_edition.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% load static %}
+{% 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>
+        </table>
+    </form>
+{% endblock content %}
+{% block scripts %}
+    {% if script_name %}
+        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
+    {% endif %}
+{% endblock scripts %}

games/templates/add_game.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% load static %}
+{% 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>
+        </table>
+    </form>
+{% endblock content %}
+{% block scripts %}
+    {% if script_name %}
+        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
+    {% endif %}
+{% endblock scripts %}

games/templates/add_purchase.html

@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+{% load static %}
+{% 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 %}
+        </table>
+    </form>
+{% endblock content %}
+{% block scripts %}
+    {% if script_name %}
+        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
+    {% endif %}
+{% endblock scripts %}

games/templates/add_session.html

@@ -0,0 +1,40 @@
+{% extends "base.html" %}
+{% 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>
+        </table>
+    </form>
+    {% load static %}
+    <script type="module" src="{% static 'js/add_session.js' %}"></script>
+{% endblock content %}

games/templates/base.html

@@ -1,52 +1,90 @@
-<!doctype html>
+{% load django_htmx %}
+<!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>
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
+        <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 class="dark">
-        <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><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_game' %}">New Game</a></li>
-                            <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_platform' %}">New Platform</a></li>
-                            {% if game_available and platform_available %}
-                                <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_edition' %}">New Edition</a></li>
-                            {% endif %}
-                            {% if edition_available %}
-                                <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_purchase' %}">New Purchase</a></li>
-                            {% endif %}
-                            {% if purchase_available %}
-                                <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_session' %}">New Session</a></li>
-                                <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_device' %}">New Device</a></li>
-                            {% endif %}
-                            {% if session_count > 0 %}
-                                <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 %}
+    <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>
         </div>
-        {% load version %}
-        <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
-    </body>
+        {% block scripts %}
+        {% endblock scripts %}
+        <script>
+        var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+        var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
 
-</html>
+        // 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>
+    </body>
+</html>

games/templates/cotton/button.html

@@ -0,0 +1,5 @@
+<button type="button"
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 mt-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+    {{ text }}
+    {{ slot }}
+</button>

games/templates/cotton/button_group_button_sm.html

@@ -0,0 +1,20 @@
+<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"
+                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">
+            {{ text }}
+        </button>
+    {% elif color == "red" %}
+        <button type="button"
+                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">
+            {{ text }}
+        </button>
+    {% elif color == "green" %}
+        <button type="button"
+                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">
+            {{ text }}
+        </button>
+    {% endif %}
+</a>

games/templates/cotton/button_group_sm.html

@@ -0,0 +1,6 @@
+<c-vars color="gray" />
+<div class="inline-flex rounded-md shadow-sm" role="group">
+    {% for button in buttons %}
+        <c-button-group-button-sm :href=button.href :text=button.text :color=button.color />
+    {% endfor %}
+</div>

games/templates/cotton/button_old.html

@@ -0,0 +1,13 @@
+{% 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>

games/templates/cotton/button_start.html

@@ -0,0 +1,18 @@
+{% 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>

games/templates/cotton/gamelink.html

@@ -0,0 +1,10 @@
+<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>

games/templates/cotton/h1.html

@@ -0,0 +1,8 @@
+<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>

games/templates/cotton/popover.html

@@ -0,0 +1,7 @@
+<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">{{ slot }}</div>
+    <div data-popper-arrow></div>
+</div>

games/templates/cotton/simple_table.html

@@ -0,0 +1,55 @@
+{% load param_utils %}
+<div class="shadow-md sm:rounded-lg" hx-boost="false">
+    <div class="relative overflow-x-auto sm:rounded-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>
+                {% 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"
+             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>

games/templates/cotton/table.html

@@ -0,0 +1,12 @@
+<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>

games/templates/cotton/table_header.html

@@ -0,0 +1,3 @@
+<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>

games/templates/cotton/table_row.html

@@ -0,0 +1,16 @@
+<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 border-b [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-2">
+    {% 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>

games/templates/cotton/table_td.html

@@ -0,0 +1 @@
+<td class="px-6 py-4 min-w-20-char max-w-20-char">{{ slot }}</td>

games/templates/index.html

@@ -1,11 +1,11 @@
 {% 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 %}
-            You have played a total of {{ session_count }} sessions for a total of {{ total_duration }}.
+            You have played a total of {{ session_count }} sessions for a total of {{ total_duration_formatted }}.
         {% elif not game_available or not platform_available %}
             There are no games in the database. Start by clicking "New Game" and "New Platform".
         {% elif not purchase_available %}
@@ -14,4 +14,4 @@
             You haven't played any games yet. Click "New Session" to add one now.
         {% endif %}
     </div>
-{% endblock content %}
+{% endblock content %}

games/templates/list_purchases.html

@@ -0,0 +1,10 @@
+{% 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 />
+    </div>
+{% endblock content %}

games/templates/list_sessions.html

@@ -1,125 +1,74 @@
-{% extends 'base.html' %}
-
+{% extends "base.html" %}
 {% load static %}
-
-{% block title %}{{ title }}{% endblock title %}
-
+{% block title %}
+    {{ title }}
+{% endblock title %}
 {% block content %}
-        <div class="text-center text-xl mb-4 dark:text-slate-400">
-            {% if dataset.count >= 2 %}
-            <img src="data:image/svg+xml;base64,{{ chart|safe }}" class="mx-auto mb-3" />
-            {% endif %}
-            {% if dataset.count >= 1 %}
-            <div class="mb-4">Total playtime: {{ total_duration }} over {{ dataset.count }} sessions.</div>
-            {% endif %}
-            {% if purchase or platform or edition or game or ownership_type %}
-            <span class="block">
-                <a class="text-red-400 inline" href="{% url 'list_sessions' %}">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 inline">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                </a>
-                {% if purchase %}
-                Filtering by purchase "{{ purchase }}"
-                (<a href="{% url 'edit_purchase' purchase.id %}" class="hover:underline dark:text-white">Edit</a>)
-                {% elif platform %}
-                Filtering by purchase "{{ platform }}"
-                (<a href="{% url 'edit_platform' platform.id %}" class="hover:underline dark:text-white">Edit</a>)
-                {% elif game %}
-                Filtering by purchase "{{ game }}"
-                (<a href="{% url 'edit_game' game.id %}" class="hover:underline dark:text-white">Edit</a>)
-                {% elif edition %}
-                Filtering by purchase "{{ edition }}"
-                (<a href="{% url 'edit_edition' edition.id %}" class="hover:underline dark:text-white">Edit</a>)
-                {% elif ownership_type %}
-                Filtering by ownership type "{{ ownership_type }}"
-                {% endif%}
-            </span>
-            {% if purchase %}<a class="dark:text-white hover:underline block" href="{% url 'list_sessions_by_edition' purchase.edition.id %}">See all platforms</a>{% endif %}
-            {% endif %}
-            {% if dataset.count >= 1 %}
-            <a href="{% url 'start_session' last.id %}">
-                <button type="button" title="Track last tracked" class="mt-10 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>
-                    {{ last.purchase }}
-                </button>
-            </a>
-            {% endif %}
-        </div>
-    <div id="session-table" class="gap-4 shadow rounded-xl max-w-screen-2xl mx-auto dark:bg-slate-700 p-2 justify-center">
-        <div class="dark:border-white dark:text-slate-300 text-lg">Purchase</div>
-        <div class="dark:border-white dark:text-slate-300 text-lg">Platform</div>
-        <div class="dark:border-white dark:text-slate-300 text-lg text-center">Start</div>
-        <div class="dark:border-white dark:text-slate-300 text-lg text-center">End</div>
-        <div class="dark:border-white dark:text-slate-300 text-lg">Duration</div>
-        <div class="dark:border-white dark:text-slate-300 text-lg text-right">Manage</div>
-        {% for data in dataset %}
-            <div class="purchase-name">
-                <span class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">{{ data.purchase.edition }} <span class="dark:text-slate-400">(<a class="hover:underline" href="{% url 'list_sessions_by_ownership_type' data.purchase.ownership_type %}">{{ data.purchase.get_ownership_type_display }}</a>)</span></span>
-                
-                <span>
-                    <a href="{% url 'list_sessions_by_game'  data.purchase.edition.game.id %}">
-                        <img src="{% static 'icons/game_white.png' %}" width="32" class="inline" alt="Filter by this game" title="Filter by this game" />
-                    </a>
-                    <a href="{% url 'list_sessions_by_edition'  data.purchase.edition.id %}">
-                        <img src="{% static 'icons/edition_white.png' %}" width="32" class="inline" alt="Filter by this edition" title="Filter by this edition" />
-                    </a>
-                    <a href="{% url 'list_sessions_by_purchase' data.purchase.id %}">
-                        <img src="{% static 'icons/purchase_white.png' %}" width="32" class="inline" alt="Filter by this purchase" title="Filter by this purchase" />
-                    </a>
-                </span>
-            </div>
-            <div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
-                <a class="hover:underline" href="{% url 'list_sessions_by_platform' data.purchase.platform.id %}">
-                    {% if data.purchase.platform != data.purchase.edition.platform %}
-                        {{data.purchase.edition.platform}} on {{ data.purchase.platform }}
-                    {% else %}
-                        {{ data.purchase.platform }}
-                    {% endif %}
+    <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>
-            <div class="dark:text-slate-400 text-center">{{ data.timestamp_start | date:"d/m/Y H:i" }}</div>
-            <div class="dark:text-slate-400 text-center">
-                {% if data.unfinished %}
-                    <span class="text-red-400">Not finished yet.</span>
-                {% elif data.duration_manual %}
-                    --
-                {% else %}
-                    {{ data.timestamp_end | date:"d/m/Y H:i" }}
-                {% endif %}
-            </div>
-            <div class="dark:text-slate-400 flex">{{ data.duration_formatted }}{% if data.duration_manual %} <svg title="Added manually" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 ml-1 self-center">
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
-              </svg>
-              {% endif %}</div>
-            <div id="button-container" class="flex justify-end">
-                {% if data.unfinished %}
-                    <a href="{% url 'update_session' data.id %}">
-                        <button type="button" title="Set to finished" class="py-1 px-2 flex justify-center items-center  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 w-7 h-4 rounded-lg ">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
-                                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
-                            </svg>
-                        </button>
-                    </a>
-                {% endif %}
-                <a href="{% url 'edit_session' data.id %}">
-                    <button type="button" title="Edit" class="py-1 px-2 flex justify-center items-center  bg-blue-600 hover:bg-blue-700 focus:ring-blue-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 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 href="{% url 'delete_session' data.id %}">
-                    <button type="button" edit="Delete" class="py-1 px-2 flex justify-center items-center  bg-red-600 hover:bg-red-700 focus:ring-red-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 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 fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
-                        </svg>
-                    </button>
-                </a>
-            </div>
-        {% endfor %}
-    </div>
-{% endblock content %}
+        {% 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 %}
+</div>
+{% endblock content %}

games/templates/navbar.html

@@ -0,0 +1,136 @@
+{% 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>

games/templates/partials/related_purchase_field.html

@@ -0,0 +1 @@
+{{ form.related_purchase }}

games/templates/registration/login.html

@@ -0,0 +1,22 @@
+{% 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 %}