Feat : Save and import side settings

There were requests from multiple users that
they use squoosh for compression but for each
iteration side settings resets to default
causing issues and there is no way to save and
import side settings.

There will be two buttons adjacent to copy-over

save side settings : This will save side encoder
and latest settings to localstorage of browser

import side settings : This will import side encoder
and latest settings from localstorage of browser and
replace the existing settings

Also if there are saved settings in locaStorage then
whenever user loads the app it will take that settings
and populate the side so user do not have to repeatedly
enter same settings for similar compression operation
subject to user has saved side settings

Update:1

Import settings button remains disabled if there
is nothing to import

Whenever the side setting is saved there will be
event fired and eventually listened to enable import
button

All 2 operations show notifications now

Import notification has undo option

Update : 2

Changed Icon SVGs

src/client/lazy-app/Compress/Options/style.css

@@ -125,7 +125,7 @@
   composes: title-button;
 
   svg {
-    fill: var(--header-text-color);
+    stroke: var(--header-text-color);
   }
 }
 

src/client/lazy-app/icons/index.tsx

@@ -99,25 +99,29 @@ export const SwapIcon = () => (
 );
 
 export const SaveIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img">
+  <svg viewBox="0 0 24 24">
-    <path
+    <g
-      data-name="layer2"
+      fill="none"
-      d="M41.9 30a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm7.4 15.4a2 2 0 0 1-2.8 0l-2.6-2.6V54a2 2 0 0 1-4 0V42.8l-2.6 2.6a2 2 0 1 1-2.8-2.8l7.4-7.4 7.4 7.4a2 2 0 0 1 0 2.8z"
+      stroke-linecap="round"
-    ></path>
+      stroke-linejoin="round"
-    <ellipse data-name="layer1" cx="29.1" cy="10" rx="23" ry="8"></ellipse>
+      stroke-width="2"
-    <path
+    >
-      data-name="layer1"
+      <path d="M12.501 20.93c-.866.25-1.914-.166-2.176-1.247a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.074.26 1.49 1.296 1.252 2.158M19 22v-6m3 3l-3-3l-3 3" />
-      d="M29.1 29h2.6a19.7 19.7 0 0 1 14.7-2.4c3.6-1.2 5.6-2.5 5.6-3.5v-6.3C47 20.4 38 22 29 22s-18-1.7-23-5.2V23c.1 2 9.6 6 23.1 6zm-7 17c0-.5 0-.9.1-1.4-6.9-.7-13-2.6-16.1-5.4V46c0 3.7 7.5 6.9 17.6 7.8a19.9 19.9 0 0 1-1.6-7.8zm.8-5.3a19.9 19.9 0 0 1 4.1-7.8c-8.7-.3-17.2-2.2-20.9-5.8V35c0 1.7 6.7 4.7 16.8 5.7z"
+      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
-    ></path>
+    </g>
   </svg>
 );
 
 export const ImportIcon = () => (
-  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img">
+  <svg viewBox="0 0 24 24">
-    <path
+    <g
-      d="M49.189 31.052l-4.378-4.104L35 37.414V2h-6v35.066l-9.751-11.05-4.498 3.969 17.182 19.473 17.256-18.406z"
+      fill="none"
-      data-name="layer2"
+      stroke-linecap="round"
-    ></path>
+      stroke-linejoin="round"
-    <path d="M52 45v11H12V45H6v17h52V45h-6z" data-name="layer1"></path>
+      stroke-width="2"
+    >
+      <path d="M12.52 20.924c-.87.262-1.93-.152-2.195-1.241a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.088.264 1.502 1.323 1.242 2.192M19 16v6m3-3l-3 3l-3-3" />
+      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
+    </g>
   </svg>
 );