30 03 25

Добавил сайт с UI прямо сюда

shine-UI/js/components/header.js

@@ -0,0 +1,31 @@
+export function renderHeader({ title, leftAction, rightActions = [] }) {
+  const wrap = document.createElement('header');
+  wrap.className = 'page-header';
+
+  const left = document.createElement('div');
+  left.className = 'header-left';
+  if (leftAction) {
+    const btn = document.createElement('button');
+    btn.className = 'icon-btn';
+    btn.textContent = leftAction.label;
+    btn.addEventListener('click', leftAction.onClick);
+    left.append(btn);
+  }
+
+  const h1 = document.createElement('h1');
+  h1.className = 'page-title';
+  h1.textContent = title;
+
+  const right = document.createElement('div');
+  right.className = 'header-actions';
+  rightActions.forEach((action) => {
+    const btn = document.createElement('button');
+    btn.className = 'icon-btn';
+    btn.textContent = action.label;
+    btn.addEventListener('click', action.onClick);
+    right.append(btn);
+  });
+
+  wrap.append(left, h1, right);
+  return wrap;
+}

shine-UI/js/components/page-label.js

@@ -0,0 +1,36 @@
+export function renderPageLabel(titleRu, pageId, collapsed, onToggle) {
+  const label = document.createElement('div');
+  label.className = `page-label${collapsed ? ' is-collapsed' : ''}`;
+
+  const toggle = document.createElement('button');
+  toggle.type = 'button';
+  toggle.className = 'page-label-toggle';
+  toggle.title = collapsed ? 'Показать подпись' : 'Скрыть подпись';
+  toggle.setAttribute(
+    'aria-label',
+    collapsed ? 'Показать подпись страницы для разработки' : 'Скрыть подпись страницы для разработки',
+  );
+  toggle.addEventListener('click', onToggle);
+
+  if (!collapsed) {
+    label.append(toggle);
+
+    const content = document.createElement('div');
+    content.className = 'page-label-content';
+
+    const hint = document.createElement('div');
+    hint.className = 'page-label-hint';
+    hint.textContent = 'Для разработки';
+
+    const caption = document.createElement('div');
+    caption.className = 'page-label-caption';
+    caption.textContent = `${titleRu} (${pageId})`;
+
+    content.append(hint, caption);
+    label.append(content);
+  } else {
+    label.append(toggle);
+  }
+
+  return label;
+}

shine-UI/js/components/toolbar.js

@@ -0,0 +1,25 @@
+import { resolveToolbarActive } from '../router.js?v=20260327192619';
+
+const ITEMS = [
+  { pageId: 'messages-list', label: 'Личные сообщения', icon: '💬' },
+  { pageId: 'channels-list', label: 'Каналы', icon: '📢' },
+  { pageId: 'network-view', label: 'Связи', icon: '🕸' },
+  { pageId: 'notifications-view', label: 'Уведомления', icon: '🔔' },
+  { pageId: 'profile-view', label: 'Профиль', icon: '👤' },
+];
+
+export function renderToolbar(currentPageId, navigate) {
+  const root = document.createElement('nav');
+  root.className = 'toolbar';
+  const active = resolveToolbarActive(currentPageId);
+
+  ITEMS.forEach((item) => {
+    const btn = document.createElement('button');
+    btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}`;
+    btn.innerHTML = `<span>${item.icon}</span><span>${item.label}</span>`;
+    btn.addEventListener('click', () => navigate(item.pageId));
+    root.append(btn);
+  });
+
+  return root;
+}