feat: add indicator for temporary changes in kind filter

src/components/KindFilter/index.tsx

@@ -9,7 +9,7 @@ import { useKindFilter } from '@/providers/KindFilterProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { ListFilter } from 'lucide-react'
 import { kinds } from 'nostr-tools'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const KIND_FILTER_OPTIONS = [
@@ -32,10 +32,19 @@ export default function KindFilter({
 }) {
   const { t } = useTranslation()
   const { isSmallScreen } = useScreenSize()
+  const { showKinds: savedShowKinds } = useKindFilter()
   const [open, setOpen] = useState(false)
   const { updateShowKinds } = useKindFilter()
   const [temporaryShowKinds, setTemporaryShowKinds] = useState(showKinds)
   const [isPersistent, setIsPersistent] = useState(false)
+  const isDifferentFromSaved = useMemo(
+    () => !isSameKindFilter(showKinds, savedShowKinds),
+    [showKinds, savedShowKinds]
+  )
+  const isTemporaryDifferentFromSaved = useMemo(
+    () => !isSameKindFilter(temporaryShowKinds, savedShowKinds),
+    [temporaryShowKinds, savedShowKinds]
+  )
 
   useEffect(() => {
     setTemporaryShowKinds(showKinds)
@@ -49,10 +58,7 @@ export default function KindFilter({
     }
 
     const newShowKinds = [...temporaryShowKinds].sort()
-    if (
-      newShowKinds.length !== showKinds.length ||
-      newShowKinds.some((k, i) => k !== showKinds[i])
-    ) {
+    if (!isSameKindFilter(newShowKinds, showKinds)) {
       onShowKindsChange(newShowKinds)
     }
 
@@ -68,6 +74,7 @@ export default function KindFilter({
     <Button
       variant="ghost"
       size="titlebar-icon"
+      className="relative"
       onClick={() => {
         if (isSmallScreen) {
           setOpen(true)
@@ -75,6 +82,9 @@ export default function KindFilter({
       }}
     >
       <ListFilter />
+      {isDifferentFromSaved && (
+        <div className="absolute size-2 rounded-full bg-primary right-2 top-2.5 ring-2 ring-background" />
+      )}
     </Button>
   )
 
@@ -108,13 +118,12 @@ export default function KindFilter({
         })}
       </div>
 
-      <div className="flex gap-2 mt-4">
+      <div className="grid grid-cols-3 gap-2 mt-4">
         <Button
           variant="secondary"
           onClick={() => {
             setTemporaryShowKinds(SUPPORTED_KINDS)
           }}
-          className="flex-1"
         >
           {t('Select All')}
         </Button>
@@ -123,10 +132,16 @@ export default function KindFilter({
           onClick={() => {
             setTemporaryShowKinds([])
           }}
-          className="flex-1"
         >
           {t('Clear All')}
         </Button>
+        <Button
+          variant="secondary"
+          onClick={() => setTemporaryShowKinds(savedShowKinds)}
+          disabled={!isTemporaryDifferentFromSaved}
+        >
+          {t('Reset')}
+        </Button>
       </div>
 
       <Label className="flex items-center gap-2 cursor-pointer mt-4">
@@ -172,3 +187,12 @@ export default function KindFilter({
     </Popover>
   )
 }
+
+function isSameKindFilter(a: number[], b: number[]) {
+  if (a.length !== b.length) {
+    return false
+  }
+  const sortedA = [...a].sort()
+  const sortedB = [...b].sort()
+  return sortedA.every((value, index) => value === sortedB[index])
+}

src/i18n/locales/ar.ts

@@ -364,6 +364,7 @@ export default {
     'Select All': 'تحديد الكل',
     'Clear All': 'مسح الكل',
     'Remember my choice': 'تذكر اختياري',
-    Apply: 'تطبيق'
+    Apply: 'تطبيق',
+    Reset: 'إعادة تعيين'
   }
 }

src/i18n/locales/de.ts

@@ -371,6 +371,7 @@ export default {
     'Select All': 'Alle auswählen',
     'Clear All': 'Alle löschen',
     'Remember my choice': 'Meine Auswahl merken',
-    Apply: 'Anwenden'
+    Apply: 'Anwenden',
+    Reset: 'Zurücksetzen'
   }
 }

src/i18n/locales/en.ts

@@ -365,6 +365,7 @@ export default {
     'Select All': 'Select All',
     'Clear All': 'Clear All',
     'Remember my choice': 'Remember my choice',
-    Apply: 'Apply'
+    Apply: 'Apply',
+    Reset: 'Reset'
   }
 }

src/i18n/locales/es.ts

@@ -370,6 +370,7 @@ export default {
     'Select All': 'Seleccionar todo',
     'Clear All': 'Limpiar todo',
     'Remember my choice': 'Recordar mi elección',
-    Apply: 'Aplicar'
+    Apply: 'Aplicar',
+    Reset: 'Restablecer'
   }
 }

src/i18n/locales/fa.ts

@@ -365,6 +365,7 @@ export default {
     'Select All': 'انتخاب همه',
     'Clear All': 'پاک کردن همه',
     'Remember my choice': 'انتخاب من را به خاطر بسپار',
-    Apply: 'اعمال'
+    Apply: 'اعمال',
+    Reset: 'بازنشانی'
   }
 }

src/i18n/locales/fr.ts

@@ -370,6 +370,7 @@ export default {
     'Select All': 'Tout sélectionner',
     'Clear All': 'Tout effacer',
     'Remember my choice': 'Se souvenir de mon choix',
-    Apply: 'Appliquer'
+    Apply: 'Appliquer',
+    Reset: 'Réinitialiser'
   }
 }

src/i18n/locales/it.ts

@@ -369,6 +369,7 @@ export default {
     'Select All': 'Seleziona tutto',
     'Clear All': 'Cancella tutto',
     'Remember my choice': 'Ricorda la mia scelta',
-    Apply: 'Applica'
+    Apply: 'Applica',
+    Reset: 'Reimposta'
   }
 }

src/i18n/locales/ja.ts

@@ -367,6 +367,7 @@ export default {
     'Select All': 'すべて選択',
     'Clear All': 'すべてクリア',
     'Remember my choice': '選択を記憶',
-    Apply: '適用'
+    Apply: '適用',
+    Reset: 'リセット'
   }
 }

src/i18n/locales/ko.ts

@@ -366,6 +366,7 @@ export default {
     'Select All': '모두 선택',
     'Clear All': '모두 지우기',
     'Remember my choice': '내 선택 기억하기',
-    Apply: '적용'
+    Apply: '적용',
+    Reset: '초기화'
   }
 }

src/i18n/locales/pl.ts

@@ -369,6 +369,7 @@ export default {
     'Select All': 'Zaznacz wszystko',
     'Clear All': 'Wyczyść wszystko',
     'Remember my choice': 'Zapamiętaj mój wybór',
-    Apply: 'Zastosuj'
+    Apply: 'Zastosuj',
+    Reset: 'Resetuj'
   }
 }

src/i18n/locales/pt-BR.ts

@@ -368,6 +368,7 @@ export default {
     'Select All': 'Selecionar tudo',
     'Clear All': 'Limpar tudo',
     'Remember my choice': 'Lembrar minha escolha',
-    Apply: 'Aplicar'
+    Apply: 'Aplicar',
+    Reset: 'Redefinir'
   }
 }

