From 9cbd5e4288d20482fe0f4e302b24cc1ee8f73d4e Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Sat, 28 Jun 2025 16:27:31 +0300
Subject: [PATCH] pretty-print2

---
 panel/admin.tsx    |  57 ++++++++++++++-
 panel/discours.svg |   2 +-
 panel/publy.svg    |   2 +-
 panel/styles.css   | 170 ++++++++++++++++++++++++++++++---------------
 4 files changed, 172 insertions(+), 59 deletions(-)

diff --git a/panel/admin.tsx b/panel/admin.tsx
index 51137577..ba41e7bc 100644
--- a/panel/admin.tsx
+++ b/panel/admin.tsx
@@ -240,6 +240,8 @@ const AdminPage: Component<AdminPageProps> = (props) => {
   const [successMessage, setSuccessMessage] = createSignal<string | null>(null)
   const [showBodyModal, setShowBodyModal] = createSignal(false)
   const [selectedShoutBody, setSelectedShoutBody] = createSignal<string>('')
+  const [showMediaBodyModal, setShowMediaBodyModal] = createSignal(false)
+  const [selectedMediaBody, setSelectedMediaBody] = createSignal<string>('')
 
   // Переменные среды
   const [envSections, setEnvSections] = createSignal<EnvSection[]>([])
@@ -1325,6 +1327,39 @@ const AdminPage: Component<AdminPageProps> = (props) => {
     )
   }
 
+  /**
+   * Компонент модального окна для просмотра содержимого media.body
+   */
+  const MediaBodyModal: Component = () => {
+    const language = () => detectLanguage(selectedMediaBody())
+    const formattedCode = () => formatCode(selectedMediaBody())
+
+    return (
+      <Show when={showMediaBodyModal()}>
+        <div class="modal-overlay" onClick={() => setShowMediaBodyModal(false)}>
+          <div class="modal-content" onClick={(e) => e.stopPropagation()}>
+            <div class="modal-header">
+              <div class="modal-title">
+                <h3>Содержимое media.body</h3>
+                <span class="language-badge">
+                  {language() === 'markup' ? 'HTML' :
+                   language() === 'json' ? 'JSON' :
+                   'Plain Text'}
+                </span>
+              </div>
+              <button class="close-button" onClick={() => setShowMediaBodyModal(false)}>×</button>
+            </div>
+            <div class="modal-body">
+              <pre class="body-content">
+                <code class={`language-${language()}`} innerHTML={formattedCode()} />
+              </pre>
+            </div>
+          </div>
+        </div>
+      </Show>
+    )
+  }
+
   /**
    * Обработчик изменения страницы для публикаций
    * @param page - Номер страницы
@@ -1667,7 +1702,26 @@ const AdminPage: Component<AdminPageProps> = (props) => {
                         </td>
                         <td>
                           <Show when={shout.media && shout.media.length > 0}>
-                            <span class="media-count">{shout.media!.length} файл(ов)</span>
+                            <div style="display: flex; flex-direction: column; gap: 4px;">
+                              <For each={shout.media}>
+                                {(mediaItem, idx) => (
+                                  <div style="display: flex; align-items: center; gap: 6px;">
+                                    <span class="media-count">{mediaItem.title || `media[${idx()}]`}</span>
+                                    <Show when={mediaItem.body}>
+                                      <button
+                                        class="edit-button"
+                                        style="padding: 2px 8px; font-size: 12px;"
+                                        title="Показать содержимое body"
+                                        onClick={() => {
+                                          setSelectedMediaBody(mediaItem.body)
+                                          setShowMediaBodyModal(true)
+                                        }}
+                                      >👁 body</button>
+                                    </Show>
+                                  </div>
+                                )}
+                              </For>
+                            </div>
                           </Show>
                           <Show when={!shout.media || shout.media.length === 0}>
                             <span class="no-data">-</span>
@@ -1697,6 +1751,7 @@ const AdminPage: Component<AdminPageProps> = (props) => {
       </Show>
 
       <BodyModal />
+      <MediaBodyModal />
     </div>
   )
 }
diff --git a/panel/discours.svg b/panel/discours.svg
index dc4ab588..7e49ad87 100644
--- a/panel/discours.svg
+++ b/panel/discours.svg
@@ -1,4 +1,4 @@
-<svg width="175" height="32" viewBox="0 0 175 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="172" height="32" viewBox="0 0 175 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <!-- D -->
   <path d="M24.51 28.16H19.78V23H5.074V28.16H0.344V18.055H2.881C3.11033 17.7397 3.397 17.2093 3.741 16.464C4.11367 15.69 4.472 14.6437 4.816 13.325C5.18867 12.0063 5.504 10.3723 5.762 8.423C6.02 6.47367 6.149 4.166 6.149 1.5H21.113V18.055H24.51V28.16ZM15.523 18.313V6.23H11.008C10.9507 7.262 10.8503 8.36567 10.707 9.541C10.5637 10.6877 10.3773 11.8057 10.148 12.895C9.94733 13.9843 9.70367 15.002 9.417 15.948C9.13033 16.894 8.815 17.6823 8.471 18.313H15.523Z" fill="currentColor"/>
 
diff --git a/panel/publy.svg b/panel/publy.svg
index 414f218a..11fe3ba5 100644
--- a/panel/publy.svg
+++ b/panel/publy.svg
@@ -1,4 +1,4 @@
-<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="96" height="32" viewBox="0 0 96 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <!-- p (без перекладины, чистая петля) -->
   <path d="M15 28V6C15 3 20 3 20 6V16C20 19 15 19 15 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
 
diff --git a/panel/styles.css b/panel/styles.css
index a0b661bc..549bc447 100644
--- a/panel/styles.css
+++ b/panel/styles.css
@@ -622,9 +622,9 @@ tr:hover {
   flex-wrap: wrap;
   gap: var(--spacing-4);
   padding: var(--spacing-4);
-  background-color: var(--primary-light);
-  border-radius: var(--border-radius-md);
-  box-shadow: var(--shadow-sm);
+  background: #ededed;
+  border: 1px solid var(--border-color);
+  box-shadow: none;
 }
 
 .pagination-info {
@@ -644,53 +644,52 @@ tr:hover {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 36px;
-  height: 36px;
-  padding: var(--spacing-2) var(--spacing-3);
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  border-radius: var(--border-radius-md);
-  user-select: none;
-}
-
-.pagination-button:hover:not(:disabled) {
-  background-color: var(--primary-light);
-  border-color: var(--primary-color);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.pagination-button:focus-visible {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
+  min-width: 44px;
+  height: 44px;
+  padding: 0;
+  background: #181818;
+  color: #fff;
+  border: 1px solid #222;
+  font-size: 18px;
+  font-weight: 500;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  margin-bottom: 8px;
+  transition: background 0.15s, color 0.15s, border 0.15s;
 }
 
 .pagination-button.active {
-  background-color: var(--primary-color);
-  color: var(--bg-color);
-  border-color: var(--primary-color);
-  font-weight: var(--font-semibold);
+  background: #fff;
+  color: #111;
+  border: 2px solid #fff;
+  font-weight: 700;
+}
+
+.pagination-button:hover:not(:disabled) {
+  background: #333;
+  color: #fff;
+  border-color: #111;
+  transform: none;
+  box-shadow: none;
 }
 
 .pagination-button:disabled {
+  background: #aaa;
+  color: #fff;
   opacity: 0.5;
-  cursor: not-allowed;
-  background-color: var(--primary-light);
+  border-color: #888;
 }
 
 .pagination-ellipsis {
-  display: inline-flex;
+  background: transparent;
+  color: #888;
+  min-width: 44px;
+  height: 44px;
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 36px;
-  padding: var(--spacing-2);
-  color: var(--text-secondary);
-  user-select: none;
+  border: none;
+  margin-bottom: 8px;
 }
 
 .pagination-per-page {
@@ -702,24 +701,11 @@ tr:hover {
 }
 
 .pagination-per-page select {
-  padding: var(--spacing-2) var(--spacing-3);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius-md);
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  font-size: var(--text-sm);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.pagination-per-page select:hover {
-  border-color: var(--primary-color);
-}
-
-.pagination-per-page select:focus {
-  outline: none;
-  border-color: var(--primary-color);
-  box-shadow: var(--shadow-sm);
+  background: #181818;
+  color: #fff;
+  border: 1px solid #222;
+  border-radius: 0 !important;
+  box-shadow: none !important;
 }
 
 /* Поиск */
