From 04601ca13df5e6f0d0bed36c54e5a2afa8a05915 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= <lukas@kucharczyk.xyz>
Date: Thu, 15 Jan 2026 23:12:54 +0100
Subject: [PATCH] Replace game selector on game view with component

---
 games/templates/view_game.html | 56 +---------------------------------
 1 file changed, 1 insertion(+), 55 deletions(-)

diff --git a/games/templates/view_game.html b/games/templates/view_game.html
index 91f38fc..4274152 100644
--- a/games/templates/view_game.html
+++ b/games/templates/view_game.html
@@ -58,63 +58,9 @@
                     <span class="text-slate-300">{{ game.original_year_released }}</span>
                 </div>
                 <div class="flex gap-2 items-center"
-                     id="game-status-selector"
-                     x-data="{
-                         status: '{{ game.status }}',
-                         status_display: '{{ game.get_status_display }}',
-                         open: false,
-                         saving: false,
-                         setStatus(newStatus, newStatusDisplay) {
-                             this.status = newStatus;
-                             this.status_display = newStatusDisplay;
-                             this.saving = true;
-                             fetch(`/api/games/{{ game.id }}/status`, {
-                                 method: 'PATCH',
-                                 headers: {
-                                     'Content-Type': 'application/json',
-                                     'X-CSRFToken': '{{ csrf_token }}'
-                                 },
-                                 body: JSON.stringify({ status: newStatus })
-                             }).then(() => {
-                                 document.body.dispatchEvent(new CustomEvent('status-changed'));
-                             })
-                             .finally(() => this.saving = false);
-                         }
-                     }"
                 >
                     <span class="uppercase">Status</span>
-
-                    <div class="inline-flex rounded-md shadow-xs" role="group" @click.outside="open = false">
-                        <button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
-                            <span class="flex flex-row gap-4 justify-between items-center">
-                                {% for status_value, status_label in game_statuses %}
-                                    <template x-if="status == '{{ status_value }}'">
-                                        <c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus>
-                                    </template>
-                                {% endfor %}
-                                <svg class="text-white w-3" viewBox="5 8 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                                </svg>
-                            </span>
-                            <div
-                                class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700"
-                                x-show="open"
-                            >
-                                <ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
-                                    {% for status_value, status_label in game_statuses %}
-                                        <li>
-                                            <a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;"
-                                               class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded"
-                                               :class="{ 'font-bold': status === '{{ status_value }}' }">
-                                                <c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus>
-                                            </a>
-                                        </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </button>
-                    </div>
-                    <div x-show="saving" style="display: none;">Saving...</div>
+                    {% include "partials/gamestatus_selector.html" %}
                     {% if game.mastered %}👑{% endif %}
                 </div>
                 <div class="flex gap-2 items-center"