♻️ refactor: HeaderBar into modular, maintainable components & polish responsive UI

Summary
• Extracted `LogoSection`, `NavLinks`, `UserArea`, and `ActionButtons` from `HeaderBar.js`, reducing complexity and improving readability.
• Removed unused state, handlers, and redundant imports from `HeaderBar.js`.
• Simplified mobile/desktop logic:
  – Menu icon now shows only on mobile `/console` routes.
  – Logo, system name, and mode tags appear on all desktop screens and on mobile non-console pages.
• Reworked skeleton loaders:
  – Narrower width on mobile (`40 px`) and clearer spacing (`p-1`).
• Added global `.scrollbar-hide` utility in `index.css` to enable scrollable areas without visible scrollbars.
• Ensured nav bar is horizontally scrollable across all breakpoints.
• Cleaned up language-switch, New Year, and notice handlers; consolidated side effects.
• Updated imports and internal calls after component extraction.
• Passed required props to new sub-components and removed obsolete ones.
• Confirmed zero linter warnings after refactor.

Why
Breaking the monolithic header into focused components makes future updates simpler, facilitates isolation testing, and aligns with the existing component architecture under `components/`. The UI tweaks provide a better mobile experience and consistent styling across devices.

Notes
No backend changes required. All routes and contexts remain untouched.

web/src/components/settings/personal/components/UserInfoHeader.js

@@ -54,7 +54,7 @@ const UserInfoHeader = ({ t, userState }) => {
               {getAvatarText()}
             </Avatar>
             <div className="flex-1 min-w-0">
-              <div className="text-base text-3xl font-semibold truncate text-gray-800 dark:text-gray-100">
+              <div className="text-base !text-3xl font-semibold truncate text-gray-800 dark:text-gray-100">
                 {getUsername()}
               </div>
               <div className="mt-1 flex flex-wrap gap-1 sm:gap-2">