feat: file manager as a workspace pane, side by side with terminals; zip and delete of the selection as icons

internal/server/web/templates/app.html

@@ -54,13 +54,154 @@
   </section>
   <section class="view" data-view="settings"{{if ne .View "settings"}} hidden{{end}}>{{if eq .View "settings"}}{{.Body}}{{end}}</section>
 </main>
-<script>window.APP = {admin: {{.IsAdmin}}, open: {{.Open}}, dialog: {{.Dialog}}};</script>
+<dialog id="viewer" tabindex="-1">
+  <div class="dlg-h">
+    <strong class="vpath" dir="rtl"><bdi id="vname"></bdi></strong>
+    <button class="btn ghost small" id="vtext" hidden>Редактировать</button>
+    <button class="btn ghost small" id="vhex" hidden>Редактировать бинарно</button>
+    <button class="btn small" id="save" hidden>Сохранить</button>
+    <button class="btn ghost small icon sq" id="vprops" title="Свойства" aria-label="Свойства"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4"/></svg></button>
+    <button class="btn ghost small icon close x" id="closev" title="Закрыть" aria-label="Закрыть"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+    <div class="vmsg muted" id="vmsg"></div>
+  </div>
+  <div class="vbody">
+    <div class="find" id="find" hidden>
+      <div class="fin"><input type="text" id="fq" placeholder="Найти" spellcheck="false" autocomplete="off"><span class="cnt" id="fcnt"></span></div>
+      <div class="fbtns">
+        <button type="button" class="tg" id="fcase" title="Учитывать регистр">Aa</button>
+        <button type="button" class="tg" id="fre" title="Регулярное выражение">.*</button>
+        <button type="button" class="btn ghost" id="fprev" title="Предыдущее (Shift+Enter)" aria-label="Предыдущее">
+          <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 2.5 11 9.5H1z" fill="currentColor"/></svg>
+        </button>
+        <button type="button" class="btn ghost" id="fnext" title="Следующее (Enter)" aria-label="Следующее">
+          <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 9.5 1 2.5h10z" fill="currentColor"/></svg>
+        </button>
+        <button type="button" class="btn ghost close" id="fclose" title="Закрыть поиск (Esc)" aria-label="Закрыть поиск">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+      <div class="fin" id="frow2"><input type="text" id="frep" placeholder="Заменить на" spellcheck="false" autocomplete="off"></div>
+      <div class="fbtns" id="frow2b">
+        <button type="button" class="btn ghost" id="frepone">Заменить</button>
+        <button type="button" class="btn ghost" id="frepall">Все</button>
+      </div>
+    </div>
+    <div id="vcode" hidden></div>
+    <div class="vmedia" id="vmedia" hidden></div>
+    <div class="vdoc" id="vdoc" hidden></div>
+    <div class="hexed" id="vhexed" tabindex="0" hidden><div id="hxsp"></div><div class="hx-rows" id="hxrows"></div></div>
+  </div>
+</dialog>
+
+<dialog id="updlg" tabindex="-1">
+  <div class="dlg-h">
+    <strong style="flex:1">Загрузка файлов</strong>
+    <button class="btn ghost small icon close x" id="updlg-close" title="Закрыть" aria-label="Закрыть"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+  <div class="dlg-b" id="updlg-list"></div>
+</dialog>
+
+<dialog id="mvdlg" tabindex="-1">
+  <div class="dlg-h">
+    <strong style="flex:1">Переместить или копировать</strong>
+    <button class="btn ghost small icon close x" id="mvdlg-close" title="Закрыть" aria-label="Закрыть"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+  <div class="dlg-b mv">
+    <div class="pp-path" id="mv-src"></div>
+    <div class="mv-top">
+      <div class="seg" id="mv-op" role="radiogroup">
+        <button type="button" data-op="move" role="radio">Переместить</button>
+        <button type="button" data-op="copy" role="radio">Копировать</button>
+      </div>
+      <button type="button" class="btn ghost sq mv-net" id="mv-net" title="На другую машину или по SSH" aria-label="На другую машину или по SSH" aria-pressed="false"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="16" y="16" width="6" height="6" rx="1"/><path d="M12 8v4M5 16v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2"/></svg></button>
+    </div>
+    <div class="mv-remote" id="mv-remote"><div>
+      <label for="mv-to">На машину</label>
+      <select id="mv-to"></select>
+      <div class="mv-ssh" id="mv-ssh" hidden>
+        <div class="mv-row"><label class="grow">Хост<input type="text" id="mv-host" placeholder="example.com" autocomplete="off" spellcheck="false" autocapitalize="off"></label>
+          <label class="port">Порт<input type="number" id="mv-port" min="1" max="65535" value="22"></label></div>
+        <label>Пользователь<input type="text" id="mv-user" placeholder="root" autocomplete="off" spellcheck="false" autocapitalize="off"></label>
+        <div class="seg seg-auth" id="mv-auth">
+          <button type="button" data-auth="password" class="on">Пароль</button><button type="button" data-auth="key">Ключ</button><button type="button" data-auth="agent">Ключи агента</button>
+        </div>
+        <div class="mv-a" data-for="password"><input type="password" id="mv-pw" placeholder="пароль" autocomplete="off"></div>
+        <div class="mv-a" data-for="key" hidden>
+          <textarea id="mv-key" rows="4" spellcheck="false" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;…вставьте ключ или загрузите файл"></textarea>
+          <div class="mv-row"><button type="button" class="btn ghost small" id="mv-keyload">Загрузить файл…</button><span class="muted" id="mv-keyname"></span><input type="file" id="mv-keyfile" hidden></div>
+          <input type="password" id="mv-pass" placeholder="фраза ключа, если есть" autocomplete="off">
+        </div>
+        <p class="mv-a muted" data-for="agent" hidden>Агент войдёт своими ключами из ~/.ssh без фразы.</p>
+      </div>
+    </div></div>
+    <label for="mv-dir">Куда (папка)</label>
+    <div class="mv-dirbox">
+      <input type="text" id="mv-dir" autocomplete="off" spellcheck="false" autocapitalize="off">
+      <ul class="mv-sug" id="mv-sug" hidden></ul>
+    </div>
+    <label for="mv-name">Имя</label>
+    <input type="text" id="mv-name" autocomplete="off" spellcheck="false" autocapitalize="off">
+    <label for="mv-conflict">Если там уже есть такое</label>
+    <select id="mv-conflict">
+      <option value="error">ничего не трогать и сообщить</option>
+      <option value="replace">заменить (папки слить, файлы заменить)</option>
+      <option value="skip">оставить существующее (папки слить)</option>
+    </select>
+    <div class="mv-prog" id="mv-prog" hidden>
+      <div class="mv-bar"><i id="mv-bar"></i></div>
+      <div class="mv-ptext"><span class="mv-pwrap"><span class="spinner"></span><span id="mv-ptext">подготовка…</span></span><button type="button" class="btn ghost small" id="mv-stop">Отменить</button></div>
+    </div>
+    <div class="pp-act"><button type="button" id="mv-go">Переместить</button></div>
+  </div>
+</dialog>
+
+<dialog id="propdlg" tabindex="-1">
+  <div class="dlg-h">
+    <strong style="flex:1">Свойства</strong>
+    <button class="btn ghost small icon close x" id="propdlg-close" title="Закрыть" aria-label="Закрыть"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+  <div class="dlg-b props">
+    <div class="pp-path" id="pp-path"></div>
+    <div class="pp-info muted" id="pp-info"></div>
+    <div class="pp-own">
+      <label>Владелец<input type="text" id="pp-owner" list="pp-users" autocomplete="off" spellcheck="false"></label>
+      <label>Группа<input type="text" id="pp-group" list="pp-groups" autocomplete="off" spellcheck="false"></label>
+    </div>
+    <datalist id="pp-users"></datalist><datalist id="pp-groups"></datalist>
+    <table class="pp-perm">
+      <thead><tr><th></th><th>Чтение</th><th>Запись</th><th>Выполнение</th></tr></thead>
+      <tbody>
+        <tr><th>Владелец</th><td><input type="checkbox" data-bit="256"></td><td><input type="checkbox" data-bit="128"></td><td><input type="checkbox" data-bit="64"></td></tr>
+        <tr><th>Группа</th><td><input type="checkbox" data-bit="32"></td><td><input type="checkbox" data-bit="16"></td><td><input type="checkbox" data-bit="8"></td></tr>
+        <tr><th>Остальные</th><td><input type="checkbox" data-bit="4"></td><td><input type="checkbox" data-bit="2"></td><td><input type="checkbox" data-bit="1"></td></tr>
+      </tbody>
+    </table>
+    <label class="pp-num">Числовое значение <input type="text" id="pp-mode" maxlength="4" inputmode="numeric" autocomplete="off"></label>
+    <div class="pp-rec" id="pp-rec" hidden>
+      <label class="check"><input type="checkbox" id="pp-recursive"> Применить ко всем вложенным</label>
+      <select id="pp-only" disabled>
+        <option value="">к файлам и папкам</option>
+        <option value="files">только к файлам</option>
+        <option value="dirs">только к папкам</option>
+      </select>
+    </div>
+    <div class="pp-act"><button type="button" id="pp-apply">Применить</button></div>
+  </div>
+</dialog>
+
+<div class="toast" id="toast"></div>
+<script>window.APP = {admin: {{.IsAdmin}}, open: {{.Open}}, dialog: {{.Dialog}}, editLimit: {{.EditLimit}}};</script>
 <script src="{{asset "wsutil.js"}}"></script>
 <script src="{{asset "xterm.js"}}"></script>
 <script src="{{asset "addon-fit.js"}}"></script>
 <script src="{{asset "app.js"}}"></script>
 <script src="{{asset "workspace.js"}}"></script>
 <script src="{{asset "termpane.js"}}"></script>
+<script src="{{asset "codemirror/codemirror.js"}}"></script>
+<script src="{{asset "docview.js"}}"></script>
+<script src="{{asset "dbedit.js"}}"></script>
+<script src="{{asset "fileviews.js"}}"></script>
+<script src="{{asset "filepane.js"}}"></script>
 <script src="{{asset "pages.js"}}"></script>
 <script src="{{asset "users.js"}}"></script>
 <script src="{{asset "account.js"}}"></script>