From 3bd356019f80edbbd4f047ef6b173fde52254a34 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Fri, 27 Dec 2024 13:05:19 +0100
Subject: [PATCH] Worked more on zen rices

---
 src/browser/app/profile/zen-browser.js        |   6 +
 .../content/zen-styles/zen-animations.css     |  61 ++++++++
 .../base/content/zen-styles/zen-rices.css     |  98 +++++++++++-
 src/browser/base/zen-components/ZenRices.mjs  | 145 ++++++++++++++----
 4 files changed, 280 insertions(+), 30 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 797257ee9..d36aac653 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -90,6 +90,12 @@ pref('zen.tabs.show-newtab-vertical', true);
 pref('zen.view.show-newtab-button-border-top', true);
 pref('zen.view.show-newtab-button-top', false);
 
+#ifdef MOZILLA_OFFICIAL
+pref('zen.rice.api.url', "https://share.zen-browser.app/");
+#else
+pref('zen.rice.api.url', "http://localhost:8000/");
+#endif
+
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels
 #else
diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index 842d8f167..7f01d3724 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -349,3 +349,64 @@
     transform: translateX(-100%) translateY(-50%);
   }
 }
+
+@keyframes zen-rice-form-out {
+  0% {
+    transform: translateX(0);
+    max-height: 350px;
+    opacity: 1;
+    position: relative;
+  }
+
+  50% {
+    transform: translateX(-100%);
+    opacity: 0;
+    position: relative;
+  }
+
+  99% {
+    transform: translateX(-100%);
+    opacity: 0;
+    max-height: 50px;
+    position: relative;
+  }
+
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+    pointer-events: none;
+    position: relative;
+  }
+}
+
+@keyframes zen-rice-form-in {
+  0% {
+    position: absolute;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  99% {
+    position: absolute;
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    position: relative;
+  }
+}
+
+@keyframes zen-rice-form-in-2 {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+    max-height: 50px;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 450px;
+  }
+}
diff --git a/src/browser/base/content/zen-styles/zen-rices.css b/src/browser/base/content/zen-styles/zen-rices.css
index 4c89ad9ce..b209da1f7 100644
--- a/src/browser/base/content/zen-styles/zen-rices.css
+++ b/src/browser/base/content/zen-styles/zen-rices.css
@@ -24,12 +24,25 @@
   max-width: 400px;
 
   & .zen-rice-share-content {
-    padding: 10px;
-    padding-top: 20px;
+    padding: 10px 0;
     border-top: var(--zen-appcontent-border);
     background: var(--arrowpanel-background);
+    position: relative;
+    align-items: center;
 
-    & input[type="text"] {
+    min-height: 50px;
+
+    &:has(#zen-rice-share-first-form:not([fade-out])),
+    &:has(#zen-rice-share-success) {
+      padding-top: 20px;
+    }
+
+    & > vbox {
+      width: 100%;
+      padding: 0 10px;
+    }
+
+    & #zen-rice-share-first-form input[type="text"] {
       width: 100%;
       padding: 1px 2px;
       border: 0;
@@ -60,7 +73,7 @@
 
     max-height: 30px;
     overflow: hidden;
-    transition: max-height 0.3s ease;
+    transition: max-height 0.3s ease, height 0.3s ease;
     &[zen-collapsed="false"] {
       max-height: 350px;
     }
@@ -105,4 +118,81 @@
       justify-content: center;
     }
   }
+
+  #zen-rice-share-error {
+    border: 1px solid rgba(255, 0, 0, 0.5);
+    background: rgba(255, 0, 0, 0.1);
+    padding: 5px;
+    transition: opacity 0.3s ease;
+    border-radius: var(--zen-panel-radius);
+
+    @starting-style {
+      opacity: 0;
+    }
+
+    & button {
+      margin-left: auto;
+      margin-top: 2px;
+    }
+  }
+
+  /* Animations */
+  #zen-rice-share-first-form[fade-out] {
+    position: absolute;
+    transform: translateX(-100%);
+    pointer-events: none;
+    animation: zen-rice-form-out 0.8s ease;
+  }
+
+  #zen-rice-share-second-form {
+    animation: zen-rice-form-in 0.8s ease forwards;
+    justify-content: center;
+
+    & > hbox {
+      width: 100%;
+      height: 5px;
+      border-radius: 100px;
+      border: 1px solid var(--zen-colors-border);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--zen-primary-color);
+        transition: width 4s cubic-bezier(1, 0, 0, 1);
+
+        @starting-style {
+          width: 0;
+        }
+      }
+    }
+
+    &[fade-out] {
+      position: absolute !important;
+      animation: zen-rice-form-out 0.5s ease forwards;
+    }
+  }
+
+  #zen-rice-share-success {
+    overflow-y: hidden;
+    max-height: 0px;
+    animation: zen-rice-form-in-2 0.5s ease forwards;
+
+    & h1 {
+      margin: 0;
+      font-size: 20px;
+    }
+
+    & label {
+      margin: 0;
+      margin-top: 15px;
+      font-weight: 600;
+      margin-bottom: 5px;
+    }
+  }
 }
