valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use writable \$derived for search inputs, remove unnecessary \$state wrap

Browse Source 
- Replace \$state + \$effect pattern with writable \$derived (Svelte 5.25+)
  for all searchValue instances across list pages — cleaner and lint-compliant
- Remove now-unused untrack imports from those files
- Drop \$state() wrapper around SvelteMap in device-mapping-dialog
  (SvelteMap is already reactive)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-08 11:46:15 +01:00
parent 422f97417e
commit 446e9f835b
9 changed files with 9 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/routes/admin/articles/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { goto, invalidateAll } from "$app/navigation"; import { goto, invalidateAll } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
import { SvelteURLSearchParams } from "svelte/reactivity"; import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -21,8 +20,7 @@
let deleteTarget: Article | null = $state(null); let deleteTarget: Article | null = $state(null);
let deleteOpen = $state(false); let deleteOpen = $state(false);
let deleting = $state(false); let deleting = $state(false);
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => { searchValue = data.search ?? ""; });
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
function debounceSearch(value: string) { function debounceSearch(value: string) {

4
packages/frontend/src/routes/admin/comments/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { goto, invalidateAll } from "$app/navigation"; import { goto, invalidateAll } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
import { SvelteURLSearchParams } from "svelte/reactivity"; import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -18,8 +17,7 @@
let deleteTarget: { id: number; comment: string } | null = $state(null); let deleteTarget: { id: number; comment: string } | null = $state(null);
let deleteOpen = $state(false); let deleteOpen = $state(false);
let deleting = $state(false); let deleting = $state(false);
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => { searchValue = data.search ?? ""; });
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
function debounceSearch(value: string) { function debounceSearch(value: string) {

4
packages/frontend/src/routes/admin/recordings/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { goto, invalidateAll } from "$app/navigation"; import { goto, invalidateAll } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
import { SvelteURLSearchParams } from "svelte/reactivity"; import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -19,8 +18,7 @@
let deleteTarget: Recording | null = $state(null); let deleteTarget: Recording | null = $state(null);
let deleteOpen = $state(false); let deleteOpen = $state(false);
let deleting = $state(false); let deleting = $state(false);
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => { searchValue = data.search ?? ""; });
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
function debounceSearch(value: string) { function debounceSearch(value: string) {

4
packages/frontend/src/routes/admin/users/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { goto, invalidateAll } from "$app/navigation"; import { goto, invalidateAll } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
import { SvelteURLSearchParams } from "svelte/reactivity"; import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -16,8 +15,7 @@
const { data } = $props(); const { data } = $props();
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => { searchValue = data.search ?? ""; });
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
let deleteTarget: User | null = $state(null); let deleteTarget: User | null = $state(null);
let deleteOpen = $state(false); let deleteOpen = $state(false);

4
packages/frontend/src/routes/admin/videos/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { goto, invalidateAll } from "$app/navigation"; import { goto, invalidateAll } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
import { SvelteURLSearchParams } from "svelte/reactivity"; import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -18,8 +17,7 @@
let deleteTarget: Video | null = $state(null); let deleteTarget: Video | null = $state(null);
let deleteOpen = $state(false); let deleteOpen = $state(false);
let deleting = $state(false); let deleting = $state(false);
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => { searchValue = data.search ?? ""; });
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
function debounceSearch(value: string) { function debounceSearch(value: string) {

4
packages/frontend/src/routes/magazine/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
@@ -18,8 +17,7 @@
const timeAgo = new TimeAgo("en"); const timeAgo = new TimeAgo("en");
const { data } = $props(); const { data } = $props();
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => { searchValue = data.search ?? ""; });
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
const featuredArticle = $derived( const featuredArticle = $derived(

4
packages/frontend/src/routes/models/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
@@ -15,8 +14,7 @@
const { data } = $props(); const { data } = $props();
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => { searchValue = data.search ?? ""; });
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
function debounceSearch(value: string) { function debounceSearch(value: string) {

2
packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
View File

@@ -16,7 +16,7 @@
let { open, recordedDevices, connectedDevices, onConfirm, onCancel }: Props = $props(); let { open, recordedDevices, connectedDevices, onConfirm, onCancel }: Props = $props();
// Device mappings: recorded device name -> connected device // Device mappings: recorded device name -> connected device
let mappings = $state(new SvelteMap<string, BluetoothDevice>()); let mappings = new SvelteMap<string, BluetoothDevice>();
// Check if a connected device is compatible with a recorded device // Check if a connected device is compatible with a recorded device
function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean { function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {

6
packages/frontend/src/routes/videos/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { untrack } from "svelte";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { page } from "$app/state"; import { page } from "$app/state";
@@ -18,10 +17,7 @@
const timeAgo = new TimeAgo("en"); const timeAgo = new TimeAgo("en");
const { data } = $props(); const { data } = $props();
let searchValue = $state(untrack(() => data.search ?? "")); let searchValue = $derived(data.search ?? "");
$effect(() => {
searchValue = data.search ?? "";
});
let searchTimeout: ReturnType<typeof setTimeout>; let searchTimeout: ReturnType<typeof setTimeout>;
function debounceSearch(value: string) { function debounceSearch(value: string) {