Align QWord shell with Office ribbon

src/features/qword/QWord.tsx

@@ -134,6 +134,7 @@ const styleGalleryOptions = [
   { value: "h6", label: "Заголовок 6" },
   { value: "blockquote", label: "Цитата" }
 ];
+const wordRibbonTabs = ["Файл", "Главная", "Вставка", "Конструктор", "Макет", "Ссылки", "Рассылки", "Рецензирование", "Вид", "Справка"];
 
 function findInPage(query: string) {
   return (window as PageSearchWindow).find?.(query) ?? false;
@@ -375,6 +376,13 @@ export function QWord({ document, onChange }: QWordProps) {
             onChange={(event) => void insertImage(event.target.files?.[0])}
             aria-label="Вставить изображение"
           />
+          <div className="word-ribbon-tabs" role="tablist" aria-label="Вкладки QWord">
+            {wordRibbonTabs.map((tab, index) => (
+              <button key={tab} className={index === 1 ? "is-active" : ""} type="button" role="tab" aria-selected={index === 1}>
+                {tab}
+              </button>
+            ))}
+          </div>
           <div className="word-ribbon" aria-label="Лента команд QWord">
             <section className="word-ribbon-group word-file-group" aria-label="Файл">
               <div className="word-file-actions">