stable

scobru · Oct 15, 2024 · f902e6f · f902e6f
1 parent a57ce7a
commit f902e6f
Show file tree

Hide file tree

Showing 10 changed files with 726 additions and 310 deletions.
diff --git a/packages/svelte/src/app.pcss b/packages/svelte/src/app.pcss
@@ -8,38 +8,4 @@
   background: oklch(var(--b2));
 }
 
-p {
-  margin: 1rem 0;
-}
-
-:root {
-  --primary-color: #4a90e2;
-  --secondary-color: #50e3c2;
-  --background-color: #f5f7fa;
-  --text-color: #333;
-}
-
-body {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
 
-h1,
-h2,
-h3,
-h4,
-h5,
-
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.container {
-  animation: fadeIn 1s ease-in-out;
-}
diff --git a/packages/svelte/src/lib/components/ScaffoldEthApp.svelte b/packages/svelte/src/lib/components/ScaffoldEthApp.svelte
@@ -28,10 +28,10 @@
   });
 </script>
 
-<div class="flex min-h-screen flex-col">
+<div class="flex flex-col min-h-screen">
   <Header />
-  <main class="">
+  <div class="flex-1">
     <slot />
-  </main>
+  </div>
   <Footer />
 </div>
diff --git a/packages/svelte/src/lib/components/gun/profile/ProfileDisplay.svelte b/packages/svelte/src/lib/components/gun/profile/ProfileDisplay.svelte
@@ -38,30 +38,29 @@
   });
 </script>
 