@@ -1414,3 +1400,75 @@ button:hover,
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
 }
+
+/* Убираем скругления и делаем строгий стиль для пагинации и кнопок */
+button,
+.pagination,
+.pagination-button,
+.pagination-per-page select {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.pagination {
+  background: #ededed;
+  border: 1px solid var(--border-color);
+  box-shadow: none;
+}
+
+.pagination-button {
+  min-width: 44px;
+  height: 44px;
+  padding: 0;
+  background: #181818;
+  color: #fff;
+  border: 1px solid #222;
+  font-size: 18px;
+  font-weight: 500;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  margin-bottom: 8px;
+  transition: background 0.15s, color 0.15s, border 0.15s;
+}
+
+.pagination-button.active {
+  background: #fff;
+  color: #111;
+  border: 2px solid #fff;
+  font-weight: 700;
+}
+
+.pagination-button:hover:not(:disabled) {
+  background: #333;
+  color: #fff;
+  border-color: #111;
+  transform: none;
+  box-shadow: none;
+}
+
+.pagination-button:disabled {
+  background: #aaa;
+  color: #fff;
+  opacity: 0.5;
+  border-color: #888;
+}
+
+.pagination-ellipsis {
+  background: transparent;
+  color: #888;
+  min-width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  margin-bottom: 8px;
+}
+
+.pagination-per-page select {
+  background: #181818;
+  color: #fff;
+  border: 1px solid #222;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}