Polish nav: distinct tickets icon and flag language picker.

Tickets use a clipboard-with-check glyph instead of a document stack.
Locale control shows country flag only when the shell is collapsed,
and flag plus two-letter code when expanded (login always shows both).

Co-authored-by: Cursor <cursoragent@cursor.com>

examples/crash_reporter/backend/public/assets/css/app.css

@@ -129,10 +129,12 @@ a:hover { text-decoration: underline; }
 @media (prefers-reduced-motion: reduce) {
   .nav-pane,
   .nav-link,
-  .nav-label {
+  .nav-label,
+  .locale-code {
     transition: none;
   }
-  .nav-pane.open .nav-label {
+  .nav-pane.open .nav-label,
+  .nav-pane.open .locale-code {
     transition-delay: 0s;
   }
 }
@@ -196,21 +198,42 @@ a:hover { text-decoration: underline; }
 }
 .nav-icon--reports::before { top: 5px; }
 .nav-icon--reports::after { top: 10px; width: 70%; }
+/* Task ticket — clipboard + check (distinct from stacked “reports” document) */
 .nav-icon--tickets {
-  width: 16px;
+  width: 14px;
   height: 16px;
+  margin-top: 2px;
   border: 2px solid currentColor;
-  border-radius: 2px;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-sizing: border-box;
 }
 .nav-icon--tickets::before {
   content: "";
   position: absolute;
-  top: 3px;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 9px;
+  height: 5px;
+  border: 2px solid currentColor;
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+  box-sizing: border-box;
+  background: var(--surface);
+}
+.nav-icon--tickets::after {
+  content: "";
+  position: absolute;
   left: 3px;
+  bottom: 3px;
   width: 6px;
-  height: 2px;
+  height: 4px;
-  background: currentColor;
+  border-left: 2px solid currentColor;
-  box-shadow: 0 4px 0 currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transform-origin: left bottom;
+  box-sizing: border-box;
 }
 .ticket-col-issue { min-width: 200px; max-width: 420px; }
 .ticket-issue-title { font-weight: 600; }
@@ -481,43 +504,45 @@ a:hover { text-decoration: underline; }
 }
 .nav-locale .locale-picker {
   width: 100%;
-  justify-content: flex-start;
+  justify-content: center;
   padding: 6px 8px;
+  gap: 0;
 }
-.nav-icon--locale {
+.nav-pane.open .nav-locale .locale-picker {
-  width: 18px;
+  justify-content: flex-start;
-  height: 18px;
+  gap: 8px;
-  border: 2px solid currentColor;
-  border-radius: 50%;
-  box-sizing: border-box;
 }
-.nav-icon--locale::before {
+.locale-flag {
-  content: "";
+  flex-shrink: 0;
-  position: absolute;
+  font-size: 1.25rem;
-  left: 50%;
+  line-height: 1;
-  top: 1px;
+  width: 1.35rem;
-  bottom: 1px;
+  text-align: center;
-  width: 2px;
+  user-select: none;
-  margin-left: -1px;
+  pointer-events: none;
-  background: currentColor;
-  border-radius: 1px;
 }
-.nav-icon--locale::after {
+.locale-code {
-  content: "";
+  flex: 0 1 auto;
-  position: absolute;
+  font-size: 12px;
-  left: 2px;
+  font-weight: 700;
-  right: 2px;
+  letter-spacing: 0.04em;
-  top: 50%;
+  line-height: 1;
-  height: 2px;
+  white-space: nowrap;
-  margin-top: -1px;
+  overflow: hidden;
-  background: currentColor;
+  opacity: 0;
-  border-radius: 1px;
+  max-width: 0;
+  transition: opacity .18s ease, max-width .22s ease;
+}
+.nav-pane.open .locale-code {
+  opacity: 1;
+  max-width: 2.5rem;
+  transition-delay: .06s;
 }
 .locale-picker {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   min-height: 32px;
   padding: 4px 6px;
   border-radius: 8px;
@@ -561,6 +586,10 @@ a:hover { text-decoration: underline; }
   right: 12px;
   z-index: 5;
 }
+.login-locale .locale-code {
+  opacity: 1;
+  max-width: 2.5rem;
+}
 .login-page .login-card { margin-top: 2.5rem; }
 .toolbar-select select {
   padding: 6px 8px;

examples/crash_reporter/backend/public/assets/js/i18n.js

@@ -6,6 +6,12 @@
   const SUPPORTED = ['en', 'ru'];
   const DEFAULT_LANG = 'en';
 
+  /** @type {Record<string, { flag: string, code: string }>} */
+  const LANG_DISPLAY = {
+    en: { flag: '\uD83C\uDDEC\uD83C\uDDE7', code: 'EN' },
+    ru: { flag: '\uD83C\uDDF7\uD83C\uDDFA', code: 'RU' },
+  };
+
   let lang = DEFAULT_LANG;
   let catalog = {};
   let fallback = {};
@@ -104,6 +110,17 @@
     document.querySelectorAll('.lang-select').forEach((sel) => {
       if (sel.value !== lang) sel.value = lang;
     });
+    syncLocaleDisplay(lang);
+  }
+
+  function syncLocaleDisplay(code) {
+    const meta = LANG_DISPLAY[code] || LANG_DISPLAY[DEFAULT_LANG];
+    document.querySelectorAll('.locale-flag').forEach((el) => {
+      el.textContent = meta.flag;
+    });
+    document.querySelectorAll('.locale-code').forEach((el) => {
+      el.textContent = meta.code;
+    });
   }
 
   async function setLang(code, options) {
@@ -142,6 +159,7 @@
     await setLang(lang, { silent: true });
     apply(document);
     initLangSelect();
+    syncLocaleDisplay(lang);
     readyResolve();
   }
 

examples/crash_reporter/backend/views/layout.php

@@ -77,7 +77,8 @@
       </ul>
       <div class="nav-locale">
         <div class="locale-picker" data-i18n-title="lang.label" title="Language">
-          <span class="nav-icon nav-icon--locale" aria-hidden="true"></span>
+          <span class="locale-flag" id="locale-flag" aria-hidden="true">🇬🇧</span>
+          <span class="locale-code" id="locale-code" aria-hidden="true">EN</span>
           <select class="lang-select locale-picker__select" id="lang-select" data-i18n-aria="lang.label" aria-label="Language">
             <option value="en">EN</option>
             <option value="ru">RU</option>

examples/crash_reporter/backend/views/login.php

@@ -30,7 +30,8 @@ $bp = Auth::basePath();
 <body class="login-page" data-base-path="<?= h($bp) ?>">
   <div class="login-locale">
     <div class="locale-picker" data-i18n-title="lang.label" title="Language">
-      <span class="nav-icon nav-icon--locale" aria-hidden="true"></span>
+      <span class="locale-flag" aria-hidden="true">🇬🇧</span>
+      <span class="locale-code" aria-hidden="true">EN</span>
       <select class="lang-select locale-picker__select" data-i18n-aria="lang.label" aria-label="Language">
         <option value="en">EN</option>
         <option value="ru">RU</option>