From 39b80cb484119e26590116121f2b770804f18c5b Mon Sep 17 00:00:00 2001
From: Carter <safe@fea.st>
Date: Wed, 17 Jan 2024 14:01:57 -0800
Subject: [PATCH] modernize iconified-input

---
 .../src/assets/stylesheets/components.scss    | 28 +++++++++++++++++++
 theseus_gui/src/components/GridDisplay.vue    |  2 +-
 .../src/components/ui/AccountsCard.vue        |  1 +
 theseus_gui/src/components/ui/ExportModal.vue |  4 +--
 .../components/ui/InstanceCreationModal.vue   |  2 +-
 .../ui/tutorial/FakeGridDisplay.vue           |  2 +-
 .../src/components/ui/tutorial/FakeSearch.vue |  2 +-
 .../components/ui/tutorial/ImportingCard.vue  |  2 +-
 .../src/components/ui/tutorial/LoginCard.vue  |  2 +-
 theseus_gui/src/main.js                       | 20 ++++++++++++-
 theseus_gui/src/pages/Browse.vue              |  9 +-----
 theseus_gui/src/pages/Settings.vue            |  2 +-
 12 files changed, 58 insertions(+), 18 deletions(-)
 create mode 100644 theseus_gui/src/assets/stylesheets/components.scss

