fix: hide faces (#3352)

* fix: hide faces

* remove unused variable

* fix: work even if one fails

* better style for hidden people

* add hide face in the menu dropdown

* add buttons to toggle visibility for all faces

* add server test

* close modal with escape key

* fix: explore page

* improve show & hide faces modal

* keep name on people card

* simplify layout

* sticky app bar in show-hide page

* fix format

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -15,12 +15,15 @@
   export let circle = false;
   export let hidden = false;
   let complete = false;
+
+  export let eyeColor = 'white';
 </script>
 
 <img
   style:width={widthStyle}
   style:height={heightStyle}
-  style:filter={hidden ? 'grayscale(75%)' : 'none'}
+  style:filter={hidden ? 'grayscale(50%)' : 'none'}
+  style:opacity={hidden ? '0.5' : '1'}
   src={url}
   alt={altText}
   class="object-cover transition duration-300"
@@ -32,9 +35,10 @@
   use:imageLoad
   on:image-load|once={() => (complete = true)}
 />
+
 {#if hidden}
   <div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
-    <EyeOffOutline size="2em" />
+    <EyeOffOutline size="2em" color={eyeColor} />
   </div>
 {/if}