feat(dees-simple-appdash): Enhance responsive styling and terminal setup command

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2024-11-07 - 1.3.0 - feat(dees-simple-appdash)
+Enhance responsive styling and terminal setup command
+
+- Added a new property `terminalSetupCommand` for configuring terminal setup commands.
+- Improved responsive styling and positioning for components to achieve a fluid layout.
+- Fixed layout shifts by switching positions to `absolute` for `appbar` and `appcontent`.
+
 ## 2024-10-07 - 1.2.0 - feat(index.ts)
 Add export for colors module in index.ts
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.2.0',
+  version: '1.3.0',
   description: 'A library for building components and other projects'
 }

ts_web/elements/dees-simple-appdash.ts

@@ -39,6 +39,9 @@ export class DeesSimpleAppDash extends DeesElement {
   @property()
   public viewTabs: IView[] = [];
 
+  @property()
+  public terminalSetupCommand: string = `pnpm install @serve.zone/cli && clear && servezone info`;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -46,22 +49,25 @@ export class DeesSimpleAppDash extends DeesElement {
         color: ${cssManager.bdTheme('#333', '#ccc')};
         user-select: none;
         display: block;
+        overflow: hidden;
         position: relative;
         height: 100%;
+        width: 100%;
       }
 
       .maincontainer {
         position: absolute;
-        width: 100%;
-        height: 100%;
         top: 0px;
         left: 0px;
+        right: 0px;
+        bottom: 0px;
         overflow: hidden;
       }
 
       .appbar {
-        position: fixed;
-        top: 0;
+        position: absolute;
+        top: 0px;
+        left: 0px;
         height: calc(100% - 24px);
         width: 200px;
         background: ${cssManager.bdTheme('#eeeeeb', '#000')};
@@ -115,7 +121,7 @@ export class DeesSimpleAppDash extends DeesElement {
 
       .appcontent {
         z-index: 1;
-        position: fixed;
+        position: absolute;
         top: 0px;
         right: 0px;
         height: calc(100vh - 24px);
@@ -192,9 +198,12 @@ export class DeesSimpleAppDash extends DeesElement {
     await this.loadView(this.viewTabs[0]);
   }
 
+  public currentTerminal: DeesTerminal;
   public async launchTerminal() {
     const maincontainer = this.shadowRoot.querySelector('.maincontainer');
     const terminal = new DeesTerminal();
+    terminal.setupCommand = this.terminalSetupCommand;
+    this.currentTerminal = terminal;
     maincontainer.appendChild(terminal);
     terminal.style.position = 'absolute';
     terminal.style.zIndex = '1';
@@ -208,6 +217,7 @@ export class DeesSimpleAppDash extends DeesElement {
     await domtools.plugins.smartdelay.delayFor(0);
     terminal.style.opacity = '1';
     terminal.style.transform = 'translateY(0px)';
+    return terminal;
   }
 
   private currentView: DeesElement;