also sort purchases by created_at

A leftover from when there was only the A component function,
this bug was not found earlier because we used
templates instead of tags most of the time.

.editorconfig

@@ -15,3 +15,6 @@ indent_size = 4
 [**/*.js]
 indent_style = space
 indent_size = 2
+
+[*.html]
+insert_final_newline = false

common/components.py

@@ -0,0 +1,167 @@
+from random import choices as random_choices
+from string import ascii_lowercase
+from typing import Any, Callable
+
+from django.template.loader import render_to_string
+from django.urls import NoReverseMatch, reverse
+from django.utils.safestring import SafeText, mark_safe
+
+from common.utils import truncate
+
+HTMLAttribute = tuple[str, str | int | bool]
+HTMLTag = str
+
+
+def Component(
+    attributes: list[HTMLAttribute] = [],
+    children: list[HTMLTag] | HTMLTag = [],
+    template: str = "",
+    tag_name: str = "",
+) -> HTMLTag:
+    if not tag_name and not template:
+        raise ValueError("One of template or tag_name is required.")
+    if isinstance(children, str):
+        children = [children]
+    childrenBlob = "\n".join(children)
+    if len(attributes) == 0:
+        attributesBlob = ""
+    else:
+        attributesList = [f'{name}="{value}"' for name, value in attributes]
+        # make attribute list into a string
+        # and insert space between tag and attribute list
+        attributesBlob = f" {" ".join(attributesList)}"
+    tag: str = ""
+    if tag_name != "":
+        tag = f"<{tag_name}{attributesBlob}>{childrenBlob}</{tag_name}>"
+    elif template != "":
+        tag = render_to_string(
+            template,
+            {name: value for name, value in attributes}
+            | {"slot": mark_safe("\n".join(children))},
+        )
+    return mark_safe(tag)
+
+
+def randomid(seed: str = "", length: int = 10) -> str:
+    return seed + "".join(random_choices(ascii_lowercase, k=length))
+
+
+def Popover(
+    popover_content: str,
+    wrapped_content: str = "",
+    children: list[HTMLTag] = [],
+    attributes: list[HTMLAttribute] = [],
+) -> str:
+    if not wrapped_content and not children:
+        raise ValueError("One of wrapped_content or children is required.")
+    id = randomid()
+    return Component(
+        attributes=attributes
+        + [
+            ("id", id),
+            ("wrapped_content", wrapped_content),
+            ("popover_content", popover_content),
+        ],
+        children=children,
+        template="cotton/popover.html",
+    )
+
+
+def PopoverTruncated(input_string: str) -> str:
+    if (truncated := truncate(input_string)) != input_string:
+        return Popover(wrapped_content=truncated, popover_content=input_string)
+    else:
+        return input_string
+
+
+def A(
+    attributes: list[HTMLAttribute] = [],
+    children: list[HTMLTag] | HTMLTag = [],
+    url: str | Callable[..., Any] = "",
+):
+    """
+    Returns the HTML tag "a".
+    "url" can either be:
+        - URL (string)
+        - path name passed to reverse() (string)
+        - function
+    """
+    additional_attributes = []
+    if url:
+        if type(url) is str:
+            try:
+                url_result = reverse(url)
+            except NoReverseMatch:
+                url_result = url
+        elif callable(url):
+            url_result = url()
+        else:
+            raise TypeError("'url' is neither str nor function.")
+        additional_attributes = [("href", url_result)]
+    return Component(
+        tag_name="a", attributes=attributes + additional_attributes, children=children
+    )
+
+
+def Button(
+    attributes: list[HTMLAttribute] = [],
+    children: list[HTMLTag] | HTMLTag = [],
+    size: str = "base",
+    icon: bool = False,
+    color: str = "blue",
+):
+    return Component(
+        template="cotton/button.html",
+        attributes=attributes + [("size", size), ("icon", icon), ("color", color)],
+        children=children,
+    )
+
+
+def Div(
+    attributes: list[HTMLAttribute] = [],
+    children: list[HTMLTag] | HTMLTag = [],
+):
+    return Component(tag_name="div", attributes=attributes, children=children)
+
+
+def Icon(
+    name: str,
+    attributes: list[HTMLAttribute] = [],
+):
+    return Component(template=f"cotton/icon/{name}.html", attributes=attributes)
+
+
+def LinkedNameWithPlatformIcon(name: str, game_id: int, platform: str) -> SafeText:
+    link = reverse("view_game", args=[int(game_id)])
+    a_content = Div(
+        [("class", "inline-flex gap-2 items-center")],
+        [
+            Icon(
+                platform.icon,
+                [("title", platform.name)],
+            ),
+            PopoverTruncated(name),
+        ],
+    )
+
+    return mark_safe(
+        A(
+            url=link,
+            children=[a_content],
+        ),
+    )
+
+
+def NameWithPlatformIcon(name: str, platform: str) -> SafeText:
+    content = Div(
+        [("class", "inline-flex gap-2 items-center")],
+        [
+            Icon(
+                platform.icon,
+                [("title", platform.name)],
+            ),
+            PopoverTruncated(name),
+        ],
+    )
+
+    return mark_safe(content)

common/time.py

@@ -1,5 +1,15 @@
 import re
-from datetime import timedelta
+from datetime import date, datetime, timedelta
+
+from django.utils import timezone
+
+from common.utils import generate_split_ranges
+
+dateformat: str = "%d/%m/%Y"
+datetimeformat: str = "%d/%m/%Y %H:%M"
+timeformat: str = "%H:%M"
+durationformat: str = "%2.1H hours"
+durationformat_manual: str = "%H hours"
 
 
 def _safe_timedelta(duration: timedelta | int | None):
@@ -70,3 +80,90 @@ def format_duration(
                 rf"%\d*\.?\d*{pattern}", replacement, formatted_string
             )
     return formatted_string
+
+
+def local_strftime(datetime: datetime, format: str = datetimeformat) -> str:
+    return timezone.localtime(datetime).strftime(format)
+
+
+def daterange(start: date, end: date, end_inclusive: bool = False) -> list[date]:
+    time_between: timedelta = end - start
+    if (days_between := time_between.days) < 1:
+        raise ValueError("start and end have to be at least 1 day apart.")
+    if end_inclusive:
+        print(f"{end_inclusive=}")
+        print(f"{days_between=}")
+        days_between += 1
+    print(f"{days_between=}")
+    return [start + timedelta(x) for x in range(days_between)]
+
+
+def streak(datelist: list[date]) -> dict[str, int | tuple[date, date]]:
+    if len(datelist) == 1:
+        return {"days": 1, "dates": (datelist[0], datelist[0])}
+    else:
+        print(f"Processing {len(datelist)} dates.")
+        missing = sorted(
+            set(
+                datelist[0] + timedelta(x)
+                for x in range((datelist[-1] - datelist[0]).days)
+            )
+            - set(datelist)
+        )
+        print(f"{len(missing)} days missing.")
+        datelist_with_missing = sorted(datelist + missing)
+        ranges = list(generate_split_ranges(datelist_with_missing, missing))
+        print(f"{len(ranges)} ranges calculated.")
+        longest_consecutive_days = timedelta(0)
+        longest_range: tuple[date, date] = (date(1970, 1, 1), date(1970, 1, 1))
+        for start, end in ranges:
+            if (current_streak := end - start) > longest_consecutive_days:
+                longest_consecutive_days = current_streak
+                longest_range = (start, end)
+        return {"days": longest_consecutive_days.days + 1, "dates": longest_range}
+
+
+def streak_bruteforce(datelist: list[date]) -> dict[str, int | tuple[date, date]]:
+    if (datelist_length := len(datelist)) == 0:
+        raise ValueError("Number of dates in the list is 0.")
+    datelist.sort()
+    current_streak = 1
+    current_start = datelist[0]
+    current_end = datelist[0]
+    current_date = datelist[0]
+    highest_streak = 1
+    highest_streak_daterange = (current_start, current_end)
+
+    def update_highest_streak():
+        nonlocal highest_streak, highest_streak_daterange
+        if current_streak > highest_streak:
+            highest_streak = current_streak
+            highest_streak_daterange = (current_start, current_end)
+
+    def reset_streak():
+        nonlocal current_start, current_end, current_streak
+        current_start = current_end = current_date
+        current_streak = 1
+
+    def increment_streak():
+        nonlocal current_end, current_streak
+        current_end = current_date
+        current_streak += 1
+
+    for i, datelist_item in enumerate(datelist, start=1):
+        current_date = datelist_item
+        if current_date == current_start or current_date == current_end:
+            continue
+        if current_date - timedelta(1) != current_end and i != datelist_length:
+            update_highest_streak()
+            reset_streak()
+        elif current_date - timedelta(1) == current_end and i == datelist_length:
+            increment_streak()
+            update_highest_streak()
+        else:
+            increment_streak()
+    return {"days": highest_streak, "dates": highest_streak_daterange}
+
+
+def available_stats_year_range():
+    return range(datetime.now().year, 1999, -1)

common/utils.py

@@ -1,44 +1,5 @@
-from random import choices
-from string import ascii_lowercase
-from typing import Any
-
-from django.template.loader import render_to_string
-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 A(attributes: list[HTMLAttribute], children: list[HTMLTag] | HTMLTag) -> HTMLTag:
-    if isinstance(children, str):
-        children = [children]
-    childrenBlob = "\n".join(children)
-    attributesList = [f'{name} = "{value}"' for name, value in attributes]
-    attributesBlob = " ".join(attributesList)
-    tag: str = f"<a {attributesBlob}>{childrenBlob}</a>"
-    return mark_safe(tag)
+from datetime import date
+from typing import Any, Generator, TypeVar
 
 
 def safe_division(numerator: int | float, denominator: int | float) -> int | float:
@@ -81,14 +42,25 @@ def truncate(input_string: str, length: int = 30, ellipsis: str = "…") -> str:
     )
 
 
-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
+T = TypeVar("T", str, int, date)
 
 
-def randomid(seed: str = "", length: int = 10) -> str:
-    return seed + "".join(choices(ascii_lowercase, k=length))
+def generate_split_ranges(
+    value_list: list[T], split_points: list[T]
+) -> Generator[tuple[T, T], None, None]:
+    for x in range(0, len(split_points) + 1):
+        if x == 0:
+            start = 0
+        elif x >= len(split_points):
+            start = value_list.index(split_points[x - 1]) + 1
+        else:
+            start = value_list.index(split_points[x - 1]) + 1
+        try:
+            end = value_list.index(split_points[x])
+        except IndexError:
+            end = len(value_list)
+        yield (value_list[start], value_list[end - 1])
+
+
+def format_float_or_int(number: int | float):
+    return int(number) if float(number).is_integer() else f"{number:03.2f}"

games/forms.py

@@ -164,7 +164,11 @@ class GameForm(forms.ModelForm):
 class PlatformForm(forms.ModelForm):
     class Meta:
         model = Platform
-        fields = ["name", "group"]
+        fields = [
+            "name",
+            "icon",
+            "group",
+        ]
         widgets = {"name": autofocus_input_widget}
 
 

games/migrations/0037_platform_icon.py

@@ -0,0 +1,26 @@
+# Generated by Django 5.1.1 on 2024-09-14 07:05
+
+from django.db import migrations, models
+from django.utils.text import slugify
+
+
+def update_empty_icons(apps, schema_editor):
+    Platform = apps.get_model("games", "Platform")
+    for platform in Platform.objects.filter(icon=""):
+        platform.icon = slugify(platform.name)
+        platform.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("games", "0036_alter_edition_platform"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="platform",
+            name="icon",
+            field=models.SlugField(blank=True),
+        ),
+        migrations.RunPython(update_empty_icons),
+    ]

games/migrations/0038_alter_purchase_price.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.1 on 2024-10-04 09:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('games', '0037_platform_icon'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='purchase',
+            name='price',
+            field=models.FloatField(default=0),
+        ),
+    ]

games/models.py

@@ -3,6 +3,7 @@ from datetime import timedelta
 from django.core.exceptions import ValidationError
 from django.db import models
 from django.db.models import F, Sum
+from django.template.defaultfilters import slugify
 from django.utils import timezone
 
 from common.time import format_duration
@@ -25,11 +26,23 @@ class Game(models.Model):
 class Platform(models.Model):
     name = models.CharField(max_length=255)
     group = models.CharField(max_length=255, null=True, blank=True, default=None)
+    icon = models.SlugField(blank=True)
     created_at = models.DateTimeField(auto_now_add=True)
 
     def __str__(self):
         return self.name
 
+    def save(self, *args, **kwargs):
+        if not self.icon:
+            self.icon = slugify(self.name)
+        super().save(*args, **kwargs)
+
+
+def get_sentinel_platform():
+    return Platform.objects.get_or_create(
+        name="Unspecified", icon="unspecified", group="Unspecified"
+    )[0]
+
 
 class Edition(models.Model):
     class Meta:
@@ -48,6 +61,11 @@ class Edition(models.Model):
     def __str__(self):
         return self.sort_name
 
+    def save(self, *args, **kwargs):
+        if self.platform is None:
+            self.platform = get_sentinel_platform()
+        super().save(*args, **kwargs)
+
 
 class PurchaseQueryset(models.QuerySet):
     def refunded(self):
@@ -104,7 +122,7 @@ class Purchase(models.Model):
     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 = models.FloatField(default=0)
     price_currency = models.CharField(max_length=3, default="USD")
     ownership_type = models.CharField(
         max_length=2, choices=OWNERSHIP_TYPES, default=DIGITAL

games/static/base.css

@@ -1346,6 +1346,10 @@ input:checked + .toggle-bg {
   z-index: 50;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1535,8 +1539,8 @@ input:checked + .toggle-bg {
   width: 100%;
 }
 
-.max-w-80 {
-  max-width: 20rem;
+.max-w-\[30rem\] {
+  max-width: 30rem;
 }
 
 .max-w-screen-lg {
@@ -1734,8 +1738,8 @@ input:checked + .toggle-bg {
   white-space: nowrap;
 }
 
-.text-wrap {
-  text-wrap: wrap;
+.text-balance {
+  text-wrap: balance;
 }
 
 .rounded {
@@ -1782,10 +1786,6 @@ input:checked + .toggle-bg {
   border-width: 0px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
-}
-
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(28 100 242 / var(--tw-border-opacity));
@@ -1865,6 +1865,16 @@ input:checked + .toggle-bg {
   background-color: rgb(5 122 85 / var(--tw-bg-opacity));
 }
 
+.bg-green-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 108 78 / var(--tw-bg-opacity));
+}
+
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1945,6 +1955,11 @@ input:checked + .toggle-bg {
   padding-bottom: 0.75rem;
 }
 
+.py-3\.5 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1966,6 +1981,10 @@ input:checked + .toggle-bg {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .align-top {
   vertical-align: top;
 }
@@ -2067,6 +2086,11 @@ input:checked + .toggle-bg {
   letter-spacing: -0.025em;
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -2107,11 +2131,6 @@ input:checked + .toggle-bg {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(224 36 36 / var(--tw-text-opacity));
-}
-
 .text-slate-300 {
   --tw-text-opacity: 1;
   color: rgb(203 213 225 / var(--tw-text-opacity));
@@ -2529,6 +2548,11 @@ textarea:disabled:is(.dark *) {
   background-color: rgb(4 108 78 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 84 63 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(253 232 232 / var(--tw-bg-opacity));
@@ -2539,6 +2563,11 @@ textarea:disabled:is(.dark *) {
   background-color: rgb(240 82 82 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-white:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2610,11 +2639,21 @@ textarea:disabled:is(.dark *) {
   --tw-ring-color: rgb(26 86 219 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-gray-100:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-gray-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-green-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(132 225 188 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-green-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
@@ -2625,6 +2664,11 @@ textarea:disabled:is(.dark *) {
   --tw-ring-color: rgb(4 108 78 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-red-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
@@ -2693,6 +2737,12 @@ textarea:disabled:is(.dark *) {
   outline-color: #AC94FA;
 }
 
+.dark\:divide-y:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
 .dark\:divide-gray-600:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
@@ -2765,11 +2815,21 @@ textarea:disabled:is(.dark *) {
   background-color: rgb(17 24 39 / 0.8);
 }
 
+.dark\:bg-green-600:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 122 85 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-purple-800:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(85 33 181 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-red-600:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
+}
+
 .dark\:text-blue-500:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(63 131 248 / var(--tw-text-opacity));
@@ -2860,6 +2920,11 @@ textarea:disabled:is(.dark *) {
   background-color: rgb(5 122 85 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-green-700:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 108 78 / var(--tw-bg-opacity));
+}
+
 .dark\:hover\:bg-red-700:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(200 30 30 / var(--tw-bg-opacity));
@@ -2900,11 +2965,26 @@ textarea:disabled:is(.dark *) {
   --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
 }
 
+.dark\:focus\:ring-gray-700:focus:is(.dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
+}
+
 .dark\:focus\:ring-green-500:focus:is(.dark *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
 }
 
+.dark\:focus\:ring-green-800:focus:is(.dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity));
+}
+
+.dark\:focus\:ring-red-900:focus:is(.dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(119 29 29 / var(--tw-ring-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:table-cell {
     display: table-cell;
@@ -2926,6 +3006,16 @@ textarea:disabled:is(.dark *) {
     border-radius: 0.5rem;
   }
 
+  .sm\:rounded-b-lg {
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .sm\:rounded-t-lg {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -3075,6 +3165,10 @@ textarea:disabled:is(.dark *) {
   --tw-space-x-reverse: 1;
 }
 
+.rtl\:text-left:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: left;
+}
+
 .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
@@ -3100,3 +3194,11 @@ textarea:disabled:is(.dark *) {
 .\[\&_a\]\:underline-offset-4 a {
   text-underline-offset: 4px;
 }
+
+.\[\&_h1\]\:mb-2 h1 {
+  margin-bottom: 0.5rem;
+}
+
+.\[\&_td\:last-child\]\:text-right td:last-child {
+  text-align: right;
+}

games/templates/add.html

@@ -1,24 +1,2 @@
-{% 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" value="Submit" />
-                </td>
-            </tr>
-        </table>
-    </form>
-{% endblock content %}
-{% block scripts %}
-    {% if script_name %}
-        <script type="module" src="{% static 'js/'|add:script_name %}"></script>
-    {% endif %}
-{% endblock scripts %}
+<c-layouts.add>
+</c-layouts.add>

games/templates/add_edition.html

@@ -1,32 +1,12 @@
-{% 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 %}
+<c-layouts.add>
+<c-slot name="additional_row">
+<tr>
+    <td></td>
+    <td>
+        <input type="submit"
+               name="submit_and_redirect"
+               value="Submit & Create Purchase" />
+    </td>
+</tr>
+</c-slot>
+</c-layouts.add>

games/templates/add_game.html

@@ -1,32 +1,12 @@
-{% 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 %}
+<c-layouts.add>
+<c-slot name="additional_row">
+<tr>
+    <td></td>
+    <td>
+        <input type="submit"
+               name="submit_and_redirect"
+               value="Submit & Create Edition" />
+    </td>
+</tr>
+</c-slot>
+</c-layouts.add>

games/templates/add_purchase.html

@@ -1,42 +1,12 @@
-{% 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 %}
+<c-layouts.add>
+<c-slot name="additional_row">
+<tr>
+    <td></td>
+    <td>
+        <input type="submit"
+               name="submit_and_redirect"
+               value="Submit & Create Session" />
+    </td>
+</tr>
+</c-slot>
+</c-layouts.add>

games/templates/add_session.html

@@ -1,40 +1,36 @@
-{% 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 %}
+<c-layouts.add>
+<c-slot name="form_content">
+<form method="post" enctype="multipart/form-data">
+    <table class="mx-auto">
+        {% csrf_token %}
+        {% for field in form %}
             <tr>
-                <td></td>
-                <td>
-                    <input type="submit" value="Submit" />
-                </td>
+                <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>
-        </table>
-    </form>
-    {% load static %}
-    <script type="module" src="{% static 'js/add_session.js' %}"></script>
-{% endblock content %}
+        {% endfor %}
+        <tr>
+            <td></td>
+            <td>
+                <input type="submit" value="Submit" />
+            </td>
+        </tr>
+    </table>
+</form>
+</c-slot>
+</c-layouts.add>

games/templates/base.html

@@ -1,90 +0,0 @@
-{% 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>
-        <script src="{% static 'js/htmx.min.js' %}"></script>
-        {% django_htmx_script %}
-        <link rel="stylesheet" href="{% static 'base.css' %}" />
-        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
-        <script>
-        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark')
-        }
-        </script>
-    </head>
-    <body hx-indicator="#indicator">
-        <img id="indicator"
-             src="{% static 'icons/loading.png' %}"
-             class="absolute right-3 top-3 animate-spin htmx-indicator"
-             height="24"
-             width="24"
-             alt="loading indicator" />
-        <div class="flex flex-col min-h-screen">
-            {% include "navbar.html" %}
-            <div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">
-                {% block content %}
-                    No content here.
-                {% endblock content %}
-            </div>
-            {% load version %}
-            <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
-        </div>
-        {% block scripts %}
-        {% endblock scripts %}
-        <script>
-        var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
-        var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-
-        // Change the icons inside the button based on previous settings
-        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            themeToggleLightIcon.classList.remove('hidden');
-        } else {
-            themeToggleDarkIcon.classList.remove('hidden');
-        }
-
-        var themeToggleBtn = document.getElementById('theme-toggle');
-
-        themeToggleBtn.addEventListener('click', function () {
-
-            // toggle icons inside button
-            themeToggleDarkIcon.classList.toggle('hidden');
-            themeToggleLightIcon.classList.toggle('hidden');
-
-            // if set via local storage previously
-            if (localStorage.getItem('color-theme')) {
-                if (localStorage.getItem('color-theme') === 'light') {
-                    document.documentElement.classList.add('dark');
-                    localStorage.setItem('color-theme', 'dark');
-                } else {
-                    document.documentElement.classList.remove('dark');
-                    localStorage.setItem('color-theme', 'light');
-                }
-
-                // if NOT set via local storage previously
-            } else {
-                if (document.documentElement.classList.contains('dark')) {
-                    document.documentElement.classList.remove('dark');
-                    localStorage.setItem('color-theme', 'light');
-                } else {
-                    document.documentElement.classList.add('dark');
-                    localStorage.setItem('color-theme', 'dark');
-                }
-            }
-
-        });
-        </script>
-    </body>
-</html>

games/templates/cotton/button.html

@@ -1,4 +1,6 @@
+<c-vars color="blue" size="base" />
 <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 }}
+        title="{{ title }}"
+        class=" {% if color == "blue" %} bg-blue-700 dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 hover:bg-blue-800 text-white {% elif color == "red" %} bg-red-700 dark:bg-red-600 dark:focus:ring-red-900 dark:hover:bg-red-700 focus:ring-red-300 hover:bg-red-800 text-white {% elif color == "gray" %} bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-400 focus:ring-gray-100 hover:bg-gray-100 hover:text-blue-700 text-gray-900 border {% elif color == "green" %} bg-green-700 dark:bg-green-600 dark:focus:ring-green-800 dark:hover:bg-green-700 focus:ring-green-300 hover:bg-green-800 text-white {% endif %} focus:outline-none focus:ring-4 font-medium mb-2 me-2 rounded-lg {% if size == "xs" %} px-3 py-2 text-xs {% elif size == "sm" %} px-3 py-2 text-sm {% elif size == "base" %} px-5 py-2.5 text-sm {% elif size == "lg" %} px-5 py-3 text-base {% elif size == "xl" %} px-6 py-3.5 text-base {% endif %} {% if icon %} inline-flex text-center items-center gap-2 {% else %} {% endif %} ">
+    {{ slot }}
 </button>

games/templates/cotton/button_group.html

@@ -0,0 +1,8 @@
+<div class="inline-flex rounded-md shadow-sm" role="group">
+    {% if slot %}{{ slot }}{% endif %}
+    {% for button in buttons %}
+        {% if button.slot %}
+            <c-button-group-button-sm :href=button.href :slot=button.slot :color=button.color :hover=button.hover :title=button.title />
+        {% endif %}
+    {% endfor %}
+</div>

games/templates/cotton/button_group_button_sm.html

@@ -3,18 +3,21 @@
    class="[&:first-of-type_button]:rounded-s-lg [&:last-of-type_button]:rounded-e-lg">
     {% if color == "gray" %}
         <button type="button"
+                title="{{ title }}"
                 class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
-            {{ text }}
+            {{ slot }}
         </button>
     {% elif color == "red" %}
         <button type="button"
+                title="{{ title }}"
                 class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-red-500 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-red-700 dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
-            {{ text }}
+            {{ slot }}
         </button>
     {% elif color == "green" %}
         <button type="button"
+                title="{{ title }}"
                 class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-green-500 hover:border-green-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-green-700 dark:hover:bg-green-600 dark:focus:ring-green-500 dark:focus:text-white">
-            {{ text }}
+            {{ slot }}
         </button>
     {% endif %}
 </a>

games/templates/cotton/button_group_sm.html

@@ -1,6 +0,0 @@
-<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/icon/battlenet.html

@@ -0,0 +1,5 @@
+<c-svg title="Battle.net">
+<c-slot name="path">
+M 43.113281 22.152344 C 43.113281 22.152344 47.058594 22.351563 47.058594 20.03125 C 47.058594 16.996094 41.804688 14.261719 41.804688 14.261719 C 41.804688 14.261719 42.628906 12.515625 43.140625 11.539063 C 43.65625 10.5625 45.101563 6.753906 45.230469 5.886719 C 45.394531 4.792969 45.144531 4.449219 45.144531 4.449219 C 44.789063 6.792969 40.972656 13.539063 40.671875 13.769531 C 36.949219 12.023438 31.835938 11.539063 31.835938 11.539063 C 31.835938 11.539063 26.832031 1 22.125 1 C 17.457031 1 17.480469 10.023438 17.480469 10.023438 C 17.480469 10.023438 16.160156 7.464844 14.507813 7.464844 C 12.085938 7.464844 11.292969 11.128906 11.292969 15.097656 C 6.511719 15.097656 2.492188 16.164063 2.132813 16.265625 C 1.773438 16.371094 0.644531 17.191406 1.15625 17.089844 C 2.203125 16.753906 7.113281 15.992188 11.410156 16.367188 C 11.648438 20.140625 13.851563 25.054688 13.851563 25.054688 C 13.851563 25.054688 9.128906 31.894531 9.128906 36.78125 C 9.128906 38.066406 9.6875 40.417969 13.078125 40.417969 C 15.917969 40.417969 19.105469 38.710938 19.707031 38.363281 C 19.183594 39.113281 18.796875 40.535156 18.796875 41.191406 C 18.796875 41.726563 19.113281 43.246094 21.304688 43.246094 C 24.117188 43.246094 27.257813 41.089844 27.257813 41.089844 C 27.257813 41.089844 30.222656 46.019531 32.761719 48.28125 C 33.445313 48.890625 34.097656 49 34.097656 49 C 34.097656 49 31.578125 46.574219 28.257813 40.324219 C 31.34375 38.417969 34.554688 33.921875 34.554688 33.921875 C 34.554688 33.921875 34.933594 33.933594 37.863281 33.933594 C 42.453125 33.933594 48.972656 32.96875 48.972656 29.320313 C 48.972656 25.554688 43.113281 22.152344 43.113281 22.152344 Z M 43.625 19.886719 C 43.625 21.21875 42.359375 21.199219 42.359375 21.199219 L 41.394531 21.265625 C 41.394531 21.265625 39.566406 20.304688 38.460938 19.855469 C 38.460938 19.855469 40.175781 17.207031 40.578125 16.46875 C 40.882813 16.644531 43.625 18.363281 43.625 19.886719 Z M 24.421875 6.308594 C 26.578125 6.308594 29.65625 11.402344 29.65625 11.402344 C 29.65625 11.402344 24.851563 10.972656 20.898438 13.296875 C 21.003906 9.628906 22.238281 6.308594 24.421875 6.308594 Z M 15.871094 10.4375 C 16.558594 10.4375 17.230469 11.269531 17.507813 11.976563 C 17.507813 12.445313 17.75 15.171875 17.75 15.171875 L 13.789063 15.023438 C 13.789063 11.449219 15.1875 10.4375 15.871094 10.4375 Z M 15.464844 35.246094 C 13.300781 35.246094 12.851563 34.039063 12.851563 32.953125 C 12.851563 30.496094 14.8125 27.058594 14.8125 27.058594 C 14.8125 27.058594 17.011719 31.683594 20.851563 33.636719 C 18.945313 34.753906 17.375 35.246094 15.464844 35.246094 Z M 22.492188 40.089844 C 20.972656 40.089844 20.789063 39.105469 20.789063 38.878906 C 20.789063 38.171875 21.339844 37.335938 21.339844 37.335938 C 21.339844 37.335938 23.890625 35.613281 24.054688 35.429688 L 25.9375 38.945313 C 25.9375 38.945313 24.007813 40.089844 22.492188 40.089844 Z M 27.226563 38.171875 C 26.300781 36.554688 25.621094 34.867188 25.621094 34.867188 C 25.621094 34.867188 29.414063 35.113281 31.453125 33.007813 C 30.183594 33.578125 28.15625 34.300781 25.800781 34.082031 C 30.726563 29.742188 33.601563 26.597656 36.03125 23.34375 C 35.824219 23.09375 34.710938 22.316406 34.4375 22.1875 C 32.972656 23.953125 27.265625 30.054688 21.984375 33.074219 C 15.292969 29.425781 13.890625 18.691406 13.746094 16.460938 L 17.402344 16.8125 C 17.402344 16.8125 16.027344 19.246094 16.027344 21.039063 C 16.027344 22.828125 16.242188 22.925781 16.242188 22.925781 C 16.242188 22.925781 16.195313 19.800781 18.125 17.390625 C 19.59375 25.210938 21.125 29.21875 22.320313 31.605469 C 22.925781 31.355469 24.058594 30.851563 24.058594 30.851563 C 24.058594 30.851563 20.683594 21.121094 20.871094 14.535156 C 22.402344 13.71875 24.667969 12.875 27.226563 12.875 C 33.957031 12.875 39.367188 15.773438 39.367188 15.773438 L 37.25 18.730469 C 37.25 18.730469 35.363281 15.3125 32.699219 14.703125 C 34.105469 15.753906 35.679688 17.136719 36.496094 19.128906 C 30.917969 16.949219 24.1875 15.796875 22.027344 15.542969 C 21.839844 16.339844 21.863281 17.480469 21.863281 17.480469 C 21.863281 17.480469 30.890625 19.144531 37.460938 22.90625 C 37.414063 31.125 28.460938 37.4375 27.226563 38.171875 Z M 35.777344 32.027344 C 35.777344 32.027344 38.578125 28.347656 38.535156 23.476563 C 38.535156 23.476563 43.0625 26.28125 43.0625 29.015625 C 43.0625 32.074219 35.777344 32.027344 35.777344 32.027344 Z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/bethesda.html

@@ -0,0 +1,5 @@
+<c-svg viewBox="0 0 20 20">
+<c-slot name="path">
+M2.069,11 L5,11 L5,9 L2.069,9 C2.252,7.542 2.828,6.208 3.688,5.102 L5.757,7.172 L7.171,5.757 L5.102,3.688 C6.208,2.828 8,2.252 9,2.069 L9,5 L11,5 L11,2.069 C12,2.252 13.791,2.828 14.897,3.688 L12.828,5.757 L14.242,7.172 L16.311,5.102 C17.171,6.208 17.747,7.542 17.93,9 L15,9 L15,11 L17.93,11 C17.747,12.458 17.171,13.792 16.311,14.898 L14.242,12.828 L12.828,14.243 L14.897,16.312 C13.791,17.172 12,17.748 11,17.931 L11,15 L9,15 L9,17.931 C8,17.748 6.208,17.172 5.102,16.312 L7.171,14.243 L5.757,12.828 L3.688,14.898 C2.828,13.792 2.252,12.458 2.069,11 M10,0 C4.477,0 0,4.477 0,10 C0,15.523 4.477,20 10,20 C15.522,20 20,15.523 20,10 C20,4.477 15.522,0 10,0
+</c-slot>
+</c-svg>

games/templates/cotton/icon/checkmark.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 43.470703 8.9863281 A 1.50015 1.50015 0 0 0 42.439453 9.4394531 L 16.5 35.378906 L 5.5605469 24.439453 A 1.50015 1.50015 0 1 0 3.4394531 26.560547 L 15.439453 38.560547 A 1.50015 1.50015 0 0 0 17.560547 38.560547 L 44.560547 11.560547 A 1.50015 1.50015 0 0 0 43.470703 8.9863281 z">
+    </path>
+</svg>

games/templates/cotton/icon/delete.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 24 4 C 20.491685 4 17.570396 6.6214322 17.080078 10 L 10.238281 10 A 1.50015 1.50015 0 0 0 9.9804688 9.9785156 A 1.50015 1.50015 0 0 0 9.7578125 10 L 6.5 10 A 1.50015 1.50015 0 1 0 6.5 13 L 8.6386719 13 L 11.15625 39.029297 C 11.427329 41.835926 13.811782 44 16.630859 44 L 31.367188 44 C 34.186411 44 36.570826 41.836168 36.841797 39.029297 L 39.361328 13 L 41.5 13 A 1.50015 1.50015 0 1 0 41.5 10 L 38.244141 10 A 1.50015 1.50015 0 0 0 37.763672 10 L 30.919922 10 C 30.429604 6.6214322 27.508315 4 24 4 z M 24 7 C 25.879156 7 27.420767 8.2681608 27.861328 10 L 20.138672 10 C 20.579233 8.2681608 22.120844 7 24 7 z M 11.650391 13 L 36.347656 13 L 33.855469 38.740234 C 33.730439 40.035363 32.667963 41 31.367188 41 L 16.630859 41 C 15.331937 41 14.267499 40.033606 14.142578 38.740234 L 11.650391 13 z M 20.476562 17.978516 A 1.50015 1.50015 0 0 0 19 19.5 L 19 34.5 A 1.50015 1.50015 0 1 0 22 34.5 L 22 19.5 A 1.50015 1.50015 0 0 0 20.476562 17.978516 z M 27.476562 17.978516 A 1.50015 1.50015 0 0 0 26 19.5 L 26 34.5 A 1.50015 1.50015 0 1 0 29 34.5 L 29 19.5 A 1.50015 1.50015 0 0 0 27.476562 17.978516 z">
+    </path>
+</svg>

games/templates/cotton/icon/eaorigin.html

@@ -0,0 +1,9 @@
+<c-svg viewbox="0 0 50 50">
+<g transform="scale(0.09765625)">
+<title>EA/Origin</title>
+<g>
+<path fill="currentColor" d="M299.125,126.274H126.628L97.876,183.93h172.499L299.125,126.274z" />
+<path fill="currentColor" d="M342.248,126.274L224.462,328.066h-105.8l32.862-57.653h61.347l28.758-57.658H69.125l-28.746,57.658H85.31L26.001,385.727h232.784l83.463-153.654l18.169,38.342h-18.169l-28.75,57.654h75.67l28.75,57.658h68.081L342.248,126.274z" />
+</g>
+</g>
+</c-svg>

games/templates/cotton/icon/edit.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 40.5 6 C 40.11625 6 39.732453 6.1464531 39.439453 6.4394531 L 21.462891 24.417969 L 20 28 L 23.582031 26.537109 L 41.560547 8.5605469 C 42.145547 7.9745469 42.145547 7.0254531 41.560547 6.4394531 C 41.267547 6.1464531 40.88375 6 40.5 6 z M 12.5 7 C 9.4802259 7 7 9.4802259 7 12.5 L 7 35.5 C 7 38.519774 9.4802259 41 12.5 41 L 35.5 41 C 38.519774 41 41 38.519774 41 35.5 L 41 18.5 A 1.50015 1.50015 0 1 0 38 18.5 L 38 35.5 C 38 36.898226 36.898226 38 35.5 38 L 12.5 38 C 11.101774 38 10 36.898226 10 35.5 L 10 12.5 C 10 11.101774 11.101774 10 12.5 10 L 29.5 10 A 1.50015 1.50015 0 1 0 29.5 7 L 12.5 7 z">
+    </path>
+</svg>

games/templates/cotton/icon/egs.html

@@ -0,0 +1,6 @@
+<c-vars title="Epic Games Store" />
+<c-svg :title=title viewbox="0 0 50 50">
+<c-slot name="path">
+M 10 3 C 6.69 3 4 5.69 4 9 L 4 41.240234 L 25 47.539062 L 46 41.240234 L 46 9 C 46 5.69 43.31 3 40 3 L 10 3 z M 11 8 L 15 8 L 15 11 L 11 11 L 11 18 L 14 18 L 14 21 L 11 21 L 11 28 L 15 28 L 15 31 L 11 31 C 9.34 31 8 29.66 8 28 L 8 11 C 8 9.34 9.34 8 11 8 z M 17 8 L 23 8 C 24.66 8 26 9.34 26 11 L 26 18 C 26 19.66 24.66 21 23 21 L 20 21 L 20 31 L 17 31 L 17 8 z M 28 8 L 31 8 L 31 31 L 28 31 L 28 8 z M 36 8 L 39 8 C 40.66 8 42 9.34 42 11 L 42 15 L 39 15 L 39 11 L 36 11 L 36 28 L 39 28 L 39 24 L 42 24 L 42 28 C 42 29.66 40.66 31 39 31 L 36 31 C 34.34 31 33 29.66 33 28 L 33 11 C 33 9.34 34.34 8 36 8 z M 20 11 L 20 18 L 23 18 L 23 11 L 20 11 z M 9 34 L 13 34 C 13.55 34 14 34.45 14 35 L 14 36 L 13 36 L 13 35.25 C 13 35.11 12.89 35 12.75 35 L 9.25 35 C 9.11 35 9 35.11 9 35.25 L 9 38.75 C 9 38.89 9.11 39 9.25 39 L 12.75 39 C 12.89 39 13 38.89 13 38.75 L 13 38 L 12 38 L 12 37 L 14 37 L 14 39 C 14 39.55 13.55 40 13 40 L 9 40 C 8.45 40 8 39.55 8 39 L 8 35 C 8 34.45 8.45 34 9 34 z M 18 34 L 19 34 L 22 40 L 21 40 L 20.5 39 L 16.5 39 L 16 40 L 15 40 L 18 34 z M 23 34 L 24 34 L 26 38 L 28 34 L 29 34 L 29 40 L 28 40 L 28 36 L 26.5 39 L 25.5 39 L 24 36 L 24 40 L 23 40 L 23 34 z M 30 34 L 35 34 L 35 35 L 31 35 L 31 36.5 L 33 36.5 L 33 37.5 L 31 37.5 L 31 39 L 35 39 L 35 40 L 30 40 L 30 34 z M 37 34 L 41 34 C 41.55 34 42 34.45 42 35 L 42 35.5 L 41 35.5 L 41 35.25 C 41 35.11 40.89 35 40.75 35 L 37.25 35 C 37.11 35 37 35.11 37 35.25 L 37 36.25 C 37 36.39 37.11 36.5 37.25 36.5 L 41 36.5 C 41.55 36.5 42 36.95 42 37.5 L 42 39 C 42 39.55 41.55 40 41 40 L 37 40 C 36.45 40 36 39.55 36 39 L 36 38.5 L 37 38.5 L 37 38.75 C 37 38.89 37.11 39 37.25 39 L 40.75 39 C 40.89 39 41 38.89 41 38.75 L 41 37.75 C 41 37.61 40.89 37.5 40.75 37.5 L 37 37.5 C 36.45 37.5 36 37.05 36 36.5 L 36 35 C 36 34.45 36.45 34 37 34 z M 18.5 35 L 17 38 L 20 38 L 18.5 35 z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/eject.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 24 5.0507812 C 22.945045 5.0507812 21.890232 5.4877258 21.160156 6.3613281 L 7.0566406 23.257812 C 5.2226244 25.45627 6.8812774 29 9.7441406 29 L 38.255859 29 C 41.119312 29 42.778426 25.453888 40.943359 23.255859 L 26.839844 6.3613281 C 26.109768 5.4877258 25.054955 5.0507812 24 5.0507812 z M 24 8.015625 C 24.194045 8.015625 24.387185 8.105759 24.537109 8.2851562 L 38.638672 25.179688 C 38.977605 25.585659 38.784407 26 38.255859 26 L 9.7441406 26 C 9.2150038 26 9.0213443 25.58723 9.3613281 25.179688 L 23.462891 8.2851562 C 23.612815 8.1057586 23.805955 8.015625 24 8.015625 z M 10.5 33 C 8.0324991 33 6 35.032499 6 37.5 L 6 38.5 C 6 40.967501 8.0324991 43 10.5 43 L 37.5 43 C 39.967501 43 42 40.967501 42 38.5 L 42 37.5 C 42 35.032499 39.967501 33 37.5 33 L 10.5 33 z M 10.5 36 L 37.5 36 C 38.346499 36 39 36.653501 39 37.5 L 39 38.5 C 39 39.346499 38.346499 40 37.5 40 L 10.5 40 C 9.6535009 40 9 39.346499 9 38.5 L 9 37.5 C 9 36.653501 9.6535009 36 10.5 36 z">
+    </path>
+</svg>

games/templates/cotton/icon/end.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 35.5 6 C 33.585045 6 32 7.5850452 32 9.5 L 32 19.365234 L 11.339844 6.6074219 C 9.0734225 5.2081236 6 6.9228749 6 9.5859375 L 6 38.414062 C 6 41.077126 9.0734225 42.791876 11.339844 41.392578 L 32 28.634766 L 32 38.5 C 32 40.414955 33.585045 42 35.5 42 L 38.5 42 C 40.414955 42 42 40.414955 42 38.5 L 42 9.5 C 42 7.5850452 40.414955 6 38.5 6 L 35.5 6 z M 35.5 9 L 38.5 9 C 38.795045 9 39 9.2049548 39 9.5 L 39 38.5 C 39 38.795045 38.795045 39 38.5 39 L 35.5 39 C 35.204955 39 35 38.795045 35 38.5 L 35 9.5 C 35 9.2049548 35.204955 9 35.5 9 z M 9.4765625 9.0566406 C 9.5668015 9.0647233 9.6637771 9.0984812 9.7636719 9.1601562 L 32 22.892578 L 32 25.107422 L 9.7636719 38.839844 C 9.364093 39.086546 9 38.883001 9 38.414062 L 9 9.5859375 C 9 9.3514688 9.091623 9.1841053 9.2324219 9.1054688 C 9.3028213 9.0661502 9.3863235 9.048558 9.4765625 9.0566406 z">
+    </path>
+</svg>

games/templates/cotton/icon/finish.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 7.4765625 4.9785156 A 1.50015 1.50015 0 0 0 6 6.5 L 6 31.5 L 6 43.5 A 1.50015 1.50015 0 1 0 9 43.5 L 9 33 L 40.5 33 C 41.329 33 42 32.328 42 31.5 L 42 6.5 C 42 5.672 41.329 5 40.5 5 L 7.7460938 5 A 1.50015 1.50015 0 0 0 7.4765625 4.9785156 z M 16 8 L 24 8 L 24 15 L 32 15 L 32 8 L 39 8 L 39 15 L 32 15 L 32 23 L 39 23 L 39 30 L 32 30 L 32 23 L 24 23 L 24 30 L 16 30 L 16 23 L 9 23 L 9 15 L 16 15 L 16 8 z M 16 15 L 16 23 L 24 23 L 24 15 L 16 15 z">
+    </path>
+</svg>

games/templates/cotton/icon/gog.html

@@ -0,0 +1,5 @@
+<c-svg title="GOG.com" viewbox="0 0 50 50">
+<c-slot name="path">
+M 5.75 6 C 3.703125 6 2 7.703125 2 9.75 L 2 16.25 C 2 18.296875 3.703125 20 5.75 20 L 12 20 L 12 22 L 4 22 C 3.277344 21.988281 2.609375 22.367188 2.246094 22.992188 C 1.878906 23.613281 1.878906 24.386719 2.246094 25.007813 C 2.609375 25.632813 3.277344 26.011719 4 26 L 12.25 26 C 14.296875 26 16 24.296875 16 22.25 L 16 15.75 C 16.003906 15.6875 16.003906 15.625 16 15.5625 L 16 9.75 C 16 7.703125 14.296875 6 12.25 6 Z M 21.75 6 C 19.703125 6 18 7.703125 18 9.75 L 18 16.25 C 18 18.296875 19.703125 20 21.75 20 L 28.25 20 C 30.296875 20 32 18.296875 32 16.25 L 32 9.75 C 32 7.703125 30.296875 6 28.25 6 Z M 37.75 6 C 35.703125 6 34 7.703125 34 9.75 L 34 16.25 C 34 18.296875 35.703125 20 37.75 20 L 44 20 L 44 22 L 36 22 C 35.277344 21.988281 34.609375 22.367188 34.246094 22.992188 C 33.878906 23.613281 33.878906 24.386719 34.246094 25.007813 C 34.609375 25.632813 35.277344 26.011719 36 26 L 44.25 26 C 46.296875 26 48 24.296875 48 22.25 L 48 15.75 C 48.003906 15.6875 48.003906 15.625 48 15.5625 L 48 9.75 C 48 7.703125 46.296875 6 44.25 6 Z M 6 10 L 12 10 L 12 15.59375 C 11.996094 15.644531 11.996094 15.699219 12 15.75 L 12 16 L 6 16 Z M 22 10 L 28 10 L 28 16 L 22 16 Z M 38 10 L 44 10 L 44 15.59375 C 43.996094 15.644531 43.996094 15.699219 44 15.75 L 44 16 L 38 16 Z M 5.75 30 C 3.703125 30 2 31.703125 2 33.75 L 2 40.25 C 2 42.296875 3.703125 44 5.75 44 L 12 44 C 12.722656 44.011719 13.390625 43.632813 13.753906 43.007813 C 14.121094 42.386719 14.121094 41.613281 13.753906 40.992188 C 13.390625 40.367188 12.722656 39.988281 12 40 L 6 40 L 6 34 L 12 34 C 12.722656 34.011719 13.390625 33.632813 13.753906 33.007813 C 14.121094 32.386719 14.121094 31.613281 13.753906 30.992188 C 13.390625 30.367188 12.722656 29.988281 12 30 Z M 19.75 30 C 17.703125 30 16 31.703125 16 33.75 L 16 40.25 C 16 42.296875 17.703125 44 19.75 44 L 26.25 44 C 28.296875 44 29.996094 42.296875 30 40.25 L 30 33.75 C 30 31.703125 28.296875 30 26.25 30 Z M 38.65625 30 C 38.65625 30 37.933594 30 37.15625 30.03125 C 36.769531 30.046875 36.355469 30.066406 36 30.09375 C 35.824219 30.105469 35.667969 30.136719 35.5 30.15625 C 35.332031 30.175781 35.242188 30.152344 34.8125 30.3125 C 33.738281 30.714844 32.972656 31.429688 32.4375 32.4375 C 32.5 32.320313 32.355469 32.496094 32.21875 32.90625 C 32.082031 33.316406 32.078125 33.566406 32.0625 33.875 C 32.03125 34.496094 32.011719 35.507813 32 37.8125 C 31.992188 39.167969 32 40.203125 32 40.90625 C 32 41.257813 31.996094 41.515625 32 41.71875 C 32 41.820313 31.996094 41.914063 32 42 C 32 42.042969 31.992188 42.085938 32 42.15625 C 32.007813 42.226563 31.914063 42.171875 32.125 42.71875 C 32.453125 43.707031 33.484375 44.277344 34.492188 44.035156 C 35.503906 43.789063 36.160156 42.808594 36 41.78125 C 36 41.777344 36 41.722656 36 41.71875 C 36 41.703125 36 41.707031 36 41.6875 C 35.996094 41.527344 36 41.25 36 40.90625 C 36 40.21875 35.992188 39.199219 36 37.84375 C 36.011719 35.640625 36.011719 34.671875 36.03125 34.25 C 36.101563 34.183594 36.167969 34.117188 36.1875 34.09375 C 36.230469 34.089844 36.257813 34.097656 36.3125 34.09375 C 36.585938 34.074219 36.949219 34.046875 37.3125 34.03125 C 37.667969 34.015625 37.75 34.003906 38 34 L 38 42 C 37.988281 42.722656 38.367188 43.390625 38.992188 43.753906 C 39.613281 44.121094 40.386719 44.121094 41.007813 43.753906 C 41.632813 43.390625 42.011719 42.722656 42 42 L 42 34 C 42.800781 34 43.28125 34 44 34 L 44 42 C 43.988281 42.722656 44.367188 43.390625 44.992188 43.753906 C 45.613281 44.121094 46.386719 44.121094 47.007813 43.753906 C 47.632813 43.390625 48.011719 42.722656 48 42 L 48 30 L 46 30 C 46 30 39.59375 29.996094 38.6875 30 Z M 20 34 L 26 34 L 26 40 L 20 40 Z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/itchio.html

@@ -0,0 +1,6 @@
+<c-svg title="Itch.io" viewBox="0 0 245.371 220.736" preserveAspectRatio="xMidYMid meet">
+<c-slot name="path">
+M31.99 1.365C21.287 7.72.2 31.945 0 38.298v10.516C0 62.144 12.46 73.86 23.773 73.86c13.584 0 24.902-11.258 24.903-24.62 0 13.362 10.93 24.62 24.515 24.62 13.586 0 24.165-11.258 24.165-24.62 0 13.362 11.622 24.62 25.207 24.62h.246c13.586 0 25.208-11.258 25.208-24.62 0 13.362 10.58 24.62 24.164 24.62 13.585 0 24.515-11.258 24.515-24.62 0 13.362 11.32 24.62 24.903 24.62 11.313 0 23.773-11.714 23.773-25.046V38.298c-.2-6.354-21.287-30.58-31.988-36.933C180.118.197 157.056-.005 122.685 0c-34.37.003-81.228.54-90.697 1.365zm65.194 66.217a28.025 28.025 0 0 1-4.78 6.155c-5.128 5.014-12.157 8.122-19.906 8.122a28.482 28.482 0 0 1-19.948-8.126c-1.858-1.82-3.27-3.766-4.563-6.032l-.006.004c-1.292 2.27-3.092 4.215-4.954 6.037a28.5 28.5 0 0 1-19.948 8.12c-.934 0-1.906-.258-2.692-.528-1.092 11.372-1.553 22.24-1.716 30.164l-.002.045c-.02 4.024-.04 7.333-.06 11.93.21 23.86-2.363 77.334 10.52 90.473 19.964 4.655 56.7 6.775 93.555 6.788h.006c36.854-.013 73.59-2.133 93.554-6.788 12.883-13.14 10.31-66.614 10.52-90.474-.022-4.596-.04-7.905-.06-11.93l-.003-.045c-.162-7.926-.623-18.793-1.715-30.165-.786.27-1.757.528-2.692.528a28.5 28.5 0 0 1-19.948-8.12c-1.862-1.822-3.662-3.766-4.955-6.037l-.006-.004c-1.294 2.266-2.705 4.213-4.563 6.032a28.48 28.48 0 0 1-19.947 8.125c-7.748 0-14.778-3.11-19.906-8.123a28.025 28.025 0 0 1-4.78-6.155 27.99 27.99 0 0 1-4.736 6.155 28.49 28.49 0 0 1-19.95 8.124c-.27 0-.54-.012-.81-.02h-.007c-.27.008-.54.02-.813.02a28.49 28.49 0 0 1-19.95-8.123 27.992 27.992 0 0 1-4.736-6.155zm-20.486 26.49l-.002.01h.015c8.113.017 15.32 0 24.25 9.746 7.028-.737 14.372-1.105 21.722-1.094h.006c7.35-.01 14.694.357 21.723 1.094 8.93-9.747 16.137-9.73 24.25-9.746h.014l-.002-.01c3.833 0 19.166 0 29.85 30.007L210 165.244c8.504 30.624-2.723 31.373-16.727 31.4-20.768-.773-32.267-15.855-32.267-30.935-11.496 1.884-24.907 2.826-38.318 2.827h-.006c-13.412 0-26.823-.943-38.318-2.827 0 15.08-11.5 30.162-32.267 30.935-14.004-.027-25.23-.775-16.726-31.4L46.85 124.08C57.534 94.073 72.867 94.073 76.7 94.073zm45.985 23.582v.006c-.02.02-21.863 20.08-25.79 27.215l14.304-.573v12.474c0 .584 5.74.346 11.486.08h.006c5.744.266 11.485.504 11.485-.08v-12.474l14.304.573c-3.928-7.135-25.79-27.215-25.79-27.215v-.006l-.003.002z
+</c-slot>
+</c-svg>
+{% comment %} <svg xmlns="http://www.w3.org/2000/svg" height="235.452" width="261.728" viewBox="0 0 245.371 220.736"><path d="" color="#000" /></svg> {% endcomment %}

games/templates/cotton/icon/microsoft.html

@@ -0,0 +1,5 @@
+<c-svg title="Microsoft Store" viewbox="0 0 30 30">
+<c-slot name="path">
+M 6 4 C 4.895 4 4 4.895 4 6 L 4 12 C 4 13.105 4.895 14 6 14 L 12 14 C 13.105 14 14 13.105 14 12 L 14 6 C 14 4.895 13.105 4 12 4 L 6 4 z M 18 4 C 16.895 4 16 4.895 16 6 L 16 12 C 16 13.105 16.895 14 18 14 L 24 14 C 25.105 14 26 13.105 26 12 L 26 6 C 26 4.895 25.105 4 24 4 L 18 4 z M 6 16 C 4.895 16 4 16.895 4 18 L 4 24 C 4 25.105 4.895 26 6 26 L 12 26 C 13.105 26 14 25.105 14 24 L 14 18 C 14 16.895 13.105 16 12 16 L 6 16 z M 18 16 C 16.895 16 16 16.895 16 18 L 16 24 C 16 25.105 16.895 26 18 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 18 C 26 16.895 25.105 16 24 16 L 18 16 z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/nintendo-3ds.html

@@ -0,0 +1 @@
+<c-icon.nintendo />

games/templates/cotton/icon/nintendo-switch.html

@@ -0,0 +1,5 @@
+<c-svg title="Nintendo Switch" viewbox="0 0 32 32">
+<c-slot name="path">
+M18.901 32h4.901c4.5 0 8.198-3.698 8.198-8.198v-15.604c0-4.5-3.698-8.198-8.198-8.198h-5c-0.099 0-0.203 0.099-0.203 0.198v31.604c0 0.099 0.099 0.198 0.302 0.198zM25 14.401c1.802 0 3.198 1.5 3.198 3.198 0 1.802-1.5 3.198-3.198 3.198-1.802 0-3.198-1.396-3.198-3.198-0.104-1.797 1.396-3.198 3.198-3.198zM15.198 0h-7c-4.5 0-8.198 3.698-8.198 8.198v15.604c0 4.5 3.698 8.198 8.198 8.198h7c0.099 0 0.203-0.099 0.203-0.198v-31.604c0-0.099-0.099-0.198-0.203-0.198zM12.901 29.401h-4.703c-3.099 0-5.599-2.5-5.599-5.599v-15.604c0-3.099 2.5-5.599 5.599-5.599h4.604zM5 9.599c0 1.698 1.302 3 3 3s3-1.302 3-3c0-1.698-1.302-3-3-3s-3 1.302-3 3z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/nintendo.html

@@ -0,0 +1,6 @@
+<c-vars title="Nintendo" />
+<c-svg viewBox="0 0 24 24">
+    <c-slot name="path">
+    M0 .6h7.1l9.85 15.9V.6H24v22.8h-7.04L7.06 7.5v15.9H0V.6
+    </c-slot>
+</c-svg>

games/templates/cotton/icon/physical-media.html

@@ -0,0 +1,5 @@
+<c-svg viewbox="0 0 512 512">
+<title>Physical Media</title>
+<path fill="currentColor" d="M277.333,256c0-11.755-9.557-21.333-21.333-21.333s-21.333,9.579-21.333,21.333c0,11.755,9.557,21.333,21.333,21.333 S277.333,267.755,277.333,256z" />
+<path fill="currentColor" d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M128,256 c0,11.776-9.536,21.333-21.333,21.333c-11.797,0-21.333-9.557-21.333-21.333c0-94.101,76.565-170.667,170.667-170.667 c11.797,0,21.333,9.557,21.333,21.333S267.797,128,256,128C185.408,128,128,185.408,128,256z M192,256c0-35.285,28.715-64,64-64 s64,28.715,64,64s-28.715,64-64,64S192,291.285,192,256z M256,426.667c-11.797,0-21.333-9.557-21.333-21.333S244.203,384,256,384 c70.592,0,128-57.408,128-128c0-11.776,9.536-21.333,21.333-21.333s21.333,9.557,21.333,21.333 C426.667,350.101,350.101,426.667,256,426.667z" />
+</c-svg>

games/templates/cotton/icon/physical.html

@@ -0,0 +1,5 @@
+<c-svg viewbox="0 0 512 512">
+<title>Physical Media</title>
+<path fill="currentColor" d="M277.333,256c0-11.755-9.557-21.333-21.333-21.333s-21.333,9.579-21.333,21.333c0,11.755,9.557,21.333,21.333,21.333 S277.333,267.755,277.333,256z" />
+<path fill="currentColor" d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M128,256 c0,11.776-9.536,21.333-21.333,21.333c-11.797,0-21.333-9.557-21.333-21.333c0-94.101,76.565-170.667,170.667-170.667 c11.797,0,21.333,9.557,21.333,21.333S267.797,128,256,128C185.408,128,128,185.408,128,256z M192,256c0-35.285,28.715-64,64-64 s64,28.715,64,64s-28.715,64-64,64S192,291.285,192,256z M256,426.667c-11.797,0-21.333-9.557-21.333-21.333S244.203,384,256,384 c70.592,0,128-57.408,128-128c0-11.776,9.536-21.333,21.333-21.333s21.333,9.557,21.333,21.333 C426.667,350.101,350.101,426.667,256,426.667z" />
+</c-svg>

games/templates/cotton/icon/play.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 11.396484 4.1113281 C 9.1042001 4.2020187 7 6.0721788 7 8.5917969 L 7 39.408203 C 7 42.767694 10.742758 44.971891 13.681641 43.34375 L 41.490234 27.935547 C 44.513674 26.260259 44.513674 21.739741 41.490234 20.064453 L 13.681641 4.65625 C 12.94692 4.2492148 12.160579 4.0810979 11.396484 4.1113281 z M 11.431641 7.0664062 C 11.690234 7.0652962 11.961284 7.1323321 12.226562 7.2792969 L 40.037109 22.6875 C 41.13567 23.296212 41.13567 24.703788 40.037109 25.3125 L 12.226562 40.720703 C 11.165446 41.308562 10 40.620712 10 39.408203 L 10 8.5917969 C 10 7.9855423 10.290709 7.5116121 10.714844 7.2617188 C 10.926911 7.136772 11.173048 7.0675163 11.431641 7.0664062 z">
+    </path>
+</svg>

games/templates/cotton/icon/playstation.html

@@ -0,0 +1,6 @@
+<c-vars title="Playstation 1" />
+<c-svg viewBox="0 0 50 50">
+    <c-slot name="path">
+        M 19.3125 4 C 19.011719 4 18.707031 3.988281 18.40625 4.1875 C 18.105469 4.386719 18 4.699219 18 5 L 18 41.59375 C 18 41.992188 18.289063 42.394531 18.6875 42.59375 L 26.6875 45 L 27 45 C 27.199219 45 27.394531 44.914063 27.59375 44.8125 C 27.894531 44.613281 28 44.300781 28 44 L 28 13.40625 C 28.601563 13.707031 29 14.300781 29 15 L 29 26.09375 C 29 26.394531 29.199219 26.804688 29.5 26.90625 C 29.699219 27.007813 31.199219 27.90625 34 27.90625 C 36.699219 27.90625 40 26.414063 40 19.3125 C 40 13.613281 36.8125 9.292969 31.3125 7.59375 Z M 17 26.40625 L 5.90625 30.40625 L 4.3125 31 C 1.613281 32.101563 0 33.886719 0 35.6875 C 0 39.488281 2.699219 41.6875 7.5 41.6875 C 10.101563 41.6875 13.300781 41.113281 17 39.8125 L 17 36 C 16.101563 36.300781 15.113281 36.699219 14.3125 37 C 12.710938 37.601563 11.5 37.8125 10.5 37.8125 C 9 37.8125 8.300781 37.300781 8 37 C 7.601563 36.699219 7.398438 36.3125 7.5 35.8125 C 7.601563 34.8125 8.800781 33.894531 11 33.09375 C 11.5 32.894531 14.898438 31.699219 17 31 Z M 36.5 28.90625 C 34.101563 29.007813 31.601563 29.394531 29 30.09375 L 29 34.6875 C 30.101563 34.289063 31.585938 33.800781 33.6875 33 C 38.488281 31.300781 40.492188 31.488281 41.09375 31.6875 C 42.292969 31.789063 42.800781 32.5 43 33 C 43.5 34.5 41.613281 35.1875 38.8125 36.1875 C 37.511719 36.6875 31.898438 38.6875 29 39.6875 L 29 44.3125 L 44.5 38.8125 L 45.6875 38.3125 C 47.6875 37.613281 50.199219 36.300781 50 34 C 49.898438 31.800781 47.210938 30.695313 45.3125 30.09375 C 42.511719 29.195313 39.5 28.804688 36.5 28.90625 Z
+    </c-slot>
+</c-svg>

games/templates/cotton/icon/plus.html

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     width="50"
+     height="50"
+     viewBox="0 0 48 48"
+     class="w-4 h-4">
+    <path fill="currentColor" d="M 23.976562 4.9785156 A 1.50015 1.50015 0 0 0 22.5 6.5 L 22.5 22.5 L 6.5 22.5 A 1.50015 1.50015 0 1 0 6.5 25.5 L 22.5 25.5 L 22.5 41.5 A 1.50015 1.50015 0 1 0 25.5 41.5 L 25.5 25.5 L 41.5 25.5 A 1.50015 1.50015 0 1 0 41.5 22.5 L 25.5 22.5 L 25.5 6.5 A 1.50015 1.50015 0 0 0 23.976562 4.9785156 z">
+    </path>
+</svg>

games/templates/cotton/icon/ps1.html

@@ -0,0 +1 @@
+<c-icon.playstation />

games/templates/cotton/icon/ps3.html

@@ -0,0 +1,5 @@
+<c-svg title="Playstation 3" viewbox="0 0 50 50">
+<c-slot name="path">
+M 1 19 A 1.0001 1.0001 0 1 0 1 21 L 12.5 21 C 13.340812 21 14 21.659188 14 22.5 C 14 23.340812 13.340812 24 12.5 24 L 3 24 C 1.3550302 24 0 25.35503 0 27 L 0 30 A 1.0001 1.0001 0 1 0 2 30 L 2 27 C 2 26.43497 2.4349698 26 3 26 L 12.5 26 C 14.28508 26 15.719786 24.619005 15.921875 22.884766 A 1.0001 1.0001 0 0 0 16 22.5 C 16 20.578812 14.421188 19 12.5 19 L 1 19 z M 26 19 C 24.35503 19 23 20.35503 23 22 L 23 28 C 23 28.56503 22.56503 29 22 29 L 16 29 A 1.0001 1.0001 0 1 0 16 31 L 22 31 C 23.64497 31 25 29.64497 25 28 L 25 22 C 25 21.43497 25.43497 21 26 21 L 32 21 A 1.0001 1.0001 0 1 0 32 19 L 26 19 z M 36 19 A 1.0001 1.0001 0 1 0 36 21 L 46.5 21 C 47.340812 21 48 21.659188 48 22.5 C 48 23.340812 47.340812 24 46.5 24 L 36 24 A 1.0001 1.0001 0 1 0 36 26 L 46.5 26 C 47.340812 26 48 26.659188 48 27.5 C 48 28.340812 47.340812 29 46.5 29 L 36 29 A 1.0001 1.0001 0 1 0 36 31 L 46.5 31 C 48.421188 31 50 29.421188 50 27.5 C 50 26.523075 49.58945 25.637295 48.935547 25 C 49.58945 24.362705 50 23.476925 50 22.5 C 50 20.578812 48.421188 19 46.5 19 L 36 19 z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/ps4.html

@@ -0,0 +1,6 @@
+<c-vars title="Playstation 4" />
+<c-svg :title=title viewbox="0 0 50 50">
+<c-slot name="path">
+M 1 19 A 1.0001 1.0001 0 1 0 1 21 L 12.5 21 C 13.340812 21 14 21.659188 14 22.5 C 14 23.340812 13.340812 24 12.5 24 L 3 24 C 1.3550302 24 0 25.35503 0 27 L 0 30 A 1.0001 1.0001 0 1 0 2 30 L 2 27 C 2 26.43497 2.4349698 26 3 26 L 12.5 26 C 14.28508 26 15.719786 24.619005 15.921875 22.884766 A 1.0001 1.0001 0 0 0 16 22.5 C 16 20.578812 14.421188 19 12.5 19 L 1 19 z M 26 19 C 24.35503 19 23 20.35503 23 22 L 23 28 C 23 28.56503 22.56503 29 22 29 L 16 29 A 1.0001 1.0001 0 1 0 16 31 L 22 31 C 23.64497 31 25 29.64497 25 28 L 25 22 C 25 21.43497 25.43497 21 26 21 L 32 21 A 1.0001 1.0001 0 1 0 32 19 L 26 19 z M 46.970703 19 A 1.0001 1.0001 0 0 0 46.503906 19.130859 L 32.503906 27.130859 A 1.0001 1.0001 0 0 0 33 29 L 46 29 L 46 30 A 1.0001 1.0001 0 1 0 48 30 L 48 29 L 49 29 A 1.0001 1.0001 0 1 0 49 27 L 48 27 L 48 20 A 1.0001 1.0001 0 0 0 46.970703 19 z M 46 21.724609 L 46 27 L 36.767578 27 L 46 21.724609 z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/ps5.html

@@ -0,0 +1,5 @@
+<c-svg title="Playstation 5" viewbox="0 0 50 50">
+<c-slot name="path">
+M25.185 19.606c-1.612 0-2.919 1.307-2.919 2.919v4.981c0 .911-.739 1.65-1.65 1.65h-5.619v1.237h6.683c1.612 0 2.919-1.307 2.919-2.919v-4.981c0-.911.739-1.65 1.65-1.65l5.724 0v-1.237H25.185zM0 19.606v1.237h11.738c.936 0 1.694.758 1.694 1.694 0 .936-.758 1.694-1.694 1.694H2.919C1.307 24.231 0 25.538 0 27.15v3.244h2.333v-3.276c0-.911.739-1.65 1.65-1.65h8.851c1.619 0 2.931-1.312 2.931-2.931 0-1.619-1.312-2.931-2.931-2.931H0zM34.221 19.606v4.028c0 1.012.821 1.833 1.833 1.833h9.768c1.019 0 1.845.826 1.845 1.845 0 1.019-.826 1.845-1.845 1.845H34.221v1.237h12.697c1.702 0 3.082-1.38 3.082-3.082 0-1.702-1.38-3.082-3.082-3.082h-9.628c-.407 0-.737-.33-.737-.737v-2.651h13.023v-1.237H34.221z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/refund.html

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     viewBox="0 0 48 48"
+     class="text-black dark:text-white w-4 h-4">
+    <path fill="currentColor" d="M 26 3 C 20.494917 3 16 7.494921 16 13 C 16 18.505079 20.494917 23 26 23 C 31.505083 23 36 18.505079 36 13 C 36 7.494921 31.505083 3 26 3 z M 26 6 C 29.883764 6 33 9.1162385 33 13 C 33 16.883762 29.883764 20 26 20 C 22.116236 20 19 16.883762 19 13 C 19 9.1162385 22.116236 6 26 6 z M 24.75 9 C 24.273 9 23.862531 9.3366875 23.769531 9.8046875 L 23.269531 12.304688 C 23.210531 12.598688 23.286562 12.903766 23.476562 13.134766 C 23.666562 13.366766 23.95 13.5 24.25 13.5 L 26.25 13.5 C 26.664 13.5 27 13.836 27 14.25 C 27 14.765 26.481 15 26 15 C 25.115 15 24.583922 14.685156 24.544922 14.660156 C 24.085922 14.363156 23.472969 14.489313 23.167969 14.945312 C 22.861969 15.405313 22.986313 16.026031 23.445312 16.332031 C 23.548313 16.400031 24.491 17 26 17 C 27.71 17 29 15.818 29 14.25 C 29 12.733 27.767 11.5 26.25 11.5 L 25.470703 11.5 L 25.570312 11 L 27.5 11 C 28.052 11 28.5 10.552 28.5 10 C 28.5 9.448 28.052 9 27.5 9 L 24.75 9 z M 41.613281 22.019531 C 40.493082 22.029231 39.429184 22.473279 38.484375 23.175781 C 37.470126 23.929243 34.418425 26.208042 31.777344 28.179688 C 31.204622 26.351508 29.505924 25 27.5 25 L 23.107422 25 C 20.296203 25 18.985532 24.772226 17.859375 24.533203 C 16.733218 24.29418 15.646783 24 13.826172 24 C 9.9413941 24 7.0123317 26.492986 5.09375 28.791016 C 3.1751683 31.089045 2.1347656 33.384766 2.1347656 33.384766 A 1.5002787 1.5002787 0 1 0 4.8652344 34.628906 C 4.8652344 34.628906 5.7643161 32.669814 7.3964844 30.714844 C 9.0286527 28.759873 11.25995 27 13.826172 27 C 15.347561 27 16.006735 27.20582 17.236328 27.466797 C 18.465921 27.727774 20.123641 28 23.107422 28 L 27.5 28 C 28.346499 28 29 28.653501 29 29.5 C 29 29.969499 28.794195 30.374296 28.470703 30.646484 C 28.470416 30.646699 28.429688 30.677734 28.429688 30.677734 A 1.5001988 1.5001988 0 0 0 28.345703 30.748047 A 1.5001988 1.5001988 0 0 0 28.34375 30.75 C 28.105295 30.908613 27.816466 31 27.5 31 L 20.5 31 A 1.50015 1.50015 0 1 0 20.5 34 L 27.5 34 C 28.440637 34 29.315307 33.701451 30.041016 33.199219 C 30.042186 33.198409 30.043753 33.198076 30.044922 33.197266 A 1.5001988 1.5001988 0 0 0 30.224609 33.082031 C 30.224609 33.082031 38.775959 26.696426 40.273438 25.583984 A 1.50015 1.50015 0 0 0 40.273438 25.582031 C 40.837627 25.162534 41.309824 25.022381 41.640625 25.019531 C 41.971426 25.016631 42.218287 25.096901 42.560547 25.439453 C 43.150922 26.029324 43.147391 26.935102 42.572266 27.533203 C 37.217133 32.036197 33.848465 35.036886 31.623047 36.794922 C 29.369881 38.574924 28.424996 39 27.5 39 C 23.847885 39 19.80067 38 15.5 38 C 13 38 11.242781 39.343609 10.300781 40.599609 C 9.3587815 41.855609 9.0449219 43.136719 9.0449219 43.136719 A 1.50015 1.50015 0 1 0 11.955078 43.863281 C 11.955078 43.863281 12.141219 43.144391 12.699219 42.400391 C 13.257219 41.656391 14 41 15.5 41 C 19.30733 41 23.336115 42 27.5 42 C 29.402004 42 31.084837 41.044435 33.482422 39.150391 C 35.849764 37.280238 39.175413 34.30991 44.498047 29.833984 A 1.50015 1.50015 0 0 0 44.681641 29.681641 C 44.688541 29.674741 44.690436 29.665143 44.697266 29.658203 L 44.701172 29.662109 L 44.753906 29.607422 A 1.50015 1.50015 0 0 0 45.083984 29.074219 C 46.330485 27.321792 46.248887 24.884269 44.681641 23.318359 C 43.8529 22.488911 42.73348 22.009881 41.613281 22.019531 z">
+    </path>
+</svg>

games/templates/cotton/icon/steam.html

@@ -0,0 +1,5 @@
+<c-svg title="Steam" viewbox="0 0 50 50">
+<c-slot name="path">
+M 25 3 C 13.59 3 4.209375 11.680781 3.109375 22.800781 L 14.300781 28.529297 C 15.430781 27.579297 16.9 27 18.5 27 L 18.550781 27 C 18.940781 26.4 19.389375 25.649141 19.859375 24.869141 C 20.839375 23.259141 21.939531 21.439062 23.019531 20.039062 C 23.259531 15.569063 26.97 12 31.5 12 C 36.19 12 40 15.81 40 20.5 C 40 25.03 36.430937 28.740469 31.960938 28.980469 C 30.560938 30.060469 28.750859 31.160859 27.130859 32.130859 C 26.350859 32.610859 25.6 33.059219 25 33.449219 L 25 33.5 C 25 37.09 22.09 40 18.5 40 C 14.91 40 12 37.09 12 33.5 C 12 33.33 12.009531 33.17 12.019531 33 L 3.2792969 28.519531 C 4.9692969 38.999531 14.05 47 25 47 C 37.15 47 47 37.15 47 25 C 47 12.85 37.15 3 25 3 z M 31.5 14 C 27.92 14 25 16.92 25 20.5 C 25 24.08 27.92 27 31.5 27 C 35.08 27 38 24.08 38 20.5 C 38 16.92 35.08 14 31.5 14 z M 31.5 16 C 33.99 16 36 18.01 36 20.5 C 36 22.99 33.99 25 31.5 25 C 29.01 25 27 22.99 27 20.5 C 27 18.01 29.01 16 31.5 16 z M 18.5 29 C 17.71 29 16.960313 29.200312 16.320312 29.570312 L 19.640625 31.269531 C 20.870625 31.899531 21.350469 33.410625 20.730469 34.640625 C 20.280469 35.500625 19.41 36 18.5 36 C 18.11 36 17.729375 35.910469 17.359375 35.730469 L 14.029297 34.019531 C 14.289297 36.259531 16.19 38 18.5 38 C 20.99 38 23 35.99 23 33.5 C 23 31.01 20.99 29 18.5 29 z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/ubisoft.html

@@ -0,0 +1,5 @@
+<c-svg title="Ubisoft" viewbox="0 0 50 50">
+<c-slot name="path">
+M 19.5 0 C 17.570313 0 16 1.570313 16 3.5 C 16 5.429688 17.570313 7 19.5 7 C 21.429688 7 23 5.429688 23 3.5 C 23 1.570313 21.429688 0 19.5 0 Z M 7.59375 2 C 3.261719 2 0 5.550781 0 10.25 C 0 14.527344 4.402344 16.5 7.375 16.5 C 10.441406 16.5 15 14.429688 15 8.65625 C 15 3.398438 10.152344 2 7.59375 2 Z M 31.3125 5.03125 C 18.890625 5.03125 8.8125 16.082031 8.8125 29.65625 C 8.8125 41.664063 23.785156 49 31.9375 49 C 40.46875 49 50 38.972656 50 25.53125 C 50 12.53125 35.816406 5.03125 31.3125 5.03125 Z M 18 19 L 23 19 L 23 30.5 C 23 31.328125 23.671875 32 24.5 32 L 33.5 32 C 34.328125 32 35 31.328125 35 30.5 L 35 19 L 40 19 L 40 37 L 24.5 37 C 20.910156 37 18 34.089844 18 30.5 Z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/unspecified.html

@@ -0,0 +1,8 @@
+<c-svg viewbox="0 0 50 50">
+<g transform="scale(0.390625)">
+<title>Unspecified platform</title>
+<path fill="currentColor" d="M64.9,28.9c-5.2-0.2-10.1,1.6-13.9,5.2c-3.8,3.6-5.8,8.4-5.8,13.6h7.7c0-3.1,1.2-5.9,3.5-8.1c2.2-2.1,5.1-3.2,8.2-3.1   c5.7,0.3,10.3,4.9,10.6,10.6c0.3,6-5.7,11.5-8.3,13.6l-7.7,6.8v7.7h7.7V71l4.9-4.3c4.3-3.5,11.5-10.8,11.1-19.9   C82.4,37.2,74.5,29.3,64.9,28.9z" />
+<rect fill="currentColor" height="8" width="7.7" x="59.2" y="83.3" />
+<path fill="currentColor" d="M1,127h126V1H1V127z M9,9h110v110H9V9z" />
+</g>
+</c-svg>

games/templates/cotton/icon/xbox-gamepass.html

@@ -0,0 +1,5 @@
+<c-svg title="Xbox/GamePass" viewbox="0 0 30 30">
+<c-slot name="path">
+M 15 3 C 13.051 3 10.635984 3.6181719 8.8339844 4.7011719 C 8.7039844 4.7771719 8.3470625 5.0221406 8.1640625 5.2441406 L 8.1640625 5.2460938 C 9.8830625 3.3500938 14.893 7.3485937 15 7.4335938 L 15 7.4355469 C 15.107 7.3505469 20.116938 3.3520937 21.835938 5.2460938 C 21.651937 5.0240937 21.295063 4.780125 21.164062 4.703125 C 19.363063 3.622125 17.254953 3 15.001953 3 L 15 3 z M 7.4414062 6.1035156 C 7.0363594 6.1687656 6.5830625 6.4272031 6.1953125 6.8457031 C 4.2123125 8.9867031 3 11.850047 3 14.998047 C 3 18.106507 4.1826933 20.935533 6.1210938 23.066406 C 5.4850937 19.988406 6.0637812 17.819047 7.8007812 14.998047 C 9.5407813 12.174047 12.599609 8.9980469 12.599609 8.9980469 C 10.075609 6.6150469 8.2821719 6.1885156 7.8261719 6.1035156 C 7.7061719 6.0810156 7.5764219 6.0817656 7.4414062 6.1035156 z M 6.1210938 23.066406 C 6.1210938 23.066406 6.1210938 23.068359 6.1210938 23.068359 L 6.1210938 23.070312 C 8.3160938 25.482313 11.494953 27 15.001953 27 C 18.518953 27 21.684859 25.485219 23.880859 23.074219 L 23.880859 23.072266 C 25.818859 20.940266 27 18.109 27 15 C 27 11.852 25.788687 8.9896563 23.804688 6.8476562 C 23.287688 6.2896563 22.653828 6.0154687 22.173828 6.1054688 C 21.718828 6.1914688 19.924391 6.618 17.400391 9 C 17.400391 9 20.459219 12.176 22.199219 15 C 23.935219 17.822 24.514906 19.990359 23.878906 23.068359 C 23.872906 23.033359 23.629672 21.45375 22.013672 19.21875 C 20.750672 17.47575 17 13.300391 15 11.400391 C 13 13.300391 9.2493281 17.471797 7.9863281 19.216797 C 6.3703281 21.449797 6.1270937 23.030406 6.1210938 23.066406 z
+</c-slot>
+</c-svg>

games/templates/cotton/icon/yuzu.html

@@ -0,0 +1,5 @@
+<c-svg viewbox="0 0 80 80" preserveAspectRatio="xMidYMid meet" stroke-width="3.6">
+<title>Yuzu (Switch emulator)</title>
+<path fill="currentColor"  d="m30,2a28,30 0 1,0 0,60z" />
+<path fill="currentColor"  d="m42,78a28,30 0 1,0 0-60z" />
+</c-svg>

games/templates/cotton/layouts/add.html

@@ -0,0 +1,25 @@
+<c-layouts.base>
+{% load static %}
+{% if form_content %}
+    {{ form_content }}
+{% else %}
+    <form method="post" enctype="multipart/form-data">
+        <table class="mx-auto">
+            {% csrf_token %}
+            {{ form.as_table }}
+            <tr>
+                <td></td>
+                <td>
+                    <input type="submit" value="Submit" />
+                </td>
+            </tr>
+            {{ additional_row }}
+        </table>
+    </form>
+{% endif %}
+<c-slot name="scripts">
+{% if script_name %}
+    <script type="module" src="{% static 'js/'|add:script_name %}"></script>
+{% endif %}
+</c-slot>
+</c-layouts.base>

games/templates/cotton/layouts/base.html

@@ -0,0 +1,81 @@
+{% 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 - {{ title }}</title>
+        <script src="{% static 'js/htmx.min.js' %}"></script>
+        {% django_htmx_script %}
+        <link rel="stylesheet" href="{% static 'base.css' %}" />
+        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
+        <script>
+        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark')
+            }
+        </script>
+    </head>
+    <body hx-indicator="#indicator">
+        <img id="indicator"
+             src="{% static 'icons/loading.png' %}"
+             class="absolute right-3 top-3 animate-spin htmx-indicator"
+             height="24"
+             width="24"
+             alt="loading indicator" />
+        <div class="flex flex-col min-h-screen">
+            {% include "navbar.html" %}
+            <div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">{{ slot }}</div>
+            {% load version %}
+            <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
+        </div>
+        {{ scripts }}
+        <script>
+            var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+            var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+        // Change the icons inside the button based on previous settings
+            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                themeToggleLightIcon.classList.remove('hidden');
+            } else {
+                themeToggleDarkIcon.classList.remove('hidden');
+            }
+
+            var themeToggleBtn = document.getElementById('theme-toggle');
+
+            themeToggleBtn.addEventListener('click', function () {
+
+            // toggle icons inside button
+                themeToggleDarkIcon.classList.toggle('hidden');
+                themeToggleLightIcon.classList.toggle('hidden');
+
+            // if set via local storage previously
+                if (localStorage.getItem('color-theme')) {
+                    if (localStorage.getItem('color-theme') === 'light') {
+                        document.documentElement.classList.add('dark');
+                        localStorage.setItem('color-theme', 'dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                        localStorage.setItem('color-theme', 'light');
+                    }
+
+                // if NOT set via local storage previously
+                } else {
+                    if (document.documentElement.classList.contains('dark')) {
+                        document.documentElement.classList.remove('dark');
+                        localStorage.setItem('color-theme', 'light');
+                    } else {
+                        document.documentElement.classList.add('dark');
+                        localStorage.setItem('color-theme', 'dark');
+                    }
+                }
+
+            });
+        </script>
+    </body>
+</html>

games/templates/cotton/popover.html

@@ -1,7 +1,8 @@
+<span data-popover-target={{ id }} class="{{ class }}">{{ wrapped_content|default:slot }}</span>
 <div data-popover
      id="{{ id }}"
      role="tooltip"
      class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
-    <div class="px-3 py-2">{{ slot }}</div>
+    <div class="px-3 py-2">{{ popover_content }}</div>
     <div data-popper-arrow></div>
 </div>

games/templates/cotton/simple_table.html

@@ -1,19 +1,24 @@
 {% load param_utils %}
-<div class="shadow-md sm:rounded-lg" hx-boost="false">
-    <div class="relative overflow-x-auto sm:rounded-lg">
+<div class="shadow-md" hx-boost="false">
+    <div class="relative overflow-x-auto sm:rounded-t-lg">
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+            {% if header_action %}
+                <c-table-header>
+                {{ header_action }}
+                </c-table-header>
+            {% endif %}
             <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                 <tr>
                     {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
                 </tr>
             </thead>
-            <tbody>
+            <tbody class="dark:divide-y">
                 {% for row in rows %}<c-table-row :data=row />{% endfor %}
             </tbody>
         </table>
     </div>
     {% if page_obj and elided_page_range %}
-        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4"
+        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
              aria-label="Table navigation">
             <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
             <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">

games/templates/cotton/svg.html

@@ -0,0 +1,12 @@
+<c-vars fill="currentColor" viewbox="0 0 48 48" />
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="{{ viewbox }}" {% if not class %}class="text-black dark:text-white w-4 h-4"{% endif %} {{ attrs }}>
+    {% if path %}
+        <path fill="{{ fill }}" d="{{ path }}">
+        {% if title %}<title>{{ title }}</title>{% endif %}
+        </path>
+    {% elif slot %}
+        {{ slot }}
+    {% else %}
+        No SVG data specified
+    {% endif %}
+</svg>

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

@@ -1,4 +1,4 @@
-<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">
+<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-2 [&_td:last-child]:text-right">
     {% if slot %}
         {{ slot }}
     {% else %}

games/templates/list_purchases.html

@@ -1,10 +1,6 @@
-{% extends "base.html" %}
+<c-layouts.base>
 {% 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 %}
+<div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
+    <c-simple-table :columns=data.columns :rows=data.rows :page_obj=page_obj :elided_page_range=elided_page_range :header_action=data.header_action />
+</div>
+</c-layouts.base>

games/templates/navbar.html

@@ -122,7 +122,7 @@
                     </div>
                 </li>
                 <li>
-                    <a href="{% url 'stats_by_year' 0 %}"
+                    <a href="{% url 'stats_by_year' global_current_year %}"
                        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>

games/templates/registration/login.html

@@ -1,22 +1,18 @@
-{% extends "base.html" %}
+<c-layouts.base title="Login">
 {% 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 %}
+<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>
+</c-layouts.base>

games/templates/showcase/buttons.html

@@ -0,0 +1,155 @@
+{% extends "base.html" %}
+{% load static %}
+{% block title %}
+    {{ title }}
+{% endblock title %}
+{% block content %}
+    <div class="flex self-center m-4 flex-col gap-4 [&_h1]:mb-2">
+        <div>
+            <h1 class="text-white text-lg">No size</h1>
+            <c-button>
+            No attributes
+            </c-button>
+            <c-button color="blue">
+            No attributes, blue
+            </c-button>
+            <c-button color="red">
+            No attributes, red
+            </c-button>
+            <c-button color="green">
+            No attributes, green
+            </c-button>
+            <c-button color="gray">
+            No attributes, gray
+            </c-button>
+        </div>
+        <div>
+            <h1 class="text-white text-lg">No size, icons</h1>
+            <c-button>
+            <c-icon.edit />
+            </c-button>
+            <c-button>
+            <c-icon.finish />
+            </c-button>
+            <c-button>
+            <c-icon.end />
+            </c-button>
+            <c-button>
+            <c-icon.delete />
+            </c-button>
+            <c-button>
+            <c-icon.play />
+            </c-button>
+        </div>
+        <div>
+            <h1 class="text-white text-lg">Extra Small, icons</h1>
+            <c-button icon="true" size="xs">
+            <c-icon.edit /> Edit
+            </c-button>
+            <c-button icon="true" size="xs">
+            <c-icon.finish />
+            </c-button>
+            <c-button icon="true" size="xs">
+            <c-icon.end />
+            </c-button>
+            <c-button icon="true" size="xs">
+            <c-icon.delete />
+            </c-button>
+            <c-button icon="true" size="xs">
+            <c-icon.play />
+            </c-button>
+        </div>
+        <div>
+            <h1 class="text-white text-lg">Small, icons</h1>
+            <c-button icon="true" size="sm">
+            <c-icon.edit /> Edit
+            </c-button>
+            <c-button icon="true" size="sm">
+            <c-icon.finish />
+            </c-button>
+            <c-button icon="true" size="sm">
+            <c-icon.end />
+            </c-button>
+            <c-button icon="true" size="sm">
+            <c-icon.delete />
+            </c-button>
+            <c-button icon="true" size="sm">
+            <c-icon.play />
+            </c-button>
+        </div>
+        <div>
+            <h1 class="text-white text-lg">Base, icons</h1>
+            <c-button icon="true" size="base">
+            <c-icon.edit /> Edit
+            </c-button>
+            <c-button icon="true" size="base">
+            <c-icon.finish />
+            </c-button>
+            <c-button icon="true" size="base">
+            <c-icon.end />
+            </c-button>
+            <c-button icon="true" size="base">
+            <c-icon.delete />
+            </c-button>
+            <c-button icon="true" size="base">
+            <c-icon.play />
+            </c-button>
+        </div>
+        <div>
+            <h1 class="text-white text-lg">Large, icons</h1>
+            <c-button icon="true" size="lg">
+            <c-icon.edit /> Edit
+            </c-button>
+            <c-button icon="true" size="lg">
+            <c-icon.finish />
+            </c-button>
+            <c-button icon="true" size="lg">
+            <c-icon.end />
+            </c-button>
+            <c-button icon="true" size="lg">
+            <c-icon.delete />
+            </c-button>
+            <c-button icon="true" size="lg">
+            <c-icon.play />
+            </c-button>
+        </div>
+        <div>
+            <h1 class="text-white text-lg">Extra Large, icons</h1>
+            <c-button icon="true" size="xl">
+            <c-icon.edit /> Edit
+            </c-button>
+            <c-button icon="true" size="xl">
+            <c-icon.finish />
+            </c-button>
+            <c-button icon="true" size="xl">
+            <c-icon.end />
+            </c-button>
+            <c-button icon="true" size="xl">
+            <c-icon.delete />
+            </c-button>
+            <c-button icon="true" size="xl">
+            <c-icon.play />
+            </c-button>
+        </div>
+        <div>
+            <h1 class="text-white text-lg">Group (sm)</h1>
+            <c-button-group>
+            <c-button-group-button-sm>
+            No attributes
+            </c-button-group-button-sm>
+            <c-button-group-button-sm color="blue">
+            No attributes, blue
+            </c-button-group-button-sm>
+            <c-button-group-button-sm color="red">
+            No attributes, red
+            </c-button-group-button-sm>
+            <c-button-group-button-sm color="green">
+            No attributes, green
+            </c-button-group-button-sm>
+            <c-button-group-button-sm color="gray">
+            No attributes, gray
+            </c-button-group-button-sm>
+            </c-button-group>
+        </div>
+    </div>
+{% endblock content %}

games/templates/stats.html

@@ -1,7 +1,4 @@
-{% extends "base.html" %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
+<c-layouts.base>
 {% load static %}
 {% partialdef purchase-name %}
 {% if purchase.type != 'game' %}
@@ -9,271 +6,280 @@
     {{ purchase.name }} ({{ purchase.edition.name }} {{ purchase.get_type_display }})
     </c-gamelink>
 {% else %}
-    <c-gamelink :game_id=purchase.edition.game.id name=purchase.edition.name />
+    <c-gamelink :game_id=purchase.edition.game.id :name=purchase.edition.name />
 {% endif %}
 {% endpartialdef %}
-{% block content %}
-    <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
-        <div class="flex justify-center items-center">
-            <form method="get" class="text-center">
-                <label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
-                <select name="year"
-                        id="yearSelect"
-                        onchange="this.form.submit();"
-                        class="mx-2">
-                    {% for year_item in stats_dropdown_year_range %}
-                        <option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
-                    {% endfor %}
-                </select>
-            </form>
-        </div>
-        <h1 class="text-5xl text-center my-6">Playtime</h1>
-        <table class="responsive-table">
-            <tbody>
+<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
+    <div class="flex justify-center items-center">
+        <form method="get" class="text-center">
+            <label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
+            <select name="year"
+                    id="yearSelect"
+                    onchange="this.form.submit();"
+                    class="mx-2">
+                {% for year_item in stats_dropdown_year_range %}
+                    <option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
+                {% endfor %}
+            </select>
+        </form>
+    </div>
+    <h1 class="text-5xl text-center my-6">Playtime</h1>
+    <table class="responsive-table">
+        <tbody>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Hours</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
+            </tr>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Sessions</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_sessions }}</td>
+            </tr>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Days</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ unique_days }} ({{ unique_days_percent }}%)</td>
+            </tr>
+            {% if total_games %}
                 <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Hours</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Games</td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
                 </tr>
+            {% endif %}
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Games ({{ year }})</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_2023_games }}</td>
+            </tr>
+            {% if all_finished_this_year_count %}
                 <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Sessions</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_sessions }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Days</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ unique_days }} ({{ unique_days_percent }}%)</td>
-                </tr>
-                {% if total_games %}
-                    <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2">Games</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
-                    </tr>
-                {% endif %}
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Games ({{ year }})</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_2023_games }}</td>
-                </tr>
-                {% if all_finished_this_year_count %}
-                    <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2">Finished</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year_count }}</td>
-                    </tr>
-                {% endif %}
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Finished ({{ year }})</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ this_year_finished_this_year_count }}</td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Finished</td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year_count }}</td>
                 </tr>
+            {% endif %}
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Finished ({{ year }})</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ this_year_finished_this_year_count }}</td>
+            </tr>
+            {% if longest_session_game.id %}
                 <tr>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2">Longest session</td>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                         {{ longest_session_time }} (<c-gamelink :game_id=longest_session_game.id :name=longest_session_game.name />)
                     </td>
                 </tr>
+            {% endif %}
+            {% if highest_session_count_game.id %}
                 <tr>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2">Most sessions</td>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                         {{ highest_session_count }} (<c-gamelink :game_id=highest_session_count_game.id :name=highest_session_count_game.name />)
                     </td>
                 </tr>
+            {% endif %}
+            {% if highest_session_average_game.id %}
                 <tr>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2">Highest session average</td>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                         {{ highest_session_average }} (<c-gamelink :game_id=highest_session_average_game.id :name=highest_session_average_game.name />)
                     </td>
                 </tr>
+            {% endif %}
+            {% if first_play_game.id %}
                 <tr>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2">First play</td>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                         <c-gamelink :game_id=first_play_game.id :name=first_play_game.name /> ({{ first_play_date }})
                     </td>
                 </tr>
+            {% endif %}
+            {% if last_play_game.id %}
                 <tr>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2">Last play</td>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                         <c-gamelink :game_id=last_play_game.id :name=last_play_game.name /> ({{ last_play_date }})
                     </td>
                 </tr>
-            </tbody>
-        </table>
-        {% if month_playtime %}
-            <h1 class="text-5xl text-center my-6">Playtime per month</h1>
-            <table class="responsive-table">
-                <tbody>
-                    {% for month in month_playtimes %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2">{{ month.month | date:"F" }}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ month.playtime }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        <h1 class="text-5xl text-center my-6">Purchases</h1>
+            {% endif %}
+        </tbody>
+    </table>
+    {% if month_playtime %}
+        <h1 class="text-5xl text-center my-6">Playtime per month</h1>
         <table class="responsive-table">
             <tbody>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Total</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_this_year_count }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Refunded</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        {{ all_purchased_refunded_this_year_count }} ({{ refunded_percent }}%)
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Dropped</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ dropped_count }} ({{ dropped_percentage }}%)</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Unfinished</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                        {{ purchased_unfinished_count }} ({{ unfinished_purchases_percent }}%)
-                    </td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Backlog Decrease</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ backlog_decrease_count }}</td>
-                </tr>
-                <tr>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
-                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_spent }} ({{ spent_per_game }}/game)</td>
-                </tr>
-            </tbody>
-        </table>
-        <h1 class="text-5xl text-center my-6">Top games by playtime</h1>
-        <table class="responsive-table">
-            <thead>
-                <tr>
-                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
-                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for game in top_10_games_by_playtime %}
+                {% for month in month_playtimes %}
                     <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
-                            <c-gamelink :game_id=game.id :name=game.name />
-                        </td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2">{{ month.month | date:"F" }}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ month.playtime }}</td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
-        <h1 class="text-5xl text-center my-6">Platforms by playtime</h1>
+    {% endif %}
+    <h1 class="text-5xl text-center my-6">Purchases</h1>
+    <table class="responsive-table">
+        <tbody>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Total</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_this_year_count }}</td>
+            </tr>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Refunded</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
+                    {{ all_purchased_refunded_this_year_count }} ({{ refunded_percent }}%)
+                </td>
+            </tr>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Dropped</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ dropped_count }} ({{ dropped_percentage }}%)</td>
+            </tr>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Unfinished</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
+                    {{ purchased_unfinished_count }} ({{ unfinished_purchases_percent }}%)
+                </td>
+            </tr>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Backlog Decrease</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ backlog_decrease_count }}</td>
+            </tr>
+            <tr>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_spent }} ({{ spent_per_game }}/game)</td>
+            </tr>
+        </tbody>
+    </table>
+    <h1 class="text-5xl text-center my-6">Top games by playtime</h1>
+    <table class="responsive-table">
+        <thead>
+            <tr>
+                <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
+                <th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for game in top_10_games_by_playtime %}
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
+                        <c-gamelink :game_id=game.id :name=game.name />
+                    </td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    <h1 class="text-5xl text-center my-6">Platforms by playtime</h1>
+    <table class="responsive-table">
+        <thead>
+            <tr>
+                <th class="px-2 sm:px-4 md:px-6 md:py-2">Platform</th>
+                <th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for item in total_playtime_per_platform %}
+                <tr>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}</td>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.formatted_playtime }}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% if all_finished_this_year %}
+        <h1 class="text-5xl text-center my-6">Finished</h1>
         <table class="responsive-table">
             <thead>
                 <tr>
-                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Platform</th>
-                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
                 </tr>
             </thead>
             <tbody>
-                {% for item in total_playtime_per_platform %}
+                {% for purchase in all_finished_this_year %}
                     <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.formatted_playtime }}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
-        {% if all_finished_this_year %}
-            <h1 class="text-5xl text-center my-6">Finished</h1>
-            <table class="responsive-table">
-                <thead>
+    {% endif %}
+    {% if this_year_finished_this_year %}
+        <h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in this_year_finished_this_year %}
                     <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
                     </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in all_finished_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if this_year_finished_this_year %}
-            <h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
-            <table class="responsive-table">
-                <thead>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% endif %}
+    {% if purchased_this_year_finished_this_year %}
+        <h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in purchased_this_year_finished_this_year %}
                     <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
                     </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in this_year_finished_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if purchased_this_year_finished_this_year %}
-            <h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
-            <table class="responsive-table">
-                <thead>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% endif %}
+    {% if purchased_unfinished %}
+        <h1 class="text-5xl text-center my-6">Unfinished Purchases</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in purchased_unfinished %}
                     <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
                     </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in purchased_this_year_finished_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if purchased_unfinished %}
-            <h1 class="text-5xl text-center my-6">Unfinished Purchases</h1>
-            <table class="responsive-table">
-                <thead>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% endif %}
+    {% if all_purchased_this_year %}
+        <h1 class="text-5xl text-center my-6">All Purchases</h1>
+        <table class="responsive-table">
+            <thead>
+                <tr>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
+                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for purchase in all_purchased_this_year %}
                     <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
                     </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in purchased_unfinished %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-        {% if all_purchased_this_year %}
-            <h1 class="text-5xl text-center my-6">All Purchases</h1>
-            <table class="responsive-table">
-                <thead>
-                    <tr>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
-                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for purchase in all_purchased_this_year %}
-                        <tr>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
-                            <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-    </div>
-{% endblock content %}
+                {% endfor %}
+            </tbody>
+        </table>
+    {% endif %}
+</div>
+</c-layouts.base>

games/templates/view_game.html

@@ -1,79 +1,56 @@
-{% extends "base.html" %}
-{% block title %}
-    {{ title }}
-{% endblock title %}
-{% load static %}
-{% load markdown_extras %}
-{% block content %}
-    <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
-        <div id="game-info" class="mb-10">
-            <div class="flex gap-5 mb-3">
-                <span class="text-wrap max-w-80 text-4xl">
-                    <span class="font-bold font-serif">{{ game.name }}</span>&nbsp;<span data-popover-target="popover-year" class="text-slate-500 text-2xl">{{ game.year_released }}</span>
-                    <c-popover id="popover-year">
-                    Original release year
-                    </c-popover>
+<c-layouts.base>
+<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
+    <div id="game-info" class="mb-10">
+        <div class="flex gap-5 mb-3">
+            <span class="text-balance max-w-[30rem] text-4xl">
+                <span class="font-bold font-serif">{{ game.name }}</span>&nbsp;<c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>
                 </span>
             </div>
             <div class="flex gap-4 dark:text-slate-400 mb-3">
-                <span data-popover-target="popover-hours" class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                    </svg>
-                    {{ hours_sum }}
-                    <c-popover id="popover-hours">
-                    Total hours played
-                    </c-popover>
-                </span>
-                <span data-popover-target="popover-sessions"
-                      class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
-                    </svg>
-                    {{ session_count }}
-                    <c-popover id="popover-sessions">
-                    Number of sessions
-                    </c-popover>
-                </span>
-                <span data-popover-target="popover-average" class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
-                    </svg>
-                    {{ session_average_without_manual }}
-                    <c-popover id="popover-average">
-                    Average playtime per session
-                    </c-popover>
-                </span>
-                <span data-popover-target="popover-playrange"
-                      class="flex gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke-width="1.5"
-                         stroke="currentColor"
-                         class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
-                    </svg>
-                    {{ playrange }}
-                    <c-popover id="popover-playrange">
-                    Earliest and latest dates played
-                    </c-popover>
-                </span>
+                <c-popover id="popover-hours" popover_content="Total hours played" class="flex gap-2 items-center">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke-width="1.5"
+                     stroke="currentColor"
+                     class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+                {{ hours_sum }}
+                </c-popover>
+                <c-popover id="popover-sessions" popover_content="Number of sessions" class="flex gap-2 items-center">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke-width="1.5"
+                     stroke="currentColor"
+                     class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
+                </svg>
+                {{ session_count }}
+                </c-popover>
+                <c-popover id="popover-average" popover_content="Average playtime per session" class="flex gap-2 items-center">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke-width="1.5"
+                     stroke="currentColor"
+                     class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
+                </svg>
+                {{ session_average_without_manual }}
+                </c-popover>
+                <c-popover id="popover-playrange" popover_content="Earliest and latest dates played" class="flex gap-2 items-center">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke-width="1.5"
+                     stroke="currentColor"
+                     class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
+                </svg>
+                {{ playrange }}
+                </c-popover>
             </div>
             <div class="inline-flex rounded-md shadow-sm mb-3" role="group">
                 <a href="{% url 'edit_game' game.id %}">
@@ -90,22 +67,22 @@
                 </a>
             </div>
         </div>
-        <c-h1 :badge=edition_count>Editions</c-h1>
+        <c-h1 :badge="edition_count">Editions</c-h1>
         <div class="mb-6">
             <c-simple-table :rows=edition_data.rows :columns=edition_data.columns />
         </div>
         <div class="mb-6">
-            <c-h1 :badge=purchase_count>Purchases</c-h1>
+            <c-h1 :badge="purchase_count">Purchases</c-h1>
             <c-simple-table :rows=purchase_data.rows :columns=purchase_data.columns />
         </div>
         <div class="mb-6">
-            <c-h1 :badge=session_count>Sessions</c-h1>
-            <c-simple-table :rows=session_data.rows :columns=session_data.columns :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
+            <c-h1 :badge="session_count">Sessions</c-h1>
+            <c-simple-table :rows=session_data.rows :columns=session_data.columns :header_action=session_data.header_action :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
         </div>
     </div>
     <script>
-        function getSessionCount() {
-            return document.getElementById('session-count').textContent.match("[0-9]+");
-        }
+            function getSessionCount() {
+                return document.getElementById('session-count').textContent.match("[0-9]+");
+            }
     </script>
-{% endblock content %}
+    </c-layouts.base>

games/urls.py

@@ -44,16 +44,31 @@ urlpatterns = [
         purchase.edit_purchase,
         name="edit_purchase",
     ),
+    path(
+        "purchase/<int:purchase_id>/drop",
+        purchase.drop_purchase,
+        name="drop_purchase",
+    ),
     path(
         "purchase/<int:purchase_id>/delete",
         purchase.delete_purchase,
         name="delete_purchase",
     ),
+    path(
+        "purchase/<int:purchase_id>/finish",
+        purchase.finish_purchase,
+        name="finish_purchase",
+    ),
     path(
         "purchase/list",
         purchase.list_purchases,
         name="list_purchases",
     ),
+    path(
+        "purchase/<int:purchase_id>/refund",
+        purchase.refund_purchase,
+        name="refund_purchase",
+    ),
     path(
         "purchase/related-purchase-by-edition",
         purchase.related_purchase_by_edition,

games/views/device.py

@@ -7,9 +7,10 @@ from django.shortcuts import get_object_or_404, redirect, render
 from django.template.loader import render_to_string
 from django.urls import reverse
 
+from common.components import A, Button, Icon
+from common.time import dateformat, local_strftime
 from games.forms import DeviceForm
 from games.models import Device
-from games.views.general import dateformat
 
 
 @login_required
@@ -35,6 +36,7 @@ def list_devices(request: HttpRequest) -> HttpResponse:
             else None
         ),
         "data": {
+            "header_action": A([], Button([], "Add device"), url="add_device"),
             "columns": [
                 "Name",
                 "Type",
@@ -45,19 +47,19 @@ def list_devices(request: HttpRequest) -> HttpResponse:
                 [
                     device.name,
                     device.get_type_display(),
-                    device.created_at.strftime(dateformat),
+                    local_strftime(device.created_at, dateformat),
                     render_to_string(
-                        "cotton/button_group_sm.html",
+                        "cotton/button_group.html",
                         {
                             "buttons": [
                                 {
                                     "href": reverse("edit_device", args=[device.pk]),
-                                    "text": "Edit",
+                                    "slot": Icon("edit"),
                                     "color": "gray",
                                 },
                                 {
                                     "href": reverse("delete_device", args=[device.pk]),
-                                    "text": "Delete",
+                                    "slot": Icon("delete"),
                                     "color": "red",
                                 },
                             ]

games/views/edition.py

@@ -7,10 +7,16 @@ from django.shortcuts import get_object_or_404, redirect, render
 from django.template.loader import render_to_string
 from django.urls import reverse
 
-from common.utils import A, truncate_with_popover
+from common.components import (
+    A,
+    Button,
+    Icon,
+    LinkedNameWithPlatformIcon,
+    PopoverTruncated,
+)
+from common.time import dateformat, local_strftime
 from games.forms import EditionForm
 from games.models import Edition, Game
-from games.views.general import dateformat
 
 
 @login_required
@@ -36,11 +42,11 @@ def list_editions(request: HttpRequest) -> HttpResponse:
             else None
         ),
         "data": {
+            "header_action": A([], Button([], "Add edition"), url="add_edition"),
             "columns": [
                 "Game",
                 "Name",
                 "Sort Name",
-                "Platform",
                 "Year",
                 "Wikidata",
                 "Created",
@@ -48,47 +54,39 @@ def list_editions(request: HttpRequest) -> HttpResponse:
             ],
             "rows": [
                 [
-                    A(
-                        [
-                            (
-                                "href",
-                                reverse(
-                                    "view_game",
-                                    args=[edition.game.pk],
-                                ),
-                            )
-                        ],
-                        truncate_with_popover(edition.game.name),
+                    LinkedNameWithPlatformIcon(
+                        name=edition.name,
+                        game_id=edition.game.id,
+                        platform=edition.platform,
                     ),
-                    truncate_with_popover(
+                    PopoverTruncated(
                         edition.name
                         if edition.game.name != edition.name
                         else "(identical)"
                     ),
-                    truncate_with_popover(
+                    PopoverTruncated(
                         edition.sort_name
                         if edition.sort_name is not None
                         and edition.game.name != edition.sort_name
                         else "(identical)"
                     ),
-                    truncate_with_popover(str(edition.platform)),
                     edition.year_released,
                     edition.wikidata,
-                    edition.created_at.strftime(dateformat),
+                    local_strftime(edition.created_at, dateformat),
                     render_to_string(
-                        "cotton/button_group_sm.html",
+                        "cotton/button_group.html",
                         {
                             "buttons": [
                                 {
                                     "href": reverse("edit_edition", args=[edition.pk]),
-                                    "text": "Edit",
+                                    "slot": Icon("edit"),
                                     "color": "gray",
                                 },
                                 {
                                     "href": reverse(
                                         "delete_edition", args=[edition.pk]
                                     ),
-                                    "text": "Delete",
+                                    "slot": Icon("delete"),
                                     "color": "red",
                                 },
                             ]

games/views/game.py

@@ -8,18 +8,27 @@ from django.shortcuts import get_object_or_404, redirect, render
 from django.template.loader import render_to_string
 from django.urls import reverse
 
-from common.time import format_duration
-from common.utils import A, safe_division, truncate_with_popover
-from games.forms import GameForm
-from games.models import Edition, Game, Purchase, Session
-from games.views.general import (
+from common.components import (
+    A,
+    Button,
+    Div,
+    Icon,
+    NameWithPlatformIcon,
+    Popover,
+    PopoverTruncated,
+)
+from common.time import (
     dateformat,
-    datetimeformat,
     durationformat,
     durationformat_manual,
+    format_duration,
+    local_strftime,
     timeformat,
-    use_custom_redirect,
 )
+from common.utils import format_float_or_int, safe_division, truncate
+from games.forms import GameForm
+from games.models import Edition, Game, Purchase, Session
+from games.views.general import use_custom_redirect
 
 
 @login_required
@@ -45,6 +54,7 @@ def list_games(request: HttpRequest) -> HttpResponse:
             else None
         ),
         "data": {
+            "header_action": A([], Button([], "Add game"), url="add_game"),
             "columns": [
                 "Name",
                 "Sort Name",
@@ -65,28 +75,28 @@ def list_games(request: HttpRequest) -> HttpResponse:
                                 ),
                             )
                         ],
-                        truncate_with_popover(game.name),
+                        PopoverTruncated(game.name),
                     ),
-                    truncate_with_popover(
+                    PopoverTruncated(
                         game.sort_name
                         if game.sort_name is not None and game.name != game.sort_name
                         else "(identical)"
                     ),
                     game.year_released,
                     game.wikidata,
-                    game.created_at.strftime(dateformat),
+                    local_strftime(game.created_at, dateformat),
                     render_to_string(
-                        "cotton/button_group_sm.html",
+                        "cotton/button_group.html",
                         {
                             "buttons": [
                                 {
                                     "href": reverse("edit_game", args=[game.pk]),
-                                    "text": "Edit",
+                                    "slot": Icon("edit"),
                                     "color": "gray",
                                 },
                                 {
                                     "href": reverse("delete_game", args=[game.pk]),
-                                    "text": "Delete",
+                                    "slot": Icon("delete"),
                                     "color": "red",
                                 },
                             ]
@@ -174,9 +184,9 @@ def view_game(request: HttpRequest, game_id: int) -> HttpResponse:
     )
 
     if sessions:
-        playrange_start = sessions.earliest().timestamp_start.strftime("%b %Y")
+        playrange_start = local_strftime(sessions.earliest().timestamp_start, "%b %Y")
         latest_session = sessions.latest()
-        playrange_end = latest_session.timestamp_start.strftime("%b %Y")
+        playrange_end = local_strftime(latest_session.timestamp_start, "%b %Y")
 
         playrange = (
             playrange_start
@@ -195,27 +205,28 @@ def view_game(request: HttpRequest, game_id: int) -> HttpResponse:
     edition_data: dict[str, Any] = {
         "columns": [
             "Name",
-            "Platform",
             "Year Released",
             "Actions",
         ],
         "rows": [
             [
-                edition.name,
-                edition.platform,
+                NameWithPlatformIcon(
+                    name=edition.name,
+                    platform=edition.platform,
+                ),
                 edition.year_released,
                 render_to_string(
-                    "cotton/button_group_sm.html",
+                    "cotton/button_group.html",
                     {
                         "buttons": [
                             {
                                 "href": reverse("edit_edition", args=[edition.pk]),
-                                "text": "Edit",
+                                "slot": Icon("edit"),
                                 "color": "gray",
                             },
                             {
                                 "href": reverse("delete_edition", args=[edition.pk]),
-                                "text": "Delete",
+                                "slot": Icon("delete"),
                                 "color": "red",
                             },
                         ]
@@ -227,24 +238,28 @@ def view_game(request: HttpRequest, game_id: int) -> HttpResponse:
     }
 
     purchase_data: dict[str, Any] = {
-        "columns": ["Name", "Type", "Price", "Actions"],
+        "columns": ["Name", "Type", "Date", "Price", "Actions"],
         "rows": [
             [
-                purchase.name if purchase.name else purchase.edition.name,
+                NameWithPlatformIcon(
+                    name=purchase.name if purchase.name else purchase.edition.name,
+                    platform=purchase.platform,
+                ),
                 purchase.get_type_display(),
-                f"{purchase.price} {purchase.price_currency}",
+                purchase.date_purchased.strftime(dateformat),
+                f"{format_float_or_int(purchase.price)} {purchase.price_currency}",
                 render_to_string(
-                    "cotton/button_group_sm.html",
+                    "cotton/button_group.html",
                     {
                         "buttons": [
                             {
                                 "href": reverse("edit_purchase", args=[purchase.pk]),
-                                "text": "Edit",
+                                "slot": Icon("edit"),
                                 "color": "gray",
                             },
                             {
                                 "href": reverse("delete_purchase", args=[purchase.pk]),
-                                "text": "Delete",
+                                "slot": Icon("delete"),
                                 "color": "red",
                             },
                         ]
@@ -258,6 +273,9 @@ def view_game(request: HttpRequest, game_id: int) -> HttpResponse:
     sessions_all = Session.objects.filter(purchase__edition__game=game).order_by(
         "-timestamp_start"
     )
+    last_session = None
+    if sessions_all.exists():
+        last_session = sessions_all.latest()
     session_count = sessions_all.count()
     session_paginator = Paginator(sessions_all, 5)
     page_number = request.GET.get("page", 1)
@@ -265,32 +283,82 @@ def view_game(request: HttpRequest, game_id: int) -> HttpResponse:
     sessions = session_page_obj.object_list
 
     session_data: dict[str, Any] = {
-        "columns": ["Date", "Duration", "Duration (manual)", "Actions"],
+        "header_action": Div(
+            children=[
+                A(
+                    url="add_session",
+                    children=Button(
+                        icon=True,
+                        size="xs",
+                        children=[Icon("play"), "LOG"],
+                    ),
+                ),
+                A(
+                    url=reverse(
+                        "list_sessions_start_session_from_session",
+                        args=[last_session.pk],
+                    ),
+                    children=Popover(
+                        popover_content=last_session.purchase.edition.name,
+                        children=[
+                            Button(
+                                icon=True,
+                                color="gray",
+                                size="xs",
+                                children=[
+                                    Icon("play"),
+                                    truncate(f"{last_session.purchase.edition.name}"),
+                                ],
+                            )
+                        ],
+                    ),
+                )
+                if last_session
+                else "",
+            ],
+        ),
+        "columns": ["Edition", "Date", "Duration", "Actions"],
         "rows": [
             [
-                f"{session.timestamp_start.strftime(datetimeformat)}{f" — {session.timestamp_end.strftime(timeformat)}" if session.timestamp_end else ""}",
+                NameWithPlatformIcon(
+                    name=session.purchase.name
+                    if session.purchase.name
+                    else session.purchase.edition.name,
+                    platform=session.purchase.platform,
+                ),
+                f"{local_strftime(session.timestamp_start)}{f" — {local_strftime(session.timestamp_end, timeformat)}" if session.timestamp_end else ""}",
                 (
                     format_duration(session.duration_calculated, durationformat)
                     if session.duration_calculated
-                    else "-"
-                ),
-                (
-                    format_duration(session.duration_manual, durationformat_manual)
-                    if session.duration_manual
-                    else "-"
+                    else f"{format_duration(session.duration_manual, durationformat_manual)}*"
                 ),
                 render_to_string(
-                    "cotton/button_group_sm.html",
+                    "cotton/button_group.html",
                     {
                         "buttons": [
+                            {
+                                "href": reverse(
+                                    "list_sessions_end_session", args=[session.pk]
+                                ),
+                                "slot": Icon("end"),
+                                "title": "Finish session now",
+                                "color": "green",
+                                "hover": "green",
+                            }
+                            if session.timestamp_end is None
+                            # this only works without leaving an empty
+                            # a element and wrong rounding of button edges
+                            # because we check if button.href is not None
+                            # in the button group component
+                            else {},
                             {
                                 "href": reverse("edit_session", args=[session.pk]),
-                                "text": "Edit",
+                                "slot": Icon("edit"),
                                 "color": "gray",
                             },
                             {
                                 "href": reverse("delete_session", args=[session.pk]),
-                                "text": "Delete",
+                                "slot": Icon("delete"),
                                 "color": "red",
                             },
                         ]

games/views/general.py

@@ -1,3 +1,4 @@
+from datetime import datetime
 from typing import Any, Callable
 
 from django.contrib.auth.decorators import login_required
@@ -8,16 +9,10 @@ from django.http import HttpRequest, HttpResponse, HttpResponseRedirect
 from django.shortcuts import redirect, render
 from django.urls import reverse
 
-from common.time import format_duration
+from common.time import available_stats_year_range, dateformat, format_duration
 from common.utils import safe_division
 from games.models import Edition, Game, Platform, Purchase, Session
 
-dateformat: str = "%d/%m/%Y"
-datetimeformat: str = "%d/%m/%Y %H:%M"
-timeformat: str = "%H:%M"
-durationformat: str = "%2.1H hours"
-durationformat_manual: str = "%H hours"
-
 
 def model_counts(request: HttpRequest) -> dict[str, bool]:
     return {
@@ -29,6 +24,10 @@ def model_counts(request: HttpRequest) -> dict[str, bool]:
     }
 
 
+def global_current_year(request: HttpRequest) -> dict[str, int]:
+    return {"global_current_year": datetime.now().year}
+
+
 def use_custom_redirect(
     func: Callable[..., HttpResponse],
 ) -> Callable[..., HttpResponse]:
@@ -179,10 +178,10 @@ def stats_alltime(request: HttpRequest) -> HttpResponse:
     if this_year_sessions:
         first_session = this_year_sessions.earliest()
         first_play_game = first_session.purchase.edition.game
-        first_play_date = first_session.timestamp_start.strftime("%x")
+        first_play_date = first_session.timestamp_start.strftime(dateformat)
         last_session = this_year_sessions.latest()
         last_play_game = last_session.purchase.edition.game
-        last_play_date = last_session.timestamp_start.strftime("%x")
+        last_play_date = last_session.timestamp_start.strftime(dateformat)
 
     all_purchased_this_year_count = this_year_purchases_with_currency.count()
     all_purchased_refunded_this_year_count: int = this_year_purchases_refunded.count()
@@ -253,6 +252,7 @@ def stats_alltime(request: HttpRequest) -> HttpResponse:
         "last_play_game": last_play_game,
         "last_play_date": last_play_date,
         "title": f"{year} Stats",
+        "stats_dropdown_year_range": available_stats_year_range(),
     }
 
     request.session["return_path"] = request.path
@@ -406,10 +406,10 @@ def stats(request: HttpRequest, year: int = 0) -> HttpResponse:
     if this_year_sessions:
         first_session = this_year_sessions.earliest()
         first_play_game = first_session.purchase.edition.game
-        first_play_date = first_session.timestamp_start.strftime("%x")
+        first_play_date = first_session.timestamp_start.strftime(dateformat)
         last_session = this_year_sessions.latest()
         last_play_game = last_session.purchase.edition.game
-        last_play_date = last_session.timestamp_start.strftime("%x")
+        last_play_date = last_session.timestamp_start.strftime(dateformat)
 
     all_purchased_this_year_count = this_year_purchases_with_currency.count()
     all_purchased_refunded_this_year_count = this_year_purchases_refunded.count()
@@ -499,6 +499,7 @@ def stats(request: HttpRequest, year: int = 0) -> HttpResponse:
         "last_play_date": last_play_date,
         "title": f"{year} Stats",
         "month_playtimes": month_playtimes,
+        "stats_dropdown_year_range": available_stats_year_range(),
     }
 
     request.session["return_path"] = request.path

games/views/platform.py

@@ -7,9 +7,11 @@ from django.shortcuts import get_object_or_404, redirect, render
 from django.template.loader import render_to_string
 from django.urls import reverse
 
+from common.components import A, Button, Icon
+from common.time import dateformat, local_strftime
 from games.forms import PlatformForm
 from games.models import Platform
-from games.views.general import dateformat, use_custom_redirect
+from games.views.general import use_custom_redirect
 
 
 @login_required
@@ -17,7 +19,7 @@ def list_platforms(request: HttpRequest) -> HttpResponse:
     context: dict[Any, Any] = {}
     page_number = request.GET.get("page", 1)
     limit = request.GET.get("limit", 10)
-    platforms = Platform.objects.order_by("-created_at")
+    platforms = Platform.objects.order_by("name")
     page_obj = None
     if int(limit) != 0:
         paginator = Paginator(platforms, limit)
@@ -35,8 +37,10 @@ def list_platforms(request: HttpRequest) -> HttpResponse:
             else None
         ),
         "data": {
+            "header_action": A([], Button([], "Add platform"), url="add_platform"),
             "columns": [
                 "Name",
+                "Icon",
                 "Group",
                 "Created",
                 "Actions",
@@ -44,24 +48,25 @@ def list_platforms(request: HttpRequest) -> HttpResponse:
             "rows": [
                 [
                     platform.name,
+                    Icon(platform.icon),
                     platform.group,
-                    platform.created_at.strftime(dateformat),
+                    local_strftime(platform.created_at, dateformat),
                     render_to_string(
-                        "cotton/button_group_sm.html",
+                        "cotton/button_group.html",
                         {
                             "buttons": [
                                 {
                                     "href": reverse(
                                         "edit_platform", args=[platform.pk]
                                     ),
-                                    "text": "Edit",
+                                    "slot": Icon("edit"),
                                     "color": "gray",
                                 },
                                 {
                                     "href": reverse(
                                         "delete_platform", args=[platform.pk]
                                     ),
-                                    "text": "Delete",
+                                    "slot": Icon("delete"),
                                     "color": "red",
                                 },
                             ]

games/views/purchase.py

@@ -13,10 +13,12 @@ from django.template.loader import render_to_string
 from django.urls import reverse
 from django.utils import timezone
 
-from common.utils import A, truncate_with_popover
+from common.components import A, Button, Icon, LinkedNameWithPlatformIcon
+from common.time import dateformat
+from common.utils import format_float_or_int
 from games.forms import PurchaseForm
 from games.models import Edition, Purchase
-from games.views.general import dateformat, use_custom_redirect
+from games.views.general import use_custom_redirect
 
 
 @login_required
@@ -24,7 +26,7 @@ def list_purchases(request: HttpRequest) -> HttpResponse:
     context: dict[Any, Any] = {}
     page_number = request.GET.get("page", 1)
     limit = request.GET.get("limit", 10)
-    purchases = Purchase.objects.order_by("-date_purchased")
+    purchases = Purchase.objects.order_by("-date_purchased", "-created_at")
     page_obj = None
     if int(limit) != 0:
         paginator = Paginator(purchases, limit)
@@ -42,10 +44,10 @@ def list_purchases(request: HttpRequest) -> HttpResponse:
             else None
         ),
         "data": {
+            "header_action": A([], Button([], "Add purchase"), url="add_purchase"),
             "columns": [
                 "Name",
                 "Type",
-                "Platform",
                 "Price",
                 "Currency",
                 "Infinite",
@@ -58,25 +60,13 @@ def list_purchases(request: HttpRequest) -> HttpResponse:
             ],
             "rows": [
                 [
-                    A(
-                        [
-                            (
-                                "href",
-                                reverse(
-                                    "view_game",
-                                    args=[purchase.edition.game.pk],
-                                ),
-                            ),
-                        ],
-                        truncate_with_popover(
-                            purchase.edition.game.name
-                            if purchase.type == "game"
-                            else f"{purchase.edition.game.name} ({purchase.name})"
-                        ),
+                    LinkedNameWithPlatformIcon(
+                        name=purchase.edition.name,
+                        game_id=purchase.edition.game.pk,
+                        platform=purchase.platform,
                     ),
                     purchase.get_type_display(),
-                    purchase.platform,
-                    purchase.price,
+                    format_float_or_int(purchase.price),
                     purchase.price_currency,
                     purchase.infinite,
                     purchase.date_purchased.strftime(dateformat),
@@ -97,21 +87,50 @@ def list_purchases(request: HttpRequest) -> HttpResponse:
                     ),
                     purchase.created_at.strftime(dateformat),
                     render_to_string(
-                        "cotton/button_group_sm.html",
+                        "cotton/button_group.html",
                         {
                             "buttons": [
+                                {
+                                    "href": reverse(
+                                        "finish_purchase", args=[purchase.pk]
+                                    ),
+                                    "slot": Icon("checkmark"),
+                                    "title": "Mark as finished",
+                                }
+                                if not purchase.date_finished
+                                else {},
+                                {
+                                    "href": reverse(
+                                        "drop_purchase", args=[purchase.pk]
+                                    ),
+                                    "slot": Icon("eject"),
+                                    "title": "Mark as dropped",
+                                }
+                                if not purchase.date_dropped
+                                else {},
+                                {
+                                    "href": reverse(
+                                        "refund_purchase", args=[purchase.pk]
+                                    ),
+                                    "slot": Icon("refund"),
+                                    "title": "Mark as refunded",
+                                }
+                                if not purchase.date_refunded
+                                else {},
                                 {
                                     "href": reverse(
                                         "edit_purchase", args=[purchase.pk]
                                     ),
-                                    "text": "Edit",
+                                    "slot": Icon("edit"),
+                                    "title": "Edit",
                                     "color": "gray",
                                 },
                                 {
                                     "href": reverse(
                                         "delete_purchase", args=[purchase.pk]
                                     ),
-                                    "text": "Delete",
+                                    "slot": Icon("delete"),
+                                    "title": "Delete",
                                     "color": "red",
                                 },
                             ]
@@ -181,7 +200,31 @@ def edit_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
 def delete_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
     purchase = get_object_or_404(Purchase, id=purchase_id)
     purchase.delete()
-    return redirect("list_sessions")
+    return redirect("list_purchases")
+
+
+@login_required
+def drop_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
+    purchase = get_object_or_404(Purchase, id=purchase_id)
+    purchase.date_dropped = timezone.now()
+    purchase.save()
+    return redirect("list_purchases")
+
+
+@login_required
+def refund_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
+    purchase = get_object_or_404(Purchase, id=purchase_id)
+    purchase.date_refunded = timezone.now()
+    purchase.save()
+    return redirect("list_purchases")
+
+
+@login_required
+def finish_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
+    purchase = get_object_or_404(Purchase, id=purchase_id)
+    purchase.date_finished = timezone.now()
+    purchase.save()
+    return redirect("list_purchases")
 
 
 def related_purchase_by_edition(request: HttpRequest) -> HttpResponse:

games/views/session.py

@@ -8,18 +8,19 @@ from django.template.loader import render_to_string
 from django.urls import reverse
 from django.utils import timezone
 
-from common.time import format_duration
-from common.utils import A, truncate_with_popover
-from games.forms import SessionForm
-from games.models import Purchase, Session
-from games.views.general import (
+from common.components import A, Button, Div, Icon, LinkedNameWithPlatformIcon, Popover
+from common.time import (
     dateformat,
-    datetimeformat,
     durationformat,
     durationformat_manual,
+    format_duration,
+    local_strftime,
     timeformat,
-    use_custom_redirect,
 )
+from common.utils import truncate
+from games.forms import SessionForm
+from games.models import Purchase, Session
+from games.views.general import use_custom_redirect
 
 
 @login_required
@@ -28,6 +29,7 @@ def list_sessions(request: HttpRequest) -> HttpResponse:
     page_number = request.GET.get("page", 1)
     limit = request.GET.get("limit", 10)
     sessions = Session.objects.order_by("-timestamp_start")
+    last_session = sessions.latest()
     page_obj = None
     if int(limit) != 0:
         paginator = Paginator(sessions, limit)
@@ -45,57 +47,97 @@ def list_sessions(request: HttpRequest) -> HttpResponse:
             else None
         ),
         "data": {
+            "header_action": Div(
+                children=[
+                    A(
+                        url="add_session",
+                        children=Button(
+                            icon=True,
+                            size="xs",
+                            children=[Icon("play"), "LOG"],
+                        ),
+                    ),
+                    A(
+                        url=reverse(
+                            "list_sessions_start_session_from_session",
+                            args=[last_session.pk],
+                        ),
+                        children=Popover(
+                            popover_content=last_session.purchase.edition.name,
+                            children=[
+                                Button(
+                                    icon=True,
+                                    color="gray",
+                                    size="xs",
+                                    children=[
+                                        Icon("play"),
+                                        truncate(
+                                            f"{last_session.purchase.edition.name}"
+                                        ),
+                                    ],
+                                )
+                            ],
+                        ),
+                    ),
+                ],
+            ),
             "columns": [
                 "Name",
                 "Date",
                 "Duration",
-                "Duration (manual)",
                 "Device",
                 "Created",
                 "Actions",
             ],
             "rows": [
                 [
-                    A(
-                        [
-                            (
-                                "href",
-                                reverse(
-                                    "view_game",
-                                    args=[session.purchase.edition.game.pk],
-                                ),
-                            )
-                        ],
-                        truncate_with_popover(session.purchase.edition.name),
+                    LinkedNameWithPlatformIcon(
+                        name=session.purchase.edition.name,
+                        game_id=session.purchase.edition.game.pk,
+                        platform=session.purchase.platform,
                     ),
-                    f"{session.timestamp_start.strftime(datetimeformat)}{f" — {session.timestamp_end.strftime(timeformat)}" if session.timestamp_end else ""}",
+                    f"{local_strftime(session.timestamp_start)}{f" — {local_strftime(session.timestamp_end, timeformat)}" if session.timestamp_end else ""}",
                     (
                         format_duration(session.duration_calculated, durationformat)
                         if session.duration_calculated
-                        else "-"
-                    ),
-                    (
-                        format_duration(session.duration_manual, durationformat_manual)
-                        if session.duration_manual
-                        else "-"
+                        else f"{format_duration(session.duration_manual, durationformat_manual)}*"
                     ),
                     session.device,
                     session.created_at.strftime(dateformat),
                     render_to_string(
-                        "cotton/button_group_sm.html",
+                        "cotton/button_group.html",
                         {
                             "buttons": [
+                                {
+                                    "href": reverse(
+                                        "list_sessions_end_session", args=[session.pk]
+                                    ),
+                                    "slot": Icon("end"),
+                                    "title": "Finish session now",
+                                    "color": "green",
+                                    "hover": "green",
+                                }
+                                if session.timestamp_end is None
+                                # this only works without leaving an empty
+                                # a element and wrong rounding of button edges
+                                # because we check if button.href is not None
+                                # in the button group component
+                                else {},
                                 {
                                     "href": reverse("edit_session", args=[session.pk]),
-                                    "text": "Edit",
-                                    "color": "gray",
+                                    "slot": Icon("edit"),
+                                    "title": "Edit",
+                                    # "color": "gray",
+                                    "hover": "green",
                                 },
                                 {
                                     "href": reverse(
                                         "delete_session", args=[session.pk]
                                     ),
-                                    "text": "Delete",
+                                    "slot": Icon("delete"),
+                                    "title": "Delete",
                                     "color": "red",
+                                    "hover": "red",
                                 },
                             ]
                         },
@@ -135,6 +177,7 @@ def add_session(request: HttpRequest, purchase_id: int = 0) -> HttpResponse:
             form = SessionForm(initial=initial)
 
     context["title"] = "Add New Session"
+    context["script_name"] = "add_session.js"
     context["form"] = form
     return render(request, "add_session.html", context)
 
@@ -165,7 +208,6 @@ def clone_session_by_id(session_id: int) -> Session:
 
 
 @login_required
-@use_custom_redirect
 def new_session_from_existing_session(
     request: HttpRequest, session_id: int, template: str = ""
 ) -> HttpResponse:
@@ -180,7 +222,6 @@ def new_session_from_existing_session(
 
 
 @login_required
-@use_custom_redirect
 def end_session(
     request: HttpRequest, session_id: int, template: str = ""
 ) -> HttpResponse:
@@ -201,3 +242,10 @@ def delete_session(request: HttpRequest, session_id: int = 0) -> HttpResponse:
     session = get_object_or_404(Session, id=session_id)
     session.delete()
     return redirect("list_sessions")
+
+
+@login_required
+def delete_session(request: HttpRequest, session_id: int = 0) -> HttpResponse:
+    session = get_object_or_404(Session, id=session_id)
+    session.delete()
+    return redirect("list_sessions")

poetry.lock

@@ -28,27 +28,6 @@ files = [
 [package.extras]
 tests = ["mypy (>=0.800)", "pytest", "pytest-asyncio"]
 
-[[package]]
-name = "beautifulsoup4"
-version = "4.12.3"
-description = "Screen-scraping library"
-optional = false
-python-versions = ">=3.6.0"
-files = [
-    {file = "beautifulsoup4-4.12.3-py3-none-any.whl", hash = "sha256:b80878c9f40111313e55da8ba20bdba06d8fa3969fc68304167741bbf9e082ed"},
-    {file = "beautifulsoup4-4.12.3.tar.gz", hash = "sha256:74e3d1928edc070d21748185c46e3fb33490f22f52a3addee9aee0f4f7781051"},
-]
-
-[package.dependencies]
-soupsieve = ">1.2"
-
-[package.extras]
-cchardet = ["cchardet"]
-chardet = ["chardet"]
-charset-normalizer = ["charset-normalizer"]
-html5lib = ["html5lib"]
-lxml = ["lxml"]
-
 [[package]]
 name = "cfgv"
 version = "3.4.0"
@@ -102,24 +81,24 @@ six = ">=1.13.0"
 
 [[package]]
 name = "distlib"
-version = "0.3.8"
+version = "0.3.9"
 description = "Distribution utilities"
 optional = false
 python-versions = "*"
 files = [
-    {file = "distlib-0.3.8-py2.py3-none-any.whl", hash = "sha256:034db59a0b96f8ca18035f36290806a9a6e6bd9d1ff91e45a7f172eb17e51784"},
-    {file = "distlib-0.3.8.tar.gz", hash = "sha256:1530ea13e350031b6312d8580ddb6b27a104275a31106523b8f123787f494f64"},
+    {file = "distlib-0.3.9-py2.py3-none-any.whl", hash = "sha256:47f8c22fd27c27e25a65601af709b38e4f0a45ea4fc2e710f65755fa8caaaf87"},
+    {file = "distlib-0.3.9.tar.gz", hash = "sha256:a60f20dea646b8a33f3e7772f74dc0b2d0772d2837ee1342a00645c81edf9403"},
 ]
 
 [[package]]
 name = "django"
-version = "5.1"
+version = "5.1.2"
 description = "A high-level Python web framework that encourages rapid development and clean, pragmatic design."
 optional = false
 python-versions = ">=3.10"
 files = [
-    {file = "Django-5.1-py3-none-any.whl", hash = "sha256:d3b811bf5371a26def053d7ee42a9df1267ef7622323fe70a601936725aa4557"},
-    {file = "Django-5.1.tar.gz", hash = "sha256:848a5980e8efb76eea70872fb0e4bc5e371619c70fffbe48e3e1b50b2c09455d"},
+    {file = "Django-5.1.2-py3-none-any.whl", hash = "sha256:f11aa87ad8d5617171e3f77e1d5d16f004b79a2cf5d2e1d2b97a6a1f8e9ba5ed"},
+    {file = "Django-5.1.2.tar.gz", hash = "sha256:bd7376f90c99f96b643722eee676498706c9fd7dc759f55ebfaf2c08ebcdf4f0"},
 ]
 
 [package.dependencies]
@@ -133,17 +112,17 @@ bcrypt = ["bcrypt"]
 
 [[package]]
 name = "django-cotton"
-version = "0.9.34"
+version = "1.2.1"
 description = "Bringing component based design to Django templates."
 optional = false
 python-versions = "<4,>=3.8"
 files = [
-    {file = "django_cotton-0.9.34-py3-none-any.whl", hash = "sha256:9721dd79066d5a28eefb84527bea7f2daa8f1db6111ffdecbc5dd64fe2e300c9"},
-    {file = "django_cotton-0.9.34.tar.gz", hash = "sha256:3f2d950a9ad0985955ca0fb2d5fbb42be1f07f55239864fe5a1d0e873303f0bd"},
+    {file = "django_cotton-1.2.1-py3-none-any.whl", hash = "sha256:395b7b6e0b00206be762bc9f20ac6a56e960e24d5ebaf4fb41ac08929f58c4dc"},
+    {file = "django_cotton-1.2.1.tar.gz", hash = "sha256:2ad65df214104e6103ea55d134c3d971e3887ead3bc9a92fed713249561572f9"},
 ]
 
 [package.dependencies]
-beautifulsoup4 = ">=4.12.2,<4.13.0"
+django = ">=4.2,<5.2"
 
 [[package]]
 name = "django-debug-toolbar"
@@ -191,13 +170,13 @@ django = ">=3.2"
 
 [[package]]
 name = "django-template-partials"
-version = "24.2"
+version = "24.4"
 description = "django-template-partials"
 optional = false
 python-versions = "*"
 files = [
-    {file = "django-template-partials-24.2.tar.gz", hash = "sha256:e594063faec6d012df3a4170edf3c5dcc07c82b1c311aa42a1a5838493fd3a72"},
-    {file = "django_template_partials-24.2-py2.py3-none-any.whl", hash = "sha256:b859072e6b3cd780743399bf5e9cee8be1c56c88844425a4e669a65c136205b2"},
+    {file = "django_template_partials-24.4-py2.py3-none-any.whl", hash = "sha256:ee59d3839385d7f648907c3fa8d5923fcd66cd8090f141fe2a1c338b917984e2"},
+    {file = "django_template_partials-24.4.tar.gz", hash = "sha256:25b67301470fc274ecc419e5e5fd4686a5020b1c038fd241a70eb087809034b6"},
 ]
 
 [package.dependencies]
@@ -222,27 +201,27 @@ dev = ["nox", "pre-commit"]
 
 [[package]]
 name = "djlint"
-version = "1.34.1"
+version = "1.35.2"
 description = "HTML Template Linter and Formatter"
 optional = false
-python-versions = ">=3.8.0,<4.0.0"
+python-versions = "<4.0,>=3.8"
 files = [
-    {file = "djlint-1.34.1-py3-none-any.whl", hash = "sha256:96ff1c464fb6f061130ebc88663a2ea524d7ec51f4b56221a2b3f0320a3cfce8"},
-    {file = "djlint-1.34.1.tar.gz", hash = "sha256:db93fa008d19eaadb0454edf1704931d14469d48508daba2df9941111f408346"},
+    {file = "djlint-1.35.2-py3-none-any.whl", hash = "sha256:4ba995bad378f2afa77c8ea56ba1c14429d9ff26a18e8ae23bc71eedb9152243"},
+    {file = "djlint-1.35.2.tar.gz", hash = "sha256:318de9d4b9b0061a111f8f5164ecbacd8215f449dd4bd5a76d2a691c815ee103"},
 ]
 
 [package.dependencies]
-click = ">=8.0.1,<9.0.0"
-colorama = ">=0.4.4,<0.5.0"
-cssbeautifier = ">=1.14.4,<2.0.0"
-html-tag-names = ">=0.1.2,<0.2.0"
-html-void-elements = ">=0.1.0,<0.2.0"
-jsbeautifier = ">=1.14.4,<2.0.0"
-json5 = ">=0.9.11,<0.10.0"
-pathspec = ">=0.12.0,<0.13.0"
-PyYAML = ">=6.0,<7.0"
-regex = ">=2023.0.0,<2024.0.0"
-tqdm = ">=4.62.2,<5.0.0"
+click = ">=8.0.1"
+colorama = ">=0.4.4"
+cssbeautifier = ">=1.14.4"
+html-tag-names = ">=0.1.2"
+html-void-elements = ">=0.1.0"
+jsbeautifier = ">=1.14.4"
+json5 = ">=0.9.11"
+pathspec = ">=0.12.0"
+PyYAML = ">=6.0"
+regex = ">=2023"
+tqdm = ">=4.62.2"
 
 [[package]]
 name = "editorconfig"
@@ -256,19 +235,19 @@ files = [
 
 [[package]]
 name = "filelock"
-version = "3.15.4"
+version = "3.16.1"
 description = "A platform independent file lock."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "filelock-3.15.4-py3-none-any.whl", hash = "sha256:6ca1fffae96225dab4c6eaf1c4f4f28cd2568d3ec2a44e15a08520504de468e7"},
-    {file = "filelock-3.15.4.tar.gz", hash = "sha256:2207938cbc1844345cb01a5a95524dae30f0ce089eba5b00378295a17e3e90cb"},
+    {file = "filelock-3.16.1-py3-none-any.whl", hash = "sha256:2082e5703d51fbf98ea75855d9d5527e33d8ff23099bec374a134febee6946b0"},
+    {file = "filelock-3.16.1.tar.gz", hash = "sha256:c249fbfcd5db47e5e2d6d62198e565475ee65e4831e2561c8e313fa7eb961435"},
 ]
 
 [package.extras]
-docs = ["furo (>=2023.9.10)", "sphinx (>=7.2.6)", "sphinx-autodoc-typehints (>=1.25.2)"]
-testing = ["covdefaults (>=2.3)", "coverage (>=7.3.2)", "diff-cover (>=8.0.1)", "pytest (>=7.4.3)", "pytest-asyncio (>=0.21)", "pytest-cov (>=4.1)", "pytest-mock (>=3.12)", "pytest-timeout (>=2.2)", "virtualenv (>=20.26.2)"]
-typing = ["typing-extensions (>=4.8)"]
+docs = ["furo (>=2024.8.6)", "sphinx (>=8.0.2)", "sphinx-autodoc-typehints (>=2.4.1)"]
+testing = ["covdefaults (>=2.3)", "coverage (>=7.6.1)", "diff-cover (>=9.2)", "pytest (>=8.3.3)", "pytest-asyncio (>=0.24)", "pytest-cov (>=5)", "pytest-mock (>=3.14)", "pytest-timeout (>=2.3.1)", "virtualenv (>=20.26.4)"]
+typing = ["typing-extensions (>=4.12.2)"]
 
 [[package]]
 name = "graphene"
@@ -316,13 +295,13 @@ test = ["coveralls", "django-filter (>=22.1)", "djangorestframework (>=3.6.3)",
 
 [[package]]
 name = "graphql-core"
-version = "3.2.3"
+version = "3.2.5"
 description = "GraphQL implementation for Python, a port of GraphQL.js, the JavaScript reference implementation for GraphQL."
 optional = false
-python-versions = ">=3.6,<4"
+python-versions = "<4,>=3.6"
 files = [
-    {file = "graphql-core-3.2.3.tar.gz", hash = "sha256:06d2aad0ac723e35b1cb47885d3e5c45e956a53bc1b209a9fc5369007fe46676"},
-    {file = "graphql_core-3.2.3-py3-none-any.whl", hash = "sha256:5766780452bd5ec8ba133f8bf287dc92713e3868ddd83aee4faab9fc3e303dc3"},
+    {file = "graphql_core-3.2.5-py3-none-any.whl", hash = "sha256:2f150d5096448aa4f8ab26268567bbfeef823769893b39c1a2e1409590939c8a"},
+    {file = "graphql_core-3.2.5.tar.gz", hash = "sha256:e671b90ed653c808715645e3998b7ab67d382d55467b7e2978549111bbabf8d5"},
 ]
 
 [[package]]
@@ -395,13 +374,13 @@ files = [
 
 [[package]]
 name = "identify"
-version = "2.6.0"
+version = "2.6.1"
 description = "File identification library for Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "identify-2.6.0-py2.py3-none-any.whl", hash = "sha256:e79ae4406387a9d300332b5fd366d8994f1525e8414984e1a59e058b2eda2dd0"},
-    {file = "identify-2.6.0.tar.gz", hash = "sha256:cb171c685bdc31bcc4c1734698736a7d5b6c8bf2e0c15117f4d469c8640ae5cf"},
+    {file = "identify-2.6.1-py2.py3-none-any.whl", hash = "sha256:53863bcac7caf8d2ed85bd20312ea5dcfc22226800f6d6881f232d861db5a8f0"},
+    {file = "identify-2.6.1.tar.gz", hash = "sha256:91478c5fb7c3aac5ff7bf9b4344f803843dc586832d5f110d672b19aa1984c98"},
 ]
 
 [package.extras]
@@ -459,13 +438,13 @@ files = [
 
 [[package]]
 name = "markdown"
-version = "3.6"
+version = "3.7"
 description = "Python implementation of John Gruber's Markdown."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "Markdown-3.6-py3-none-any.whl", hash = "sha256:48f276f4d8cfb8ce6527c8f79e2ee29708508bf4d40aa410fbc3b4ee832c850f"},
-    {file = "Markdown-3.6.tar.gz", hash = "sha256:ed4f41f6daecbeeb96e576ce414c41d2d876daa9a16cb35fa8ed8c2ddfad0224"},
+    {file = "Markdown-3.7-py3-none-any.whl", hash = "sha256:7eb6df5690b81a1d7942992c97fad2938e956e79df20cbc6186e9c3a77b1c803"},
+    {file = "markdown-3.7.tar.gz", hash = "sha256:2ae2471477cfd02dbbf038d5d9bc226d40def84b4fe2986e49b59b6b472bbed2"},
 ]
 
 [package.extras]
@@ -474,38 +453,43 @@ testing = ["coverage", "pyyaml"]
 
 [[package]]
 name = "mypy"
-version = "1.11.1"
+version = "1.12.0"
 description = "Optional static typing for Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "mypy-1.11.1-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:a32fc80b63de4b5b3e65f4be82b4cfa362a46702672aa6a0f443b4689af7008c"},
-    {file = "mypy-1.11.1-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:c1952f5ea8a5a959b05ed5f16452fddadbaae48b5d39235ab4c3fc444d5fd411"},
-    {file = "mypy-1.11.1-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:e1e30dc3bfa4e157e53c1d17a0dad20f89dc433393e7702b813c10e200843b03"},
-    {file = "mypy-1.11.1-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:2c63350af88f43a66d3dfeeeb8d77af34a4f07d760b9eb3a8697f0386c7590b4"},
-    {file = "mypy-1.11.1-cp310-cp310-win_amd64.whl", hash = "sha256:a831671bad47186603872a3abc19634f3011d7f83b083762c942442d51c58d58"},
-    {file = "mypy-1.11.1-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:7b6343d338390bb946d449677726edf60102a1c96079b4f002dedff375953fc5"},
-    {file = "mypy-1.11.1-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:e4fe9f4e5e521b458d8feb52547f4bade7ef8c93238dfb5bbc790d9ff2d770ca"},
-    {file = "mypy-1.11.1-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:886c9dbecc87b9516eff294541bf7f3655722bf22bb898ee06985cd7269898de"},
-    {file = "mypy-1.11.1-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:fca4a60e1dd9fd0193ae0067eaeeb962f2d79e0d9f0f66223a0682f26ffcc809"},
-    {file = "mypy-1.11.1-cp311-cp311-win_amd64.whl", hash = "sha256:0bd53faf56de9643336aeea1c925012837432b5faf1701ccca7fde70166ccf72"},
-    {file = "mypy-1.11.1-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:f39918a50f74dc5969807dcfaecafa804fa7f90c9d60506835036cc1bc891dc8"},
-    {file = "mypy-1.11.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:0bc71d1fb27a428139dd78621953effe0d208aed9857cb08d002280b0422003a"},
-    {file = "mypy-1.11.1-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:b868d3bcff720dd7217c383474008ddabaf048fad8d78ed948bb4b624870a417"},
-    {file = "mypy-1.11.1-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:a707ec1527ffcdd1c784d0924bf5cb15cd7f22683b919668a04d2b9c34549d2e"},
-    {file = "mypy-1.11.1-cp312-cp312-win_amd64.whl", hash = "sha256:64f4a90e3ea07f590c5bcf9029035cf0efeae5ba8be511a8caada1a4893f5525"},
-    {file = "mypy-1.11.1-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:749fd3213916f1751fff995fccf20c6195cae941dc968f3aaadf9bb4e430e5a2"},
-    {file = "mypy-1.11.1-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:b639dce63a0b19085213ec5fdd8cffd1d81988f47a2dec7100e93564f3e8fb3b"},
-    {file = "mypy-1.11.1-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:4c956b49c5d865394d62941b109728c5c596a415e9c5b2be663dd26a1ff07bc0"},
-    {file = "mypy-1.11.1-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:45df906e8b6804ef4b666af29a87ad9f5921aad091c79cc38e12198e220beabd"},
-    {file = "mypy-1.11.1-cp38-cp38-win_amd64.whl", hash = "sha256:d44be7551689d9d47b7abc27c71257adfdb53f03880841a5db15ddb22dc63edb"},
-    {file = "mypy-1.11.1-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:2684d3f693073ab89d76da8e3921883019ea8a3ec20fa5d8ecca6a2db4c54bbe"},
-    {file = "mypy-1.11.1-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:79c07eb282cb457473add5052b63925e5cc97dfab9812ee65a7c7ab5e3cb551c"},
-    {file = "mypy-1.11.1-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:11965c2f571ded6239977b14deebd3f4c3abd9a92398712d6da3a772974fad69"},
-    {file = "mypy-1.11.1-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:a2b43895a0f8154df6519706d9bca8280cda52d3d9d1514b2d9c3e26792a0b74"},
-    {file = "mypy-1.11.1-cp39-cp39-win_amd64.whl", hash = "sha256:1a81cf05975fd61aec5ae16501a091cfb9f605dc3e3c878c0da32f250b74760b"},
-    {file = "mypy-1.11.1-py3-none-any.whl", hash = "sha256:0624bdb940255d2dd24e829d99a13cfeb72e4e9031f9492148f410ed30bcab54"},
-    {file = "mypy-1.11.1.tar.gz", hash = "sha256:f404a0b069709f18bbdb702eb3dcfe51910602995de00bd39cea3050b5772d08"},
+    {file = "mypy-1.12.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:4397081e620dc4dc18e2f124d5e1d2c288194c2c08df6bdb1db31c38cd1fe1ed"},
+    {file = "mypy-1.12.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:684a9c508a283f324804fea3f0effeb7858eb03f85c4402a967d187f64562469"},
+    {file = "mypy-1.12.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:6cabe4cda2fa5eca7ac94854c6c37039324baaa428ecbf4de4567279e9810f9e"},
+    {file = "mypy-1.12.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:060a07b10e999ac9e7fa249ce2bdcfa9183ca2b70756f3bce9df7a92f78a3c0a"},
+    {file = "mypy-1.12.0-cp310-cp310-win_amd64.whl", hash = "sha256:0eff042d7257f39ba4ca06641d110ca7d2ad98c9c1fb52200fe6b1c865d360ff"},
+    {file = "mypy-1.12.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:4b86de37a0da945f6d48cf110d5206c5ed514b1ca2614d7ad652d4bf099c7de7"},
+    {file = "mypy-1.12.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:20c7c5ce0c1be0b0aea628374e6cf68b420bcc772d85c3c974f675b88e3e6e57"},
+    {file = "mypy-1.12.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:a64ee25f05fc2d3d8474985c58042b6759100a475f8237da1f4faf7fcd7e6309"},
+    {file = "mypy-1.12.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:faca7ab947c9f457a08dcb8d9a8664fd438080e002b0fa3e41b0535335edcf7f"},
+    {file = "mypy-1.12.0-cp311-cp311-win_amd64.whl", hash = "sha256:5bc81701d52cc8767005fdd2a08c19980de9ec61a25dbd2a937dfb1338a826f9"},
+    {file = "mypy-1.12.0-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:8462655b6694feb1c99e433ea905d46c478041a8b8f0c33f1dab00ae881b2164"},
+    {file = "mypy-1.12.0-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:923ea66d282d8af9e0f9c21ffc6653643abb95b658c3a8a32dca1eff09c06475"},
+    {file = "mypy-1.12.0-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:1ebf9e796521f99d61864ed89d1fb2926d9ab6a5fab421e457cd9c7e4dd65aa9"},
+    {file = "mypy-1.12.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:e478601cc3e3fa9d6734d255a59c7a2e5c2934da4378f3dd1e3411ea8a248642"},
+    {file = "mypy-1.12.0-cp312-cp312-win_amd64.whl", hash = "sha256:c72861b7139a4f738344faa0e150834467521a3fba42dc98264e5aa9507dd601"},
+    {file = "mypy-1.12.0-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:52b9e1492e47e1790360a43755fa04101a7ac72287b1a53ce817f35899ba0521"},
+    {file = "mypy-1.12.0-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:48d3e37dd7d9403e38fa86c46191de72705166d40b8c9f91a3de77350daa0893"},
+    {file = "mypy-1.12.0-cp313-cp313-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:2f106db5ccb60681b622ac768455743ee0e6a857724d648c9629a9bd2ac3f721"},
+    {file = "mypy-1.12.0-cp313-cp313-musllinux_1_1_x86_64.whl", hash = "sha256:233e11b3f73ee1f10efada2e6da0f555b2f3a5316e9d8a4a1224acc10e7181d3"},
+    {file = "mypy-1.12.0-cp313-cp313-win_amd64.whl", hash = "sha256:4ae8959c21abcf9d73aa6c74a313c45c0b5a188752bf37dace564e29f06e9c1b"},
+    {file = "mypy-1.12.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:eafc1b7319b40ddabdc3db8d7d48e76cfc65bbeeafaa525a4e0fa6b76175467f"},
+    {file = "mypy-1.12.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:9b9ce1ad8daeb049c0b55fdb753d7414260bad8952645367e70ac91aec90e07e"},
+    {file = "mypy-1.12.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:bfe012b50e1491d439172c43ccb50db66d23fab714d500b57ed52526a1020bb7"},
+    {file = "mypy-1.12.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:2c40658d4fa1ab27cb53d9e2f1066345596af2f8fe4827defc398a09c7c9519b"},
+    {file = "mypy-1.12.0-cp38-cp38-win_amd64.whl", hash = "sha256:dee78a8b9746c30c1e617ccb1307b351ded57f0de0d287ca6276378d770006c0"},
+    {file = "mypy-1.12.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:6b5df6c8a8224f6b86746bda716bbe4dbe0ce89fd67b1fa4661e11bfe38e8ec8"},
+    {file = "mypy-1.12.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:5feee5c74eb9749e91b77f60b30771563327329e29218d95bedbe1257e2fe4b0"},
+    {file = "mypy-1.12.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:77278e8c6ffe2abfba6db4125de55f1024de9a323be13d20e4f73b8ed3402bd1"},
+    {file = "mypy-1.12.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:dcfb754dea911039ac12434d1950d69a2f05acd4d56f7935ed402be09fad145e"},
+    {file = "mypy-1.12.0-cp39-cp39-win_amd64.whl", hash = "sha256:06de0498798527451ffb60f68db0d368bd2bae2bbfb5237eae616d4330cc87aa"},
+    {file = "mypy-1.12.0-py3-none-any.whl", hash = "sha256:fd313226af375d52e1e36c383f39bf3836e1f192801116b31b090dfcd3ec5266"},
+    {file = "mypy-1.12.0.tar.gz", hash = "sha256:65a22d87e757ccd95cbbf6f7e181e6caa87128255eb2b6be901bb71b26d8a99d"},
 ]
 
 [package.dependencies]
@@ -564,19 +548,19 @@ files = [
 
 [[package]]
 name = "platformdirs"
-version = "4.2.2"
+version = "4.3.6"
 description = "A small Python package for determining appropriate platform-specific dirs, e.g. a `user data dir`."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "platformdirs-4.2.2-py3-none-any.whl", hash = "sha256:2d7a1657e36a80ea911db832a8a6ece5ee53d8de21edd5cc5879af6530b1bfee"},
-    {file = "platformdirs-4.2.2.tar.gz", hash = "sha256:38b7b51f512eed9e84a22788b4bce1de17c0adb134d6becb09836e37d8654cd3"},
+    {file = "platformdirs-4.3.6-py3-none-any.whl", hash = "sha256:73e575e1408ab8103900836b97580d5307456908a03e92031bab39e4554cc3fb"},
+    {file = "platformdirs-4.3.6.tar.gz", hash = "sha256:357fb2acbc885b0419afd3ce3ed34564c13c9b95c89360cd9563f73aa5e2b907"},
 ]
 
 [package.extras]
-docs = ["furo (>=2023.9.10)", "proselint (>=0.13)", "sphinx (>=7.2.6)", "sphinx-autodoc-typehints (>=1.25.2)"]
-test = ["appdirs (==1.4.4)", "covdefaults (>=2.3)", "pytest (>=7.4.3)", "pytest-cov (>=4.1)", "pytest-mock (>=3.12)"]
-type = ["mypy (>=1.8)"]
+docs = ["furo (>=2024.8.6)", "proselint (>=0.14)", "sphinx (>=8.0.2)", "sphinx-autodoc-typehints (>=2.4)"]
+test = ["appdirs (==1.4.4)", "covdefaults (>=2.3)", "pytest (>=8.3.2)", "pytest-cov (>=5)", "pytest-mock (>=3.14)"]
+type = ["mypy (>=1.11.2)"]
 
 [[package]]
 name = "pluggy"
@@ -629,13 +613,13 @@ test = ["coveralls", "futures", "mock", "pytest (>=2.7.3)", "pytest-benchmark",
 
 [[package]]
 name = "pytest"
-version = "8.3.2"
+version = "8.3.3"
 description = "pytest: simple powerful testing with Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "pytest-8.3.2-py3-none-any.whl", hash = "sha256:4ba08f9ae7dcf84ded419494d229b48d0903ea6407b030eaec46df5e6a73bba5"},
-    {file = "pytest-8.3.2.tar.gz", hash = "sha256:c132345d12ce551242c87269de812483f5bcc87cdbb4722e48487ba194f9fdce"},
+    {file = "pytest-8.3.3-py3-none-any.whl", hash = "sha256:a6853c7375b2663155079443d2e45de913a911a11d669df02a50814944db57b2"},
+    {file = "pytest-8.3.3.tar.gz", hash = "sha256:70b98107bd648308a7952b06e6ca9a50bc660be218d53c257cc1fc94fda10181"},
 ]
 
 [package.dependencies]
@@ -711,104 +695,105 @@ files = [
 
 [[package]]
 name = "regex"
-version = "2023.12.25"
+version = "2024.9.11"
 description = "Alternative regular expression module, to replace re."
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "regex-2023.12.25-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:0694219a1d54336fd0445ea382d49d36882415c0134ee1e8332afd1529f0baa5"},
-    {file = "regex-2023.12.25-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:b014333bd0217ad3d54c143de9d4b9a3ca1c5a29a6d0d554952ea071cff0f1f8"},
-    {file = "regex-2023.12.25-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:d865984b3f71f6d0af64d0d88f5733521698f6c16f445bb09ce746c92c97c586"},
-    {file = "regex-2023.12.25-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1e0eabac536b4cc7f57a5f3d095bfa557860ab912f25965e08fe1545e2ed8b4c"},
-    {file = "regex-2023.12.25-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:c25a8ad70e716f96e13a637802813f65d8a6760ef48672aa3502f4c24ea8b400"},
-    {file = "regex-2023.12.25-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:a9b6d73353f777630626f403b0652055ebfe8ff142a44ec2cf18ae470395766e"},
-    {file = "regex-2023.12.25-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a9cc99d6946d750eb75827cb53c4371b8b0fe89c733a94b1573c9dd16ea6c9e4"},
-    {file = "regex-2023.12.25-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:88d1f7bef20c721359d8675f7d9f8e414ec5003d8f642fdfd8087777ff7f94b5"},
-    {file = "regex-2023.12.25-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:cb3fe77aec8f1995611f966d0c656fdce398317f850d0e6e7aebdfe61f40e1cd"},
-    {file = "regex-2023.12.25-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:7aa47c2e9ea33a4a2a05f40fcd3ea36d73853a2aae7b4feab6fc85f8bf2c9704"},
-    {file = "regex-2023.12.25-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:df26481f0c7a3f8739fecb3e81bc9da3fcfae34d6c094563b9d4670b047312e1"},
-    {file = "regex-2023.12.25-cp310-cp310-musllinux_1_1_ppc64le.whl", hash = "sha256:c40281f7d70baf6e0db0c2f7472b31609f5bc2748fe7275ea65a0b4601d9b392"},
-    {file = "regex-2023.12.25-cp310-cp310-musllinux_1_1_s390x.whl", hash = "sha256:d94a1db462d5690ebf6ae86d11c5e420042b9898af5dcf278bd97d6bda065423"},
-    {file = "regex-2023.12.25-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:ba1b30765a55acf15dce3f364e4928b80858fa8f979ad41f862358939bdd1f2f"},
-    {file = "regex-2023.12.25-cp310-cp310-win32.whl", hash = "sha256:150c39f5b964e4d7dba46a7962a088fbc91f06e606f023ce57bb347a3b2d4630"},
-    {file = "regex-2023.12.25-cp310-cp310-win_amd64.whl", hash = "sha256:09da66917262d9481c719599116c7dc0c321ffcec4b1f510c4f8a066f8768105"},
-    {file = "regex-2023.12.25-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:1b9d811f72210fa9306aeb88385b8f8bcef0dfbf3873410413c00aa94c56c2b6"},
-    {file = "regex-2023.12.25-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:d902a43085a308cef32c0d3aea962524b725403fd9373dea18110904003bac97"},
-    {file = "regex-2023.12.25-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:d166eafc19f4718df38887b2bbe1467a4f74a9830e8605089ea7a30dd4da8887"},
-    {file = "regex-2023.12.25-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c7ad32824b7f02bb3c9f80306d405a1d9b7bb89362d68b3c5a9be53836caebdb"},
-    {file = "regex-2023.12.25-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:636ba0a77de609d6510235b7f0e77ec494d2657108f777e8765efc060094c98c"},
-    {file = "regex-2023.12.25-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:0fda75704357805eb953a3ee15a2b240694a9a514548cd49b3c5124b4e2ad01b"},
-    {file = "regex-2023.12.25-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f72cbae7f6b01591f90814250e636065850c5926751af02bb48da94dfced7baa"},
-    {file = "regex-2023.12.25-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:db2a0b1857f18b11e3b0e54ddfefc96af46b0896fb678c85f63fb8c37518b3e7"},
-    {file = "regex-2023.12.25-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:7502534e55c7c36c0978c91ba6f61703faf7ce733715ca48f499d3dbbd7657e0"},
-    {file = "regex-2023.12.25-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:e8c7e08bb566de4faaf11984af13f6bcf6a08f327b13631d41d62592681d24fe"},
-    {file = "regex-2023.12.25-cp311-cp311-musllinux_1_1_ppc64le.whl", hash = "sha256:283fc8eed679758de38fe493b7d7d84a198b558942b03f017b1f94dda8efae80"},
-    {file = "regex-2023.12.25-cp311-cp311-musllinux_1_1_s390x.whl", hash = "sha256:f44dd4d68697559d007462b0a3a1d9acd61d97072b71f6d1968daef26bc744bd"},
-    {file = "regex-2023.12.25-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:67d3ccfc590e5e7197750fcb3a2915b416a53e2de847a728cfa60141054123d4"},
-    {file = "regex-2023.12.25-cp311-cp311-win32.whl", hash = "sha256:68191f80a9bad283432385961d9efe09d783bcd36ed35a60fb1ff3f1ec2efe87"},
-    {file = "regex-2023.12.25-cp311-cp311-win_amd64.whl", hash = "sha256:7d2af3f6b8419661a0c421584cfe8aaec1c0e435ce7e47ee2a97e344b98f794f"},
-    {file = "regex-2023.12.25-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:8a0ccf52bb37d1a700375a6b395bff5dd15c50acb745f7db30415bae3c2b0715"},
-    {file = "regex-2023.12.25-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:c3c4a78615b7762740531c27cf46e2f388d8d727d0c0c739e72048beb26c8a9d"},
-    {file = "regex-2023.12.25-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:ad83e7545b4ab69216cef4cc47e344d19622e28aabec61574b20257c65466d6a"},
-    {file = "regex-2023.12.25-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b7a635871143661feccce3979e1727c4e094f2bdfd3ec4b90dfd4f16f571a87a"},
-    {file = "regex-2023.12.25-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:d498eea3f581fbe1b34b59c697512a8baef88212f92e4c7830fcc1499f5b45a5"},
-    {file = "regex-2023.12.25-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:43f7cd5754d02a56ae4ebb91b33461dc67be8e3e0153f593c509e21d219c5060"},
-    {file = "regex-2023.12.25-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:51f4b32f793812714fd5307222a7f77e739b9bc566dc94a18126aba3b92b98a3"},
-    {file = "regex-2023.12.25-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:ba99d8077424501b9616b43a2d208095746fb1284fc5ba490139651f971d39d9"},
-    {file = "regex-2023.12.25-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:4bfc2b16e3ba8850e0e262467275dd4d62f0d045e0e9eda2bc65078c0110a11f"},
-    {file = "regex-2023.12.25-cp312-cp312-musllinux_1_1_i686.whl", hash = "sha256:8c2c19dae8a3eb0ea45a8448356ed561be843b13cbc34b840922ddf565498c1c"},
-    {file = "regex-2023.12.25-cp312-cp312-musllinux_1_1_ppc64le.whl", hash = "sha256:60080bb3d8617d96f0fb7e19796384cc2467447ef1c491694850ebd3670bc457"},
-    {file = "regex-2023.12.25-cp312-cp312-musllinux_1_1_s390x.whl", hash = "sha256:b77e27b79448e34c2c51c09836033056a0547aa360c45eeeb67803da7b0eedaf"},
-    {file = "regex-2023.12.25-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:518440c991f514331f4850a63560321f833979d145d7d81186dbe2f19e27ae3d"},
-    {file = "regex-2023.12.25-cp312-cp312-win32.whl", hash = "sha256:e2610e9406d3b0073636a3a2e80db05a02f0c3169b5632022b4e81c0364bcda5"},
-    {file = "regex-2023.12.25-cp312-cp312-win_amd64.whl", hash = "sha256:cc37b9aeebab425f11f27e5e9e6cf580be7206c6582a64467a14dda211abc232"},
-    {file = "regex-2023.12.25-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:da695d75ac97cb1cd725adac136d25ca687da4536154cdc2815f576e4da11c69"},
-    {file = "regex-2023.12.25-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:d126361607b33c4eb7b36debc173bf25d7805847346dd4d99b5499e1fef52bc7"},
-    {file = "regex-2023.12.25-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:4719bb05094d7d8563a450cf8738d2e1061420f79cfcc1fa7f0a44744c4d8f73"},
-    {file = "regex-2023.12.25-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:5dd58946bce44b53b06d94aa95560d0b243eb2fe64227cba50017a8d8b3cd3e2"},
-    {file = "regex-2023.12.25-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:22a86d9fff2009302c440b9d799ef2fe322416d2d58fc124b926aa89365ec482"},
-    {file = "regex-2023.12.25-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:2aae8101919e8aa05ecfe6322b278f41ce2994c4a430303c4cd163fef746e04f"},
-    {file = "regex-2023.12.25-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:e692296c4cc2873967771345a876bcfc1c547e8dd695c6b89342488b0ea55cd8"},
-    {file = "regex-2023.12.25-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:263ef5cc10979837f243950637fffb06e8daed7f1ac1e39d5910fd29929e489a"},
-    {file = "regex-2023.12.25-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:d6f7e255e5fa94642a0724e35406e6cb7001c09d476ab5fce002f652b36d0c39"},
-    {file = "regex-2023.12.25-cp37-cp37m-musllinux_1_1_ppc64le.whl", hash = "sha256:88ad44e220e22b63b0f8f81f007e8abbb92874d8ced66f32571ef8beb0643b2b"},
-    {file = "regex-2023.12.25-cp37-cp37m-musllinux_1_1_s390x.whl", hash = "sha256:3a17d3ede18f9cedcbe23d2daa8a2cd6f59fe2bf082c567e43083bba3fb00347"},
-    {file = "regex-2023.12.25-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:d15b274f9e15b1a0b7a45d2ac86d1f634d983ca40d6b886721626c47a400bf39"},
-    {file = "regex-2023.12.25-cp37-cp37m-win32.whl", hash = "sha256:ed19b3a05ae0c97dd8f75a5d8f21f7723a8c33bbc555da6bbe1f96c470139d3c"},
-    {file = "regex-2023.12.25-cp37-cp37m-win_amd64.whl", hash = "sha256:a6d1047952c0b8104a1d371f88f4ab62e6275567d4458c1e26e9627ad489b445"},
-    {file = "regex-2023.12.25-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:b43523d7bc2abd757119dbfb38af91b5735eea45537ec6ec3a5ec3f9562a1c53"},
-    {file = "regex-2023.12.25-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:efb2d82f33b2212898f1659fb1c2e9ac30493ac41e4d53123da374c3b5541e64"},
-    {file = "regex-2023.12.25-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:b7fca9205b59c1a3d5031f7e64ed627a1074730a51c2a80e97653e3e9fa0d415"},
-    {file = "regex-2023.12.25-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:086dd15e9435b393ae06f96ab69ab2d333f5d65cbe65ca5a3ef0ec9564dfe770"},
-    {file = "regex-2023.12.25-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:e81469f7d01efed9b53740aedd26085f20d49da65f9c1f41e822a33992cb1590"},
-    {file = "regex-2023.12.25-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:34e4af5b27232f68042aa40a91c3b9bb4da0eeb31b7632e0091afc4310afe6cb"},
-    {file = "regex-2023.12.25-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9852b76ab558e45b20bf1893b59af64a28bd3820b0c2efc80e0a70a4a3ea51c1"},
-    {file = "regex-2023.12.25-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:ff100b203092af77d1a5a7abe085b3506b7eaaf9abf65b73b7d6905b6cb76988"},
-    {file = "regex-2023.12.25-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:cc038b2d8b1470364b1888a98fd22d616fba2b6309c5b5f181ad4483e0017861"},
-    {file = "regex-2023.12.25-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:094ba386bb5c01e54e14434d4caabf6583334090865b23ef58e0424a6286d3dc"},
-    {file = "regex-2023.12.25-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:5cd05d0f57846d8ba4b71d9c00f6f37d6b97d5e5ef8b3c3840426a475c8f70f4"},
-    {file = "regex-2023.12.25-cp38-cp38-musllinux_1_1_ppc64le.whl", hash = "sha256:9aa1a67bbf0f957bbe096375887b2505f5d8ae16bf04488e8b0f334c36e31360"},
-    {file = "regex-2023.12.25-cp38-cp38-musllinux_1_1_s390x.whl", hash = "sha256:98a2636994f943b871786c9e82bfe7883ecdaba2ef5df54e1450fa9869d1f756"},
-    {file = "regex-2023.12.25-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:37f8e93a81fc5e5bd8db7e10e62dc64261bcd88f8d7e6640aaebe9bc180d9ce2"},
-    {file = "regex-2023.12.25-cp38-cp38-win32.whl", hash = "sha256:d78bd484930c1da2b9679290a41cdb25cc127d783768a0369d6b449e72f88beb"},
-    {file = "regex-2023.12.25-cp38-cp38-win_amd64.whl", hash = "sha256:b521dcecebc5b978b447f0f69b5b7f3840eac454862270406a39837ffae4e697"},
-    {file = "regex-2023.12.25-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:f7bc09bc9c29ebead055bcba136a67378f03d66bf359e87d0f7c759d6d4ffa31"},
-    {file = "regex-2023.12.25-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:e14b73607d6231f3cc4622809c196b540a6a44e903bcfad940779c80dffa7be7"},
-    {file = "regex-2023.12.25-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:9eda5f7a50141291beda3edd00abc2d4a5b16c29c92daf8d5bd76934150f3edc"},
-    {file = "regex-2023.12.25-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:cc6bb9aa69aacf0f6032c307da718f61a40cf970849e471254e0e91c56ffca95"},
-    {file = "regex-2023.12.25-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:298dc6354d414bc921581be85695d18912bea163a8b23cac9a2562bbcd5088b1"},
-    {file = "regex-2023.12.25-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:2f4e475a80ecbd15896a976aa0b386c5525d0ed34d5c600b6d3ebac0a67c7ddf"},
-    {file = "regex-2023.12.25-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:531ac6cf22b53e0696f8e1d56ce2396311254eb806111ddd3922c9d937151dae"},
-    {file = "regex-2023.12.25-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:22f3470f7524b6da61e2020672df2f3063676aff444db1daa283c2ea4ed259d6"},
-    {file = "regex-2023.12.25-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:89723d2112697feaa320c9d351e5f5e7b841e83f8b143dba8e2d2b5f04e10923"},
-    {file = "regex-2023.12.25-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:0ecf44ddf9171cd7566ef1768047f6e66975788258b1c6c6ca78098b95cf9a3d"},
-    {file = "regex-2023.12.25-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:905466ad1702ed4acfd67a902af50b8db1feeb9781436372261808df7a2a7bca"},
-    {file = "regex-2023.12.25-cp39-cp39-musllinux_1_1_ppc64le.whl", hash = "sha256:4558410b7a5607a645e9804a3e9dd509af12fb72b9825b13791a37cd417d73a5"},
-    {file = "regex-2023.12.25-cp39-cp39-musllinux_1_1_s390x.whl", hash = "sha256:7e316026cc1095f2a3e8cc012822c99f413b702eaa2ca5408a513609488cb62f"},
-    {file = "regex-2023.12.25-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:3b1de218d5375cd6ac4b5493e0b9f3df2be331e86520f23382f216c137913d20"},
-    {file = "regex-2023.12.25-cp39-cp39-win32.whl", hash = "sha256:11a963f8e25ab5c61348d090bf1b07f1953929c13bd2309a0662e9ff680763c9"},
-    {file = "regex-2023.12.25-cp39-cp39-win_amd64.whl", hash = "sha256:e693e233ac92ba83a87024e1d32b5f9ab15ca55ddd916d878146f4e3406b5c91"},
-    {file = "regex-2023.12.25.tar.gz", hash = "sha256:29171aa128da69afdf4bde412d5bedc335f2ca8fcfe4489038577d05f16181e5"},
+    {file = "regex-2024.9.11-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:1494fa8725c285a81d01dc8c06b55287a1ee5e0e382d8413adc0a9197aac6408"},
+    {file = "regex-2024.9.11-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:0e12c481ad92d129c78f13a2a3662317e46ee7ef96c94fd332e1c29131875b7d"},
+    {file = "regex-2024.9.11-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:16e13a7929791ac1216afde26f712802e3df7bf0360b32e4914dca3ab8baeea5"},
+    {file = "regex-2024.9.11-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:46989629904bad940bbec2106528140a218b4a36bb3042d8406980be1941429c"},
+    {file = "regex-2024.9.11-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:a906ed5e47a0ce5f04b2c981af1c9acf9e8696066900bf03b9d7879a6f679fc8"},
+    {file = "regex-2024.9.11-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:e9a091b0550b3b0207784a7d6d0f1a00d1d1c8a11699c1a4d93db3fbefc3ad35"},
+    {file = "regex-2024.9.11-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5ddcd9a179c0a6fa8add279a4444015acddcd7f232a49071ae57fa6e278f1f71"},
+    {file = "regex-2024.9.11-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:6b41e1adc61fa347662b09398e31ad446afadff932a24807d3ceb955ed865cc8"},
+    {file = "regex-2024.9.11-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:ced479f601cd2f8ca1fd7b23925a7e0ad512a56d6e9476f79b8f381d9d37090a"},
+    {file = "regex-2024.9.11-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:635a1d96665f84b292e401c3d62775851aedc31d4f8784117b3c68c4fcd4118d"},
+    {file = "regex-2024.9.11-cp310-cp310-musllinux_1_2_i686.whl", hash = "sha256:c0256beda696edcf7d97ef16b2a33a8e5a875affd6fa6567b54f7c577b30a137"},
+    {file = "regex-2024.9.11-cp310-cp310-musllinux_1_2_ppc64le.whl", hash = "sha256:3ce4f1185db3fbde8ed8aa223fc9620f276c58de8b0d4f8cc86fd1360829edb6"},
+    {file = "regex-2024.9.11-cp310-cp310-musllinux_1_2_s390x.whl", hash = "sha256:09d77559e80dcc9d24570da3745ab859a9cf91953062e4ab126ba9d5993688ca"},
+    {file = "regex-2024.9.11-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:7a22ccefd4db3f12b526eccb129390942fe874a3a9fdbdd24cf55773a1faab1a"},
+    {file = "regex-2024.9.11-cp310-cp310-win32.whl", hash = "sha256:f745ec09bc1b0bd15cfc73df6fa4f726dcc26bb16c23a03f9e3367d357eeedd0"},
+    {file = "regex-2024.9.11-cp310-cp310-win_amd64.whl", hash = "sha256:01c2acb51f8a7d6494c8c5eafe3d8e06d76563d8a8a4643b37e9b2dd8a2ff623"},
+    {file = "regex-2024.9.11-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:2cce2449e5927a0bf084d346da6cd5eb016b2beca10d0013ab50e3c226ffc0df"},
+    {file = "regex-2024.9.11-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:3b37fa423beefa44919e009745ccbf353d8c981516e807995b2bd11c2c77d268"},
+    {file = "regex-2024.9.11-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:64ce2799bd75039b480cc0360907c4fb2f50022f030bf9e7a8705b636e408fad"},
+    {file = "regex-2024.9.11-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a4cc92bb6db56ab0c1cbd17294e14f5e9224f0cc6521167ef388332604e92679"},
+    {file = "regex-2024.9.11-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:d05ac6fa06959c4172eccd99a222e1fbf17b5670c4d596cb1e5cde99600674c4"},
+    {file = "regex-2024.9.11-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:040562757795eeea356394a7fb13076ad4f99d3c62ab0f8bdfb21f99a1f85664"},
+    {file = "regex-2024.9.11-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6113c008a7780792efc80f9dfe10ba0cd043cbf8dc9a76ef757850f51b4edc50"},
+    {file = "regex-2024.9.11-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:8e5fb5f77c8745a60105403a774fe2c1759b71d3e7b4ca237a5e67ad066c7199"},
+    {file = "regex-2024.9.11-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:54d9ff35d4515debf14bc27f1e3b38bfc453eff3220f5bce159642fa762fe5d4"},
+    {file = "regex-2024.9.11-cp311-cp311-musllinux_1_2_i686.whl", hash = "sha256:df5cbb1fbc74a8305b6065d4ade43b993be03dbe0f8b30032cced0d7740994bd"},
+    {file = "regex-2024.9.11-cp311-cp311-musllinux_1_2_ppc64le.whl", hash = "sha256:7fb89ee5d106e4a7a51bce305ac4efb981536301895f7bdcf93ec92ae0d91c7f"},
+    {file = "regex-2024.9.11-cp311-cp311-musllinux_1_2_s390x.whl", hash = "sha256:a738b937d512b30bf75995c0159c0ddf9eec0775c9d72ac0202076c72f24aa96"},
+    {file = "regex-2024.9.11-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:e28f9faeb14b6f23ac55bfbbfd3643f5c7c18ede093977f1df249f73fd22c7b1"},
+    {file = "regex-2024.9.11-cp311-cp311-win32.whl", hash = "sha256:18e707ce6c92d7282dfce370cd205098384b8ee21544e7cb29b8aab955b66fa9"},
+    {file = "regex-2024.9.11-cp311-cp311-win_amd64.whl", hash = "sha256:313ea15e5ff2a8cbbad96ccef6be638393041b0a7863183c2d31e0c6116688cf"},
+    {file = "regex-2024.9.11-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:b0d0a6c64fcc4ef9c69bd5b3b3626cc3776520a1637d8abaa62b9edc147a58f7"},
+    {file = "regex-2024.9.11-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:49b0e06786ea663f933f3710a51e9385ce0cba0ea56b67107fd841a55d56a231"},
+    {file = "regex-2024.9.11-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:5b513b6997a0b2f10e4fd3a1313568e373926e8c252bd76c960f96fd039cd28d"},
+    {file = "regex-2024.9.11-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ee439691d8c23e76f9802c42a95cfeebf9d47cf4ffd06f18489122dbb0a7ad64"},
+    {file = "regex-2024.9.11-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:a8f877c89719d759e52783f7fe6e1c67121076b87b40542966c02de5503ace42"},
+    {file = "regex-2024.9.11-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:23b30c62d0f16827f2ae9f2bb87619bc4fba2044911e2e6c2eb1af0161cdb766"},
+    {file = "regex-2024.9.11-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:85ab7824093d8f10d44330fe1e6493f756f252d145323dd17ab6b48733ff6c0a"},
+    {file = "regex-2024.9.11-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:8dee5b4810a89447151999428fe096977346cf2f29f4d5e29609d2e19e0199c9"},
+    {file = "regex-2024.9.11-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:98eeee2f2e63edae2181c886d7911ce502e1292794f4c5ee71e60e23e8d26b5d"},
+    {file = "regex-2024.9.11-cp312-cp312-musllinux_1_2_i686.whl", hash = "sha256:57fdd2e0b2694ce6fc2e5ccf189789c3e2962916fb38779d3e3521ff8fe7a822"},
+    {file = "regex-2024.9.11-cp312-cp312-musllinux_1_2_ppc64le.whl", hash = "sha256:d552c78411f60b1fdaafd117a1fca2f02e562e309223b9d44b7de8be451ec5e0"},
+    {file = "regex-2024.9.11-cp312-cp312-musllinux_1_2_s390x.whl", hash = "sha256:a0b2b80321c2ed3fcf0385ec9e51a12253c50f146fddb2abbb10f033fe3d049a"},
+    {file = "regex-2024.9.11-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:18406efb2f5a0e57e3a5881cd9354c1512d3bb4f5c45d96d110a66114d84d23a"},
+    {file = "regex-2024.9.11-cp312-cp312-win32.whl", hash = "sha256:e464b467f1588e2c42d26814231edecbcfe77f5ac414d92cbf4e7b55b2c2a776"},
+    {file = "regex-2024.9.11-cp312-cp312-win_amd64.whl", hash = "sha256:9e8719792ca63c6b8340380352c24dcb8cd7ec49dae36e963742a275dfae6009"},
+    {file = "regex-2024.9.11-cp313-cp313-macosx_10_13_universal2.whl", hash = "sha256:c157bb447303070f256e084668b702073db99bbb61d44f85d811025fcf38f784"},
+    {file = "regex-2024.9.11-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:4db21ece84dfeefc5d8a3863f101995de646c6cb0536952c321a2650aa202c36"},
+    {file = "regex-2024.9.11-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:220e92a30b426daf23bb67a7962900ed4613589bab80382be09b48896d211e92"},
+    {file = "regex-2024.9.11-cp313-cp313-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:eb1ae19e64c14c7ec1995f40bd932448713d3c73509e82d8cd7744dc00e29e86"},
+    {file = "regex-2024.9.11-cp313-cp313-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f47cd43a5bfa48f86925fe26fbdd0a488ff15b62468abb5d2a1e092a4fb10e85"},
+    {file = "regex-2024.9.11-cp313-cp313-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:9d4a76b96f398697fe01117093613166e6aa8195d63f1b4ec3f21ab637632963"},
+    {file = "regex-2024.9.11-cp313-cp313-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0ea51dcc0835eea2ea31d66456210a4e01a076d820e9039b04ae8d17ac11dee6"},
+    {file = "regex-2024.9.11-cp313-cp313-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b7aaa315101c6567a9a45d2839322c51c8d6e81f67683d529512f5bcfb99c802"},
+    {file = "regex-2024.9.11-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:c57d08ad67aba97af57a7263c2d9006d5c404d721c5f7542f077f109ec2a4a29"},
+    {file = "regex-2024.9.11-cp313-cp313-musllinux_1_2_i686.whl", hash = "sha256:f8404bf61298bb6f8224bb9176c1424548ee1181130818fcd2cbffddc768bed8"},
+    {file = "regex-2024.9.11-cp313-cp313-musllinux_1_2_ppc64le.whl", hash = "sha256:dd4490a33eb909ef5078ab20f5f000087afa2a4daa27b4c072ccb3cb3050ad84"},
+    {file = "regex-2024.9.11-cp313-cp313-musllinux_1_2_s390x.whl", hash = "sha256:eee9130eaad130649fd73e5cd92f60e55708952260ede70da64de420cdcad554"},
+    {file = "regex-2024.9.11-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:6a2644a93da36c784e546de579ec1806bfd2763ef47babc1b03d765fe560c9f8"},
+    {file = "regex-2024.9.11-cp313-cp313-win32.whl", hash = "sha256:e997fd30430c57138adc06bba4c7c2968fb13d101e57dd5bb9355bf8ce3fa7e8"},
+    {file = "regex-2024.9.11-cp313-cp313-win_amd64.whl", hash = "sha256:042c55879cfeb21a8adacc84ea347721d3d83a159da6acdf1116859e2427c43f"},
+    {file = "regex-2024.9.11-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:35f4a6f96aa6cb3f2f7247027b07b15a374f0d5b912c0001418d1d55024d5cb4"},
+    {file = "regex-2024.9.11-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:55b96e7ce3a69a8449a66984c268062fbaa0d8ae437b285428e12797baefce7e"},
+    {file = "regex-2024.9.11-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:cb130fccd1a37ed894824b8c046321540263013da72745d755f2d35114b81a60"},
+    {file = "regex-2024.9.11-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:323c1f04be6b2968944d730e5c2091c8c89767903ecaa135203eec4565ed2b2b"},
+    {file = "regex-2024.9.11-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:be1c8ed48c4c4065ecb19d882a0ce1afe0745dfad8ce48c49586b90a55f02366"},
+    {file = "regex-2024.9.11-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:b5b029322e6e7b94fff16cd120ab35a253236a5f99a79fb04fda7ae71ca20ae8"},
+    {file = "regex-2024.9.11-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f6fff13ef6b5f29221d6904aa816c34701462956aa72a77f1f151a8ec4f56aeb"},
+    {file = "regex-2024.9.11-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:587d4af3979376652010e400accc30404e6c16b7df574048ab1f581af82065e4"},
+    {file = "regex-2024.9.11-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:079400a8269544b955ffa9e31f186f01d96829110a3bf79dc338e9910f794fca"},
+    {file = "regex-2024.9.11-cp38-cp38-musllinux_1_2_aarch64.whl", hash = "sha256:f9268774428ec173654985ce55fc6caf4c6d11ade0f6f914d48ef4719eb05ebb"},
+    {file = "regex-2024.9.11-cp38-cp38-musllinux_1_2_i686.whl", hash = "sha256:23f9985c8784e544d53fc2930fc1ac1a7319f5d5332d228437acc9f418f2f168"},
+    {file = "regex-2024.9.11-cp38-cp38-musllinux_1_2_ppc64le.whl", hash = "sha256:ae2941333154baff9838e88aa71c1d84f4438189ecc6021a12c7573728b5838e"},
+    {file = "regex-2024.9.11-cp38-cp38-musllinux_1_2_s390x.whl", hash = "sha256:e93f1c331ca8e86fe877a48ad64e77882c0c4da0097f2212873a69bbfea95d0c"},
+    {file = "regex-2024.9.11-cp38-cp38-musllinux_1_2_x86_64.whl", hash = "sha256:846bc79ee753acf93aef4184c040d709940c9d001029ceb7b7a52747b80ed2dd"},
+    {file = "regex-2024.9.11-cp38-cp38-win32.whl", hash = "sha256:c94bb0a9f1db10a1d16c00880bdebd5f9faf267273b8f5bd1878126e0fbde771"},
+    {file = "regex-2024.9.11-cp38-cp38-win_amd64.whl", hash = "sha256:2b08fce89fbd45664d3df6ad93e554b6c16933ffa9d55cb7e01182baaf971508"},
+    {file = "regex-2024.9.11-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:07f45f287469039ffc2c53caf6803cd506eb5f5f637f1d4acb37a738f71dd066"},
+    {file = "regex-2024.9.11-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:4838e24ee015101d9f901988001038f7f0d90dc0c3b115541a1365fb439add62"},
+    {file = "regex-2024.9.11-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:6edd623bae6a737f10ce853ea076f56f507fd7726bee96a41ee3d68d347e4d16"},
+    {file = "regex-2024.9.11-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c69ada171c2d0e97a4b5aa78fbb835e0ffbb6b13fc5da968c09811346564f0d3"},
+    {file = "regex-2024.9.11-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:02087ea0a03b4af1ed6ebab2c54d7118127fee8d71b26398e8e4b05b78963199"},
+    {file = "regex-2024.9.11-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:69dee6a020693d12a3cf892aba4808fe168d2a4cef368eb9bf74f5398bfd4ee8"},
+    {file = "regex-2024.9.11-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:297f54910247508e6e5cae669f2bc308985c60540a4edd1c77203ef19bfa63ca"},
+    {file = "regex-2024.9.11-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:ecea58b43a67b1b79805f1a0255730edaf5191ecef84dbc4cc85eb30bc8b63b9"},
+    {file = "regex-2024.9.11-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:eab4bb380f15e189d1313195b062a6aa908f5bd687a0ceccd47c8211e9cf0d4a"},
+    {file = "regex-2024.9.11-cp39-cp39-musllinux_1_2_aarch64.whl", hash = "sha256:0cbff728659ce4bbf4c30b2a1be040faafaa9eca6ecde40aaff86f7889f4ab39"},
+    {file = "regex-2024.9.11-cp39-cp39-musllinux_1_2_i686.whl", hash = "sha256:54c4a097b8bc5bb0dfc83ae498061d53ad7b5762e00f4adaa23bee22b012e6ba"},
+    {file = "regex-2024.9.11-cp39-cp39-musllinux_1_2_ppc64le.whl", hash = "sha256:73d6d2f64f4d894c96626a75578b0bf7d9e56dcda8c3d037a2118fdfe9b1c664"},
+    {file = "regex-2024.9.11-cp39-cp39-musllinux_1_2_s390x.whl", hash = "sha256:e53b5fbab5d675aec9f0c501274c467c0f9a5d23696cfc94247e1fb56501ed89"},
+    {file = "regex-2024.9.11-cp39-cp39-musllinux_1_2_x86_64.whl", hash = "sha256:0ffbcf9221e04502fc35e54d1ce9567541979c3fdfb93d2c554f0ca583a19b35"},
+    {file = "regex-2024.9.11-cp39-cp39-win32.whl", hash = "sha256:e4c22e1ac1f1ec1e09f72e6c44d8f2244173db7eb9629cc3a346a8d7ccc31142"},
+    {file = "regex-2024.9.11-cp39-cp39-win_amd64.whl", hash = "sha256:faa3c142464efec496967359ca99696c896c591c56c53506bac1ad465f66e919"},
+    {file = "regex-2024.9.11.tar.gz", hash = "sha256:6c188c307e8433bcb63dc1915022deb553b4203a70722fc542c363bf120a01fd"},
 ]
 
 [[package]]
@@ -822,17 +807,6 @@ files = [
     {file = "six-1.16.0.tar.gz", hash = "sha256:1e61c37477a1626458e36f7b1d82aa5c9b094fa4802892072e49de9c60c4c926"},
 ]
 
-[[package]]
-name = "soupsieve"
-version = "2.6"
-description = "A modern CSS selector implementation for Beautiful Soup."
-optional = false
-python-versions = ">=3.8"
-files = [
-    {file = "soupsieve-2.6-py3-none-any.whl", hash = "sha256:e72c4ff06e4fb6e4b5a9f0f55fe6e81514581fca1515028625d0f299c602ccc9"},
-    {file = "soupsieve-2.6.tar.gz", hash = "sha256:e2e68417777af359ec65daac1057404a3c8a5455bb8abc36f1a9866ab1a51abb"},
-]
-
 [[package]]
 name = "sqlparse"
 version = "0.5.1"
@@ -892,24 +866,24 @@ files = [
 
 [[package]]
 name = "tzdata"
-version = "2024.1"
+version = "2024.2"
 description = "Provider of IANA time zone data"
 optional = false
 python-versions = ">=2"
 files = [
-    {file = "tzdata-2024.1-py2.py3-none-any.whl", hash = "sha256:9068bc196136463f5245e51efda838afa15aaeca9903f49050dfa2679db4d252"},
-    {file = "tzdata-2024.1.tar.gz", hash = "sha256:2674120f8d891909751c38abcdfd386ac0a5a1127954fbc332af6b5ceae07efd"},
+    {file = "tzdata-2024.2-py2.py3-none-any.whl", hash = "sha256:a48093786cdcde33cad18c2555e8532f34422074448fbc874186f0abd79565cd"},
+    {file = "tzdata-2024.2.tar.gz", hash = "sha256:7d85cc416e9382e69095b7bdf4afd9e3880418a2413feec7069d533d6b4e31cc"},
 ]
 
 [[package]]
 name = "uvicorn"
-version = "0.30.5"
+version = "0.30.6"
 description = "The lightning-fast ASGI server."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "uvicorn-0.30.5-py3-none-any.whl", hash = "sha256:b2d86de274726e9878188fa07576c9ceeff90a839e2b6e25c917fe05f5a6c835"},
-    {file = "uvicorn-0.30.5.tar.gz", hash = "sha256:ac6fdbd4425c5fd17a9fe39daf4d4d075da6fdc80f653e5894cdc2fd98752bee"},
+    {file = "uvicorn-0.30.6-py3-none-any.whl", hash = "sha256:65fd46fe3fda5bdc1b03b94eb634923ff18cd35b2f084813ea79d1f103f711b5"},
+    {file = "uvicorn-0.30.6.tar.gz", hash = "sha256:4b15decdda1e72be08209e860a1e10e92439ad5b97cf44cc945fcbee66fc5788"},
 ]
 
 [package.dependencies]
@@ -921,13 +895,13 @@ standard = ["colorama (>=0.4)", "httptools (>=0.5.0)", "python-dotenv (>=0.13)",
 
 [[package]]
 name = "virtualenv"
-version = "20.26.3"
+version = "20.26.6"
 description = "Virtual Python Environment builder"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "virtualenv-20.26.3-py3-none-any.whl", hash = "sha256:8cc4a31139e796e9a7de2cd5cf2489de1217193116a8fd42328f1bd65f434589"},
-    {file = "virtualenv-20.26.3.tar.gz", hash = "sha256:4c43a2a236279d9ea36a0d76f98d84bd6ca94ac4e0f4a3b9d46d05e10fea542a"},
+    {file = "virtualenv-20.26.6-py3-none-any.whl", hash = "sha256:7345cc5b25405607a624d8418154577459c3e0277f5466dd79c49d5e492995f2"},
+    {file = "virtualenv-20.26.6.tar.gz", hash = "sha256:280aede09a2a5c317e409a00102e7077c6432c5a38f0ef938e643805a7ad2c48"},
 ]
 
 [package.dependencies]
@@ -942,4 +916,4 @@ test = ["covdefaults (>=2.3)", "coverage (>=7.2.7)", "coverage-enable-subprocess
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.11"
-content-hash = "f96f55c381f25a4a473be8d53ef83d13c70bb7c731b5132f4ece2af1b3d3afed"
+content-hash = "6c41593dd2d568081c098fd60a76d4afa5950c94b47f009ad3070296c3dd98e3"

pyproject.toml

@@ -24,13 +24,12 @@ python = "^3.11"
 django = "^5.0.6"
 gunicorn = "^22.0.0"
 uvicorn = "^0.30.1"
-graphene-django = "^3.2.2"
+graphene-django = "^3.2.0"
 django-htmx = "^1.18.0"
 django-template-partials = "^24.2"
 markdown = "^3.6"
+django-cotton = "^1.2.1"
 
-
-django-cotton = "^0.9.34"
 [tool.isort]
 profile = "black"
 

streak_bruteforce.py

@@ -0,0 +1,27 @@
+import os
+import time
+
+import django
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "timetracker.settings")
+django.setup()
+
+from common.time import streak_bruteforce
+from games.models import Session
+
+all = Session.objects.filter(timestamp_start__gt="1970-01-01")
+
+data = []
+
+for session in all:
+    current = session.timestamp_start
+    data.append(current.date())
+
+start = time.time_ns()
+start_cpu = time.process_time_ns()
+print(streak_bruteforce(data))
+end = time.time_ns()
+end_cpu = time.process_time_ns()
+print(
+    f"Processed {all.count()} items in {((end - start)/ 1_000_000_000):.10f} seconds and {((end_cpu - start_cpu)/ 1_000_000_000):.10f} seconds of process time."
+)

tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors');
 
 module.exports = {
   darkMode: 'class',
@@ -10,6 +11,10 @@ module.exports = {
         'mono': ['IBM Plex Mono', ...defaultTheme.fontFamily.mono],
         'serif': ['IBM Plex Serif', ...defaultTheme.fontFamily.serif],
         'condensed': ['IBM Plex Sans Condensed', ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        'accent': colors.violet[600],
+        'background': colors.gray[800],
       }
     },
   },

tests/test_streak.py

@@ -0,0 +1,60 @@
+import unittest
+from datetime import date
+
+from common.time import daterange, streak_bruteforce
+
+
+class StreakTest(unittest.TestCase):
+    streak = streak_bruteforce
+
+    def test_daterange_exclusive(self):
+        d = daterange(date(2024, 8, 1), date(2024, 8, 3))
+        self.assertEqual(
+            d,
+            [date(2024, 8, 1), date(2024, 8, 2)],
+        )
+
+    def test_daterange_inclusive(self):
+        d = daterange(date(2024, 8, 1), date(2024, 8, 3), end_inclusive=True)
+        self.assertEqual(
+            d,
+            [date(2024, 8, 1), date(2024, 8, 2), date(2024, 8, 3)],
+        )
+
+    def test_1day_streak(self):
+        self.assertEqual(streak([date(2024, 8, 1)])["days"], 1)
+
+    def test_2day_streak(self):
+        self.assertEqual(streak([date(2024, 8, 1), date(2024, 8, 2)])["days"], 2)
+
+    def test_31day_streak(self):
+        self.assertEqual(
+            streak(daterange(date(2024, 8, 1), date(2024, 8, 31), end_inclusive=True))[
+                "days"
+            ],
+            31,
+        )
+
+    def test_5day_streak_in_10_days(self):
+        d = daterange(
+            date(2024, 8, 1), date(2024, 8, 5), end_inclusive=True
+        ) + daterange(date(2024, 8, 7), date(2024, 8, 10), end_inclusive=True)
+        self.assertEqual(streak(d)["days"], 5)
+
+    def test_10day_streak_in_31_days(self):
+        d = daterange(date(2024, 8, 1), date(2024, 8, 31), end_inclusive=True)
+        d.remove(date(2024, 8, 8))
+        d.remove(date(2024, 8, 15))
+        d.remove(date(2024, 8, 21))
+        self.assertEqual(streak(d)["days"], 10)
+
+    def test_10day_streak_in_31_days_with_consecutive_missing(self):
+        d = daterange(date(2024, 8, 1), date(2024, 8, 31), end_inclusive=True)
+        d.remove(date(2024, 8, 4))
+        d.remove(date(2024, 8, 5))
+        d.remove(date(2024, 8, 6))
+        d.remove(date(2024, 8, 7))
+        d.remove(date(2024, 8, 8))
+        d.remove(date(2024, 8, 15))
+        d.remove(date(2024, 8, 21))
+        self.assertEqual(streak(d)["days"], 10)

timetracker/settings.py

@@ -84,6 +84,7 @@ TEMPLATES = [
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
                 "games.views.general.model_counts",
+                "games.views.general.global_current_year",
             ],
             "builtins": [
                 "template_partials.templatetags.partials",