feat: add post from translation (PoC → refined)

assets/css/msls.less

@@ -24,10 +24,38 @@ select.msls-translations {
             input.msls_title, select {
                 flex-grow: 1;
             }
+            .msls-create-new,
+            .msls-edit-link {
+                text-decoration: none;
+                margin-left: 4px;
+                color: #2271b1;
+                &:hover {
+                    color: #135e96;
+                }
+            }
         }
 	}
 }
 
+.msls-quick-create {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    &.msls-loading .dashicons {
+        animation: msls-spin 1s linear infinite;
+    }
+}
+
+@keyframes msls-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
 #msls-content-import {
     .button-primary {
         margin: 1em auto;
@@ -120,6 +148,197 @@ select.msls-translations {
     border: 1px currentColor solid;
 
     & > span {
-        color: currentColor;        
+        color: currentColor;
+    }
+}
+
+#adminmenu .wp-submenu a[href*="msls-translation-picker-"] {
+    padding-left: 28px;
+}
+
+.msls-tp-page {
+    .msls-tp-back {
+        margin: 4px 0 0;
+        font-size: 13px;
+
+        a {
+            color: #2271b1;
+            text-decoration: none;
+
+            &:hover,
+            &:focus {
+                color: #135e96;
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .msls-tp-banner {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 14px 0;
+
+        .msls-tp-banner-arrow {
+            color: #2271b1;
+            font-weight: 600;
+        }
+    }
+
+    .msls-tp-sources {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 8px;
+        margin: 14px 0 10px;
+
+        .msls-tp-sources-label {
+            font-weight: 600;
+            margin-right: 4px;
+            color: #1d2327;
+        }
+    }
+
+    .msls-tp-source-flag {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        background: #fff;
+        border: 1px solid #c3c4c7;
+        border-radius: 20px;
+        text-decoration: none;
+        color: #1d2327;
+        font-size: 13px;
+        line-height: 1.2;
+        transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+
+        .flag-icon {
+            font-size: 18px;
+            line-height: 1;
+        }
+
+        &:hover,
+        &:focus {
+            background: #f6f7f7;
+            border-color: #8c8f94;
+            color: #1d2327;
+            box-shadow: none;
+        }
+
+        &.is-active {
+            background: #2271b1;
+            border-color: #2271b1;
+            color: #fff;
+            box-shadow: 0 0 0 1px #2271b1;
+
+            &:hover,
+            &:focus {
+                background: #135e96;
+                border-color: #135e96;
+                color: #fff;
+            }
+        }
+
+        .msls-tp-source-label {
+            font-weight: 500;
+        }
+    }
+
+    .msls-tp-filters {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 4px 0 16px;
+        flex-wrap: wrap;
+
+        input[type="search"] {
+            min-width: 240px;
+        }
+    }
+
+    .msls-tp-progress {
+        margin: 12px 0;
+    }
+
+    table.wp-list-table {
+        .msls-tp-view {
+            text-decoration: none;
+            margin-right: 10px;
+            white-space: nowrap;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        .msls-tp-create.msls-loading {
+            opacity: 0.7;
+            pointer-events: none;
+
+            &::after {
+                content: "";
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                margin-left: 6px;
+                border: 2px solid currentColor;
+                border-top-color: transparent;
+                border-radius: 50%;
+                animation: msls-spin 0.8s linear infinite;
+                vertical-align: middle;
+            }
+        }
+
+        .column-status {
+            width: 110px;
+        }
+
+        .column-date {
+            width: 140px;
+        }
+
+        .column-actions {
+            width: 260px;
+            text-align: right;
+        }
+    }
+}
+
+.msls-tp-lang-chip {
+    display: inline-block;
+    padding: 2px 6px;
+    background: #f0f0f1;
+    border-radius: 10px;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: #50575e;
+}
+
+.msls-tp-status-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    &.msls-tp-status-publish {
+        background: #e0f7e5;
+        color: #1d593f;
+    }
+    &.msls-tp-status-draft {
+        background: #f0f0f1;
+        color: #50575e;
+    }
+    &.msls-tp-status-pending {
+        background: #fff3cd;
+        color: #674d03;
+    }
+    &.msls-tp-status-future {
+        background: #e7e5f7;
+        color: #3a2d6b;
     }
 }