From 6acf8a92caca7521d6f96dc67b3a7f85eaa5779b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Mestres?= <jerome@mestres.fr>
Date: Fri, 31 May 2024 11:33:34 +0200
Subject: [PATCH] chore: add a "bug" section & rearrange top bar

---
 app/components/about.hbs                 | 36 +++++++++--------
 app/components/issue.hbs                 | 50 ++++++++++++++++++++++++
 app/components/settings-form/support.hbs |  2 +-
 app/components/theme-switcher.hbs        | 16 ++++----
 app/styles/app.scss                      | 18 +++++++--
 app/templates/application.hbs            | 19 ++++-----
 translations/en-us.yaml                  | 14 ++++++-
 translations/fr-fr.yaml                  | 14 ++++++-
 8 files changed, 130 insertions(+), 39 deletions(-)
 create mode 100644 app/components/issue.hbs

diff --git a/app/components/about.hbs b/app/components/about.hbs
index 63411db..0a23497 100644
--- a/app/components/about.hbs
+++ b/app/components/about.hbs
@@ -1,32 +1,36 @@
 <calcite-button
-  appearance="transparent"
-  kind="neutral"
-  scale="m"
-  id="about-button"
-  icon-start="information"
+  appearance='transparent'
+  kind='neutral'
+  scale='m'
+  id='about-button'
+  icon-start='information'
+  ...attributes
 />
+<calcite-tooltip reference-element='about-button' placement='bottom'>
+  <span>{{t 'info.label'}}</span>
+</calcite-tooltip>
 
 <calcite-popover
-  label={{t "info.label"}}
-  heading={{t "info.label"}}
-  reference-element="about-button"
+  label={{t 'info.label'}}
+  heading={{t 'info.label'}}
+  reference-element='about-button'
   closable
   auto-close
 >
