From d1c9c88ab5b22ce5fb256520cd8dc731ef13030a Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Mon, 9 Mar 2026 21:49:53 +0100
Subject: [PATCH] refactor: replace sort selector with hybrid sort order

Remove the sort mode selector UI. Notes now sort by custom order
first (drag to reorder), falling back to most-recently-updated for
ties. Drag handles are always available.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/NotesView.svelte    | 19 +++++------------
 src/lib/components/SortSelector.svelte | 29 --------------------------
 src/lib/stores/notes.ts                | 20 +++++++-----------
 src/lib/stores/sort.ts                 | 24 ---------------------
 4 files changed, 12 insertions(+), 80 deletions(-)
 delete mode 100644 src/lib/components/SortSelector.svelte
 delete mode 100644 src/lib/stores/sort.ts

diff --git a/src/lib/components/NotesView.svelte b/src/lib/components/NotesView.svelte
index c2fb90c..76b5b89 100644
--- a/src/lib/components/NotesView.svelte
+++ b/src/lib/components/NotesView.svelte
@@ -2,9 +2,7 @@
 	import NoteGrid from '$lib/components/NoteGrid.svelte';
 	import NoteEditor from '$lib/components/NoteEditor.svelte';
 	import TagFilter from '$lib/components/TagFilter.svelte';
-	import SortSelector from '$lib/components/SortSelector.svelte';
 	import { pinnedNotes, unpinnedNotes, selectedTag, currentFilter, notes, notesLoaded, loadNotes, updateSortOrders } from '$lib/stores/notes.js';
-	import { sortMode } from '$lib/stores/sort.js';
 	import { onMount } from 'svelte';
 	import type { Note, NoteFilter } from '$lib/types/index.js';
 	import Plus from 'lucide-svelte/icons/plus';
@@ -76,16 +74,9 @@
 	</button>
 {/if}
 
-{#if filter === 'all'}
-	<div class="mb-4 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-		<TagFilter />
-		<SortSelector />
-	</div>
-{:else}
-	<div class="mb-4">
-		<TagFilter />
-	</div>
-{/if}
+<div class="mb-4">
+	<TagFilter />
+</div>
 
 {#if filter === 'archived'}
 	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">Archive</h2>
@@ -97,7 +88,7 @@
 
 {#if $pinnedNotes.length > 0}
 	<div class="mb-6">
-		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable={$sortMode === 'custom'} dndType="pinned-notes" onReorder={handleReorder} />
+		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable dndType="pinned-notes" onReorder={handleReorder} />
 	</div>
 {/if}
 
@@ -105,7 +96,7 @@
 	notes={$unpinnedNotes}
 	label={$pinnedNotes.length > 0 ? 'Others' : ''}
 	onEdit={openEditor}
-	draggable={$sortMode === 'custom'}
+	draggable
 	dndType="unpinned-notes"
 	onReorder={handleReorder}
 />
diff --git a/src/lib/components/SortSelector.svelte b/src/lib/components/SortSelector.svelte
deleted file mode 100644
index 94c3433..0000000
--- a/src/lib/components/SortSelector.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import Clock from 'lucide-svelte/icons/clock';
-	import CalendarPlus from 'lucide-svelte/icons/calendar-plus';
-	import Hand from 'lucide-svelte/icons/hand';
-	import { sortMode, type SortMode } from '$lib/stores/sort.js';
-
-	const modes: { value: SortMode; label: string; icon: typeof Clock }[] = [
-		{ value: 'updated', label: 'Updated', icon: Clock },
-		{ value: 'created', label: 'Created', icon: CalendarPlus },
-		{ value: 'custom', label: 'Custom', icon: Hand }
-	];
-</script>
-
-<div class="inline-flex self-end rounded-sm border border-[var(--border-subtle)]" data-testid="sort-selector">
-	{#each modes as mode}
-		<button
-			onclick={() => sortMode.set(mode.value)}
-			class="flex items-center gap-1 px-2 py-1 text-xs transition-colors duration-150
-				{$sortMode === mode.value
-					? 'bg-[var(--primary)] text-white'
-					: 'text-[var(--text-muted)] hover:text-[var(--text)]'}"
-			data-testid="sort-{mode.value}"
-			aria-label="Sort by {mode.label}"
-		>
-			<mode.icon class="h-3.5 w-3.5" />
-			<span class="hidden sm:inline">{mode.label}</span>
-		</button>
-	{/each}
-</div>
diff --git a/src/lib/stores/notes.ts b/src/lib/stores/notes.ts
index 7cece38..6975c7f 100644
--- a/src/lib/stores/notes.ts
+++ b/src/lib/stores/notes.ts
@@ -3,7 +3,6 @@ import type { Note, NoteFilter, NoteCreate, NoteUpdate } from '$lib/types/index.
 import { addToSyncQueue, putNote, deleteNoteFromIdb, getAllNotes, clearNotes as clearIdbNotes } from '$lib/sync/idb.js';
 import { showToast } from '$lib/stores/toast.js';
 import { extractTags } from '$lib/utils/tags.js';
-import { sortMode, type SortMode } from '$lib/stores/sort.js';
 
 export const notes = writable<Note[]>([]);
 export const currentFilter = writable<NoteFilter>('all');
@@ -28,25 +27,20 @@ export const filteredNotes = derived(
 	}
 );
 
-function sortNotes(list: Note[], mode: SortMode): Note[] {
+function sortNotes(list: Note[]): Note[] {
 	return [...list].sort((a, b) => {
-		if (mode === 'created') {
-			return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-		}
-		if (mode === 'custom') {
-			return a.sortOrder - b.sortOrder;
-		}
-		// default: updated
+		const orderDiff = a.sortOrder - b.sortOrder;
+		if (orderDiff !== 0) return orderDiff;
 		return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
 	});
 }
 
-export const pinnedNotes = derived([filteredNotes, sortMode], ([$notes, $sortMode]) =>
-	sortNotes($notes.filter((n) => n.pinned), $sortMode)
+export const pinnedNotes = derived(filteredNotes, ($notes) =>
+	sortNotes($notes.filter((n) => n.pinned))
 );
 
-export const unpinnedNotes = derived([filteredNotes, sortMode], ([$notes, $sortMode]) =>
-	sortNotes($notes.filter((n) => !n.pinned), $sortMode)
+export const unpinnedNotes = derived(filteredNotes, ($notes) =>
+	sortNotes($notes.filter((n) => !n.pinned))
 );
 
 export const allTags = derived(notes, ($notes) => {
diff --git a/src/lib/stores/sort.ts b/src/lib/stores/sort.ts
deleted file mode 100644
index d037410..0000000
--- a/src/lib/stores/sort.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-export type SortMode = 'updated' | 'created' | 'custom';
-
-const STORAGE_KEY = 'crumbs-sort-mode';
-
-function getInitial(): SortMode {
-	if (browser) {
-		const stored = localStorage.getItem(STORAGE_KEY);
-		if (stored === 'updated' || stored === 'created' || stored === 'custom') {
-			return stored;
-		}
-	}
-	return 'updated';
-}
-
-export const sortMode = writable<SortMode>(getInitial());
-
-if (browser) {
-	sortMode.subscribe((value) => {
-		localStorage.setItem(STORAGE_KEY, value);
-	});
-}