From f605cebb2c034fc1b30438d070a4197ed95122b6 Mon Sep 17 00:00:00 2001
From: Miguel Lehmann <lehmann@puzzle.ch>
Date: Tue, 8 Apr 2025 10:18:25 +0200
Subject: [PATCH 01/21] include puzzle shell header

---
 app/helpers/auth_helper.rb              |  3 +-
 app/views/layouts/application.html.haml | 80 ++++++++++++-------------
 config/locales/de-CH.yml                |  1 +
 config/locales/de.yml                   |  1 +
 config/locales/en.yml                   |  1 +
 config/locales/fr.yml                   |  1 +
 config/locales/it.yml                   |  1 +
 7 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/app/helpers/auth_helper.rb b/app/helpers/auth_helper.rb
index e075f79e1..e521f368a 100644
--- a/app/helpers/auth_helper.rb
+++ b/app/helpers/auth_helper.rb
@@ -24,10 +24,9 @@ def devise?
   end
 
   def language_selector
-    languages = I18n.available_locales.map { |e| e.to_s }.map do |lang_code|
+    I18n.available_locales.map { |e| e.to_s }.map do |lang_code|
       [language(lang_code).capitalize, url_for(locale: lang_code, set_by_user: true)]
     end
-    options_for_select(languages, url_for(locale: I18n.locale, set_by_user: true))
   end
 
   def language(lang_code)
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 7f9907fd8..58d70c373 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -11,56 +11,56 @@
     = csp_meta_tag
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
-    = javascript_include_tag "application", "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
+    = javascript_include_tag "application", "bundle.js", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
     %div.content{"data-skills-empty-space-target": "container"}
       %div.position-sticky.top-0.z-3
-        %div.d-flex.justify-content-between.bg-white.flex-wrap
+        %pzsh-topbar
           = link_to root_path, class: "text-decoration-none text-dark" do
             %div.d-flex
               %div.mb-1.mt-1
-                %img{:src=> "/assets/logo.svg",:height=>"32"}
-              %text.d-flex.align-items-end.ms-2.small= "5.1.0"
-          %ul.navbar.text-gray
-            -# Language selector
-            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-controller": "dropdown"}
-              = select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#navigateOnChange"}
-            -# Devise/Mockdata
-            - if Rails.env.development?
-              %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
-                %span#username
+                %img{:src=> "/assets/logo.svg",:height=>"42"}
+              %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
+          %pzsh-menu
+            %div{slot: 'actions'}
+              %pzsh-menu-dropdown
+                %div{slot: 'toggle'}
+                  = language(I18n.locale.to_s.upcase)
+                %div{slot: 'items'}
+                  - language_selector.each do |lang_name, switch_url|
+                    %pzsh-menu-dropdown-item{href: switch_url}
+                      = lang_name
+              - if Rails.env.development?
+                %span#username.text-white
                   - if devise?
                     = ti("devise.devise")
                   - else
                     = ti("devise.mockdata")
-            -# Admin panel
-            - if conf_admin?
-              %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
-                = link_to ti("devise.admin_panel"), admin_index_path
-            -# Username 
-            - if auth_user_signed_in?
-              %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
-                %div.scale-icon-06(name="user")
-                %span#username
-                  - if find_person_by_auth_user.nil?
-                    = link_to current_auth_user&.name || current_auth_user&.email, people_path(alert: "true")
-                  - else
-                    = link_to find_person_by_auth_user.name, person_path(find_person_by_auth_user)
-                  - if admin?
-                    = ti "devise.admin"
-            -# Login/Logout
-            - if devise?
-              %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2
-                - if auth_user_signed_in?
-                  =link_to ti("devise.sign_out"), destroy_auth_user_session_path, data: { "turbo-method": :delete}, class: "btn btn-link"
-                - elsif devise_mapping.omniauthable?
-                  =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
-            -# Help
-            %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.h-100
-              %a.d-flex.align-items-center{:href => "https://github.com/puzzle/skills/issues"}
-                %pzsh-icon.scale-icon-08.text-gray(name="question-circle")
-            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
+              - if conf_admin?
+                %pzsh-menu-action{href: admin_index_path}
+                  %pzsh-icon{name: 'sliders-v-alt'}
+                  = ti("devise.admin_panel")
+              %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
+                %pzsh-icon{name: 'question-circle'}
+                Help
+              - if auth_user_signed_in?
+                %pzsh-menu-dropdown{href: '#'}
+                  %div{slot: 'toggle'}
+                    %pzsh-icon{name: 'user'}
+                    = current_auth_user&.name || current_auth_user&.email
+                  %div{slot: 'items'}
+                    - if devise?
+                      %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
+                        %pzsh-icon{name: 'sign-out-alt'}
+                        = ti("devise.sign_out")
+                    - unless find_person_by_auth_user.nil?
+                      %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
+                        %pzsh-icon{name: 'setting'}
+                        = ti("devise.profile")
+              - elsif devise_mapping.omniauthable?
+                =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
+          %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
         %div.puzzle-header
           %div.d-flex.h-100
             = render "application/tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
@@ -73,4 +73,4 @@
               = yield :actions
           = content_for?(:content) ? yield(:content) : yield
 
-          = turbo_frame_tag "remote_modal", target: "_top"
\ No newline at end of file
+          = turbo_frame_tag "remote_modal", target: "_top"
diff --git a/config/locales/de-CH.yml b/config/locales/de-CH.yml
index 3ecebd76a..da8f2e71b 100644
--- a/config/locales/de-CH.yml
+++ b/config/locales/de-CH.yml
@@ -207,6 +207,7 @@ de-CH:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: Ä Fähler ist uftretä, es si ke Omniauth-Abieter verfügbar, bitte kontaktieren Sie dr Administrator.
+      profile: Mis Profil
       sign_in: Amäudä
       sign_in_with: Mit %{provider} amäudä
       sign_out: Abmäudä
diff --git a/config/locales/de.yml b/config/locales/de.yml
index ba39c1e87..d46c34318 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -192,6 +192,7 @@ de:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: Ein Fehler ist aufgetreten, es sind keine Omniauth-Anbieter verfügbar, bitte kontaktieren Sie den Administrator.
+      profile: Mein Profil
       sign_in: Anmelden
       sign_in_with: Mit %{provider} anmelden
       sign_out: Abmelden
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d78dde159..684873e57 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -188,6 +188,7 @@ en:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: An error has occurred, there are no Omniauth providers available, please contact the administrator.
+      profile: My Profile
       sign_in: Log in
       sign_in_with: 'Log in with %{provider} '
       sign_out: Log out
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 10d145aa9..cf3a9e8e6 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -188,6 +188,7 @@ fr:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: Une erreur s'est produite, aucun fournisseur Omniauth n'est disponible, veuillez contacter l'administrateur.
+      profile: Mon profil
       sign_in: S'inscrire
       sign_in_with: 'S''inscrire avec %{provider} '
       sign_out: Se désinscrire
diff --git a/config/locales/it.yml b/config/locales/it.yml
index 9fdd053fd..d15463a04 100644
--- a/config/locales/it.yml
+++ b/config/locales/it.yml
@@ -188,6 +188,7 @@ it:
       devise: Motto
       mockdata: Mockdata
       no_omniauth_providers: Si è verificato un errore, non sono disponibili provider Omniauth, contattare l'amministratore.
+      profile: Il mio profilo
       sign_in: Accedi
       sign_in_with: "%{provider} Accedere con"
       sign_out: Disconnettersi

From 76ce3c335c41d5acd9b609885cd860239a97d85e Mon Sep 17 00:00:00 2001
From: Miguel Lehmann <lehmann@puzzle.ch>
Date: Fri, 11 Apr 2025 14:48:09 +0200
Subject: [PATCH 02/21] add puzzle shell banner

---
 app/assets/images/alternativ_logo.svg         | 46 +++++++++++++++++++
 app/assets/stylesheets/styles.scss            |  4 --
 .../application/_header_tabbar.html.haml      |  9 ++++
 app/views/application/_tabbar.html.haml       |  1 +
 app/views/layouts/application.html.haml       |  9 ++--
 5 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/images/alternativ_logo.svg
 create mode 100644 app/views/application/_header_tabbar.html.haml