-  <div class="m-2">
-    <p class="center">
-      {{t "info.made_by"
+  <div class='m-2'>
+    <p class='center'>
+      {{t
+        'info.made_by'
         author=this.authorLink
         ember=this.emberLink
         three=this.threeLink
         htmlSafe=true
       }}
     </p>
-    <p class="center">
-      <a href="https://github.com/romgere/text2stl" target="_blank" rel="noopener noreferrer">{{t "info.github"}}</a>
-    </p>
-    <p class="center">
-      <a href="https://github.com/romgere/text2stl/issues/new" target="_blank" rel="noopener noreferrer">{{t "info.issue"}}</a>
+    <p class='center'>
+      <a href='https://github.com/romgere/text2stl' target='_blank' rel='noopener noreferrer'>{{t
+          'info.github'
+        }}</a>
     </p>
   </div>
 </calcite-popover>
\ No newline at end of file
diff --git a/app/components/issue.hbs b/app/components/issue.hbs
new file mode 100644
index 0000000..3dfc644
--- /dev/null
+++ b/app/components/issue.hbs
@@ -0,0 +1,50 @@
+<calcite-button
+  appearance='transparent'
+  kind='neutral'
+  scale='m'
+  id='issue-button'
+  icon-start='debug'
+  ...attributes
+/>
+
+<calcite-tooltip reference-element='issue-button' placement='bottom'>
+  <span>{{t 'issue.label'}}</span>
+</calcite-tooltip>
+
+<calcite-popover
+  label={{t 'issue.label'}}
+  heading={{t 'issue.label'}}
+  reference-element='issue-button'
+  closable
+  auto-close
+>
+  <div class='m-2 w-40'>
+    <h2 class='center'>{{t 'issue.info'}}</h2>
+
+    <p class='center'>{{t 'issue.know_bug.free' htmlSafe=true}}</p>
+    <hr class='w-30p' />
+
+    <p class='center'>{{t 'issue.know_bug.font' htmlSafe=true}}</p>
+    <p class='center'>{{t 'issue.know_bug.font1'}}</p>
+    <hr class='w-30p' />
+
+    <p class='center'>{{t 'issue.know_bug.emoji' htmlSafe=true}}</p>
+    <p class='center'>{{t 'issue.know_bug.emoji1'}}</p>
+    <p class='center'>{{t 'issue.know_bug.emoji2'}}</p>
+    <hr class='w-30p' />
+
+    <p class='center'>{{t 'issue.know_bug.three_js' htmlSafe=true}}</p>
+
+    <p class='center mt-5'>
+
+      <calcite-button
+        icon-start='debug'
+        target='_blank'
+        rel='noopener noreferrer'
+        href='https://github.com/romgere/text2stl/issues/new'
+      >{{t 'issue.know_bug.submit'}}</calcite-button>
+      <br />
+      <small>{{t 'issue.know_bug.gh_account' htmlSafe=true}}</small>
+    </p>
+  </div>
+</calcite-popover>
\ No newline at end of file
diff --git a/app/components/settings-form/support.hbs b/app/components/settings-form/support.hbs
index ff16eaa..b64163d 100644
--- a/app/components/settings-form/support.hbs
+++ b/app/components/settings-form/support.hbs
@@ -35,7 +35,7 @@
     <calcite-label layout='inline-space-between'>
       {{t (concat 'directions.' pos)}}
       <calcite-input-number
-        class='w-70'
+        class='w-70p'
         placeholder={{concat
           (t 'text_settings.supportPadding')
           ' - '
diff --git a/app/components/theme-switcher.hbs b/app/components/theme-switcher.hbs
index d6b082c..9524215 100644
--- a/app/components/theme-switcher.hbs
+++ b/app/components/theme-switcher.hbs
@@ -1,12 +1,12 @@
 <calcite-button
-  appearance="transparent"
-  kind="neutral"
-  scale="m"
-  id="theme-switcher"
-  icon-start={{if this.isLightTheme "brightness" "moon"}}
+  appearance='transparent'
+  kind='neutral'
+  scale='m'
+  id='theme-switcher'
+  icon-start={{if this.isLightTheme 'brightness' 'moon'}}
   ...attributes
-  {{on "click" this.switchTheme}}
+  {{on 'click' this.switchTheme}}
 />
-<calcite-tooltip reference-element="theme-switcher">
-  <span>{{t "switch_theme_tooltip" current=this.theme}}</span>
+<calcite-tooltip reference-element='theme-switcher' placement='bottom'>
+  <span>{{t 'switch_theme_tooltip' current=this.theme}}</span>
 </calcite-tooltip>
\ No newline at end of file
diff --git a/app/styles/app.scss b/app/styles/app.scss
index b5af598..2b7db0d 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -1,21 +1,33 @@
 @import './spacing';
 
-.w-70 {
+.w-30p {
+  width: 30%;
+}
+
+.w-70p {
   width: 70%;
 }
 
-.w-75 {
+.w-75p {
   width: 75%;
 }
 
-.w-80 {
+.w-80p {
   width: 80%;
 }
 
+.w-40 {
+  width: 40rem;
+}
+
 .center {
   text-align: center;
 }
 
+.bold {
+  font-weight: bold;
+}
+
 .visualy-hidden {
   visibility: hidden;
 }
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 7f75e24..47db852 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,17 +1,18 @@
-{{page-title (concat (t "app_name") " - " (t "app_title"))}}
+{{page-title (concat (t 'app_name') ' - ' (t 'app_title'))}}
 
-<calcite-shell >
-  <div slot="header" id="header">
+<calcite-shell>
+  <div slot='header' id='header'>
 
-    <h2 id="header-title">
-      <LinkTo @route="app.index">{{t "app_name"}}</LinkTo>
+    <h2 id='header-title'>
+      <LinkTo @route='app.index'>{{t 'app_name'}}</LinkTo>
     </h2>
 
-    <h3 id="header-sub-title">{{t "app_subtitle"}}</h3>
+    <h3 id='header-sub-title'>{{t 'app_subtitle'}}</h3>
 
-    <div id="header-controls">
-      <LangSwitcher class="mr-2" @appearance="outline-fill" />
-      <ThemeSwitcher class="mr-2" />
+    <div id='header-controls'>
+      <LangSwitcher class='mr-2' @appearance='outline-fill' />
+      <ThemeSwitcher class='mr-2' />
+      <Issue class='mr-2' />
       <About />
     </div>
   </div>
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index ad2c103..57648bd 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -51,7 +51,19 @@ info:
   label: About Text2STL
   made_by: Made with ♥ By {author} with {ember} & {three}
   github: Contribute or fork me on GitHub
-  issue: Find a bug ? Request a new feature ?
+issue:
+  label: Found a bug ?
+  info: "Before submitting a bug, please consider the following :"
+  know_bug:
+    free: <b>This is a free tool built on my free time</b>. Be kind & try to give as much detail as possible.
+    font: "<b>Some fonts are not correctly rendered</b>. This is a know issue due to 3rd party library used by this tool."
+    font1: "Please don't open issue about some characters of a font not rendering correctly (unless you're sure this is not a \"normal\" issue), just try to find an alternative font."
+    emoji: "<b>Not all emojis are correctly rendered</b>. this is a know issue due to 3rd party library used by this tool."
+    emoji1: "You can try to use another version of the same emoji, for example, use 🤍 instead of ❤️."
+    emoji2: "Please don't open issue about a single emoji not rendering as expected."
+    three_js: "If you have knowledge about Three.js and/or How SVG works, please take a look at <a href=\"https://github.com/mrdoob/three.js/issues/26613\" target=\"_blank\">this Three.js issue</a>."
+    gh_account: You'll need a <a href=\"https://github.com/\" target=\"_blank\">Github</a> account to create issue
+    submit: Please submit issue on Github
 font_picker:
   category: Font category
   name: Current font
diff --git a/translations/fr-fr.yaml b/translations/fr-fr.yaml
index 64b0824..caf8952 100644
--- a/translations/fr-fr.yaml
+++ b/translations/fr-fr.yaml
@@ -51,7 +51,19 @@ info:
   label: À propos de Text2STL
   made_by: Créer avec ♥ par {author} avec {ember} & {three}
   github: Contribuez ou faite un fork sur GitHub
-  issue: Un bug ? Demander une nouvelle fonctionnalité ?
+issue:
+  label: Un bug ?
+  info: "Avant de soumettre un bug, merci de lire ce qui suit :"
+  know_bug:
+    free: <b>Ceci est un outil gratuit fait sur mon temps libre</b>. Soyez indulgent & essayez de donner autant de détails que possible.
+    font: "<b>Certaines polices ne fonctionnent pas correctement</b>. Il s'agit d'un problème connu dû à une librairie externe utilisée par cet outil."
+    font1: "Merci de ne pas ouvrir de bug si certains caractères de la police ne fontionnent pas correctement (sauf si vous êtes sûr qu'il s'agit d'un comportement  \"anormal\"), essayez de trouver une autre police."
+    emoji: "<b>Certains emojis ne fonctionnent pas correctement</b>. Il s'agit d'un problème connu dû à une librairie externe utilisée par cet outil."
+    emoji1: "Vous pouvez essayer d'utiliser une autre \"version\" du même emoji, par exemple 🤍 au lieu de ❤️."
+    emoji2: "Merci de ne pas ouvrir de bug pour si un seul emoji ne fonctionne pas correctement."
+    three_js: "Si vous avez des connaissances à propos de Three.js et/ou des SVG, vous pouvez jeter un coup d'oeil à <a href=\"https://github.com/mrdoob/three.js/issues/26613\" target=\"_blank\">ce bug Three.js</a>."
+    gh_account: Vous aurez besoin d'un compte <a href=\"https://github.com/\" target=\"_blank\">Github</a> pour ouvrir un bug
+    submit: Ouvrir un bug sur Github
 font_picker:
   category: Category de police
   name: Police actuelle