src/i18n/locales/pt-PT.ts

@@ -369,6 +369,7 @@ export default {
     'Select All': 'Seleccionar tudo',
     'Clear All': 'Limpar tudo',
     'Remember my choice': 'Lembrar a minha escolha',
-    Apply: 'Aplicar'
+    Apply: 'Aplicar',
+    Reset: 'Repor'
   }
 }

src/i18n/locales/ru.ts

@@ -369,6 +369,7 @@ export default {
     'Select All': 'Выбрать все',
     'Clear All': 'Очистить все',
     'Remember my choice': 'Запомнить мой выбор',
-    Apply: 'Применить'
+    Apply: 'Применить',
+    Reset: 'Сбросить'
   }
 }

src/i18n/locales/th.ts

@@ -363,6 +363,7 @@ export default {
     'Select All': 'เลือกทั้งหมด',
     'Clear All': 'ล้างทั้งหมด',
     'Remember my choice': 'จำการเลือกของฉัน',
-    Apply: 'ใช้'
+    Apply: 'ใช้',
+    Reset: 'รีเซ็ต'
   }
 }

src/i18n/locales/zh.ts

@@ -361,6 +361,7 @@ export default {
     'Select All': '全选',
     'Clear All': '清空',
     'Remember my choice': '记住我的选择',
-    Apply: '应用'
+    Apply: '应用',
+    Reset: '重置'
   }
 }