Add QExcell cell alignment

src/features/qexcell/QExcell.tsx

@@ -1,6 +1,9 @@
 import { useMemo, useRef, useState } from "react";
 import type { CSSProperties } from "react";
 import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
   BarChart3,
   Bold,
   Download,
@@ -73,6 +76,12 @@ const chartTypeOptions: Array<{ value: SheetChartType; label: string }> = [
   { value: "pie", label: "Круговая" }
 ];
 
+const horizontalAlignOptions = [
+  { value: "left", label: "По левому краю", icon: AlignLeft },
+  { value: "center", label: "По центру", icon: AlignCenter },
+  { value: "right", label: "По правому краю", icon: AlignRight }
+] as const;
+
 function normalizedLinkInput(value: string | null) {
   const raw = value?.trim();
   if (!raw) {
@@ -97,6 +106,7 @@ function normalizedFillColor(value?: string) {
 function normalizedCellFormat(format: CellFormat): CellFormat | undefined {
   const textColor = normalizedFillColor(format.textColor);
   const fillColor = normalizedFillColor(format.fillColor);
+  const horizontalAlign = normalizedHorizontalAlign(format.horizontalAlign);
   const numberFormat = format.numberFormat?.trim();
   const normalized: CellFormat = {
     ...(format.bold ? { bold: true } : {}),
@@ -104,6 +114,7 @@ function normalizedCellFormat(format: CellFormat): CellFormat | undefined {
     ...(format.underline ? { underline: true } : {}),
     ...(textColor ? { textColor } : {}),
     ...(fillColor ? { fillColor } : {}),
+    ...(horizontalAlign ? { horizontalAlign } : {}),
     ...(numberFormat ? { numberFormat } : {})
   };
 
@@ -116,10 +127,15 @@ function cellInputStyle(format?: CellFormat): CSSProperties {
     ...(format?.italics ? { fontStyle: "italic" } : {}),
     ...(format?.underline ? { textDecoration: "underline" } : {}),
     ...(format?.textColor ? { color: `#${format.textColor}` } : {}),
-    ...(format?.fillColor ? { backgroundColor: `#${format.fillColor}` } : {})
+    ...(format?.fillColor ? { backgroundColor: `#${format.fillColor}` } : {}),
+    ...(format?.horizontalAlign ? { textAlign: format.horizontalAlign } : {})
   };
 }
 
+function normalizedHorizontalAlign(value?: string) {
+  return value === "left" || value === "center" || value === "right" ? value : "";
+}
+
 function normalizedChartRange(value: string) {
   const raw = value.trim().replace(/\$/g, "").toUpperCase();
   const [start, end = start] = raw.split(":");
@@ -461,6 +477,22 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
             >
               <Underline size={16} />
             </button>
+            {horizontalAlignOptions.map((option) => {
+              const Icon = option.icon;
+              const isActive = selectedCellFormat.horizontalAlign === option.value;
+              return (
+                <button
+                  key={option.value}
+                  className={`icon-button format-toggle ${isActive ? "is-active" : ""}`.trim()}
+                  type="button"
+                  onClick={() => updateCellFormat(selectedCell, { horizontalAlign: isActive ? undefined : option.value })}
+                  title={option.label}
+                  aria-label={option.label}
+                >
+                  <Icon size={16} />
+                </button>
+              );
+            })}
             <div className="fill-swatches" aria-label="Заливка">
               <PaintBucket size={16} aria-hidden="true" />
               {fillSwatches.map((swatch) => (