Merge pull request #35 from vincent99/main

UI Tweaks

Author: vincent99

ui/.ackrc

@@ -10,5 +10,4 @@
 --ignore-dir=tmp
 --ignore-dir=vendor
 --ignore-file=ext:svg
---ignore-file=is:selection.json
---ignore-file=is:yarn.lock
+--ignore-file=is:package-lock.json

ui/Makefile

@@ -1,9 +1,9 @@
 build: clean
-	yarn
-	yarn generate
+	npm install
+	npm run generate
 	rm -rf ../static/ui/_nuxt
 	cp -rp .output/public/* ../static/ui/
 	touch ../static/ui/_nuxt/_placeholder
 
 clean:
-	yarn clean
+	npm run clean

ui/README.md

@@ -5,21 +5,21 @@ Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introdu
 ## Setup
 
 ```bash
-yarn install
+npm install
 ```
 
 ## Development Server
 
 Start the development server on `http://localhost:9091`:
 
 ```bash
-yarn dev
+npm run dev
 ```
 
 ## Production
 
-Build the application for embedding into GPTScript:
+Build the application for embedding into GPTScript (the Makefile does this):
 
 ```bash
-yarn run generate
+npm run generate
 ```

ui/app.config.ts

@@ -4,9 +4,15 @@ export default defineAppConfig({
     gray: 'cool',
 
     card: {
+      header: {
+        padding: 'px-1 py-1 sm:p-2',
+      },
       body: {
         padding: 'px-1 py-1 sm:p-2'
-      }
+      },
+      footer: {
+        padding: 'px-1 py-1 sm:p-2'
+      },
     }
   },
 })

ui/app.vue

@@ -1,9 +1,53 @@
 <script lang="ts" setup>
-  import '@/styles/app.scss'
+const sock = useSocket()
+const router = useRouter()
+
+useHead({
+  meta: [
+    { charset: 'utf-8' },
+    { name: 'apple-mobile-web-app-capable', content: 'yes' },
+    { name: 'format-detection', content: 'telephone=no' },
+    { name: 'viewport', content: `width=device-width, height=device-height` },
+  ],
+})
+
+const root = ref<HTMLDivElement>()
+
+watch(router.currentRoute, () => {
+  root.value?.classList.remove('open')
+})
+
+
+function toggle() {
+  root.value?.classList.toggle('open')
+}
 </script>
+
 <template>
-  <div class="root bg-slate-100 dark:bg-slate-950">
-    <LeftNav class="left-nav bg-slate-200 dark:bg-slate-900"/>
+  <div ref="root" class="root bg-slate-50 dark:bg-slate-950">
+    <header class="flex bg-slate-300 dark:bg-slate-900">
+      <div class="toggle flex-initial p-2">
+        <UButton icon="i-heroicons-bars-3" @click="toggle"/>
+      </div>
+      <div class="flex-initial">
+        <img src="~/assets/logo.svg" class="dark:invert" style="height: 100%; padding: 0.25rem;"/>
+      </div>
+
+      <div class="flex-1"/>
+
+      <div class="flex-initial text-right p-2" v-if="sock.sock.status !== 'OPEN'">
+        <UBadge color="red" size="lg" variant="solid">
+          <i class="i-heroicons-bolt-slash"/>&nbsp;{{ucFirst(sock.sock.status.toLowerCase())}}
+        </UBadge>
+      </div>
+
+      <div class="text-right p-2 flex-initial">
+        <ThemeToggle />
+      </div>
+    </header>
+
+    <LeftNav class="left-nav bg-slate-100 dark:bg-slate-900"/>
+
     <main>
       <NuxtPage />
     </main>
@@ -12,17 +56,24 @@
 
 <style lang="scss" scoped>
   .root {
-    --nav-width: 300px;
+    --nav-width: 500px;
+    --header-height: 50px;
 
     display: grid;
-    grid-template-areas: "nav main";
-    grid-template-columns: var(--nav-width) 1fr;
-
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    overflow: hidden;
+
+    grid-template-areas: "header header" "nav main";
+    grid-template-rows: var(--header-height) 1fr;
+    grid-template-columns: 300px 1fr;
+
+    HEADER {
+      grid-area: header;
+    }
 
     .left-nav {
       grid-area: nav;
@@ -36,4 +87,31 @@
       padding: 1rem;
     }
   }
+
+  // Desktop
+  @media all and (min-width: 768px)  {
+    .root {
+      .toggle {
+        display: none;
+      }
+    }
+  }
+
+  // Mobile
+  @media all and (max-width: 767px)  {
+    .root {
+      grid-template-columns: 0 100%;
+      transition: grid-template-columns 250ms;
+
+      .left-nav { opacity: 0; }
+      MAIN { opacity: 1}
+    }
+    .root.open {
+      grid-template-columns: 100% 0;
+
+      .left-nav { opacity: 1; }
+      MAIN { opacity: 0; }
+    }
+  }
+
 </style>

ui/assets/logo.svg

@@ -0,0 +1,2 @@
+@import "./base";
+@import "./poppins/poppins";