-<div class="bg-ableton-yellow text-black p-6 rounded-lg text-left w-80 font-sans">
-  <h2 class="text-2xl font-semibold mb-6">Profile</h2>
-
+<div class="profile-container font-sans text-left">
+  <h2 class="profile-title font-sans  font-semibold antialiased text-2xl">Profile</h2>
   {#each profileFields as [key, value]}
-    <div class="mb-4">
-      <p class="text-sm font-medium mb-1">{key}</p>
+    <div class="profile-field">
+      <p class="field-label">{key}</p>
       {#if !editMode[key]}
-        <div class="bg-white rounded px-2 py-1 text-sm flex justify-between items-center">
+        <div class="field-value">
           <span>{value}</span>
           <button 
-            class="text-blue-500 text-xs"
+            class="edit-button"
             on:click={() => toggleEditMode(key, value)}
           >
             Edit
           </button>
         </div>
       {:else}
-        <div class="flex">
+        <div class="edit-field">
           <input
-            class="bg-white rounded-l px-2 py-1 text-sm flex-grow"
+            class="edit-input"
             bind:value={editFields[key]}
           />
           <button 
-            class="bg-green-500 text-white rounded-r px-2 py-1 text-xs"
+            class="save-button"
             on:click={() => handleUpdate(key)}
           >
             Save
@@ -71,19 +70,19 @@
     </div>
   {/each}
 
-  <div class="mt-6">
+  <div class="add-field">
     <input
-      class="bg-white rounded px-2 py-1 text-sm w-full mb-2"
+      class="add-input"
       bind:value={newFieldName}
       placeholder="New field name"
     />
     <input
-      class="bg-white rounded px-2 py-1 text-sm w-full mb-2"
+      class="add-input"
       bind:value={newFieldValue}
       placeholder="New field value"
     />
     <button 
-      class="bg-blue-500 text-white rounded px-2 py-1 text-sm"
+      class="add-button"
       on:click={handleAddField}
     >
       Add Field
@@ -92,7 +91,75 @@
 </div>
 
 <style>
-  :global(.bg-ableton-yellow) {
+  .profile-container {
     background-color: #FBFFA7;
+    color: #000000;
+    padding: 40px;
+  }
+
+  .profile-title {
+    font-size: 24px;
+    margin-bottom: 24px;
+  }
+
+  .profile-field {
+    margin-bottom: 16px;
+  }
+
+  .field-label {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  .field-value, .edit-field {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #FFFFFF;
+    border: 1px solid #000000;
+  }
+
+  .field-value {
+    padding: 8px;
+  }
+
+  .edit-input, .add-input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #000000;
+    margin-bottom: 8px;
+  }
+
+  .edit-button, .save-button, .add-button {
+    background-color: #000000;
+    color: #FFFFFF;
+    border: none;
+    padding: 4px 8px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  .edit-field {
+    display: flex;
+  }
+
+  .edit-field .edit-input {
+    flex-grow: 1;
+    margin-bottom: 0;
+    border-right: none;
+  }
+
+  .edit-field .save-button {
+    border-left: 1px solid #000000;
+  }
+
+  .add-field {
+    margin-top: 24px;
+  }
+
+  .add-button {
+    width: 100%;
+    padding: 8px;
   }
-</style>
+</style>
diff --git a/packages/svelte/src/lib/gun/user.ts b/packages/svelte/src/lib/gun/user.ts
@@ -168,17 +168,28 @@ function init() {
 
   gun.user().get("epub").put(get(user).is.epub);
 
-  gun.user().get("pulse").on((d) => {
-    user.update(u => ({ ...u, blink: !u.blink, pulse: d }));
-  });
+  gun
+    .user()
+    .get("pulse")
+    .on(d => {
+      user.update(u => ({ ...u, blink: !u.blink, pulse: d }));
+    });
 
-  gun.user().get("safe").map().on((d, k) => {
-    user.update(u => ({ ...u, safe: { ...u.safe, [k]: d } }));
-  });
+  gun
+    .user()
+    .get("safe")
+    .map()
+    .on((d, k) => {
+      user.update(u => ({ ...u, safe: { ...u.safe, [k]: d } }));
+    });
 
-  gun.user().get("profile").get("name").on((d) => {
-    user.update(u => ({ ...u, name: d }));
-  });
+  gun
+    .user()
+    .get("profile")
+    .get("name")
+    .on(d => {
+      user.update(u => ({ ...u, name: d }));
+    });
 
   user.update(u => ({ ...u, pulser, initiated: true }));
 }
@@ -251,20 +262,48 @@ export function loadUserProfile() {
   const userStore = get(user);
 
   if (userStore?.is && userStore?.is?.pub) {
-    gun.user().get("profile").map().on((data, key) => {
-      if (data !== null && data !== undefined && key !== "_" && key !== "#" && key !== ">") {
+    gun
+      .user()
+      .get("profile")
+      .map()
+      .on((data, key) => {
+        if (data !== null && data !== undefined && key !== "_" && key !== "#" && key !== ">") {
+          user.update(u => ({
+            ...u,
+            profile: { ...u.profile, [key]: data },
+          }));
+        }
+      });
+  }
+}
+
+export function addProfileField(title: string, initialValue: string = "") {
+  const gun = useGun();
+  const userStore = get(user);
+
+  // Verifica se il campo esiste già nel profilo
+  if (userStore.profile && userStore.profile.hasOwnProperty(title)) {
+    console.warn(`Il campo '${title}' esiste già nel profilo. Non verrà aggiunto.`);
+    return;
+  }
+
+  // Se il campo non esiste, lo aggiungiamo
+  gun
+    .user()
+    .get("profile")
+    .get(title)
+    .put(initialValue, ack => {
+      if (ack.err) {
+        console.error(`Errore nell'aggiunta del campo '${title}':`, ack.err);
+      } else {
+        console.log(`Campo '${title}' aggiunto con successo al profilo`);
+        // Aggiorna lo store locale
         user.update(u => ({
           ...u,
-          profile: { ...u.profile, [key]: data }
+          profile: { ...u.profile, [title]: initialValue },
         }));
       }
     });
-  }
-}
-
-export function addProfileField(title: string) {
-  const gun = useGun();
-  gun.user().get("profile").get(title).put("");
 }
 
 export function updateProfileField(field: string, value: string): Promise<void> {
@@ -339,4 +378,4 @@ export function saveUserProfile(profile: { [s: string]: unknown } | ArrayLike<un
   // Aggiorna lo store locale
   user.update(u => ({ ...u, profile }));
   console.log("Store utente aggiornato con l'intero profilo");
-}
+}