add-new-setting-field

Skill zawiera obowiązkową procedurę dla deweloperów KonomiTV, którzy chcą dodać nowe pola ustawień (takie jak v-switch czy v-select) do aplikacji. Opisuje dokładny przepływ pracy obejmujący cztery kluczowe pliki: SettingsStore.ts na frontendzie, Settings.ts, config.py na backendzie oraz komponenty Vue w katalogu Settings. Procedura uwzględnia rozróżnienie między ustawieniami synchronizowanymi z serwerem a lokalnymi, wymaga konsekwentnego porządku pól we wszystkich plikach oraz jasnych nazw kluczy opisujących rzeczywiste przeznaczenie ustawienia.

1. Zanim zaczniesz dodawać pole, określ, czy nowe ustawienie będzie synchronizowane z serwerem, czy pozostanie tylko lokalne w przeglądarce — ta decyzja wpłynie na strukturę kodu w każdym z czterech plików.
2. W pliku client/src/stores/SettingsStore.ts dodaj pole do interfejsu ILocalClientSettings (zawierającego wszystkie ustawienia lokalne), ustaw jego wartość domyślną w ILocalClientSettingsDefault wraz z komentarzem opisującym ustawienie, a następnie — jeśli synchronizacja jest wymagana — dodaj klucz do tablicy SYNCABLE_SETTINGS_KEYS.
3. W pliku client/src/services/Settings.ts dodaj pole do interfejsu IClientSettings, jeśli ustawienie jest synchronizowane; jeśli nie, pozostaw komentarz w tym samym miejscu dla przejrzystości.
4. W pliku server/app/config.py dodaj pole do modelu Pydantic ClientSettings (jeśli synchronizacja jest wymagana), zawsze używając wartości domyślnej z SettingsStore, oraz pozostaw komentarz dla pól niesynchronizowanych.
5. W odpowiednim pliku .vue w katalogu client/src/views/Settings/ dodaj interfejs użytkownika dla nowego ustawienia — wybierz właściwe miejsce w hierarchii stron ustawień, dodaj jasny opis w HTML-u i dostosuj props komponentu (v-switch, v-select itp.) do otaczającego kodu.
6. Upewnij się, że kolejność pól jest identyczna we wszystkich czterech plikach, a nazwy kluczy są wystarczająco opisowe, aby każdy deweloper mógł zrozumieć przeznaczenie ustawienia na pierwszy rzut oka.