chore: add a "bug" section & rearrange top bar

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>

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>

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')
           ' - '

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>

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;
 }

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>

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

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