diff --git a/src/browser/base/zen-components/ZenRices.mjs b/src/browser/base/zen-components/ZenRices.mjs
index 657074257..d77d22001 100644
--- a/src/browser/base/zen-components/ZenRices.mjs
+++ b/src/browser/base/zen-components/ZenRices.mjs
@@ -1,5 +1,7 @@
 
 {
+  const ZEN_RICE_API = Services.prefs.getStringPref("zen.rice.api.url", '');
+
   class ZenRiceCollector {
     constructor() {}
 
@@ -104,8 +106,8 @@
       this._workspaceThemes = workspaces.map(w => w.theme);
     }
 
-    async packRice() {
-      await this.gatherAll();
+    async packRice(...args) {
+      await this.gatherAll(...args);
       const rice = {
         userChrome: this._userChrome,
         userContent: this._userContent,
@@ -137,31 +139,48 @@
         <vbox id="zen-rice-share-dialog-overlay" hidden="true">
           <vbox id="zen-rice-share-dialog">
             <html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" />
-            <vbox class="zen-rice-share-content">
-              <html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog(this)" />
-              <hbox class="zen-rice-share-author">
-                <label data-l10n-id="zen-rice-share-author" />
-                <html:input type="text" data-l10n-id="zen-rice-share-author-input" id="zen-rice-share-author" />
-              </hbox>
-              <vbox zen-collapsed="true" id="zen-rice-share-options" onclick="gZenThemePicker.riceManager.toggleOptions(event)">
-                <hbox class="options-header">
-                  <label data-l10n-id="zen-rice-share-include" />
-                  <image></image>
+            <hbox class="zen-rice-share-content">
+              <vbox id="zen-rice-share-first-form">
+                <html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog(this)" />
+                <hbox class="zen-rice-share-author">
+                  <label data-l10n-id="zen-rice-share-author" />
+                  <html:input type="text" data-l10n-id="zen-rice-share-author-input" id="zen-rice-share-author" />
                 </hbox>
-                <checkbox data-l10n-id="zen-rice-share-include-userchrome" id="zen-rice-share-include-userchrome" />
-                <checkbox data-l10n-id="zen-rice-share-include-usercontent" id="zen-rice-share-include-usercontent" />
-                <checkbox data-l10n-id="zen-rice-share-include-mods" id="zen-rice-share-include-mods" />
-                <vbox class="indent">
-                  <checkbox data-l10n-id="zen-rice-share-include-mod-prefs" id="zen-rice-share-include-mod-prefs" />
+                <vbox zen-collapsed="true" id="zen-rice-share-options" onclick="gZenThemePicker.riceManager.toggleOptions(event)">
+                  <hbox class="options-header">
+                    <label data-l10n-id="zen-rice-share-include" />
+                    <image></image>
+                  </hbox>
+                  <checkbox data-l10n-id="zen-rice-share-include-userchrome" id="zen-rice-share-include-userchrome" />
+                  <checkbox data-l10n-id="zen-rice-share-include-usercontent" id="zen-rice-share-include-usercontent" />
+                  <checkbox data-l10n-id="zen-rice-share-include-mods" id="zen-rice-share-include-mods" />
+                  <vbox class="indent">
+                    <checkbox data-l10n-id="zen-rice-share-include-mod-prefs" id="zen-rice-share-include-mod-prefs" />
+                  </vbox>
+                  <checkbox data-l10n-id="zen-rice-share-include-preferences" id="zen-rice-share-include-preferences" />
+                  <checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
                 </vbox>
-                <checkbox data-l10n-id="zen-rice-share-include-preferences" id="zen-rice-share-include-preferences" />
-                <checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
+                <html:moz-button-group class="panel-footer">
+                  <button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-cancel" />
+                  <button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
+                </html:moz-button-group>
               </vbox>
-              <html:moz-button-group class="panel-footer">
-                <button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-cancel" />
-                <button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
-              </html:moz-button-group>
-            </vbox>
+              <vbox id="zen-rice-share-second-form" hidden="true">
+                <hbox></hbox>
+                <vbox id="zen-rice-share-error" hidden="true">
+                  <label data-l10n-id="zen-rice-share-error" />
+                  <button onclick="gZenThemePicker.riceManager.resetShareDialog()" data-l10n-id="zen-close-label" class="footer-button" />
+                </vbox>
+              </vbox>
+              <vbox id="zen-rice-share-success" hidden="true">
+                <h1 data-l10n-id="zen-rice-share-success" />
+                <label data-l10n-id="zen-rice-share-success-link" />
+                <html:input type="text" readonly="true" id="zen-rice-share-success-link" onclick="this.select()" />
+                <html:moz-button-group class="panel-footer">
+                  <button onclick="gZenThemePicker.riceManager.resetShareDialog()" data-l10n-id="zen-close-label" class="footer-button" slot="primary" default="true" />
+                </html:moz-button-group>
+              </vbox>
+            </hbox>
           </vbox>
         </vbox>
       `);
@@ -191,13 +210,18 @@
       this.validateShareDialog(document.getElementById("zen-rice-share-name"));
     }
 
-    cancel() {
-      this.shareDialog.setAttribute("hidden", "true");
+    resetShareDialog() {
+      const dialog = this.shareDialog;
+      dialog.setAttribute("hidden", "true");
       document.getElementById("zen-rice-share-name").value = "";
       document.getElementById("zen-rice-share-author").value = "";
       document.getElementById("zen-rice-share-save").disabled = true;
     }
 
+    cancel() {
+      this.resetShareDialog();
+    }
+
     getAllowedRice() {
       return {
         userChrome: document.getElementById("zen-rice-share-include-userchrome").checked,
@@ -209,6 +233,10 @@
       };
     }
 
+    get userAgent() {
+      return `ZenBrowser/${Services.appinfo.version} (${gZenOperatingSystemCommonUtils.currentOperatingSystem})`;
+    }
+
     canShareRice() {
       const allowedRice = this.getAllowedRice();
       const modsPrefs = document.getElementById("zen-rice-share-include-mod-prefs");
@@ -227,6 +255,71 @@
     }
 
     async submit() {
+      const firstForm = document.getElementById("zen-rice-share-first-form");
+      const secondForm = document.getElementById("zen-rice-share-second-form");
+      firstForm.setAttribute("fade-out", "true");
+      secondForm.removeAttribute("hidden");
+      await this._submit();
+    }
+
+    async _submit() {
+      const allowedRice = this.getAllowedRice();
+      const rice = await this._collector.packRice(allowedRice);
+      const name = document.getElementById("zen-rice-share-name").value;
+      const author = document.getElementById("zen-rice-share-author").value;
+      const response = await this._sendRice({ name, author, rice });
+      //if (response) {
+        this.showSuccessDialog({id:"abawdawd"});
+      //}
+    }
+
+    async _sendRice({ name, author, rice }) {
+      // Encode the rice as base64 and send it as request body, change user agent to "ZenBrowser" and send author info in the headers
+      const base64 = btoa(JSON.stringify(rice));
+      const headers = new Headers();
+      headers.append("X-Zen-Rice-Name", name);
+      headers.append("X-Zen-Rice-Author", author);
+      headers.append("User-Agent", this.userAgent);
+      headers.append("Content-Type", "application/json");
+      try {
+        const response = await fetch(`${ZEN_RICE_API}/api/create`, {
+          method: "POST",
+          headers,
+          body: base64,
+        });
+      } catch (e) {
+        this.showErrorMessage("An error occurred while sharing your rice. Please try again later.");
+        return null;
+      }
+      return await this._verifyResponse(response);
+    }
+
+    async _verifyResponse(response) {
+      const json = await response.json();
+      if (!response.ok) {
+        const message = json.message || "An error occurred while sharing your rice.";
+        this.showErrorMessage(message);
+        return null;
+      }
+
+      return json;
+    }
+
+    showErrorMessage(message) {
+      const errorBox = document.getElementById("zen-rice-share-error");
+      errorBox.removeAttribute("hidden");
+      errorBox.querySelector("label").textContent = message;
+    }
+
+    showSuccessDialog(riceInfo) {
+      const { id } = riceInfo;
+      setTimeout(() => {
+        const successBox = document.getElementById("zen-rice-share-success");
+        document.getElementById("zen-rice-share-second-form").setAttribute("fade-out", "true");
+        successBox.removeAttribute("hidden");
+        const link = document.getElementById("zen-rice-share-success-link");
+        link.value = `${ZEN_RICE_API}${id}`;
+      }, 2000);
     }
   }