diff --git a/app/assets/images/alternativ_logo.svg b/app/assets/images/alternativ_logo.svg
new file mode 100644
index 000000000..3712b0eca
--- /dev/null
+++ b/app/assets/images/alternativ_logo.svg
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 415.21533 70.30492">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: #ffffff;
+      }
+
+      .cls-2 {
+      fill: #40a8df;
+      }
+
+      .cls-3 {
+      fill: #69b978;
+      }
+
+      .cls-4 {
+      fill: #4abbbf;
+      }
+
+      .cls-5 {
+      fill: #2b97a6;
+      }
+    </style>
+  </defs>
+  <title>logo puzzle skills v1 farbig</title>
+  <g id="Ebene_2" data-name="Ebene 2">
+    <g id="white">
+      <g id="Neues_Symbol_1" data-name="Neues Symbol 1">
+        <g>
+          <path class="cls-1" d="M11.58691,52.53148V69.58714H0V19.82152H20.2002q8.852,0,14.04785,4.5293a14.9611,14.9611,0,0,1,5.19531,11.84277,14.894,14.894,0,0,1-5.19531,11.84277q-5.1958,4.4956-14.04785,4.49512Zm0-8.88672H20.2002a7.52765,7.52765,0,0,0,5.72509-2.06738A7.40264,7.40264,0,0,0,27.89062,36.262a7.678,7.678,0,0,0-1.96533-5.43457,7.42877,7.42877,0,0,0-5.72509-2.11914H11.58691Z"/>
+          <path class="cls-1" d="M86.78223,19.82152V52.42894q0,8.51075-5.65674,13.19336-5.65723,4.68311-14.8169,4.68262-9.26293,0-14.93652-4.68262Q45.698,60.94067,45.69824,52.42894V19.82152H57.28516V52.42894q0,4.58057,2.35839,6.78516a9.395,9.395,0,0,0,6.665,2.2041,9.19183,9.19183,0,0,0,6.57959-2.1875q2.30713-2.187,2.30713-6.80176V19.82152Z"/>
+          <path class="cls-1" d="M106.98242,60.70043h22.66113v8.88671H92.76367V64.39183l22.251-35.68359H92.66113V19.82152h36.67481v4.99023Z"/>
+          <path class="cls-1" d="M147.86133,60.70043H170.523v8.88671H133.64258V64.39183L155.894,28.70824H133.54V19.82152h36.67432v4.99023Z"/>
+          <path class="cls-1" d="M187.71533,60.70043H209.146v8.88671H176.12842V19.82152h11.58691Z"/>
+          <path class="cls-1" d="M245.13623,48.2932h-19.5166V60.70043h23.00293v8.88671H214.03271V19.82152h34.65821v8.88672H225.61963V39.40648h19.5166Z"/>
+          <path class="cls-2" d="M272.51514,59.19652a3.01471,3.01471,0,0,0-1.55469-2.44336,16.77757,16.77757,0,0,0-5.65723-1.93164q-6.46-1.26416-9.74121-3.93067a8.877,8.877,0,0,1-3.28125-7.28027,10.40256,10.40256,0,0,1,4.10156-8.28906q4.10157-3.3999,11.1084-3.40039,7.38282,0,11.75782,3.29883a9.6984,9.6984,0,0,1,4.16992,8.52734l-.06836.20508H272.13916a4.54247,4.54247,0,0,0-1.11035-3.31543,4.85061,4.85061,0,0,0-3.57227-1.12793,4.69673,4.69673,0,0,0-3.042.99121,3.108,3.108,0,0,0-1.23047,2.5293,3.00747,3.00747,0,0,0,1.41895,2.49511q1.4165,1.0254,5.72461,1.84571,6.76758,1.333,10.03125,3.98242a9.11224,9.11224,0,0,1,3.26465,7.502,9.7964,9.7964,0,0,1-4.42676,8.22071q-4.42675,3.22851-11.70606,3.22949-7.5542,0-11.94629-3.82813-4.39159-3.82764-4.18652-8.54492l.06836-.20508h10.459a4.634,4.634,0,0,0,1.58887,3.794,6.99436,6.99436,0,0,0,4.32422,1.16211,5.76975,5.76975,0,0,0,3.52051-.90625A3.04289,3.04289,0,0,0,272.51514,59.19652Z"/>
+          <path class="cls-2" d="M302.55908,54.88988h-1.94824V69.58714H289.05811V16.26683h11.55273V46.17406h1.53809l7.8955-13.56934H323.272L311.7876,49.31859l13.2959,20.26855H311.92432Z"/>
+          <path class="cls-3" d="M339.40381,69.58714H327.81689V32.60472h11.58692Z"/>
+          <path class="cls-4" d="M358.57959,69.58714H346.99268V16.26683h11.58691Z"/>
+          <path class="cls-5" d="M377.75342,69.58714H366.1665V0h11.58692Z"/>
+          <path class="cls-2" d="M404.10693,59.19652a3.01469,3.01469,0,0,0-1.55468-2.44336,16.77765,16.77765,0,0,0-5.65723-1.93164q-6.46-1.26416-9.74121-3.93067a8.877,8.877,0,0,1-3.28125-7.28027,10.40256,10.40256,0,0,1,4.10156-8.28906q4.10157-3.3999,11.1084-3.40039,7.38281,0,11.75781,3.29883a9.69838,9.69838,0,0,1,4.16992,8.52734l-.06836.20508H403.731a4.54251,4.54251,0,0,0-1.11035-3.31543,4.85064,4.85064,0,0,0-3.57227-1.12793,4.69671,4.69671,0,0,0-3.042.99121,3.108,3.108,0,0,0-1.23047,2.5293,3.00748,3.00748,0,0,0,1.41894,2.49511q1.41651,1.0254,5.72461,1.84571,6.76758,1.333,10.03125,3.98242a9.11224,9.11224,0,0,1,3.26465,7.502,9.79637,9.79637,0,0,1-4.42676,8.22071q-4.42676,3.22851-11.70605,3.22949-7.55419,0-11.94629-3.82813-4.39159-3.82764-4.18652-8.54492l.06836-.20508h10.459a4.634,4.634,0,0,0,1.58887,3.794,6.99436,6.99436,0,0,0,4.32422,1.16211,5.76974,5.76974,0,0,0,3.5205-.90625A3.04287,3.04287,0,0,0,404.10693,59.19652Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index 7fbf53980..8229214a6 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -58,10 +58,6 @@ $skills-dark-blue: #1e5a96;
   }
 }
 
-pzsh-topbar {
-  background-color: $skills-blue;
-}
-
 .text-gray {
   color: $skills-text-gray;
 }
diff --git a/app/views/application/_header_tabbar.html.haml b/app/views/application/_header_tabbar.html.haml
new file mode 100644
index 000000000..7791f059b
--- /dev/null
+++ b/app/views/application/_header_tabbar.html.haml
@@ -0,0 +1,9 @@
+%pzsh-banner
+%pzsh-menu
+  %pzsh-nav{slot: "nav"}
+    - tabs.each do |tab|
+      - unless tab[:admin_only] && !admin?
+        %pzsh-nav-item{ href: tab[:path], **(active_path == tab[:path] ? {active: ''} : {})}
+          = tab[:title]
+  %div
+    = yield if defined?(do_yield) && do_yield|| false
\ No newline at end of file
diff --git a/app/views/application/_tabbar.html.haml b/app/views/application/_tabbar.html.haml
index 1a3380abe..5b7b25a93 100644
--- a/app/views/application/_tabbar.html.haml
+++ b/app/views/application/_tabbar.html.haml
@@ -7,3 +7,4 @@
                         = tab[:title]
     %div
         = yield if defined?(do_yield) && do_yield|| false
+
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 58d70c373..820fce4d6 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -10,6 +10,7 @@
     = csrf_meta_tags
     = csp_meta_tag
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
+    = stylesheet_link_tag "bundle.css", "data-turbo-track": "reload"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
     = javascript_include_tag "application", "bundle.js", type: "module"
     = favicon_link_tag "favicon.png"
