Переделка UI-клиента, изменение отправки файлов

appinfo/info.xml

@@ -4,7 +4,7 @@
   <name>f7support</name>
   <summary>Support ticket client for F7cloud (F7cloud-compatible)</summary>
   <description>f7support client app for creating and viewing support tickets.</description>
-  <version>0.1.0</version>
+  <version>0.1.1</version>
   <licence>AGPL</licence>
   <author>f7support team</author>
   <namespace>F7Support</namespace>
@@ -14,5 +14,11 @@
   <dependencies>
     <f7cloud min-version="32" max-version="32"/>
   </dependencies>
+  <navigations>
+    <navigation>
+      <id>f7support</id>
+      <order>30</order>
+    </navigation>
+  </navigations>
 </info>
 

css/f7support.css

@@ -1,5 +1,4 @@
-/* f7support UI — вынесено из innerHTML для меньшего парсинга JS и кэширования CSS ядром NC */
+/* Базовая изоляция; основной UI — в <style> внутри js/main.js (ядро NC кэширует этот файл). */
-
 #f7support-app {
 	box-sizing: border-box;
 	font-family: sans-serif;
@@ -10,192 +9,3 @@
 #f7support-app *::after {
 	box-sizing: inherit;
 }
-
-#f7support-app .f7s-main {
-	padding: 16px;
-	max-width: 720px;
-}
-
-#f7support-app .f7s-error {
-	color: #b00020;
-}
-
-#f7support-app .f7s-section-title {
-	margin-top: 16px;
-}
-
-#f7support-app .f7s-hint {
-	color: #666;
-	font-size: 14px;
-	margin: 4px 0 8px;
-}
-
-#f7support-app .f7s-ticket-list {
-	padding-left: 20px;
-	margin: 0;
-}
-
-#f7support-app .f7s-ticket-item {
-	cursor: pointer;
-	margin-bottom: 6px;
-}
-
-#f7support-app .f7s-modal {
-	display: none;
-	position: fixed;
-	inset: 0;
-	align-items: center;
-	justify-content: center;
-	background: rgba(0, 0, 0, 0.45);
-}
-
-#f7support-app .f7s-modal.f7s-open {
-	display: flex;
-}
-
-#f7support-app .f7s-modal--create {
-	z-index: 1000;
-}
-
-#f7support-app .f7s-modal--chat {
-	z-index: 1100;
-}
-
-#f7support-app .f7s-modal-panel {
-	background: #fff;
-	border: 1px solid #333;
-	padding: 16px;
-	width: min(560px, 92vw);
-	max-height: 85vh;
-	overflow: auto;
-	border-radius: 8px;
-	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-}
-
-#f7support-app .f7s-modal-head {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-#f7support-app .f7s-modal-head h3 {
-	margin: 0;
-}
-
-#f7support-app .f7s-btn-icon {
-	font-size: 20px;
-	line-height: 1;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-}
-
-#f7support-app .f7s-btn-icon--lg {
-	font-size: 22px;
-	padding: 4px 8px;
-}
-
-#f7support-app .f7s-input {
-	width: 100%;
-	margin-top: 8px;
-}
-
-#f7support-app .f7s-textarea {
-	width: 100%;
-	height: 140px;
-	margin-top: 8px;
-}
-
-#f7support-app .f7s-textarea--message {
-	min-height: 72px;
-	height: auto;
-}
-
-#f7support-app .f7s-mt-8 {
-	margin-top: 8px;
-}
-
-#f7support-app .f7s-chat-shell {
-	background: #fff;
-	width: min(720px, 94vw);
-	max-height: 88vh;
-	display: flex;
-	flex-direction: column;
-	border-radius: 8px;
-	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
-	overflow: hidden;
-}
-
-#f7support-app .f7s-chat-head {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 12px 16px;
-	border-bottom: 1px solid #e0e0e0;
-	flex-shrink: 0;
-}
-
-#f7support-app .f7s-chat-title {
-	margin: 0;
-	font-size: 1.1rem;
-}
-
-#f7support-app .f7s-chat-error {
-	margin: 0;
-	padding: 8px 16px;
-	min-height: 1.2em;
-}
-
-#f7support-app .f7s-message-list {
-	flex: 1;
-	min-height: 220px;
-	max-height: 45vh;
-	overflow: auto;
-	border-top: 1px solid #eee;
-	border-bottom: 1px solid #eee;
-	padding: 12px 16px;
-}
-
-#f7support-app .f7s-chat-footer {
-	padding: 12px 16px 16px;
-	flex-shrink: 0;
-}
-
-#f7support-app .f7s-chat-actions {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	align-items: center;
-	margin-top: 8px;
-}
-
-#f7support-app .f7s-msg-row {
-	margin-bottom: 12px;
-	border-bottom: 1px solid #eee;
-	padding-bottom: 10px;
-}
-
-#f7support-app .f7s-img-wrap {
-	margin-top: 8px;
-}
-
-#f7support-app .f7s-msg-img {
-	max-width: 100%;
-	max-height: 260px;
-	object-fit: contain;
-	border: 1px solid #ddd;
-	border-radius: 4px;
-}
-
-#f7support-app .f7s-img-err {
-	color: #888;
-	font-size: 13px;
-}
-
-#f7support-app .f7s-attach-row {
-	margin-top: 6px;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-}