fix(lesy-pilot-ui): fix mobile view layout

packages/misc/pilot-ui/src/app/components/command/command.component.ts

@@ -23,7 +23,7 @@ export class CommandComponent implements OnInit, OnChanges {
   shell = "";
   questions = [];
 
-  @Select(state => state.prompt)
+  @Select((state) => state.prompt)
   prompt$: Observable<PromptModel>;
 
   constructor(
@@ -37,11 +37,11 @@ export class CommandComponent implements OnInit, OnChanges {
     this.store.dispatch(new LoadCommands());
     this.store.dispatch(new ListenForPrompt());
 
-    this.prompt$.subscribe(p => {
+    this.prompt$.subscribe((p) => {
       if (!p.messageId) {
         return;
       }
-      p.questions = p.questions.map(q => {
+      p.questions = p.questions.map((q) => {
         if (!q.default) {
           q.required = true;
         }
@@ -58,10 +58,10 @@ export class CommandComponent implements OnInit, OnChanges {
       Object.keys(this.command.args),
       Object.keys(this.command.flags),
     );
-    const argCollection = Object.keys(this.command.args).map(a => {
+    const argCollection = Object.keys(this.command.args).map((a) => {
       return { name: a, ...this.command.args[a] };
     });
-    const flagCollection = Object.keys(this.command.flags).map(a => {
+    const flagCollection = Object.keys(this.command.flags).map((a) => {
       return { name: a, ...this.command.flags[a] };
     });
     this.questions = this.qs.getQuestions([
@@ -85,20 +85,29 @@ export class CommandComponent implements OnInit, OnChanges {
     this.store.dispatch(new ToggleConsolePanel());
   }
 
-  private parseShellCommand(name, args, flags) {
-    const cmd = `<span class="text-syntax-cmd">${this.config.pilot.cmdName}</span>`;
-    const cmdName = `<span class="text-syntax-name font-bold">${name}</span>`;
+  private replaceDefault(name: string) {
+    return name.replace("default", "");
+  }
+
+  private html(text: string, cls: string, extra: string = "") {
+    return `<span class="text-syntax-${cls} ${extra}">${text}</span>`;
+  }
+
+  private parseShellCommand(name: string, args: string[], flags: string[]) {
+    const cmd = this.html(this.config.pilot.cmdName, "cmd");
+    const newCmdName = this.replaceDefault(name);
+    const cmdName = this.html(newCmdName, "name", "font-bold");
     const cmdArgs = args
-      .map(arg => {
-        const openSqBracket = `<span class="text-syntax-bracket">[</span>`;
-        const closeSqBracket = `<span class="text-syntax-bracket">]</span>`;
-        const argName = `<span class="text-syntax-arg">${arg}</span>`;
+      .map((arg: string) => {
+        const openSqBracket = this.html("[", "bracket");
+        const closeSqBracket = this.html("]", "bracket");
+        const argName = this.html(arg, "arg");
         return `${openSqBracket}${argName}${closeSqBracket}`;
       })
       .join(" ");
     const cmdFlags = flags
-      .map(flag => {
-        return `<span class="text-syntax-flag">--${flag}</span> `;
+      .map((flag: string) => {
+        return this.html(`--${flag}`, "flag") + " ";
       })
       .join("");
     return `$ ${cmd} ${cmdName} ${cmdArgs} ${cmdFlags}`;

packages/misc/pilot-ui/src/app/components/header/header.template.html

@@ -2,15 +2,15 @@
   class="bg-white flex border-bottom-2 border-b border-gray-300"
   *ngIf="webConfig$ | async as config"
 >
-  <div class="container mx-auto" *ngIf="config.pilot">
+  <div class="w-full lg:container lg:mx-auto" *ngIf="config.pilot">
     <div class="flex flex-wrap items-center px-6 py-4">
       <div class="w-full sm:w-1/3 flex items-center p-5 sm:p-0 justify-start">
         <i class="ri-dashboard-line mr-3 text-xl text-violet"></i>
         <a class="font-semibold text-gray-700" href="#"
           >{{ config.pilot.appName }}</a
         >
         <span
-          class="border border-gray-400 text-gray-600 rounded ml-4 px-3 py-1 text-sm font-semibold"
+          class="border border-gray-400 text-gray-600 rounded ml-4 px-3 py-1 text-sm font-semibold whitespace-pre"
           >v{{config.pilot.appVersion}}</span
         >
       </div>

packages/misc/pilot-ui/src/app/pages/commands/commands.template.html

@@ -1,13 +1,14 @@
-<div class="flex flex-wrap flex-1">
+<div class="flex flex-col flex-no-wrap lg:flex-row flex-1">
   <div
-    class="w-full lg:w-4/12 px-6 md:max-w-sm bg-gray-100"
+    class="w-full lg:max-w-sm px-6 text-center bg-gray-100"
     [class.parent]="showMobileMenu"
   >
     <div
-      class="bg-gray-200 rounded-lg border border-gray-400 shadow-inner text-gray-600 p-3 mb-10 text-center cursor-pointer select-none lg:hidden"
+      class="bg-gray-200 rounded-lg border border-gray-400 shadow-inner text-gray-600 p-3 my-10 text-center cursor-pointer select-none lg:hidden inline-flex items-center"
       (click)="showMobileMenu=!showMobileMenu"
     >
       View command list
+      <i class="ri-arrow-{{showMobileMenu?'up':'down'}}-s-line text-xl"></i>
     </div>
     <pilot-sidemenu
       [commands]="commands"

packages/misc/pilot-ui/src/assets/browserconfig.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <TileColor>#A03232</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

packages/misc/pilot-ui/src/assets/site.webmanifest

@@ -0,0 +1,14 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+       {
+          "src": "/android-chrome-192x192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+       }
+    ],
+    "theme_color": "#A03232",
+    "background_color": "#FFFFFF",
+    "display": "standalone"
+ }

packages/misc/pilot-ui/src/index.html

@@ -2,11 +2,31 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Pilot | Clik Web UI</title>
+    <title>Pilot UI | Lesy</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/assets/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/assets/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/assets/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/assets/site.webmanifest" />
+    <meta name="msapplication-config" content="/assets/browserconfig.xml" />
+    <meta name="msapplication-TileColor" content="#596aa8" />
+    <meta name="theme-color" content="#596aa8" />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"