Add QWord Word-style status bar

src/styles.css

@@ -281,18 +281,83 @@ button {
 .statusbar {
   display: flex;
   align-items: center;
-  gap: 28px;
-  padding: 0 18px;
+  gap: 0;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 0 10px 0 18px;
   border-top: 1px solid var(--line);
   background: var(--surface);
   color: var(--muted);
   font-size: 12px;
 }
 
-.statusbar span:last-child {
+.statusbar-main,
+.statusbar-trailing {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.statusbar-main {
+  flex: 1 1 auto;
+  gap: 28px;
+  overflow: hidden;
+}
+
+.statusbar-trailing {
+  flex: 0 0 auto;
+  gap: 8px;
   margin-left: auto;
 }
 
+.statusbar span {
+  white-space: nowrap;
+}
+
+.word-statusbar {
+  color: #4f5967;
+}
+
+.word-statusbar-tools,
+.word-view-buttons {
+  display: inline-flex;
+  align-items: center;
+}
+
+.word-statusbar-tools {
+  gap: 6px;
+}
+
+.word-view-buttons {
+  gap: 2px;
+  padding-right: 8px;
+  border-right: 1px solid #d2d9e3;
+}
+
+.word-statusbar-tools button {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: transparent;
+  color: #4f5967;
+  cursor: pointer;
+}
+
+.word-statusbar-tools button:hover,
+.word-statusbar-tools button.is-active {
+  border-color: #c3d3e6;
+  background: #eef5fd;
+  color: #1f4f8a;
+}
+
+.word-zoom-slider {
+  width: 120px;
+  accent-color: #6b7280;
+}
+
 .editor-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -869,6 +934,7 @@ button {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   width: var(--qword-page-width, 794px);
+  zoom: var(--qword-zoom, 1);
   height: 26px;
   margin: 12px auto 0;
   color: #7a8797;
@@ -905,6 +971,7 @@ button {
 .paper-frame {
   position: relative;
   width: var(--qword-page-width, 794px);
+  zoom: var(--qword-zoom, 1);
   margin: 0 auto 38px;
 }