last second changes for auth and sidebar

theseus_gui/src/App.vue

@@ -13,7 +13,7 @@ import {
   Card,
   TextLogo,
   PlusIcon,
-  HamburgerIcon,
+  Avatar,
 } from 'omorphia'
 
 import { useLoading, useTheming } from '@/store/state'
@@ -28,7 +28,13 @@ import SplashScreen from '@/components/ui/SplashScreen.vue'
 import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 import { handleError, useNotifications } from '@/store/notifications.js'
 import { offline_listener, command_listener, warning_listener } from '@/helpers/events.js'
-import { MinimizeIcon, MaximizeIcon, ChatIcon } from '@/assets/icons'
+import {
+  MinimizeIcon,
+  MaximizeIcon,
+  ChatIcon,
+  ArrowLeftFromLineIcon,
+  ArrowRightFromLineIcon,
+} from '@/assets/icons'
 import { isDev, getOS, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
 import {
   mixpanel_track,
@@ -282,8 +288,14 @@ const toggleSidebar = () => {
     >
       <div class="pages-list">
         <div class="square-collapsed-space">
-          <Button transparent icon-only class="collapsed-button" @click="toggleSidebar">
-            <HamburgerIcon />
+          <Button
+            transparent
+            icon-only
+            class="collapsed-button non-collapse"
+            @click="toggleSidebar"
+          >
+            <ArrowRightFromLineIcon v-if="!sidebarOpen" />
+            <ArrowLeftFromLineIcon v-else />
           </Button>
         </div>
       </div>
@@ -327,10 +339,10 @@ const toggleSidebar = () => {
           :to="`/instance/${encodeURIComponent(instance.path)}`"
           class="btn icon-only collapsed-button"
         >
-          <img
+          <Avatar
             class="collapsed-button__icon"
             :src="iconPathAsUrl(instance.metadata?.icon)"
-            :alt="instance.metadata.name"
+            size="xs"
           />
           <span class="collapsed-button__label">{{ instance.metadata.name }}</span>
         </RouterLink>
@@ -358,7 +370,7 @@ const toggleSidebar = () => {
           @click="() => $refs.installationModal.show()"
         >
           <PlusIcon />
-          <span class="collapsed-button__label">Create Profile</span>
+          <span class="collapsed-button__label">Create profile</span>
         </Button>
         <AccountDropdown />
       </div>
@@ -688,37 +700,44 @@ const toggleSidebar = () => {
   }
 }
 
-.collapsed-button {
-  justify-content: flex-start;
+:deep {
+  .non-collapse {
+    width: var(--sidebar-button-size) !important;
+  }
 
-  // width: var(--sidebar-icon-size);
-  height: var(--sidebar-button-size);
-  width: 100%;
+  .collapsed-button {
+    justify-content: flex-start;
 
-  flex-shrink: 0;
-
-  padding: var(--sidebar-padding) !important;
-  border-radius: 99999px;
-  box-shadow: none;
-
-  white-space: nowrap;
-  overflow: hidden;
-
-  transition: all ease-in-out 0.1s;
-
-  .collapsed-button__icon,
-  svg {
-    width: var(--sidebar-icon-size);
-    height: var(--sidebar-icon-size);
+    // width: var(--sidebar-icon-size);
+    height: var(--sidebar-button-size);
+    width: 100%;
 
     flex-shrink: 0;
 
-    border-radius: var(--radius-xs);
-  }
+    padding: var(--sidebar-padding) !important;
+    border-radius: 99999px;
+    box-shadow: none;
+
+    white-space: nowrap;
+    overflow: hidden;
 
-  .collapsed-button__label {
-    opacity: var(--sidebar-label-opacity);
     transition: all ease-in-out 0.1s;
+
+    .collapsed-button__icon,
+    svg {
+      width: var(--sidebar-icon-size) !important;
+      height: var(--sidebar-icon-size) !important;
+
+      flex-shrink: 0;
+
+      border-radius: var(--radius-xs);
+    }
+
+    .collapsed-button__label {
+      word-spacing: normal; // Why is this even needed?
+      opacity: var(--sidebar-label-opacity);
+      transition: all ease-in-out 0.1s;
+    }
   }
 }
 

theseus_gui/src/assets/icons/arrow-left-from-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-from-line"><path d="m9 6-6 6 6 6"/><path d="M3 12h14"/><path d="M21 19V5"/></svg>

theseus_gui/src/assets/icons/arrow-right-from-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-from-line"><path d="M3 5v14"/><path d="M21 12H7"/><path d="m15 18 6-6-6-6"/></svg>

theseus_gui/src/assets/icons/index.js

@@ -12,3 +12,5 @@ export { default as NewInstanceImage } from './new-instance.svg'
 export { default as MenuIcon } from './menu.svg'
 export { default as BugIcon } from './bug.svg'
 export { default as ChatIcon } from './messages-square.svg'
+export { default as ArrowLeftFromLineIcon } from './arrow-left-from-line.svg'
+export { default as ArrowRightFromLineIcon } from './arrow-right-from-line.svg'

theseus_gui/src/components/ui/platform/AccountDropdown.vue

@@ -7,49 +7,40 @@
     >
       <ModrinthLoginScreen :modal="true" :prev-page="signInAfter" :next-page="signInAfter" />
     </Modal>
-    <OverflowMenu
-      v-if="auth?.user"
-      class="btn btn-transparent headless-button"
-      :options="[
-        {
-          id: 'sign-out',
-          color: 'danger',
-          action: async () => {
-            await mrAuth.logout()
-          },
-          hoverFilledOnly: true,
-        },
-      ]"
-      direction="up"
-      position="right"
-    >
-      <Avatar circle size="sm" :src="auth?.user?.avatar_url" />
-      <template #sign-out> <LogOutIcon /> Sign out </template>
-    </OverflowMenu>
-    <OverflowMenu
-      v-else
-      class="btn btn-transparent headless-button"
-      :options="[
-        {
-          id: 'sign-in',
-          color: 'primary',
-          action: () => {
-            modrinthLoginModal?.show()
-          },
-        },
-      ]"
-      direction="up"
-      position="right"
-    >
-      <Avatar circle size="sm" />
-      <template #sign-in> <LogInIcon /> Sign in </template>
-    </OverflowMenu>
+    <PopoutMenu class="btn btn-transparent collapsed-button" direction="up" position="right">
+      <Avatar class="collapsed-button__icon" circle size="sm" :src="auth?.user?.avatar_url" />
+      <span class="collapsed-button__label">
+        <template v-if="auth?.user">
+          {{ auth.user.username }}
+        </template>
+        <template v-else> Sign in </template>
+      </span>
+      <template #menu>
+        <div class="selection-menu">
+          <template v-if="auth?.user">
+            <Button color="danger" transparent hover-filled-only @click="() => mrAuth.logout()">
+              <LogOutIcon /> Sign out
+            </Button>
+          </template>
+          <template v-else>
+            <Button
+              color="primary"
+              transparent
+              hover-filled-only
+              @click="() => $refs.modrinthLoginModal.show()"
+            >
+              <LogInIcon /> Sign in
+            </Button>
+          </template>
+        </div>
+      </template>
+    </PopoutMenu>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { Avatar, OverflowMenu, LogOutIcon, LogInIcon, Modal } from 'omorphia'
+import { Avatar, Button, PopoutMenu, LogOutIcon, LogInIcon, Modal } from 'omorphia'
 
 import { useTheming } from '@/store/state'
 import { useModrinthAuth } from '@/store/mr_auth.js'
@@ -70,12 +61,26 @@ const signInAfter = async () => {
 </script>
 
 <style scoped lang="scss">
-:deep {
-  .headless-button {
-    padding: 0 !important;
-    border-radius: 99999px;
-  }
+.account-dropdown {
+  width: 100%;
+}
 
+.selection-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+
+  width: max-content;
+
+  .btn {
+    width: 100%;
+    justify-content: start;
+  }
+}
+
+:deep {
   .login-screen-modal {
     .modal-container .modal-body {
       width: auto;