Install omorphia, Start instance settings page (#32)

.idea/inspectionProfiles/Project_Default.xml

@@ -13,5 +13,15 @@
         </value>
       </option>
     </inspection_tool>
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="style:background-image" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
   </profile>
 </component>

theseus_gui/package.json

@@ -20,13 +20,10 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "kill-port-process": "^3.0.1",
-    "postcss": "^8.4.7",
-    "postcss-load-config": "^3.1.3",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "svelte": "^3.46.0",
     "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.10.1",
     "tslib": "^2.3.1",
     "typescript": "~4.5.4"
   },
@@ -38,14 +35,7 @@
     "@iconify-json/heroicons-solid": "^1.1.1",
     "@iconify-json/lucide": "^1.1.5",
     "@tauri-apps/api": "^1.0.0-rc.1",
-    "autoprefixer": "^10.4.2",
+    "omorphia": "0.0.15",
-    "cssnano": "^5.1.0",
-    "postcss-extend-rule": "^4.0.0",
-    "postcss-import": "^14.0.2",
-    "postcss-media-minmax": "^5.0.0",
-    "postcss-nested": "^5.0.6",
-    "postcss-preset-env": "^7.4.2",
-    "sanitize.css": "^13.0.0",
     "svrollbar": "^0.10.4",
     "unplugin-icons": "^0.13.2"
   }

theseus_gui/postcss.config.cjs

@@ -1,19 +1 @@
-const dev = process.env.NODE_ENV === 'development';
+module.exports = require('omorphia/config/postcss.config.cjs')
-
-const config = {
-    plugins: [
-        require('postcss-import')(),
-        require('autoprefixer')(),
-        require('postcss-nested')(),
-        require('postcss-extend-rule')(),
-        //require('postcss-preset-env')(), Errors with cssnano
-        require('postcss-media-minmax')(),
-
-        !dev &&
-        require('cssnano')({
-            preset: 'default',
-        }),
-    ],
-};
-
-module.exports = config;

theseus_gui/src/components/Instance.svelte

@@ -9,7 +9,7 @@
     export let image: string;
 </script>
 
