ui(empty-state): make Settings link clickable in empty gallery (#964)

Co-authored-by: Rahul Harpal <51887323+rahulharpal1603@users.noreply.github.com>

Author: skyforge-glitch

frontend/src/components/EmptyStates/EmptyGalleryState.tsx

@@ -1,6 +1,10 @@
 import { FolderOpen, Image as ImageIcon } from 'lucide-react';
+import { useNavigate } from 'react-router';
+import { ROUTES } from '@/constants/routes';
 
 export const EmptyGalleryState = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="flex flex-col items-center justify-center py-16 text-center">
       <div className="mb-6 rounded-full bg-gray-100 p-4 dark:bg-gray-800">
@@ -16,7 +20,17 @@ export const EmptyGalleryState = () => {
       <div className="flex flex-col gap-2 text-sm text-gray-400 dark:text-gray-500">
         <div className="flex items-center gap-2">
           <FolderOpen className="h-4 w-4" />
-          <span>Go to Settings to add folders.</span>
+          <span>
+            Go to{' '}
+            <button
+              type="button"
+              onClick={() => navigate(`/${ROUTES.SETTINGS}`)}
+              className="rounded text-blue-500 hover:underline focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-none"
+            >
+              Settings
+            </button>{' '}
+            to add folders.
+          </span>
         </div>
         <div className="flex items-center gap-2">
           <ImageIcon className="h-4 w-4" />