diff --git a/theseus_gui/src/assets/stylesheets/components.scss b/theseus_gui/src/assets/stylesheets/components.scss
new file mode 100644
index 000000000..79cff73ac
--- /dev/null
+++ b/theseus_gui/src/assets/stylesheets/components.scss
@@ -0,0 +1,28 @@
+// Quick snippets stolen from knossos project to make omorphia components fit
+
+.iconified-input {
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+
+  input {
+    padding-left: 2.25rem;
+    width: 100%;
+  }
+
+  &:focus-within svg {
+    color: var(--color-button-text-active);
+    opacity: 1;
+  }
+
+  svg {
+    position: absolute;
+    left: 0.75rem;
+    height: 1.25rem;
+    width: 1.25rem;
+    z-index: 1;
+
+    color: var(--color-button-text);
+    opacity: 0.6;
+  }
+}
diff --git a/theseus_gui/src/components/GridDisplay.vue b/theseus_gui/src/components/GridDisplay.vue
index 192e9f965..39b288776 100644
--- a/theseus_gui/src/components/GridDisplay.vue
+++ b/theseus_gui/src/components/GridDisplay.vue
@@ -246,7 +246,7 @@ const filteredResults = computed(() => {
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
         <XIcon />
       </Button>
     </div>
diff --git a/theseus_gui/src/components/ui/AccountsCard.vue b/theseus_gui/src/components/ui/AccountsCard.vue
index a5443b1e2..85e47a954 100644
--- a/theseus_gui/src/components/ui/AccountsCard.vue
+++ b/theseus_gui/src/components/ui/AccountsCard.vue
@@ -83,6 +83,7 @@
             v-tooltip="'Open link'"
             icon-only
             color="raised"
+            class="r-btn"
             @click="() => clipboardWrite(loginUrl)"
           >
             <GlobeIcon />
diff --git a/theseus_gui/src/components/ui/ExportModal.vue b/theseus_gui/src/components/ui/ExportModal.vue
index 29684fae0..0fa1c1d4e 100644
--- a/theseus_gui/src/components/ui/ExportModal.vue
+++ b/theseus_gui/src/components/ui/ExportModal.vue
@@ -112,7 +112,7 @@ const exportPack = async () => {
         <div class="iconified-input">
           <PackageIcon />
           <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-          <Button @click="nameInput = ''">
+          <Button class="r-btn" @click="nameInput = ''">
             <XIcon />
           </Button>
         </div>
@@ -122,7 +122,7 @@ const exportPack = async () => {
         <div class="iconified-input">
           <VersionIcon />
           <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-          <Button @click="versionInput = ''">
+          <Button class="r-btn" @click="versionInput = ''">
             <XIcon />
           </Button>
         </div>
diff --git a/theseus_gui/src/components/ui/InstanceCreationModal.vue b/theseus_gui/src/components/ui/InstanceCreationModal.vue
index 39812c3b7..bc84164f2 100644
--- a/theseus_gui/src/components/ui/InstanceCreationModal.vue
+++ b/theseus_gui/src/components/ui/InstanceCreationModal.vue
@@ -110,7 +110,7 @@
               placeholder="Path to launcher"
               @change="setPath"
             />
-            <Button @click="() => (selectedLauncherPath = '')">
+            <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
               <XIcon />
             </Button>
           </div>
diff --git a/theseus_gui/src/components/ui/tutorial/FakeGridDisplay.vue b/theseus_gui/src/components/ui/tutorial/FakeGridDisplay.vue
index bafa22ef0..6b2fcdf2d 100644
--- a/theseus_gui/src/components/ui/tutorial/FakeGridDisplay.vue
+++ b/theseus_gui/src/components/ui/tutorial/FakeGridDisplay.vue
@@ -23,7 +23,7 @@ defineProps({
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
         <XIcon />
       </Button>
     </div>
diff --git a/theseus_gui/src/components/ui/tutorial/FakeSearch.vue b/theseus_gui/src/components/ui/tutorial/FakeSearch.vue
index 336d21f9e..b1bb94c92 100644
--- a/theseus_gui/src/components/ui/tutorial/FakeSearch.vue
+++ b/theseus_gui/src/components/ui/tutorial/FakeSearch.vue
@@ -189,7 +189,7 @@ defineProps({
             type="text"
             :placeholder="`Search ${projectType}s...`"
           />
-          <Button @click="() => (query = '')">
+          <Button class="r-btn" @click="() => (query = '')">
             <XIcon />
           </Button>
         </div>
diff --git a/theseus_gui/src/components/ui/tutorial/ImportingCard.vue b/theseus_gui/src/components/ui/tutorial/ImportingCard.vue
index 3139b5d4a..c086c1305 100644
--- a/theseus_gui/src/components/ui/tutorial/ImportingCard.vue
+++ b/theseus_gui/src/components/ui/tutorial/ImportingCard.vue
@@ -132,7 +132,7 @@ const next = async () => {
             placeholder="Path to launcher"
             @change="setPath"
           />
-          <Button @click="() => (selectedLauncherPath = '')">
+          <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
             <XIcon />
           </Button>
         </div>
diff --git a/theseus_gui/src/components/ui/tutorial/LoginCard.vue b/theseus_gui/src/components/ui/tutorial/LoginCard.vue
index 5a928e6c8..2f4fd32f2 100644
--- a/theseus_gui/src/components/ui/tutorial/LoginCard.vue
+++ b/theseus_gui/src/components/ui/tutorial/LoginCard.vue
@@ -119,7 +119,7 @@ const clipboardWrite = async (a) => {
         <div class="iconified-input">
           <LogInIcon />
           <input type="text" :value="loginUrl" readonly />
-          <Button v-tooltip="'Open link'" icon-only color="raised" @click="openUrl">
+          <Button v-tooltip="'Open link'" icon-only color="raised" class="r-btn" @click="openUrl">
             <GlobeIcon />
           </Button>
         </div>
diff --git a/theseus_gui/src/main.js b/theseus_gui/src/main.js
index 6086d334a..e53e0ca0f 100644
--- a/theseus_gui/src/main.js
+++ b/theseus_gui/src/main.js
@@ -2,8 +2,10 @@ import { createApp } from 'vue'
 import router from '@/routes'
 import App from '@/App.vue'
 import { createPinia } from 'pinia'
+import { createPlugin as createVintl } from '@vintl/vintl/plugin'
 import 'omorphia/dist/style.css'
 import '@/assets/stylesheets/global.scss'
+import '@/assets/stylesheets/components.scss'
 import 'floating-vue/dist/style.css'
 import FloatingVue from 'floating-vue'
 import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -14,9 +16,25 @@ import { isDev } from './helpers/utils.js'
 
 const pinia = createPinia()
 
+const vintl = createVintl({
+  controllerOpts: {
+    defaultLocale: 'en-US',
+    locale: 'en-US',
+    locales: [
+      {
+        tag: 'en-US',
+        meta: {
+          displayName: 'American English',
+        },
+      },
+    ],
+  },
+})
+
 let app = createApp(App)
 app.use(router)
 app.use(pinia)
+app.use(vintl)
 app.use(FloatingVue)
 app.mixin(loadCssMixin)
 
@@ -54,7 +72,7 @@ initialize_state()
       .finally(() => {
         mountedApp.initialize()
         get_opening_command().then((command) => {
-          console.log(JSON.stringify(command)) // change me to use whatever FE command handler is made
+          console.log('Opening Command', JSON.stringify(command)) // change me to use whatever FE command handler is made
         })
       })
   })
diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 5fbdd8c71..31f765603 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -705,7 +705,7 @@ onUnmounted(() => unlistenOffline())
             :placeholder="`Search ${projectType}s...`"
             @input="onSearchChange(1)"
           />
-          <Button @click="() => clearSearch()">
+          <Button class="r-btn" @click="() => clearSearch()">
             <XIcon />
           </Button>
         </div>
@@ -843,13 +843,6 @@ onUnmounted(() => unlistenOffline())
   min-height: min-content !important;
 }
 
-.iconified-input {
-  input {
-    max-width: none !important;
-    flex-basis: auto;
-  }
-}
-
 .search-panel-container {
   display: inline-flex;
   flex-direction: row;
diff --git a/theseus_gui/src/pages/Settings.vue b/theseus_gui/src/pages/Settings.vue
index 0faeae113..e9d0370cc 100644
--- a/theseus_gui/src/pages/Settings.vue
+++ b/theseus_gui/src/pages/Settings.vue
@@ -187,7 +187,7 @@ async function refreshDir() {
         <div class="iconified-input">
           <BoxIcon />
           <input id="appDir" v-model="settingsDir" type="text" class="input" />
-          <Button @click="findLauncherDir">
+          <Button class="r-btn" @click="findLauncherDir">
             <FolderSearchIcon />
           </Button>
         </div>