fix: Improve UI responsiveness and mobile support

- Add loading and error states for blank UI (stitionai#386) - Fix mobile layout and responsive design (stitionai#538) - Improve widget components for mobile devices - Add proper truncation and overflow handling - Enhance touch scrolling support - Implement responsive sidebar layout Co-Authored-By: Erkin Alp Güney <[email protected]>
erkinalp · Dec 18, 2024 · 4192626 · 4192626
1 parent 33517de
commit 4192626
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 49 deletions.
diff --git a/ui/src/app.pcss b/ui/src/app.pcss
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --primary: #2F3337;
@@ -21,13 +21,13 @@
     --seperator: #E4E3E8;
 
     --window-outline: #E4E3E8;
-    
+
     --browser-window-dots: #E4E3E8;
     --browser-window-search: #F7F8FA;
     --browser-window-ribbon: #ffffff;
     --browser-window-foreground: #303438;
     --browser-window-background: #F7F8FA;
-    
+
     --terminal-window-dots: #E4E3E8;
     --terminal-window-ribbon: #ffffff;
     --terminal-window-background: #F7F8FA;
@@ -45,20 +45,20 @@
       --background: #1D1F21;
       --secondary: #2F3337;
       --tertiary: #81878C;
-  
+
       --foreground: #dcdcdc;
       --foreground-invert: #1D1F21;
       --foreground-light: #E6E9EB;
       --foreground-secondary: #9CA3AB;
 
       --btn: #ECECEC;
       --btn-active: #ffffff;
-  
+
       --border: #2B2F34;
       --seperator: #495058;
-  
+
       --window-outline: #4E555D;
-      
+
       --browser-window-dots: #191C1E;
       --browser-window-search: #1D2124;
       --browser-window-ribbon: #292E32;
@@ -73,20 +73,21 @@
       --slider-empty: #2F3337;
       --slider-filled: #81878C;
       --slider-thumb: #ffffff;
-  
+
       --monologue-background: #242729;
       --monologue-outline: #464C51;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    -webkit-tap-highlight-color: transparent;
   }
-  
+
   /* Styling for scrollbar */
 
   /* WebKit (Chrome, Safari) */
@@ -100,7 +101,7 @@
   }
   *::-webkit-scrollbar-thumb:hover {
     background: #6b7280;
-  } 
+  }
 
   /* firefox  */
   @-moz-document url-prefix() {
@@ -134,4 +135,4 @@
   :global(*::-ms-scrollbar-thumb:hover) {
     background: #6b7280;
   }
-}
+}
diff --git a/ui/src/lib/components/BrowserWidget.svelte b/ui/src/lib/components/BrowserWidget.svelte
@@ -10,7 +10,7 @@
 
 </script>
 
-<div class="w-full h-full flex flex-col border-[3px] rounded-xl overflow-y-auto bg-browser-window-background border-window-outline">
+<div class="w-full h-full flex flex-col border-[3px] rounded-xl overflow-hidden bg-browser-window-background border-window-outline">
   <div class="p-2 flex items-center border-b border-border bg-browser-window-ribbon h-12">
     <div class="flex space-x-2 ml-2 mr-4">
       <div class="w-3 h-3 bg-browser-window-dots rounded-full"></div>
@@ -27,24 +27,28 @@
   </div>
   <div id="browser-content" class="flex-grow overflow-y-auto">
     {#if $agentState?.browser_session.screenshot}
-      <img
-        class="browser-img"
-        src={API_BASE_URL + "/api/get-browser-snapshot?snapshot_path=" + $agentState?.browser_session.screenshot}
-        alt="Browser snapshot"
-      />
+      <div class="relative w-full h-full">
+        <img
+          class="browser-img w-full h-full object-contain"
+          src={API_BASE_URL + "/api/get-browser-snapshot?snapshot_path=" + $agentState?.browser_session.screenshot}
+          alt="Browser snapshot"
+        />
+      </div>
     {:else}
-      <div class="text-gray-400 text-sm text-center mt-5"><strong>💡 TIP:</strong> You can include a Git URL in your prompt to clone a repo!</div>
+      <div class="text-gray-400 text-sm text-center mt-5 p-4"><strong>💡 TIP:</strong> You can include a Git URL in your prompt to clone a repo!</div>
     {/if}
   </div>
 </div>
 
 <style>
   #browser-url {
-    pointer-events: none
+    pointer-events: none;
   }
 
   .browser-img {
     display: block;
     object-fit: contain;
+    max-width: 100%;
+    height: auto;
   }
-</style>
+</style>
diff --git a/ui/src/lib/components/EditorWidget.svelte b/ui/src/lib/components/EditorWidget.svelte
@@ -87,13 +87,13 @@
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
     </div>