@@ -20,7 +21,7 @@
           = link_to root_path, class: "text-decoration-none text-dark" do
             %div.d-flex
               %div.mb-1.mt-1
-                %img{:src=> "/assets/logo.svg",:height=>"42"}
+                %img{:src=> "/assets/alternativ_logo.svg",:height=>"42"}
               %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
           %pzsh-menu
             %div{slot: 'actions'}
@@ -61,9 +62,9 @@
               - elsif devise_mapping.omniauthable?
                 =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
           %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
-        %div.puzzle-header
-          %div.d-flex.h-100
-            = render "application/tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
+
+        %div
+          = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           %span#flash-messages

From 310eb396b60fa0973506b263f7a20502cef89a86 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 16 Apr 2025 09:50:14 +0200
Subject: [PATCH 03/21] Fix styling of person profile and scrolling controller

---
 app/assets/stylesheets/styles.scss      | 2 +-
 app/views/application/_tabbar.html.haml | 1 -
 app/views/layouts/application.html.haml | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index 8229214a6..ebf0db24d 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -294,7 +294,7 @@ $skills-dark-blue: #1e5a96;
 
 .profile-header-and-tabs {
   position: sticky;
-  top: 80px;
+  top: 98px;
   background-color: white;
   z-index: 2;
 }
diff --git a/app/views/application/_tabbar.html.haml b/app/views/application/_tabbar.html.haml
index 5b7b25a93..1a3380abe 100644
--- a/app/views/application/_tabbar.html.haml
+++ b/app/views/application/_tabbar.html.haml
@@ -7,4 +7,3 @@
                         = tab[:title]
     %div
         = yield if defined?(do_yield) && do_yield|| false
-
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 820fce4d6..90c04ad99 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -11,8 +11,8 @@
     = csp_meta_tag
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = stylesheet_link_tag "bundle.css", "data-turbo-track": "reload"
+    = javascript_include_tag "bundle.js", type: "module"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
-    = javascript_include_tag "application", "bundle.js", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
     %div.content{"data-skills-empty-space-target": "container"}

From 9c82bbfb5dbb58a8d837842dc79ef55d5a40915f Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 16 Apr 2025 10:54:25 +0200
Subject: [PATCH 04/21] Set fixed height on the puzzle shell banner

---
 app/assets/stylesheets/styles.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index ebf0db24d..f13c7576b 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -395,6 +395,10 @@ a > img {
   width: 5%;
 }
 
+pzsh-banner {
+  height: 50px;
+}
+
 .w-45 {
   width: 45%;
 }

From 6ca2d3fd4e843e4eb56a3131ba4c5f8591612086 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 16 Apr 2025 13:10:16 +0200
Subject: [PATCH 05/21] Add explanatory comments for better overview in
 application haml and bring back (admin) addition for admin names, fix all
 failing specs

---
 app/views/layouts/application.html.haml  | 13 ++++++++++---
 spec/features/edit_people_skills_spec.rb |  4 ++--
 spec/features/routing_spec.rb            |  3 ++-
 spec/features/tabbar_spec.rb             |  6 +++---
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 90c04ad99..b30ed406b 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -26,30 +26,37 @@
           %pzsh-menu
             %div{slot: 'actions'}
               %pzsh-menu-dropdown
+                -# Language selector
                 %div{slot: 'toggle'}
                   = language(I18n.locale.to_s.upcase)
                 %div{slot: 'items'}
                   - language_selector.each do |lang_name, switch_url|
                     %pzsh-menu-dropdown-item{href: switch_url}
                       = lang_name
+              -# Devise/Mockdata
               - if Rails.env.development?
-                %span#username.text-white
+                %span.text-white
                   - if devise?
                     = ti("devise.devise")
                   - else
                     = ti("devise.mockdata")
+              -# Admin panel
               - if conf_admin?
                 %pzsh-menu-action{href: admin_index_path}
                   %pzsh-icon{name: 'sliders-v-alt'}
                   = ti("devise.admin_panel")
+              -# Help area
               %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
                 %pzsh-icon{name: 'question-circle'}
                 Help
+              -# User profile dropdown
               - if auth_user_signed_in?
                 %pzsh-menu-dropdown{href: '#'}
                   %div{slot: 'toggle'}
                     %pzsh-icon{name: 'user'}
-                    = current_auth_user&.name || current_auth_user&.email
+                    %span#username
+                      = current_auth_user&.name || current_auth_user&.email
+                      = ti 'devise.admin' if admin?
                   %div{slot: 'items'}
                     - if devise?
                       %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
@@ -59,7 +66,7 @@
                       %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
                         %pzsh-icon{name: 'setting'}
                         = ti("devise.profile")
-              - elsif devise_mapping.omniauthable?
+              - elsif devise? && devise_mapping.omniauthable?
                 =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
           %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
 
diff --git a/spec/features/edit_people_skills_spec.rb b/spec/features/edit_people_skills_spec.rb
index ef1124a44..78527e6ca 100644
--- a/spec/features/edit_people_skills_spec.rb
+++ b/spec/features/edit_people_skills_spec.rb
@@ -12,8 +12,8 @@
       bob = people(:bob)
       visit person_path(bob)
 
-      expect(page).to have_css('.nav-link', text: 'Skills', count: 2)
-      page.all('.nav-link', text: 'Skills')[1].click
+      expect(page).to have_css('.nav-link', text: 'Skills')
+      page.first('.nav-link', text: 'Skills').click
     end
 
     it 'displays people-skills' do
diff --git a/spec/features/routing_spec.rb b/spec/features/routing_spec.rb
index 7c27ce3ef..4aa900aa3 100644
--- a/spec/features/routing_spec.rb
+++ b/spec/features/routing_spec.rb
@@ -32,7 +32,8 @@
       end
 
       it "Should open profile with correct language and preserve language in cookie" do
-        select 'Italiano', from: "i18n_language"
+        page.first('pzsh-menu-dropdown').click
+        page.find('pzsh-menu-dropdown-item', text: 'Italiano').click
 
         select_from_slim_select("#person_id_person", bob.name)
         expect(page).to have_text("Dati personali")
diff --git a/spec/features/tabbar_spec.rb b/spec/features/tabbar_spec.rb
index 2266ba211..2fbb38fea 100644
--- a/spec/features/tabbar_spec.rb
+++ b/spec/features/tabbar_spec.rb
@@ -41,7 +41,7 @@
           title = hash[:title]
 
           it "Should highlight '#{hash[:title]}' tab using click" do
-            click_link(href: eval(path_helper))
+            page.find("pzsh-nav-item[href='#{eval(path_helper)}']").click
             check_highlighted_tab(t title)
           end
 
@@ -52,7 +52,7 @@
         end
 
         def check_highlighted_tab(text)
-          expect(page).to have_selector("div.skills-navbar .btn .nav-link.active", text: text)
+          expect(page).to have_selector("pzsh-nav-item[active]", text: text)
         end
       end
 
@@ -96,7 +96,7 @@ def check_highlighted_tab(text)
           admin_only = hash[:admin_only]
 
           it "should #{'not' if admin_only} display #{title} tab as user" do
-            expect(page.has_selector?("div.skills-navbar .btn", text: (t title), wait: 0.1)).to eql(!admin_only)
+            expect(page.has_selector?("pzsh-nav-item", text: (t title), wait: 0.1)).to eql(!admin_only)
           end
         end
 

From b424a688079c0da8310d61ae1c36732136cb0047 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 16 Apr 2025 13:43:56 +0200
Subject: [PATCH 06/21] Replace local stylesheet and js links for puzzleshell
 with cdn links

---
 app/views/layouts/application.html.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index b30ed406b..a5d3643b4 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -10,9 +10,9 @@
     = csrf_meta_tags
     = csp_meta_tag
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
-    = stylesheet_link_tag "bundle.css", "data-turbo-track": "reload"
-    = javascript_include_tag "bundle.js", type: "module"
+    = stylesheet_link_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/style.css"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
+    = javascript_include_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
     %div.content{"data-skills-empty-space-target": "container"}

