From cc3a7a2d0d09cc411bbe37964b90fe683e6f5cd6 Mon Sep 17 00:00:00 2001
From: Charles <charles@pelican.dev>
Date: Sat, 7 Dec 2024 19:22:18 -0500
Subject: [PATCH] Update Server Console, Again... (#776)

* More console changes

* Update Console Page

* Edit console input

* oops

* Remove failed attempt of clearing input when server offline

* Update File Editor to match console

* a touch more style

* Show not-allowed on read-only input

* round bottom corners of command input

* Move custom css to file
---
 .../Server/Widgets/ServerCpuChart.php         |  2 +-
 .../Server/Widgets/ServerMemoryChart.php      |  2 +-
 config/filament-monaco-editor.php             |  6 +--
 public/css/filament/server/console.css        | 46 +++++++++++++++++++
 .../components/server-console.blade.php       | 27 ++++-------
 5 files changed, 59 insertions(+), 24 deletions(-)
 create mode 100644 public/css/filament/server/console.css

diff --git a/app/Filament/Server/Widgets/ServerCpuChart.php b/app/Filament/Server/Widgets/ServerCpuChart.php
index 030131022..c22918b93 100644
--- a/app/Filament/Server/Widgets/ServerCpuChart.php
+++ b/app/Filament/Server/Widgets/ServerCpuChart.php
@@ -12,7 +12,7 @@ class ServerCpuChart extends ChartWidget
 {
     protected static ?string $pollingInterval = '1s';
 
-    protected static ?string $maxHeight = '300px';
+    protected static ?string $maxHeight = '200px';
 
     public ?Server $server = null;
 
diff --git a/app/Filament/Server/Widgets/ServerMemoryChart.php b/app/Filament/Server/Widgets/ServerMemoryChart.php
index 4cd9525c6..a6944d7c0 100644
--- a/app/Filament/Server/Widgets/ServerMemoryChart.php
+++ b/app/Filament/Server/Widgets/ServerMemoryChart.php
@@ -12,7 +12,7 @@ class ServerMemoryChart extends ChartWidget
 {
     protected static ?string $pollingInterval = '1s';
 
-    protected static ?string $maxHeight = '300px';
+    protected static ?string $maxHeight = '200px';
 
     public ?Server $server = null;
 
diff --git a/config/filament-monaco-editor.php b/config/filament-monaco-editor.php
index 8b9e3c0cf..7f87c0969 100644
--- a/config/filament-monaco-editor.php
+++ b/config/filament-monaco-editor.php
@@ -18,7 +18,7 @@ return [
             'inherit' => true,
             'rules' => [
                 [
-                    'background' => '0C1021',
+                    'background' => '161F27',
                     'token' => '',
                 ],
                 [
@@ -139,8 +139,8 @@ return [
             ],
             'colors' => [
                 'editor.foreground' => '#F8F8F8',
-                'editor.background' => '#0C1021',
-                'editor.selectionBackground' => '#253B76',
+                'editor.background' => '#101519',
+                'editor.selectionBackground' => '#5a5f63',
                 'editor.lineHighlightBackground' => '#FFFFFF0F',
                 'editorCursor.foreground' => '#FFFFFFA6',
                 'editorWhitespace.foreground' => '#FFFFFF40',
diff --git a/public/css/filament/server/console.css b/public/css/filament/server/console.css
new file mode 100644
index 000000000..0e96ecd35
--- /dev/null
+++ b/public/css/filament/server/console.css
@@ -0,0 +1,46 @@
+#terminal {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.xterm .xterm-rows > div {
+    padding-left: 10px;
+    padding-top: 2px;
+    padding-right: 10px;
+}
+
+input:read-only {
+    cursor: not-allowed;
+}
+
+::-webkit-scrollbar {
+    background: none;
+    width: 14px;
+    height: 14px;
+}
+
+::-webkit-scrollbar-thumb {
+    border: solid 0 rgb(0 0 0 / 0%);
+    border-right-width: 4px;
+    border-left-width: 4px;
+    -webkit-border-radius: 9px 4px;
+    -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
+}
+
+::-webkit-scrollbar-track-piece {
+    margin: 4px 0;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    border-right-width: 0;
+    border-left-width: 0;
+    border-top-width: 4px;
+    border-bottom-width: 4px;
+    -webkit-border-radius: 4px 9px;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
diff --git a/resources/views/filament/components/server-console.blade.php b/resources/views/filament/components/server-console.blade.php
index 439a72c2f..339cf295f 100644
--- a/resources/views/filament/components/server-console.blade.php
+++ b/resources/views/filament/components/server-console.blade.php
@@ -6,33 +6,24 @@
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links/lib/addon-web-links.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search/lib/addon-search.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-search-bar/lib/xterm-addon-search-bar.min.js"></script>
-    <style>
-        #terminal {
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-        }
-
-        .xterm .xterm-rows > div {
-            padding-left: 10px;
-            padding-top: 2px;
-            padding-right: 10px;
-        }
-    </style>
+    <link rel="stylesheet" href="{{ asset('/css/filament/server/console.css') }}">
     @endassets
 
     <div id="terminal" wire:ignore></div>
 
-    <div class="flex items-center w-full bg-transparent border">
+    <div class="flex items-center w-full border-top overflow-hidden"
+         style="background-color: #202A32; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
         <x-filament::icon
             icon="tabler-chevrons-right"
         />
         <input
-            class="w-full bg-transparent p-2 focus:outline-none focus:ring-0 border-none"
+            class="w-full focus:outline-none focus:ring-0 border-none"
+            style="background-color: #202A32;"
             type="text"
+            autofocus
+            :readonly="{{ $this->canSendCommand() ? 'false' : 'true' }}"
             title="{{ $this->canSendCommand() ? '' : 'Can\'t send command when the server is Offline' }}"
-            :readonly="{{ !$this->canSendCommand() }}"
-            placeholder="Type a command..."
+            placeholder="{{ $this->canSendCommand() ? 'Type a command...' : 'Server Offline...' }}"
             wire:model="input"
             wire:keydown.enter="enter"
             wire:keydown.up.prevent="up"
@@ -70,8 +61,6 @@
             cursorStyle: 'underline',
             cursorInactiveStyle: 'none',
             allowTransparency: true,
-            letterSpacing: 0.15,
-            lineHeight: 0.50,
             rows: 30,
             theme: theme
         };