-      <div id="tabContainer" class="flex text-tertiary text-sm overflow-x-auto" bind:this={tabContainer} />
+      <div id="tabContainer" class="flex text-tertiary text-sm overflow-x-auto whitespace-nowrap" bind:this={tabContainer} />
       {#if Object.keys(models).length == 0}
-        <div class="flex items-center text-tertiary text-sm">Code viewer</div>
+        <div class="flex items-center text-tertiary text-sm truncate">Code viewer</div>
       {/if}
   </div>
-  <div class="h-full w-full flex">
-    <div class="min-w-[260px] overflow-y-auto bg-secondary h-full text-foreground text-sm flex flex-col pt-2" bind:this={sidebarContainer} />
+  <div class="h-full w-full flex flex-col md:flex-row">
+    <div class="w-full md:w-64 md:min-w-[260px] overflow-y-auto bg-secondary h-48 md:h-full text-foreground text-sm flex flex-col pt-2" bind:this={sidebarContainer} />
     <div class="h-full w-full rounded-bl-lg bg-terminal-window-background p-0" bind:this={editorContainer} />
   </div>
-</div>
+</div>
diff --git a/ui/src/lib/components/ErrorFallback.svelte b/ui/src/lib/components/ErrorFallback.svelte
@@ -0,0 +1,15 @@
+<script>
+  export let message = "An error occurred";
+  export let retryAction = () => window.location.reload();
+</script>
+
+<div class="flex items-center justify-center h-full">
+  <div class="text-center">
+    <p class="text-red-500 mb-2">{message}</p>
+    <button
+      class="px-4 py-2 bg-primary text-foreground-invert rounded hover:bg-btn-active"
+      on:click={retryAction}>
+      Retry
+    </button>
+  </div>
+</div>
diff --git a/ui/src/lib/components/LoadingSpinner.svelte b/ui/src/lib/components/LoadingSpinner.svelte
@@ -0,0 +1,11 @@
+<script>
+  export let size = "h-8 w-8";
+  export let message = "Loading...";
+</script>
+
+<div class="flex items-center justify-center h-full">
+  <div class="text-center">
+    <div class="animate-spin rounded-full {size} border-b-2 border-primary mx-auto mb-4"></div>
+    <p class="text-foreground-light">{message}</p>
+  </div>
+</div>
diff --git a/ui/src/lib/components/TerminalWidget.svelte b/ui/src/lib/components/TerminalWidget.svelte
@@ -42,23 +42,19 @@
         let output = state.terminal_session.output || "Waiting...";
         let title = state.terminal_session.title || "Terminal";
 
-        // Check if the current state is different from the previous state
         if (
           command !== previousState.command ||
           output !== previousState.output ||
           title !== previousState.title
         ) {
-          // addCommandAndOutput(command, output, title);
           if (title) {
             document.getElementById("terminal-title").innerText = title;
           }
           terminal.reset();
           terminal.write(`$ ${command}\r\n\r\n${output}\r\n`);
-          // Update the previous state
           previousState = { command, output, title };
         }
       } else {
-        // Reset the terminal
         terminal.reset();
       }
 
@@ -76,27 +72,28 @@
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
     </div>
-    <span id="terminal-title" class="text-tertiary text-sm">Terminal</span>
+    <span id="terminal-title" class="text-tertiary text-sm truncate">Terminal</span>
   </div>
   <div
     id="terminal-content"
-    class="w-full h-full rounded-bl-lg bg-terminal-window-background "
+    class="w-full h-full rounded-bl-lg bg-terminal-window-background overflow-x-auto"
   ></div>
 </div>
 
 <style>
   #terminal-content :global(.xterm) {
     padding: 10px;
+    max-width: 100%;
   }
   #terminal-content :global(.xterm-screen) {
     width: 100% !important;
-
+    max-width: 100vw;
   }
   #terminal-content :global(.xterm-rows) {
     width: 100% !important;
     height: 100% !important;
-    overflow-x: scroll !important;
-    /* hide the scrollbar */
-    scrollbar-width: none;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
   }
 </style>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
@@ -39,19 +39,37 @@
 <div class="flex h-full flex-col flex-1 gap-4 p-4 overflow-hidden">
   <ControlPanel />
 
-  <div class="flex h-full overflow-x-scroll">
-    <div class="flex flex-1 min-w-[calc(100vw-120px)] h-full gap-2">
-      <div class="flex flex-col gap-2 w-full h-full pr-4">
-        <MessageContainer />
-        <MessageInput />
+  {#if $serverStatus === undefined}
+    <div class="flex items-center justify-center h-full">
+      <div class="text-center">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+        <p class="text-foreground-light">Connecting to server...</p>
       </div>
-      <div class="flex flex-col gap-4 h-full w-full p-2">
-        <BrowserWidget />
-        <TerminalWidget />
+    </div>
+  {:else if !$serverStatus}
+    <div class="flex items-center justify-center h-full">
+      <div class="text-center">
+        <p class="text-red-500 mb-2">Failed to connect to server</p>
+        <button
+          class="px-4 py-2 bg-primary text-foreground-invert rounded hover:bg-btn-active"
+          on:click={() => window.location.reload()}>
+          Retry Connection
+        </button>
       </div>
     </div>
-    <div class="flex flex-col gap-2 min-w-[calc(100vw-120px)] h-full pr-4 p-2">
-      <EditorWidget />
+  {:else}
+    <div class="flex h-full overflow-x-auto md:overflow-x-hidden">
+      <div class="flex flex-col md:flex-row w-full h-full gap-2">
+        <div class="flex flex-col gap-2 w-full h-full md:w-1/2 lg:w-2/5">
+          <MessageContainer />
+          <MessageInput />
+        </div>
+        <div class="flex flex-col gap-4 h-full w-full md:w-1/2 lg:w-3/5 p-2">
+          <BrowserWidget />
+          <TerminalWidget />
+          <EditorWidget />
+        </div>
+      </div>
     </div>
-  </div>
-</div>
+  {/if}
+</div>