-<a class="instance" href="/library/instance/{id}"
+<a class="instance" href="/library/instance/{id}/settings"
    style:background-image="linear-gradient(5deg, hsla(0,0%,0%,0.8) 0%, hsla(0,0%,0%,0) 100%), url('{image}')">
     <div class="instance__version">{version}{#if modpack}<IconBadgeCheck />{/if}</div>
     <div class="instance__title">{title}</div>

theseus_gui/src/components/layout/Sidebar.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-    import VerticalNav from '../components/VerticalNav.svelte'
-    import IconHome from 'virtual:icons/lucide/home'
-    import IconSearch from 'virtual:icons/heroicons-outline/search'
-    import IconLibrary from 'virtual:icons/lucide/library';
-    import IconSettings from 'virtual:icons/lucide/settings'
-    import { page } from "$app/stores";
-</script>
-
-<div class="sidebar">
-    <div class="account">
-        <div class="account__heads">
-            <img src="https://mc-heads.net/avatar/venashial" alt="Minecraft head"/>
-        </div>
-
-        <a class="account__info" href="/settings/accounts">
-            <div>venashial</div>
-            <div class="account__info__manage">Manage accounts</div>
-        </a>
-    </div>
-
-    <VerticalNav items={[
-        {
-            label: 'Home',
-            href: '',
-            icon: IconHome,
-        },
-        {
-            label: 'Search',
-            href: 'search',
-            icon: IconSearch,
-        },
-        {
-            label: 'Library',
-            href: 'library',
-            icon: IconLibrary,
-        }
-    ]}/>
-
-    <a class="nav-item" href="/settings" class:active={$page.url.pathname.startsWith('/settings')}>
-        <IconSettings />
-        Settings
-    </a>
-</div>
-
-<style lang="postcss">
-    .sidebar {
-        display: flex;
-        flex-direction: column;
-        padding: 1rem;
-        grid-gap: 2rem;
-        height: 100%;
-        background-color: var(--sidebar-bg);
-
-        .account {
-            display: flex;
-            grid-gap: 0.75rem;
-
-            &__heads {
-                img {
-                    width: 2.5rem;
-                    border-radius: var(--rounded-sm);
-                }
-            }
-
-            &__info {
-                &__manage {
-                    color: var(--color-text-light)
-                }
-            }
-        }
-
-        *:last-child {
-            margin-top: auto;
-        }
-    }
-</style>

theseus_gui/src/layout/Page.svelte

@@ -14,7 +14,7 @@
     <Svrollbar {viewport} {contents} />
 </div>
 
-<style>
+<style lang="postcss">
     .page {
         position: relative;
         width: 100%;
@@ -38,11 +38,15 @@
         /* hide scrollbar */
         -ms-overflow-style: none;
         scrollbar-width: none;
-    }
 
-    .viewport::-webkit-scrollbar {
+        &::-webkit-scrollbar {
-        /* hide scrollbar */
+            /* hide scrollbar */
-        display: none;
+            display: none;
+        }
+
+        .contents {
+            height: 100%;
+        }
     }
 
     :global(.v-thumb) {

theseus_gui/src/layout/Sidebar.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+    import VerticalNav from '../components/VerticalNav.svelte'
+    import IconHome from 'virtual:icons/lucide/home'
+    import IconSearch from 'virtual:icons/heroicons-outline/search'
+    import IconPlus from 'virtual:icons/heroicons-outline/plus'
+    import IconLibrary from 'virtual:icons/lucide/library';
+    import IconSettings from 'virtual:icons/lucide/settings'
+    import { page } from "$app/stores";
+    import { Button } from 'omorphia'
+</script>
+
+<div class="sidebar">
+    <div class="account">
+        <div class="account__heads">
+            <img src="https://mc-heads.net/avatar/venashial" alt="Minecraft head"/>
+        </div>
+
+        <a class="account__info" href="/settings/accounts">
+            <div>venashial</div>
+            <div class="account__info__manage">Manage accounts</div>
+        </a>
+    </div>
+
+    <VerticalNav items={[
+        {
+            label: 'Home',
+            href: '',
+            icon: IconHome,
+        },
+        {
+            label: 'Search',
+            href: 'search',
+            icon: IconSearch,
+        },
+        {
+            label: 'Library',
+            href: 'library',
+            icon: IconLibrary,
+        }
+    ]}/>
+
+    <div class="instance-list">
+        <div class="instance-list__title">Instances</div>
+        <div class="instance-list__container">
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+            <a class="instance-list__container__item">Fabulously Optimized</a>
+        </div>
+        <div class="instance-list__create">
+            <Button color="primary"><IconPlus /></Button> Create instance
+        </div>
+    </div>
+
+    <a class="nav-item" href="/settings" class:active={$page.url.pathname.startsWith('/settings')}>
+        <IconSettings />
+        Settings
+    </a>
+</div>
+
+<style lang="postcss">
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        height: 100%;
+        background-color: var(--sidebar-bg);
+
+        .account {
+            display: flex;
+            grid-gap: 0.75rem;
+
+            &__heads {
+                img {
+                    width: 2.5rem;
+                    border-radius: var(--rounded-sm);
+                }
+            }
+
+            &__info {
+                &__manage {
+                    color: var(--color-text-light);
+                }
+            }
+        }
+
+        .instance-list {
+            padding: 0 8px;
+            display: flex;
+            flex-direction: column;
+            color: var(--color-text-light);
+
+            &__title {
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                font-size: 11px;
+                line-height: 100%;
+            }
+
+            &__container {
+                max-height: calc(100vh - 400px);
+                overflow-y: auto;
+                mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
+                scrollbar-width: none;
+                padding: 8px 0;
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+            }
+
+            &__create {
+                margin-top: 16px;
+                display: flex;
+                align-items: center;
+                grid-gap: 8px;
+
+                :global(button) {
+                    width: 34px;
+                }
+            }
+        }
+
+        > :global(*) {
+            margin-bottom: 24px;
+        }
+
+        > *:last-child {
+            margin-top: auto;
+            margin-bottom: 0;
+        }
+    }
+</style>

theseus_gui/src/layout/StatusBar.svelte

@@ -23,7 +23,7 @@
     <div class="breadcrumbs">
         {#each path as crumb, index}
             {#if index !== 0}
-                <div class="breadcrumbs__separator"><IconCaretRight /></div>
+                <IconCaretRight />
             {/if}
             <a class="breadcrumbs__crumb" href={crumb}>{crumb || 'home'}</a>
         {/each}
@@ -51,12 +51,13 @@
         display: flex;
         grid-gap: 0.25rem;
         text-transform: capitalize;
+        align-items: center;
 
         &__crumb:hover {
             text-decoration: underline;
         }
 
-        &__separator {
+        :global(.icon) {
             color: var(--color-text-lightest)
         }
     }

theseus_gui/src/routes/__layout.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
     import '@fontsource/inter'
-    import Sidebar from '$lib/../components/layout/Sidebar.svelte'
+    import 'omorphia/styles.postcss'
-    import StatusBar from "../components/layout/StatusBar.svelte";
+    import '$styles/global.postcss'
-    import Page from "../components/layout/Page.svelte";
+    import Sidebar from '$layout/Sidebar.svelte'
+    import StatusBar from "$layout/StatusBar.svelte";
+    import Page from "$layout/Page.svelte";
 </script>
 
-<svelte:head>
+<div class="app base theme-dark">
-    <style lang="postcss">
-        @import "../styles/global.postcss";
-    </style>
-</svelte:head>
-
-<div class="app">
     <Sidebar />
     <StatusBar />
     <Page>

theseus_gui/src/routes/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 
-import Instance from "../components/components/Instance.svelte";
+import Instance from "$components/Instance.svelte";
-import CardRow from "../components/components/CardRow.svelte";
+import CardRow from "$components/CardRow.svelte";
 </script>
 
 <CardRow title="Jump back in">

theseus_gui/src/routes/library/index.svelte

@@ -3,11 +3,9 @@
 </script>
 
 <script lang="ts">
-
 </script>
 
 
-
 <style lang="postcss">
 
 </style>

theseus_gui/src/routes/library/instance/[id]/__layout.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import VerticalNav from "$components/VerticalNav.svelte";
+    import IconPackage from 'virtual:icons/lucide/package'
+    import IconAdjustments from 'virtual:icons/heroicons-outline/adjustments'
+    import IconFileText from 'virtual:icons/lucide/file-text'
+</script>
+
+<div class="layout-instance">
+    <div class="instance-sidebar">
+        <VerticalNav level={3} items={[
+        {
+            label: 'Mods',
+            href: 'mods',
+            icon: IconPackage,
+        },
+        {
+            label: 'Settings',
+            href: 'settings',
+            icon: IconAdjustments,
+        },
+        {
+            label: 'Logs',
+            href: 'logs',
+            icon: IconFileText,
+        }
+    ]}/>
+    </div>
+
+    <div class="layout-instance__page">
+        <slot />
+    </div>
+</div>
+
+<style lang="postcss">
+    .layout-instance {
+        display: grid;
+        grid-template-columns: 224px 1fr;
+        height: 100%;
+
+        &__page {
+            height: 100%;
+            background-color: var(--sub-page-bg);
+        }
+    }
+
+    .instance-sidebar {
+        padding: 16px;
+    }
+</style>

theseus_gui/src/routes/library/instance/[id]/settings.svelte

@@ -0,0 +1,55 @@
+<script context="module" lang="ts">
+
+</script>
+
+<script lang="ts">
+    import { FormField, TextInput, Button } from "omorphia"
+</script>
+
+<div class="section">
+    <div class="section__title">Java</div>
+    <div class="section__items">
+        <FormField label="Installation">
+            <TextInput placeholder="/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home" />
+        </FormField>
+        <div class="button-group">
+            <Button>Auto-detect</Button>
+            <Button>Browse installations</Button>
+            <Button>Test</Button>
+        </div>
+
+        <FormField label="Arguments">
+            <TextInput/>
+        </FormField>
+    </div>
+</div>
+
+<style lang="postcss">
+    .section {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        grid-gap: 1rem;
+
+        &__title {
+            display: flex;
+            grid-gap: 1rem;
+            align-items: center;
+
+            &::after {
+                flex: 1 1;
+                content: " ";
+                background-color: hsla(0, 0%, 100%, 0.2);
+                height: 0.2rem;
+                border-radius: var(--rounded-max);
+            }
+        }
+
+        &__items {
+            display: flex;
+            flex-direction: column;
+            grid-gap: 1rem;
+            padding: 0 8px;
+        }
+    }
+</style>

theseus_gui/src/styles/global.postcss

@@ -1,110 +1,12 @@
-@import 'normalize.postcss';
 @import 'components.postcss';
 
-.theme {
+.theme-dark {
-    --color-brand-light: hsl(155, 54%, 30%);
-    --color-brand-dark: hsl(155, 58%, 25%);
-    --color-brand-contrast: hsl(0, 0%, 100%);
-
-    --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
-    --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
-    --shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
-
-    --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
-    --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-
-    --shadow-floating: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
-    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-    --shadow-bar: rgba(0,0,0,.3) 0 0 20px 2px;
-
-    --color-text: hsl(221, 10%, 95%);
-    --color-text-light: hsl(215, 14%, 74%);
-    --color-text-lightest: hsl(220, 9%, 70%);
-    --color-heading: hsl(222, 16%, 80%);
-    --color-link: hsl(215, 100%, 75%);
-
-    --color-raised-bg: hsl(220, 13%, 25%);
-    --color-raised-bg-hover: hsl(220, 13%, 20%);
-    --color-divider: hsl(220, 13%, 50%);
-    --color-button-bg: hsl(220, 13%, 35%);
-    --color-button-bg-hover: hsl(220, 13%, 32%);
-
-    --color-badge-gray-text: hsl(0, 2%, 69%);
-    --color-badge-gray-dot: hsl(0, 6%, 77%);
-    --color-badge-red-text: hsl(343, 63%, 67%);
-    --color-badge-red-dot: hsl(342, 70%, 53%);
-    --color-badge-green-text: hsl(156, 53%, 50%);
-    --color-badge-green-dot: hsl(140, 64%, 40%);
-    --color-badge-yellow-text: hsl(40, 57%, 60%);
-    --color-badge-yellow-dot: hsl(40, 92%, 62%);
-
-    --color-table-border: hsl(214, 12%, 35%);
-    --color-table-alternate-row: hsl(216, 12%, 17%);
-
-    --color-code-bg: hsl(217, 12%, 29%);
-
-    --color-danger-bg: hsl(355deg, 70%, 20%);
-    --color-danger-text: hsl(342deg, 70%, 75%);
-
-    --color-input-light: hsl(220, 13%, 20%);
-
-    --color-scrollbar: hsl(220, 13%, 40%);
-
-    /* Launcher added */
     --status-bg: hsl(216, 5%, 29%);
     --sidebar-bg: hsl(216, 10%, 3%);
     --nav-active-bg: hsl(217, 9%, 25%);
     --font-size-sm: 0.75rem;
     --color-bg: hsl(217, 9%, 18%);
-    --color-brand: hsl(145, 78%, 48%);
+    --color-brand: hsl(145, 75%, 45%);
-}
+    --color-brand-contrast: black;
-
+    --sub-page-bg: hsl(220, 9%, 13%)
-html, body {
+}
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-}
-
-body {
-    @extend .theme;
-    --rounded: 1rem;
-    --rounded-top: 1rem 1rem 0 0;
-    --rounded-bottom: 0 0 1rem 1rem;
-    --rounded-sm: 0.6rem;
-    --rounded-max: 999999999px;
-
-    --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
-    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-
-    --font-size-nm: 0.875rem; /* 16px */
-    --font-size-xl: 1.5rem; /* 24px */
-
-    --font-weight-regular: 400;
-    --font-weight-medium: 600;
-    --font-weight-bold: 700;
-
-    display: flex;
-    background-color: var(--color-bg) !important; /* overrides style set on first load */
-    color: var(--color-text);
-    font-family: var(--font-standard);
-    font-size: var(--font-size-nm);
-    font-weight: var(--font-weight-regular);
-    min-height: 100vh;
-    max-height: 100vh;
-
-    scrollbar-color: var(--color-scrollbar) var(--color-bg);
-
-    *::-webkit-scrollbar {
-        width: 14px;
-    }
-
-    *::-webkit-scrollbar-track {
-        background-color: var(--color-bg);
-    }
-
-    *::-webkit-scrollbar-thumb {
-        background-color: var(--color-scrollbar);
-        border-radius: 999px;
-        border: 3px solid var(--color-bg);
-    }
-}

theseus_gui/src/styles/normalize.postcss

@@ -1,55 +0,0 @@
-@import 'sanitize.css';
-@import 'sanitize.css/forms.css';
-@import 'sanitize.css/typography.css';
-
-/* Overrides */
-
-button {
-	margin: 0;
-	padding: 0;
-	font-size: inherit;
-	box-shadow: none;
-	border: none;
-	cursor: pointer;
-}
-
-a {
-	color: inherit;
-	text-decoration: none;
-}
-
-*:focus {
-	outline: none;
-}
-
-button:focus-visible,
-a:focus-visible,
-[tabindex='0']:focus-visible {
-	outline: 0.2rem solid var(--color-brand);
-}
-
-html,
-body,
-#svelte {
-	height: 100%;
-}
-
-html {
-	overflow-y: hidden;
-	overflow-x: hidden;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-	line-height: 100%;
-	margin: 0;
-}
-
-ul {
-  padding: 0 0 0 1.5rem;
-}

theseus_gui/svelte.config.js

@@ -1,27 +1,23 @@
 import adapter from '@sveltejs/adapter-static';
-import preprocess from 'svelte-preprocess';
 import path from "path";
-import Icons from 'unplugin-icons/vite';
+import { preprocess, plugins } from 'omorphia/config/svelte.config'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    preprocess: preprocess({
+    preprocess,
-        postcss: true,
-    }),
     kit: {
         adapter: adapter({
             fallback: '200.html',
         }),
         vite: {
             plugins: [
-                Icons({
+                ...plugins,
-                    compiler: 'svelte',
-                }),
             ],
             resolve: {
                 alias: {
                     $assets: path.resolve('./src/assets'),
                     $components: path.resolve('./src/components'),
+                    $layout: path.resolve('./src/layout'),
                     $lib: path.resolve('./src/lib'),
                     $stores: path.resolve('./src/stores'),
                     $styles: path.resolve('./src/styles'),

theseus_gui/tsconfig.json

@@ -30,6 +30,7 @@
 		"paths": {
 			"$assets/*": ["src/assets/*"],
 			"$components/*": ["src/components/*"],
+			"$layout/*": ["src/components/*"],
 			"$lib/*": ["src/lib/*"],
 			"$stores/*": ["src/stores/*"],
 			"$styles/*": ["src/styles/*"],