Add 'clear cache' to cmdk menu

src/admin/ClearCacheButton.tsx

@@ -4,18 +4,24 @@ import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
 import { clearCacheAction } from '@/photo/actions';
 import { useAppState } from '@/app/AppState';
 import { BiTrash } from 'react-icons/bi';
+import { useAppText } from '@/i18n/state/client';
+import { toastSuccess } from '@/toast';
 
 export default function ClearCacheButton() {
   const { invalidateSwr } = useAppState();
+  const appText = useAppText();
 
   return (
     <form action={clearCacheAction}>
       <SubmitButtonWithStatus
         icon={<BiTrash size={16} />}
         hideText="never"
-        onFormSubmit={invalidateSwr}
+        onFormSubmit={() => {
+          invalidateSwr?.();
+          toastSuccess(appText.admin.clearCacheSuccess);
+        }}
       >
-        Clear Cache
+        {appText.admin.clearCache}
       </SubmitButtonWithStatus>
     </form>
   );

src/cmdk/CommandKClient.tsx

@@ -97,6 +97,8 @@ import IconSort from '@/components/icons/IconSort';
 import { useSelectPhotosState } from '@/admin/select/SelectPhotosState';
 import IconAlbum from '@/components/icons/IconAlbum';
 import usePhotoQuery from '@/photo/usePhotoQuery';
+import { clearCacheAction } from '@/photo/actions';
+import { toastSuccess } from '@/toast';
 
 const DIALOG_TITLE = 'Global Command-K Menu';
 const DIALOG_DESCRIPTION = 'For searching photos, views, and settings';
@@ -160,6 +162,7 @@ export default function CommandKClient({
     clearAuthStateAndRedirectIfNecessary,
     isCommandKOpen: isOpen,
     startUpload,
+    invalidateSwr,
     photosCountTotal,
     photosCountHidden = 0,
     uploadsCount,
@@ -650,6 +653,14 @@ export default function CommandKClient({
           stopSelectingPhotos?.();
         }
       },
+    }, {
+      label: appText.admin.clearCache,
+      annotation: <IconLock narrow />,
+      action: () => clearCacheAction()
+        .then(() => {
+          invalidateSwr?.();
+          toastSuccess(appText.admin.clearCacheSuccess);
+        }),
     }, {
       label: <span className="flex items-center gap-3">
         {appText.admin.appInsights}

src/i18n/locales/bd-bn.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'নির্বাচন বন্ধ করুন',
     appInsights: 'অ্যাপ ইনসাইট',
     appConfig: 'অ্যাপ কনফিগারেশন',
+    clearCache: 'ক্যাশ সাফ করুন',
+    clearCacheSuccess: 'সাইট ক্যাশ সাফ করা হয়েছে',
     edit: 'এডিট',
     favorite: 'পছন্দ',
     unfavorite: 'পছন্দ অপসারণ',

src/i18n/locales/en-gb.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'Stop Selecting',
     appInsights: 'App Insights',
     appConfig: 'App Configuration',
+    clearCache: 'Clear Cache',
+    clearCacheSuccess: 'Site cache has been cleared',
     edit: 'Edit',
     favorite: 'Favourite',
     unfavorite: 'Unfavourite',

src/i18n/locales/en-us.ts

@@ -140,6 +140,8 @@ export const TEXT = {
     selectPhotosExit: 'Stop Selecting',
     appInsights: 'App Insights',
     appConfig: 'App Configuration',
+    clearCache: 'Clear Cache',
+    clearCacheSuccess: 'Site cache has been cleared',
     edit: 'Edit',
     favorite: 'Favorite',
     unfavorite: 'Unfavorite',

src/i18n/locales/es-es.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'Dejar de Seleccionar',
     appInsights: 'Estadísticas de la aplicación',
     appConfig: 'Configuración de la aplicación',
+    clearCache: 'Limpiar caché',
+    clearCacheSuccess: 'La caché del sitio se ha borrado',
     edit: 'Editar',
     favorite: 'Marcar como favorito',
     unfavorite: 'Quitar de favoritos',

src/i18n/locales/hi-in.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'चयन बंद करें',
     appInsights: 'ऐप इनसाइट्स',
     appConfig: 'ऐप कॉन्फ़िगरेशन',
+    clearCache: 'कैश साफ़ करें',
+    clearCacheSuccess: 'साइट कैश साफ़ हो गया है',
     edit: 'संपादित करें',
     favorite: 'पसंदीदा',
     unfavorite: 'पसंदीदा नहीं',

src/i18n/locales/id-id.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'Berhenti Memilih',
     appInsights: 'Wawasan Aplikasi',
     appConfig: 'Konfigurasi Aplikasi',
+    clearCache: 'Bersihkan Cache',
+    clearCacheSuccess: 'Cache situs telah dibersihkan',
     edit: 'Edit',
     favorite: 'Favorit',
     unfavorite: 'Hapus dari Favorit',

src/i18n/locales/pt-br.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'Parar de Selecionar',
     appInsights: 'Insights do aplicativo',
     appConfig: 'Configuração da aplicação',
+    clearCache: 'Limpar cache',
+    clearCacheSuccess: 'O cache do site foi limpo',
     edit: 'Editar',
     favorite: 'Favoritar',
     unfavorite: 'Remover dos favoritos',

src/i18n/locales/pt-pt.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'Parar de Selecionar',
     appInsights: 'Insights do aplicativo',
     appConfig: 'Configuração da aplicação',
+    clearCache: 'Limpar cache',
+    clearCacheSuccess: 'A cache do site foi limpa',
     edit: 'Editar',
     favorite: 'Favoritar',
     unfavorite: 'Remover dos favoritos',

src/i18n/locales/tr-tr.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'Seçmeyi Durdur',
     appInsights: 'Uygulama Analizi',
     appConfig: 'Uygulama Yapılandırması',
+    clearCache: 'Önbelleği Temizle',
+    clearCacheSuccess: 'Site önbelleği temizlendi',
     edit: 'Düzenle',
     favorite: 'Favori',
     unfavorite: 'Favoriden Çıkar',

src/i18n/locales/vi-vn.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: 'Dừng chọn',
     appInsights: 'Thống kê ứng dụng',
     appConfig: 'Cấu hình ứng dụng',
+    clearCache: 'Xóa bộ nhớ cache',
+    clearCacheSuccess: 'Đã xóa bộ nhớ cache của trang web',
     edit: 'Chỉnh sửa',
     favorite: 'Yêu thích',
     unfavorite: 'Bỏ yêu thích',

src/i18n/locales/zh-cn.ts

@@ -141,6 +141,8 @@ export const TEXT: I18N = {
     selectPhotosExit: '停止选择',
     appInsights: '应用分析',
     appConfig: '应用配置',
+    clearCache: '清除缓存',
+    clearCacheSuccess: '站点缓存已清除',
     edit: '编辑',
     favorite: '收藏',
     unfavorite: '取消收藏',

src/toast/ToasterWithThemes.tsx

@@ -8,15 +8,15 @@ export default function ToasterWithThemes() {
   const { resolvedTheme } = useTheme();
   return (
     <Toaster
-      theme={resolvedTheme as 'light' | 'dark' | undefined}
+      theme={resolvedTheme as 'light' | 'dark'}
       toastOptions={{
         classNames: {
           toast: clsx(
-            'flex items-center gap-x-1.5 p-4 w-full',
+            'flex items-center gap-x-1! px-5! py-4! w-full',
             'font-mono text-sm',
             'bg-white dark:bg-black',
             'text-gray-900 dark:text-gray-100',
-            'outline-medium! outline-offset-[-1px]',
+            'outline-medium! outline-offset-[-1px] rounded-xl!',
           ),
         },
       }}

src/toast/index.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import { PiWarningBold } from 'react-icons/pi';
-import { FiCheckSquare } from 'react-icons/fi';
 import { toast } from 'sonner';
 import Spinner from '@/components/Spinner';
+import { FaRegCircleCheck } from 'react-icons/fa6';
 
 const DEFAULT_DURATION = 4000;
 
@@ -11,7 +11,10 @@ export const toastSuccess = (
   duration = DEFAULT_DURATION,
 ) => toast(
   message, {
-    icon: <FiCheckSquare size={16} />,
+    icon: <FaRegCircleCheck
+      size={15}
+      className="text-medium"
+    />,
     duration,
   },
 );
@@ -21,7 +24,10 @@ export const toastWarning = (
   duration = DEFAULT_DURATION,
 ) => toast(
   message, {
-    icon: <PiWarningBold size={16} />,
+    icon: <PiWarningBold
+      size={16}
+      className="text-medium"
+    />,
     duration,
   },
 );