From bebaf1caf52061381e4c4034590403f5a8b13d4e Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Thu, 17 Apr 2025 14:12:03 +0200
Subject: [PATCH 07/21] Add additional check to routing spec to make it work in
 chrome

---
 spec/features/routing_spec.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/spec/features/routing_spec.rb b/spec/features/routing_spec.rb
index 4aa900aa3..d1188b66b 100644
--- a/spec/features/routing_spec.rb
+++ b/spec/features/routing_spec.rb
@@ -34,6 +34,7 @@
       it "Should open profile with correct language and preserve language in cookie" do
         page.first('pzsh-menu-dropdown').click
         page.find('pzsh-menu-dropdown-item', text: 'Italiano').click
+        expect(page).to have_content('Profilo')
 
         select_from_slim_select("#person_id_person", bob.name)
         expect(page).to have_text("Dati personali")

From 8248426e2d920cf58292cf977ea3d16092467ba7 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Tue, 22 Apr 2025 13:07:31 +0200
Subject: [PATCH 08/21] Fix puzzle shell css import and fix order of js and
 stylesheet link tags

---
 app/views/layouts/application.html.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index a5d3643b4..054c22d94 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -9,10 +9,10 @@
     %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
     = csrf_meta_tags
     = csp_meta_tag
+    = stylesheet_link_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.css"
+    = javascript_include_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
-    = stylesheet_link_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/style.css"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
-    = javascript_include_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
     %div.content{"data-skills-empty-space-target": "container"}

From 5ca5695bb1ff41ba31f889eab30174f398463e83 Mon Sep 17 00:00:00 2001
From: Nevio Di Gennaro <digennaro@puzzle.ch>
Date: Tue, 29 Apr 2025 13:41:39 +0200
Subject: [PATCH 09/21] Make username only visible in user menu

---
 app/views/layouts/application.html.haml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 054c22d94..b234402fd 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -54,9 +54,6 @@
                 %pzsh-menu-dropdown{href: '#'}
                   %div{slot: 'toggle'}
                     %pzsh-icon{name: 'user'}
-                    %span#username
-                      = current_auth_user&.name || current_auth_user&.email
-                      = ti 'devise.admin' if admin?
                   %div{slot: 'items'}
                     - if devise?
                       %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
@@ -65,7 +62,9 @@
                     - unless find_person_by_auth_user.nil?
                       %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
                         %pzsh-icon{name: 'setting'}
-                        = ti("devise.profile")
+                        %span#username
+                          = current_auth_user&.name || current_auth_user&.email
+                          = ti 'devise.admin' if admin?
               - elsif devise? && devise_mapping.omniauthable?
                 =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
           %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}

From 41fbebd8ed97575bfffb184321839742a0881c6a Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 30 Apr 2025 15:49:33 +0200
Subject: [PATCH 10/21] Move pzsh-menu under pzsh-topbar and display name as
 own dropdown item over the my profile button to always display it

---
 app/views/layouts/application.html.haml | 89 ++++++++++++-------------
 1 file changed, 44 insertions(+), 45 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index b234402fd..dbd6d38da 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -23,54 +23,53 @@
               %div.mb-1.mt-1
                 %img{:src=> "/assets/alternativ_logo.svg",:height=>"42"}
               %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
-          %pzsh-menu
-            %div{slot: 'actions'}
-              %pzsh-menu-dropdown
-                -# Language selector
+        %pzsh-menu
+          %div{slot: 'actions'}
+            %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
+            %pzsh-menu-dropdown
+              -# Language selector
+              %div{slot: 'toggle'}
+                = language(I18n.locale.to_s.upcase)
+              %div{slot: 'items'}
+                - language_selector.each do |lang_name, switch_url|
+                  %pzsh-menu-dropdown-item{href: switch_url}
+                    = lang_name
+            -# Devise/Mockdata
+            - if Rails.env.development?
+              %span.text-white
+                - if devise?
+                  = ti("devise.devise")
+                - else
+                  = ti("devise.mockdata")
+            -# Admin panel
+            - if conf_admin?
+              %pzsh-menu-action{href: admin_index_path}
+                %pzsh-icon{name: 'sliders-v-alt'}
+                = ti("devise.admin_panel")
+            -# Help area
+            %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
+              %pzsh-icon{name: 'question-circle'}
+              Help
+            -# User profile dropdown
+            - if auth_user_signed_in?
+              %pzsh-menu-dropdown{href: '#'}
                 %div{slot: 'toggle'}
-                  = language(I18n.locale.to_s.upcase)
+                  %pzsh-icon{name: 'user'}
                 %div{slot: 'items'}
-                  - language_selector.each do |lang_name, switch_url|
-                    %pzsh-menu-dropdown-item{href: switch_url}
-                      = lang_name
-              -# Devise/Mockdata
-              - if Rails.env.development?
-                %span.text-white
+                  %pzsh-menu-dropdown-item#username
+                    = current_auth_user&.name || current_auth_user&.email
+                    = ti 'devise.admin' if admin?
+                  - unless find_person_by_auth_user.nil?
+                    %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
+                      %pzsh-icon{name: 'setting'}
+                      = ti('devise.profile')
                   - if devise?
-                    = ti("devise.devise")
-                  - else
-                    = ti("devise.mockdata")
-              -# Admin panel
-              - if conf_admin?
-                %pzsh-menu-action{href: admin_index_path}
-                  %pzsh-icon{name: 'sliders-v-alt'}
-                  = ti("devise.admin_panel")
-              -# Help area
-              %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
-                %pzsh-icon{name: 'question-circle'}
-                Help
-              -# User profile dropdown
-              - if auth_user_signed_in?
-                %pzsh-menu-dropdown{href: '#'}
-                  %div{slot: 'toggle'}
-                    %pzsh-icon{name: 'user'}
-                  %div{slot: 'items'}
-                    - if devise?
-                      %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
-                        %pzsh-icon{name: 'sign-out-alt'}
-                        = ti("devise.sign_out")
-                    - unless find_person_by_auth_user.nil?
-                      %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
-                        %pzsh-icon{name: 'setting'}
-                        %span#username
-                          = current_auth_user&.name || current_auth_user&.email
-                          = ti 'devise.admin' if admin?
-              - elsif devise? && devise_mapping.omniauthable?
-                =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
-          %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
-
-        %div
-          = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
+                    %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
+                      %pzsh-icon{name: 'sign-out-alt'}
+                      = ti("devise.sign_out")
+            - elsif devise? && devise_mapping.omniauthable?
+              =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
+        = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           %span#flash-messages

From 4d8a2ba253fe57d0fed68f89e8cb3eaea694de70 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Fri, 2 May 2025 12:48:07 +0200
Subject: [PATCH 11/21] Wrap page content in pzsh-container and add style
 pzsh-backdrop to be in background

---
 app/assets/stylesheets/styles.scss      |   8 +-
 app/views/layouts/application.html.haml | 103 ++++++++++++------------
 2 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index f13c7576b..31b41d983 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -19,7 +19,7 @@ $skills-dark-blue: #1e5a96;
 }
 
 .content {
-  max-width: 80%;
+  width: 80%;
   flex-grow: 1;
 }
 
