Add QWord Word-style status bar

src/components/AppShell.tsx

@@ -14,6 +14,9 @@ interface AppShellProps {
   status: {
     savedLabel: string;
     updatedAt?: string;
+    content?: ReactNode;
+    trailing?: ReactNode;
+    className?: string;
   };
   children: ReactNode;
 }
@@ -26,6 +29,8 @@ const appTitles: Record<AppId, string> = {
 };
 
 export function AppShell({ activeApp, status, children }: AppShellProps) {
+  const statusClassName = ["statusbar", status.className].filter(Boolean).join(" ");
+
   return (
     <div className="qoffice-shell">
       <main className="workspace">
@@ -59,10 +64,16 @@ export function AppShell({ activeApp, status, children }: AppShellProps) {
 
         <div className="surface-host">{children}</div>
 
-        <footer className="statusbar">
-          <span>Готово</span>
-          <span>{status.updatedAt ? `Обновлено: ${new Date(status.updatedAt).toLocaleString("ru-RU")}` : "Локальная почта"}</span>
-          <span>Масштаб 100%</span>
+        <footer className={statusClassName}>
+          <div className="statusbar-main">
+            {status.content ?? (
+              <>
+                <span>Готово</span>
+                <span>{status.updatedAt ? `Обновлено: ${new Date(status.updatedAt).toLocaleString("ru-RU")}` : "Локальная почта"}</span>
+              </>
+            )}
+          </div>
+          <div className="statusbar-trailing">{status.trailing ?? <span>Масштаб 100%</span>}</div>
         </footer>
       </main>
     </div>