From 028cecdd4b1a8a66f8da0cbe02b1d762a567406b Mon Sep 17 00:00:00 2001 From: Kresna Date: Mon, 3 Aug 2026 16:08:55 +0700 Subject: [PATCH] =?UTF-8?q?feat(dev):=20Compare=20Two=20Lists=20=E2=80=94?= =?UTF-8?q?=20line=20set=20operations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit One tool with six line/list set operations between two sources: merge & dedupe (union), in A not B, in B not A, common to both (intersection), in only one (symmetric difference), and duplicates (2+ across both). Options: ignore case, trim whitespace, ignore blank lines, sort. Swap A/B, copy, download .txt. Runs entirely in the browser. Comparison uses a normalised key (trim + case-fold) while preserving each line's original text (first occurrence wins). Pure lib with 17 unit tests. Bilingual (EN + ID) UI, SEO and OG. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01Ubfx4XocHcECaL8twp9zsr --- src/islands/dev/CompareLists.tsx | 125 ++++++++++++++++++++++++++++++ src/registry/tool-seo.ts | 34 ++++++++ src/registry/tools.ts | 13 +++- src/tools/dev/lineset.lib.test.ts | 82 ++++++++++++++++++++ src/tools/dev/lineset.lib.ts | 94 ++++++++++++++++++++++ 5 files changed, 347 insertions(+), 1 deletion(-) create mode 100644 src/islands/dev/CompareLists.tsx create mode 100644 src/tools/dev/lineset.lib.test.ts create mode 100644 src/tools/dev/lineset.lib.ts diff --git a/src/islands/dev/CompareLists.tsx b/src/islands/dev/CompareLists.tsx new file mode 100644 index 0000000..05bcf5b --- /dev/null +++ b/src/islands/dev/CompareLists.tsx @@ -0,0 +1,125 @@ +import { useMemo, useState } from 'react'; +import { ArrowLeftRight, Download } from 'lucide-react'; +import { TextArea } from '@/components/ui/TextArea'; +import { Button } from '@/components/ui/Button'; +import { CopyButton } from '@/components/ui/CopyButton'; +import { downloadService } from '@/services/download.service'; +import { compareLines, type LineSetMode, type LineSetOptions } from '@/tools/dev/lineset.lib'; +import type { Lang } from '@/i18n/config'; + +const MODE_IDS: LineSetMode[] = ['union', 'difference', 'differenceB', 'intersection', 'symmetric', 'duplicates']; + +const TR: Record string; lineCount: (n: number) => string; + download: string; empty: string; optionsLabel: string; + opts: Record; + modes: Record; +}> = { + en: { + intro: 'Compare two lists of lines and combine them with set operations — merge and dedupe, subtract one from the other, find what they share, and more. Everything runs in your browser; nothing is uploaded.', + listA: 'List A', listB: 'List B', + placeholderA: 'Paste the first list, one item per line…', placeholderB: 'Paste the second list, one item per line…', + swap: 'Swap A ↔ B', result: 'Result', resultCount: (n) => `${n.toLocaleString()} line${n === 1 ? '' : 's'}`, + lineCount: (n) => `${n.toLocaleString()} line${n === 1 ? '' : 's'}`, download: 'Download .txt', + empty: 'The result is empty.', optionsLabel: 'Options', + opts: { caseInsensitive: 'Ignore case', trim: 'Trim whitespace', ignoreBlank: 'Ignore blank lines', sort: 'Sort result' }, + modes: { + union: { label: 'Merge & dedupe', hint: 'All unique lines from both lists (A ∪ B)' }, + difference: { label: 'In A, not in B', hint: 'Remove B’s lines from A (A − B)' }, + differenceB: { label: 'In B, not in A', hint: 'Remove A’s lines from B (B − A)' }, + intersection: { label: 'Common to both', hint: 'Lines that appear in both lists (A ∩ B)' }, + symmetric: { label: 'In only one', hint: 'Lines in just one of the lists (A △ B)' }, + duplicates: { label: 'Duplicates', hint: 'Lines that appear 2+ times across both lists' }, + }, + }, + id: { + intro: 'Bandingkan dua daftar baris dan gabungkan dengan operasi himpunan — gabung dan hapus duplikat, kurangi satu dari yang lain, temukan yang sama, dan lainnya. Semuanya berjalan di browser Anda; tidak ada yang diunggah.', + listA: 'Daftar A', listB: 'Daftar B', + placeholderA: 'Tempel daftar pertama, satu item per baris…', placeholderB: 'Tempel daftar kedua, satu item per baris…', + swap: 'Tukar A ↔ B', result: 'Hasil', resultCount: (n) => `${n.toLocaleString()} baris`, + lineCount: (n) => `${n.toLocaleString()} baris`, download: 'Unduh .txt', + empty: 'Hasilnya kosong.', optionsLabel: 'Opsi', + opts: { caseInsensitive: 'Abaikan huruf besar/kecil', trim: 'Pangkas spasi', ignoreBlank: 'Abaikan baris kosong', sort: 'Urutkan hasil' }, + modes: { + union: { label: 'Gabung & hapus duplikat', hint: 'Semua baris unik dari kedua daftar (A ∪ B)' }, + difference: { label: 'Di A, tidak di B', hint: 'Hapus baris B dari A (A − B)' }, + differenceB: { label: 'Di B, tidak di A', hint: 'Hapus baris A dari B (B − A)' }, + intersection: { label: 'Sama di keduanya', hint: 'Baris yang muncul di kedua daftar (A ∩ B)' }, + symmetric: { label: 'Hanya di salah satu', hint: 'Baris yang hanya ada di salah satu daftar (A △ B)' }, + duplicates: { label: 'Duplikat', hint: 'Baris yang muncul 2+ kali di kedua daftar' }, + }, + }, +}; + +const nonEmptyLines = (s: string) => (s.length ? s.split(/\r\n|\r|\n/).filter((l) => l.trim() !== '').length : 0); + +export default function CompareLists({ lang = 'en' }: { lang?: Lang }) { + const t = TR[lang] ?? TR.en; + const [a, setA] = useState(''); + const [b, setB] = useState(''); + const [mode, setMode] = useState('union'); + const [opts, setOpts] = useState({ trim: true }); + + const result = useMemo(() => compareLines(a, b, mode, opts), [a, b, mode, opts]); + const resultText = useMemo(() => result.lines.join('\n'), [result]); + + const toggle = (k: keyof LineSetOptions) => setOpts((o) => ({ ...o, [k]: !o[k] })); + const swap = () => { setA(b); setB(a); }; + const download = () => downloadService.download(new Blob([resultText], { type: 'text/plain' }), 'compare-result.txt'); + + return ( +
+

{t.intro}

+ +
+
+