feat: browser layout, custom window controls

README.md

@@ -1,2 +1,9 @@
+<div align="center">
+
+  ![vigi logo](https://github.com/TxtDot/.github/raw/main/imgs/vigi.png)
+
   # vigi
+
+</div>
+
 Browser for dalet, text, gemtext (gemini protocol included) with native support of txtdot proxy and local txtdot engines

package.json

@@ -16,14 +16,18 @@
     "@tauri-apps/api": "^1"
   },
   "devDependencies": {
+    "@iconify/svelte": "^4.0.2",
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tauri-apps/cli": "^1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.40",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.4.7",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.3",
+    "vite": "^5.0.3"
-    "@tauri-apps/cli": "^1"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "1", features = [] }
 
 [dependencies]
-tauri = { version = "1", features = ["shell-open"] }
+tauri = { version = "1", features = [ "window-hide", "window-start-dragging", "window-close", "window-minimize", "window-show", "window-unminimize", "window-unmaximize", "window-maximize", "shell-open"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 

src-tauri/tauri.conf.json

@@ -15,13 +15,25 @@
       "shell": {
         "all": false,
         "open": true
+      },
+      "window": {
+        "all": false,
+        "close": true,
+        "hide": true,
+        "show": true,
+        "maximize": true,
+        "minimize": true,
+        "unmaximize": true,
+        "unminimize": true,
+        "startDragging": true
       }
     },
     "windows": [
       {
         "title": "vigi",
         "width": 800,
-        "height": 600
+        "height": 600,
+        "decorations": false
       }
     ],
     "security": {

src/app.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.window {
+  @apply bg-gray-900 text-slate-200;
+  @apply p-3 gap-3 w-screen h-screen;
+  @apply grid grid-cols-8;
+}

src/lib/components/Block.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let className = "";
+</script>
+
+<div class="p-3 rounded-xl bg-gray-700{className ? ` ${className}` : ''}">
+  <slot />
+</div>

src/lib/components/Button.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let onClick = () => {};
+</script>
+
+<button
+  class="hover:cursor-pointer hover:bg-gray-800 active:bg-gray-900 p-1 rounded-lg"
+  on:click={onClick}
+>
+  <slot />
+</button>

src/lib/components/WindowControls.svelte

@@ -0,0 +1,20 @@
+<script>
+  import Close from "$lib/icons/Close.svelte";
+  import Maximize from "$lib/icons/Maximize.svelte";
+  import Minimize from "$lib/icons/Minimize.svelte";
+  import Button from "./Button.svelte";
+
+  import { appWindow } from "@tauri-apps/api/window";
+</script>
+
+<div class="flex justify-start" data-tauri-drag-region>
+  <Button onClick={() => appWindow.close()}>
+    <Close />
+  </Button>
+  <Button onClick={() => appWindow.toggleMaximize()}>
+    <Maximize />
+  </Button>
+  <Button onClick={() => appWindow.minimize()}>
+    <Minimize />
+  </Button>
+</div>

src/lib/icons/Close.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 36 36"
+  {...$$props}
+>
+  <path
+    fill="currentColor"
+    d="m19.41 18l7.29-7.29a1 1 0 0 0-1.41-1.41L18 16.59l-7.29-7.3A1 1 0 0 0 9.3 10.7l7.29 7.3l-7.3 7.29a1 1 0 1 0 1.41 1.41l7.3-7.29l7.29 7.29a1 1 0 0 0 1.41-1.41Z"
+    class="clr-i-outline clr-i-outline-path-1"
+  />
+  <path fill="none" d="M0 0h36v36H0z" />
+</svg>

src/lib/icons/Maximize.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 36 36"
+  {...$$props}
+>
+  <path
+    fill="currentColor"
+    d="M27.89 9h-20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2m-20 16V11h20v14Z"
+    class="clr-i-outline clr-i-outline-path-1"
+  />
+  <path fill="none" d="M0 0h36v36H0z" />
+</svg>

src/lib/icons/Minimize.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 36 36"
+  {...$$props}
+>
+  <path
+    fill="currentColor"
+    d="M27 27H9a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2"
+    class="clr-i-outline clr-i-outline-path-1"
+  />
+  <path fill="none" d="M0 0h36v36H0z" />
+</svg>

src/routes/+page.svelte

@@ -1,156 +1,12 @@
-<script lang="ts">
+<script>
-  import { invoke } from "@tauri-apps/api/tauri";
+  import Block from "$lib/components/Block.svelte";
-
+  import WindowControls from "$lib/components/WindowControls.svelte";
-  let name = "";
+  import "../app.css";
-  let greetMsg = "";
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    greetMsg = await invoke("greet", { name });
-  }
 </script>
 
-<div class="container">
+<div class="window" data-tauri-drag-region>
-  <h1>Welcome to Tauri!</h1>
+  <Block className="col-span-2">
-
+    <WindowControls />
-  <div class="row">
+  </Block>
-    <a href="https://vitejs.dev" target="_blank">
+  <Block className="col-span-6">Browser window</Block>
-      <img src="/vite.svg" class="logo vite" alt="Vite Logo" />
-    </a>
-    <a href="https://tauri.app" target="_blank">
-      <img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
-    </a>
-    <a href="https://kit.svelte.dev" target="_blank">
-      <img src="/svelte.svg" class="logo svelte-kit" alt="SvelteKit Logo" />
-    </a>
 </div>
-
-  <p>Click on the Tauri, Vite, and SvelteKit logos to learn more.</p>
-
-  <form class="row" on:submit|preventDefault={greet}>
-    <input id="greet-input" placeholder="Enter a name..." bind:value={name} />
-    <button type="submit">Greet</button>
-  </form>
-
-  <p>{greetMsg}</p>
-</div>
-
-<style>
-  .logo.vite:hover {
-    filter: drop-shadow(0 0 2em #747bff);
-  }
-
-  .logo.svelte-kit:hover {
-    filter: drop-shadow(0 0 2em #ff3e00);
-  }
-
-  :root {
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-
-    color: #0f0f0f;
-    background-color: #f6f6f6;
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-  }
-
-  .container {
-    margin: 0;
-    padding-top: 10vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: 0.75s;
-  }
-
-  .logo.tauri:hover {
-    filter: drop-shadow(0 0 2em #24c8db);
-  }
-
-  .row {
-    display: flex;
-    justify-content: center;
-  }
-
-  a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-  }
-
-  a:hover {
-    color: #535bf2;
-  }
-
-  h1 {
-    text-align: center;
-  }
-
-  input,
-  button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    color: #0f0f0f;
-    background-color: #ffffff;
-    transition: border-color 0.25s;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-  }
-
-  button {
-    cursor: pointer;
-  }
-
-  button:hover {
-    border-color: #396cd8;
-  }
-  button:active {
-    border-color: #396cd8;
-    background-color: #e8e8e8;
-  }
-
-  input,
-  button {
-    outline: none;
-  }
-
-  #greet-input {
-    margin-right: 5px;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      color: #f6f6f6;
-      background-color: #2f2f2f;
-    }
-
-    a:hover {
-      color: #24c8db;
-    }
-
-    input,
-    button {
-      color: #ffffff;
-      background-color: #0f0f0f98;
-    }
-    button:active {
-      background-color: #0f0f0f69;
-    }
-  }
-</style>

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+