@@ -411,3 +411,9 @@ pzsh-banner {
 .model-form-container label {
   margin-bottom: 0;
 }
+
+pzsh-backdrop {
+  z-index: -1;
+  width: 80%;
+  left: 10%;
+}
\ No newline at end of file
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index dbd6d38da..5564cbabd 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -15,61 +15,60 @@
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
-    %div.content{"data-skills-empty-space-target": "container"}
-      %div.position-sticky.top-0.z-3
-        %pzsh-topbar
-          = link_to root_path, class: "text-decoration-none text-dark" do
-            %div.d-flex
-              %div.mb-1.mt-1
-                %img{:src=> "/assets/alternativ_logo.svg",:height=>"42"}
-              %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
-        %pzsh-menu
-          %div{slot: 'actions'}
-            %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
-            %pzsh-menu-dropdown
-              -# Language selector
+    %pzsh-container.content.position-fixed{"data-skills-empty-space-target": "container"}
+      %pzsh-topbar
+        = link_to root_path, class: "text-decoration-none text-dark" do
+          %div.d-flex
+            %div.mb-1.mt-1
+              %img{:src=> "/assets/alternativ_logo.svg",:height=>"42"}
+            %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
+      %pzsh-menu
+        %div{slot: 'actions'}
+          %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
+          %pzsh-menu-dropdown
+            -# Language selector
+            %div{slot: 'toggle'}
+              = language(I18n.locale.to_s.upcase)
+            %div{slot: 'items'}
+              - language_selector.each do |lang_name, switch_url|
+                %pzsh-menu-dropdown-item{href: switch_url}
+                  = lang_name
+          -# Devise/Mockdata
+          - if Rails.env.development?
+            %span.text-white
+              - if devise?
+                = ti("devise.devise")
+              - else
+                = ti("devise.mockdata")
+          -# Admin panel
+          - if conf_admin?
+            %pzsh-menu-action{href: admin_index_path}
+              %pzsh-icon{name: 'sliders-v-alt'}
+              = ti("devise.admin_panel")
+          -# Help area
+          %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
+            %pzsh-icon{name: 'question-circle'}
+            Help
+          -# User profile dropdown
+          - if auth_user_signed_in?
+            %pzsh-menu-dropdown{href: '#'}
               %div{slot: 'toggle'}
-                = language(I18n.locale.to_s.upcase)
+                %pzsh-icon{name: 'user'}
               %div{slot: 'items'}
-                - language_selector.each do |lang_name, switch_url|
-                  %pzsh-menu-dropdown-item{href: switch_url}
-                    = lang_name
-            -# Devise/Mockdata
-            - if Rails.env.development?
-              %span.text-white
+                %pzsh-menu-dropdown-item#username
+                  = current_auth_user&.name || current_auth_user&.email
+                  = ti 'devise.admin' if admin?
+                - unless find_person_by_auth_user.nil?
+                  %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
+                    %pzsh-icon{name: 'setting'}
+                    = ti('devise.profile')
                 - if devise?
-                  = ti("devise.devise")
-                - else
-                  = ti("devise.mockdata")
-            -# Admin panel
-            - if conf_admin?
-              %pzsh-menu-action{href: admin_index_path}
-                %pzsh-icon{name: 'sliders-v-alt'}
-                = ti("devise.admin_panel")
-            -# Help area
-            %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
-              %pzsh-icon{name: 'question-circle'}
-              Help
-            -# User profile dropdown
-            - if auth_user_signed_in?
-              %pzsh-menu-dropdown{href: '#'}
-                %div{slot: 'toggle'}
-                  %pzsh-icon{name: 'user'}
-                %div{slot: 'items'}
-                  %pzsh-menu-dropdown-item#username
-                    = current_auth_user&.name || current_auth_user&.email
-                    = ti 'devise.admin' if admin?
-                  - unless find_person_by_auth_user.nil?
-                    %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
-                      %pzsh-icon{name: 'setting'}
-                      = ti('devise.profile')
-                  - if devise?
-                    %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
-                      %pzsh-icon{name: 'sign-out-alt'}
-                      = ti("devise.sign_out")
-            - elsif devise? && devise_mapping.omniauthable?
-              =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
-        = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
+                  %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
+                    %pzsh-icon{name: 'sign-out-alt'}
+                    = ti("devise.sign_out")
+          - elsif devise? && devise_mapping.omniauthable?
+            =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
+      = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           %span#flash-messages

From 428fc8b0a223452f89ad2aa2e099aaf4091b0678 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Fri, 2 May 2025 14:28:01 +0200
Subject: [PATCH 12/21] Use puzzle skills logo from puzzleshell specification
 bring back scrolling

---
 app/assets/images/alternativ_logo.svg   |  46 -----------
 app/assets/images/pzsh_skills_logo.svg  |   6 ++
 app/views/layouts/application.html.haml | 103 ++++++++++++------------
 3 files changed, 58 insertions(+), 97 deletions(-)
 delete mode 100644 app/assets/images/alternativ_logo.svg
 create mode 100644 app/assets/images/pzsh_skills_logo.svg

diff --git a/app/assets/images/alternativ_logo.svg b/app/assets/images/alternativ_logo.svg
deleted file mode 100644
index 3712b0eca..000000000
--- a/app/assets/images/alternativ_logo.svg
+++ /dev/null
@@ -1,46 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 415.21533 70.30492">
-  <defs>
-    <style>
-      .cls-1 {
-      fill: #ffffff;
-      }
-
-      .cls-2 {
-      fill: #40a8df;
-      }
-
-      .cls-3 {
-      fill: #69b978;
-      }
-
-      .cls-4 {
-      fill: #4abbbf;
-      }
-
-      .cls-5 {
-      fill: #2b97a6;
-      }
-    </style>
-  </defs>
-  <title>logo puzzle skills v1 farbig</title>
-  <g id="Ebene_2" data-name="Ebene 2">
-    <g id="white">
-      <g id="Neues_Symbol_1" data-name="Neues Symbol 1">
-        <g>
-          <path class="cls-1" d="M11.58691,52.53148V69.58714H0V19.82152H20.2002q8.852,0,14.04785,4.5293a14.9611,14.9611,0,0,1,5.19531,11.84277,14.894,14.894,0,0,1-5.19531,11.84277q-5.1958,4.4956-14.04785,4.49512Zm0-8.88672H20.2002a7.52765,7.52765,0,0,0,5.72509-2.06738A7.40264,7.40264,0,0,0,27.89062,36.262a7.678,7.678,0,0,0-1.96533-5.43457,7.42877,7.42877,0,0,0-5.72509-2.11914H11.58691Z"/>
-          <path class="cls-1" d="M86.78223,19.82152V52.42894q0,8.51075-5.65674,13.19336-5.65723,4.68311-14.8169,4.68262-9.26293,0-14.93652-4.68262Q45.698,60.94067,45.69824,52.42894V19.82152H57.28516V52.42894q0,4.58057,2.35839,6.78516a9.395,9.395,0,0,0,6.665,2.2041,9.19183,9.19183,0,0,0,6.57959-2.1875q2.30713-2.187,2.30713-6.80176V19.82152Z"/>
-          <path class="cls-1" d="M106.98242,60.70043h22.66113v8.88671H92.76367V64.39183l22.251-35.68359H92.66113V19.82152h36.67481v4.99023Z"/>
-          <path class="cls-1" d="M147.86133,60.70043H170.523v8.88671H133.64258V64.39183L155.894,28.70824H133.54V19.82152h36.67432v4.99023Z"/>
-          <path class="cls-1" d="M187.71533,60.70043H209.146v8.88671H176.12842V19.82152h11.58691Z"/>
-          <path class="cls-1" d="M245.13623,48.2932h-19.5166V60.70043h23.00293v8.88671H214.03271V19.82152h34.65821v8.88672H225.61963V39.40648h19.5166Z"/>
-          <path class="cls-2" d="M272.51514,59.19652a3.01471,3.01471,0,0,0-1.55469-2.44336,16.77757,16.77757,0,0,0-5.65723-1.93164q-6.46-1.26416-9.74121-3.93067a8.877,8.877,0,0,1-3.28125-7.28027,10.40256,10.40256,0,0,1,4.10156-8.28906q4.10157-3.3999,11.1084-3.40039,7.38282,0,11.75782,3.29883a9.6984,9.6984,0,0,1,4.16992,8.52734l-.06836.20508H272.13916a4.54247,4.54247,0,0,0-1.11035-3.31543,4.85061,4.85061,0,0,0-3.57227-1.12793,4.69673,4.69673,0,0,0-3.042.99121,3.108,3.108,0,0,0-1.23047,2.5293,3.00747,3.00747,0,0,0,1.41895,2.49511q1.4165,1.0254,5.72461,1.84571,6.76758,1.333,10.03125,3.98242a9.11224,9.11224,0,0,1,3.26465,7.502,9.7964,9.7964,0,0,1-4.42676,8.22071q-4.42675,3.22851-11.70606,3.22949-7.5542,0-11.94629-3.82813-4.39159-3.82764-4.18652-8.54492l.06836-.20508h10.459a4.634,4.634,0,0,0,1.58887,3.794,6.99436,6.99436,0,0,0,4.32422,1.16211,5.76975,5.76975,0,0,0,3.52051-.90625A3.04289,3.04289,0,0,0,272.51514,59.19652Z"/>
-          <path class="cls-2" d="M302.55908,54.88988h-1.94824V69.58714H289.05811V16.26683h11.55273V46.17406h1.53809l7.8955-13.56934H323.272L311.7876,49.31859l13.2959,20.26855H311.92432Z"/>
-          <path class="cls-3" d="M339.40381,69.58714H327.81689V32.60472h11.58692Z"/>
-          <path class="cls-4" d="M358.57959,69.58714H346.99268V16.26683h11.58691Z"/>
-          <path class="cls-5" d="M377.75342,69.58714H366.1665V0h11.58692Z"/>
-          <path class="cls-2" d="M404.10693,59.19652a3.01469,3.01469,0,0,0-1.55468-2.44336,16.77765,16.77765,0,0,0-5.65723-1.93164q-6.46-1.26416-9.74121-3.93067a8.877,8.877,0,0,1-3.28125-7.28027,10.40256,10.40256,0,0,1,4.10156-8.28906q4.10157-3.3999,11.1084-3.40039,7.38281,0,11.75781,3.29883a9.69838,9.69838,0,0,1,4.16992,8.52734l-.06836.20508H403.731a4.54251,4.54251,0,0,0-1.11035-3.31543,4.85064,4.85064,0,0,0-3.57227-1.12793,4.69671,4.69671,0,0,0-3.042.99121,3.108,3.108,0,0,0-1.23047,2.5293,3.00748,3.00748,0,0,0,1.41894,2.49511q1.41651,1.0254,5.72461,1.84571,6.76758,1.333,10.03125,3.98242a9.11224,9.11224,0,0,1,3.26465,7.502,9.79637,9.79637,0,0,1-4.42676,8.22071q-4.42676,3.22851-11.70605,3.22949-7.55419,0-11.94629-3.82813-4.39159-3.82764-4.18652-8.54492l.06836-.20508h10.459a4.634,4.634,0,0,0,1.58887,3.794,6.99436,6.99436,0,0,0,4.32422,1.16211,5.76974,5.76974,0,0,0,3.5205-.90625A3.04287,3.04287,0,0,0,404.10693,59.19652Z"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/app/assets/images/pzsh_skills_logo.svg b/app/assets/images/pzsh_skills_logo.svg
new file mode 100644
index 000000000..7d087d738
--- /dev/null
+++ b/app/assets/images/pzsh_skills_logo.svg
@@ -0,0 +1,6 @@
+<svg width="153" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M107.914 20.016c0-.443-.156-.782-.469-1.016-.312-.24-.875-.49-1.687-.75-.813-.266-1.456-.526-1.93-.781-1.292-.698-1.937-1.638-1.937-2.82 0-.615.171-1.162.515-1.641.349-.485.847-.862 1.492-1.133.651-.27 1.381-.406 2.188-.406.812 0 1.536.148 2.172.445.635.292 1.127.706 1.476 1.242.355.537.532 1.146.532 1.828h-2.344c0-.52-.164-.924-.492-1.21-.328-.292-.789-.438-1.383-.438-.573 0-1.018.122-1.336.367-.318.24-.477.557-.477.953 0 .37.185.68.555.93.375.25.925.484 1.649.703 1.333.401 2.304.898 2.914 1.492.609.594.914 1.334.914 2.219 0 .984-.373 1.758-1.118 2.32-.744.558-1.747.836-3.007.836-.875 0-1.672-.159-2.391-.476-.719-.323-1.268-.763-1.648-1.32-.375-.558-.563-1.204-.563-1.938h2.352c0 1.255.75 1.883 2.25 1.883.557 0 .992-.112 1.304-.336.313-.23.469-.547.469-.953zm7.508-1.578l-1.219 1.312V23h-2.344V11.625h2.344v5.156l1.031-1.414 2.899-3.742h2.883l-4.039 5.055 4.156 6.32h-2.789l-2.922-4.563zM124.508 23h-2.344V11.625h2.344V23zm4.523-1.883h4.977V23h-7.32V11.625h2.343v9.492zm8.672 0h4.977V23h-7.321V11.625h2.344v9.492zm12.227-1.101c0-.443-.157-.782-.469-1.016-.313-.24-.875-.49-1.688-.75-.812-.266-1.455-.526-1.929-.781-1.292-.698-1.938-1.638-1.938-2.82 0-.615.172-1.162.516-1.641.349-.485.846-.862 1.492-1.133.651-.27 1.38-.406 2.188-.406.812 0 1.536.148 2.171.445.636.292 1.128.706 1.477 1.242.354.537.531 1.146.531 1.828h-2.343c0-.52-.165-.924-.493-1.21-.328-.292-.789-.438-1.383-.438-.572 0-1.018.122-1.335.367-.318.24-.477.557-.477.953 0 .37.185.68.555.93.375.25.924.484 1.648.703 1.333.401 2.305.898 2.914 1.492.61.594.914 1.334.914 2.219 0 .984-.372 1.758-1.117 2.32-.745.558-1.747.836-3.008.836-.875 0-1.672-.159-2.39-.476-.719-.323-1.269-.763-1.649-1.32-.375-.558-.562-1.204-.562-1.938h2.351c0 1.255.75 1.883 2.25 1.883.558 0 .992-.112 1.305-.336.312-.23.469-.547.469-.953z"
+        fill="#69B978"></path>
+  <path d="M27.45 4.686c-6.28-6.248-16.461-6.248-22.74 0-6.28 6.249-6.28 16.38 0 22.628 6.279 6.248 16.46 6.248 22.74 0 3.015-3 4.71-7.07 4.71-11.314a15.96 15.96 0 00-4.71-11.314zm-1.24 5.527C25.686 11.77 24 16.442 24 16.442c-.564 1.523-3.863 1.51-8.342 1.523 0 0 2.894-.407 3.73-2.015a38.073 38.073 0 001.822-4.864c-4.455 0-4.853 1.553-4.853 1.553s-2.814 7.836-3.82 10.727c-7.804 0-6.557-3.835-6.557-3.835L9.884 8.635h7.905l-.527 1.57s.643-1.57 5.002-1.57c.002 0 4.471.019 3.946 1.578zM41.45 19.15v4.023h-2.746V11.439h4.787a4.907 4.907 0 013.329 1.067 3.519 3.519 0 011.231 2.8 3.505 3.505 0 01-1.231 2.793 4.938 4.938 0 01-3.329 1.059l-2.042-.008zm0-2.095h2.041c.501.035.994-.142 1.356-.488.316-.34.484-.79.465-1.253a1.802 1.802 0 00-.465-1.281 1.762 1.762 0 00-1.356-.5H41.45v3.522zM58.88 11.437v7.689a3.805 3.805 0 01-1.34 3.112 5.347 5.347 0 01-3.51 1.103 5.402 5.402 0 01-3.54-1.103 3.8 3.8 0 01-1.34-3.112v-7.69h2.747v7.69a2.086 2.086 0 00.559 1.6c.439.37 1.005.556 1.58.52a2.185 2.185 0 001.558-.516 2.111 2.111 0 00.547-1.6v-7.693h2.74zM63.33 21.077h5.37v2.096h-8.74v-1.226l5.273-8.414h-5.297v-2.096h8.691v1.177l-5.298 8.463zM72.927 21.077h5.37v2.096h-8.74v-1.226l5.274-8.414h-5.297v-2.096h8.69v1.177l-5.297 8.463zM82.07 21.077h5.079v2.096h-7.823V11.439h2.747l-.003 9.638zM95.471 18.151H90.85v2.926h5.45v2.096h-8.2V11.439h8.213v2.096H90.85v2.523h4.625l-.004 2.093z"
+        fill="#fff"></path>
+</svg>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 5564cbabd..cabbcc159 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -15,60 +15,61 @@
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
-    %pzsh-container.content.position-fixed{"data-skills-empty-space-target": "container"}
-      %pzsh-topbar
-        = link_to root_path, class: "text-decoration-none text-dark" do
-          %div.d-flex
-            %div.mb-1.mt-1
-              %img{:src=> "/assets/alternativ_logo.svg",:height=>"42"}
-            %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
-      %pzsh-menu
-        %div{slot: 'actions'}
-          %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
-          %pzsh-menu-dropdown
-            -# Language selector
-            %div{slot: 'toggle'}
-              = language(I18n.locale.to_s.upcase)
-            %div{slot: 'items'}
-              - language_selector.each do |lang_name, switch_url|
-                %pzsh-menu-dropdown-item{href: switch_url}
-                  = lang_name
-          -# Devise/Mockdata
-          - if Rails.env.development?
-            %span.text-white
-              - if devise?
-                = ti("devise.devise")
-              - else
-                = ti("devise.mockdata")
-          -# Admin panel
-          - if conf_admin?
-            %pzsh-menu-action{href: admin_index_path}
-              %pzsh-icon{name: 'sliders-v-alt'}
-              = ti("devise.admin_panel")
-          -# Help area
-          %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
-            %pzsh-icon{name: 'question-circle'}
-            Help
-          -# User profile dropdown
-          - if auth_user_signed_in?
-            %pzsh-menu-dropdown{href: '#'}
+    %pzsh-container.content.position-absolute.d-inline-block{"data-skills-empty-space-target": "container"}
+      %div.position-sticky.top-0.z-3
+        %pzsh-topbar
+          = link_to root_path, class: "text-decoration-none text-dark" do
+            %div.d-flex
+              %div.mb-1.mt-1
+                %img{:src=> "/assets/pzsh_skills_logo.svg",:height=>"42"}
+              %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
+        %pzsh-menu
+          %div{slot: 'actions'}
+            %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
+            %pzsh-menu-dropdown
+              -# Language selector
               %div{slot: 'toggle'}
-                %pzsh-icon{name: 'user'}
+                = language(I18n.locale.to_s.upcase)
               %div{slot: 'items'}
-                %pzsh-menu-dropdown-item#username
-                  = current_auth_user&.name || current_auth_user&.email
-                  = ti 'devise.admin' if admin?
-                - unless find_person_by_auth_user.nil?
-                  %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
-                    %pzsh-icon{name: 'setting'}
-                    = ti('devise.profile')
+                - language_selector.each do |lang_name, switch_url|
+                  %pzsh-menu-dropdown-item{href: switch_url}
+                    = lang_name
+            -# Devise/Mockdata
+            - if Rails.env.development?
+              %span.text-white
                 - if devise?
-                  %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
-                    %pzsh-icon{name: 'sign-out-alt'}
-                    = ti("devise.sign_out")
-          - elsif devise? && devise_mapping.omniauthable?
-            =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
-      = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
+                  = ti("devise.devise")
+                - else
+                  = ti("devise.mockdata")
+            -# Admin panel
+            - if conf_admin?
+              %pzsh-menu-action{href: admin_index_path}
+                %pzsh-icon{name: 'sliders-v-alt'}
+                = ti("devise.admin_panel")
+            -# Help area
+            %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
+              %pzsh-icon{name: 'question-circle'}
+              Help
+            -# User profile dropdown
+            - if auth_user_signed_in?
+              %pzsh-menu-dropdown{href: '#'}
+                %div{slot: 'toggle'}
+                  %pzsh-icon{name: 'user'}
+                %div{slot: 'items'}
+                  %pzsh-menu-dropdown-item#username
+                    = current_auth_user&.name || current_auth_user&.email
+                    = ti 'devise.admin' if admin?
+                  - unless find_person_by_auth_user.nil?
+                    %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
+                      %pzsh-icon{name: 'setting'}
+                      = ti('devise.profile')
+                  - if devise?
+                    %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
+                      %pzsh-icon{name: 'sign-out-alt'}
+                      = ti("devise.sign_out")
+            - elsif devise? && devise_mapping.omniauthable?
+              =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
+        = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           %span#flash-messages

From 5f8fa9dd6047311e69ed369888c96b00d2e0bb9f Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Fri, 2 May 2025 16:27:00 +0200
Subject: [PATCH 13/21] Fix visuals and positioning of pzsh topbar and banner

---
 app/assets/stylesheets/styles.scss             | 13 +++----------
 app/views/application/_header_tabbar.html.haml | 16 +++++++---------
 app/views/layouts/application.html.haml        | 18 +++++++++---------
 3 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index 31b41d983..2fbb8d540 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -19,8 +19,7 @@ $skills-dark-blue: #1e5a96;
 }
 
 .content {
-  width: 80%;
-  flex-grow: 1;
+  min-width: 80%;
 }
 
 .cursor-pointer {
@@ -395,10 +394,6 @@ a > img {
   width: 5%;
 }
 
-pzsh-banner {
-  height: 50px;
-}
-
 .w-45 {
   width: 45%;
 }
@@ -412,8 +407,6 @@ pzsh-banner {
   margin-bottom: 0;
 }
 
-pzsh-backdrop {
-  z-index: -1;
-  width: 80%;
-  left: 10%;
+.z-top {
+  z-index: 9999999;
 }
\ No newline at end of file
diff --git a/app/views/application/_header_tabbar.html.haml b/app/views/application/_header_tabbar.html.haml
index 7791f059b..59945b547 100644
--- a/app/views/application/_header_tabbar.html.haml
+++ b/app/views/application/_header_tabbar.html.haml
@@ -1,9 +1,7 @@
-%pzsh-banner
-%pzsh-menu
-  %pzsh-nav{slot: "nav"}
-    - tabs.each do |tab|
-      - unless tab[:admin_only] && !admin?
-        %pzsh-nav-item{ href: tab[:path], **(active_path == tab[:path] ? {active: ''} : {})}
-          = tab[:title]
-  %div
-    = yield if defined?(do_yield) && do_yield|| false
\ No newline at end of file
+%pzsh-nav{slot: "nav"}
+  - tabs.each do |tab|
+    - unless tab[:admin_only] && !admin?
+      %pzsh-nav-item{ href: tab[:path], **(active_path == tab[:path] ? {active: ''} : {})}
+        = tab[:title]
+%div
+  = yield if defined?(do_yield) && do_yield|| false
\ No newline at end of file
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index cabbcc159..12a8368fa 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -15,14 +15,14 @@
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
-    %pzsh-container.content.position-absolute.d-inline-block{"data-skills-empty-space-target": "container"}
-      %div.position-sticky.top-0.z-3
-        %pzsh-topbar
-          = link_to root_path, class: "text-decoration-none text-dark" do
-            %div.d-flex
-              %div.mb-1.mt-1
-                %img{:src=> "/assets/pzsh_skills_logo.svg",:height=>"42"}
-              %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
+    %div.content{"data-skills-empty-space-target": "container"}
+      %div.position-sticky.top-0.z-top
+        %pzsh-topbar{href: root_path}
+          %img{:src=> "/assets/pzsh_skills_logo.svg"}
+          %div.d-flex
+            %div.mb-1.mt-1
+            %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
+        %pzsh-banner
         %pzsh-menu
           %div{slot: 'actions'}
             %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
@@ -69,7 +69,7 @@
                       = ti("devise.sign_out")
             - elsif devise? && devise_mapping.omniauthable?
               =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
-        = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
+          = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           %span#flash-messages

From 3ccffcf327d1118f0116d211d13c91e1a785fb6a Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Fri, 2 May 2025 16:53:17 +0200
Subject: [PATCH 14/21] Hide easteregg when pzsh goes into mobile mode and fix
 selection of current nav tab when navigating back with logo

---
 app/assets/stylesheets/styles.scss      | 6 ++++++
 app/views/layouts/application.html.haml | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index 2fbb8d540..177f66082 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -409,4 +409,10 @@ a > img {
 
 .z-top {
   z-index: 9999999;
+}
+
+@media (max-width: 800px) {
+  .go-crazy {
+    display: none !important;
+  }
 }
\ No newline at end of file
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 12a8368fa..6a3ab946e 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -17,7 +17,7 @@
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
     %div.content{"data-skills-empty-space-target": "container"}
       %div.position-sticky.top-0.z-top
-        %pzsh-topbar{href: root_path}
+        %pzsh-topbar{href: people_path}
           %img{:src=> "/assets/pzsh_skills_logo.svg"}
           %div.d-flex
             %div.mb-1.mt-1
@@ -25,7 +25,7 @@
         %pzsh-banner
         %pzsh-menu
           %div{slot: 'actions'}
-            %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
+            %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2.go-crazy{"data-action": "click->skills-empty-space#goCrazy"}
             %pzsh-menu-dropdown
               -# Language selector
               %div{slot: 'toggle'}

From 1432c9d8e00646cdbd671d4c0aa6a5a16766365c Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Tue, 13 May 2025 14:21:34 +0200
Subject: [PATCH 15/21] Move username back to menu item instead of inside
 dropdown

---
 app/views/layouts/application.html.haml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 6a3ab946e..e686e3d66 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -55,10 +55,9 @@
               %pzsh-menu-dropdown{href: '#'}
                 %div{slot: 'toggle'}
                   %pzsh-icon{name: 'user'}
+                  = current_auth_user&.name || current_auth_user&.email
+                  = ti 'devise.admin' if admin?
                 %div{slot: 'items'}
-                  %pzsh-menu-dropdown-item#username
-                    = current_auth_user&.name || current_auth_user&.email
-                    = ti 'devise.admin' if admin?
                   - unless find_person_by_auth_user.nil?
                     %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
                       %pzsh-icon{name: 'setting'}

From 4ba241167afbccd58fe42818780c77600d7b00ff Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Tue, 13 May 2025 16:00:30 +0200
Subject: [PATCH 16/21] Add event listener for turbo:load event in scroll
 container to make sure turbo has fully loaded the page before calculating the
 top value of the scroll to menu

---
 app/javascript/controllers/scroll_controller.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/javascript/controllers/scroll_controller.js b/app/javascript/controllers/scroll_controller.js
index 8533bdfdd..013208296 100644
--- a/app/javascript/controllers/scroll_controller.js
+++ b/app/javascript/controllers/scroll_controller.js
@@ -3,14 +3,17 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
     static targets = ["list", "listItem", "scrollItem", "parent"]
     currentSelectedIndex = -1;
-    offsetY = this.parentTarget.getBoundingClientRect().top + window.scrollY;
+    offsetY = 0;
 
     connect() {
-        this.listTarget.style.top = `${this.offsetY}px`;
-        document.addEventListener("scroll", () => {
-            this.highlight();
-        });
-        this.highlight()
+        addEventListener('turbo:load', (event) => {
+            this.offsetY = this.parentTarget.getBoundingClientRect().top + window.scrollY;
+            this.listTarget.style.top = `${this.offsetY}px`;
+            document.addEventListener("scroll", () => {
+                this.highlight();
+            });
+            this.highlight()
+        })
     }
 
     disconnect() {

From 0c557065ef8f30b8a8b8fe11a005a281d53dc1b5 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 14 May 2025 14:14:47 +0200
Subject: [PATCH 17/21] Fix width of page to 80%

---
 app/assets/stylesheets/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index 177f66082..96255ae85 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -19,7 +19,7 @@ $skills-dark-blue: #1e5a96;
 }
 
 .content {
-  min-width: 80%;
+  width: 80%;
 }
 
 .cursor-pointer {

From a49b3e731a7b642ff3ff04d720fe5e48aa351390 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 14 May 2025 14:19:42 +0200
Subject: [PATCH 18/21] Bring back old language selection

---
 app/helpers/auth_helper.rb              | 3 ++-
 app/views/layouts/application.html.haml | 9 ++-------
 spec/features/routing_spec.rb           | 4 +---
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/app/helpers/auth_helper.rb b/app/helpers/auth_helper.rb
index e521f368a..e075f79e1 100644
--- a/app/helpers/auth_helper.rb
+++ b/app/helpers/auth_helper.rb
@@ -24,9 +24,10 @@ def devise?
   end
 
   def language_selector
-    I18n.available_locales.map { |e| e.to_s }.map do |lang_code|
+    languages = I18n.available_locales.map { |e| e.to_s }.map do |lang_code|
       [language(lang_code).capitalize, url_for(locale: lang_code, set_by_user: true)]
     end
+    options_for_select(languages, url_for(locale: I18n.locale, set_by_user: true))
   end
 
   def language(lang_code)
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index e686e3d66..b9da68770 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -26,14 +26,9 @@
         %pzsh-menu
           %div{slot: 'actions'}
             %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2.go-crazy{"data-action": "click->skills-empty-space#goCrazy"}
-            %pzsh-menu-dropdown
+            %pzsh-menu-action{'data-controller': 'dropdown', href: 'javascript:void(0);'}
               -# Language selector
-              %div{slot: 'toggle'}
-                = language(I18n.locale.to_s.upcase)
-              %div{slot: 'items'}
-                - language_selector.each do |lang_name, switch_url|
-                  %pzsh-menu-dropdown-item{href: switch_url}
-                    = lang_name
+              = select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#navigateOnChange"}
             -# Devise/Mockdata
             - if Rails.env.development?
               %span.text-white
diff --git a/spec/features/routing_spec.rb b/spec/features/routing_spec.rb
index d1188b66b..c55a5869a 100644
--- a/spec/features/routing_spec.rb
+++ b/spec/features/routing_spec.rb
@@ -32,9 +32,7 @@
       end
 
       it "Should open profile with correct language and preserve language in cookie" do
-        page.first('pzsh-menu-dropdown').click
-        page.find('pzsh-menu-dropdown-item', text: 'Italiano').click
-        expect(page).to have_content('Profilo')
+        select 'Italiano', from: 'i18n_language';
 
         select_from_slim_select("#person_id_person", bob.name)
         expect(page).to have_text("Dati personali")

From 0f9040ef3950406e3ba8f03d9465731da185d98a Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 14 May 2025 14:56:14 +0200
Subject: [PATCH 19/21] Fix language selection spec

---
 spec/features/routing_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/features/routing_spec.rb b/spec/features/routing_spec.rb
index c55a5869a..65163777e 100644
--- a/spec/features/routing_spec.rb
+++ b/spec/features/routing_spec.rb
@@ -32,7 +32,7 @@
       end
 
       it "Should open profile with correct language and preserve language in cookie" do
-        select 'Italiano', from: 'i18n_language';
+        select 'Italiano', from: 'i18n_language'
 
         select_from_slim_select("#person_id_person", bob.name)
         expect(page).to have_text("Dati personali")

From 3316b197e47c687b0e375b4f8bd57dc8e03e3c72 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 14 May 2025 15:07:19 +0200
Subject: [PATCH 20/21] Fix auth spec

---
 app/views/layouts/application.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index b9da68770..68af3d124 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -47,7 +47,7 @@
               Help
             -# User profile dropdown
             - if auth_user_signed_in?
-              %pzsh-menu-dropdown{href: '#'}
+              %pzsh-menu-dropdown{href: '#', id: 'username'}
                 %div{slot: 'toggle'}
                   %pzsh-icon{name: 'user'}
                   = current_auth_user&.name || current_auth_user&.email

From 9128768941a243adee639389b6a5a924cec50942 Mon Sep 17 00:00:00 2001
From: Jannik Pulfer <pulfer@puzzle.ch>
Date: Wed, 14 May 2025 15:15:48 +0200
Subject: [PATCH 21/21] Fix auth spec in chrome

---
 spec/features/auth_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/features/auth_spec.rb b/spec/features/auth_spec.rb
index 32563c148..64bf7e577 100644
--- a/spec/features/auth_spec.rb
+++ b/spec/features/auth_spec.rb
@@ -28,7 +28,7 @@
     end
 
     it 'Username field contains admin tag' do
-      expect(page.find('#username').text).to end_with("(Admin)")
+      expect(page).to have_css('#username', text: /\(Admin\)/)
     end
 
     it 'Admin can create new skill' do