Redesign add bookmark popup and improve icon picker

Updated the add bookmark popup with a more modern Material card style, clearer field labels, and improved layout. The icon picker now fetches the full list of Material Icons asynchronously from Google Fonts, with a fallback to a minimal static set for immediate use. Enhanced the icon grid UI and selection logic for better usability.

renderer/home.css

@@ -202,48 +202,138 @@ body, html {
   align-items: center;
   justify-content: center;
   z-index: 99;
+  backdrop-filter: blur(4px); /* add subtle blur behind the overlay */
 }
 
 .popup.hidden {
   display: none;
 }
 
+/* Popup inner as white Material card */
 .popup-inner {
-  background: var(--dark-purple);
-  padding: 2rem;
-  border-radius: 12px;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  color: var(--text);
-  min-width: 300px;
+  gap: 1.5rem;
+  color: #222222;
+  min-width: 320px;
+  /* existing styling */
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+  padding: 1.5rem;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+  transform: translateY(-10px) scale(0.95);
+  opacity: 0;
+  width: 500px;    /* make popup wider */
+  max-width: 90vw; /* keep it responsive on small screens */
 }
 
-.popup-inner input {
+/* animate in when not hidden */
+.popup:not(.hidden) .popup-inner {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+
+/* dialog title */
+.popup-inner h2 {
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
+  text-align: center;
+  color: #333333;
+}
+
+/* field labels */
+.popup-inner label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  color: #555555;
+}
+
+/* text/url/icon inputs */
+.popup-inner input[type="text"],
+.popup-inner input[type="url"] {
+  width: 100%;
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  color: #222222;
+  margin-bottom: 1rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.popup-inner input[type="text"]:focus,
+.popup-inner input[type="url"]:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(123,46,255,0.2);
+}
+
+/* icon-grid container */
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  gap: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+  margin: 0 -0.5rem 1rem;
   padding: 0.5rem;
-  background: var(--dark-blue);
-  border: none;
-  color: var(--text);
-  border-radius: 6px;
+  background: #fafafa;
+  border: 1px solid #eee;
+  border-radius: 4px;
 }
 
+/* individual icon items */
+.icon-item {
+  background: #ffffff;
+  border: 1px solid #ddd;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 4px;
+  text-align: center;
+}
+
+.icon-item:hover {
+  background: #f0f0f0;
+}
+
+/* action buttons container */
 .popup-buttons {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .popup-buttons button {
+  min-width: 80px;
   padding: 0.5rem 1rem;
-  background: var(--primary);
+  font-size: 0.875rem;
+  border-radius: 4px;
   border: none;
-  border-radius: 6px;
-  color: white;
   cursor: pointer;
 }
 
-.popup-buttons button:hover {
-  background: var(--accent);
+/* Cancel button */
+#cancelBtn {
+  background: #e0e0e0;
+  color: #222222;
+}
+
+#cancelBtn:hover {
+  background: #d5d5d5;
+}
+
+/* Add button */
+#saveBookmarkBtn {
+  background: var(--primary);
+  color: #ffffff;
+}
+
+#saveBookmarkBtn:hover {
+  background: #6a24e5;
 }
 
 /* Color Palette */