From 0479670c5259832598b8f06a601da0ac8b2cbb52 Mon Sep 17 00:00:00 2001
From: Graham Steffaniak <42989099+gtsteffaniak@users.noreply.github.com>
Date: Sat, 3 Aug 2024 15:04:50 -0500
Subject: [PATCH] fix overlay bug, share bug (#161)

---
 frontend/src/api/users.js           |   3 +
 frontend/src/components/Search.vue  |  25 +++----
 frontend/src/components/Sidebar.vue | 112 ++++++++++++++++------------
 frontend/src/store/getters.js       |  16 +++-
 frontend/src/store/mutations.js     |   5 ++
 frontend/src/store/state.js         |   1 +
 frontend/src/views/Layout.vue       |  12 ++-
 7 files changed, 107 insertions(+), 67 deletions(-)

diff --git a/frontend/src/api/users.js b/frontend/src/api/users.js
index 6a827713..b5f554bf 100644
--- a/frontend/src/api/users.js
+++ b/frontend/src/api/users.js
@@ -27,6 +27,9 @@ export async function update(user, which = ["all"]) {
   if (which[0] != "password") {
     user.password = "";
   }
+  if (user.username == "publicUser") {
+    return
+  }
   console.log("updating user",user,which)
   await fetchURL(`/api/users/${user.id}`, {
     method: "PUT",
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 14233098..ffb09157 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -29,7 +29,12 @@
     </div>
 
     <!-- Search results for mobile -->
-    <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
+    <div
+      v-if="state.isMobile && active"
+      id="result"
+      :class="{ hidden: !active }"
+      ref="result"
+    >
       <div id="result-list">
         <div class="button" style="width: 100%">Search Context: {{ getContext }}</div>
         <!-- List of search results -->
@@ -97,7 +102,7 @@
     </div>
 
     <!-- Search results for desktop -->
-    <div v-show="!isMobile && active" id="result-desktop" ref="result">
+    <div v-show="!state.isMobile && active" id="result-desktop" ref="result">
       <div class="searchContext">Search Context: {{ getContext }}</div>
       <div id="result-list">
         <div>
@@ -241,7 +246,6 @@ export default {
         { label: "Archives", value: "type:archive" },
       ],
       value: "",
-      width: window.innerWidth,
       ongoing: false,
       results: [],
       reload: false,
@@ -299,7 +303,8 @@ export default {
       return this.isTypeSelectDisabled;
     },
     active() {
-      return getters.currentPromptName() === "search";
+      console.log("calling active ", getters.currentPromptName());
+      return getters.currentPromptName() == "search";
     },
     showOverlay() {
       return getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
@@ -342,11 +347,7 @@ export default {
       return path;
     },
   },
-
   methods: {
-    handleResize() {
-      this.width = window.innerWidth;
-    },
     async navigateTo(url) {
       mutations.closeHovers();
       await this.$nextTick();
@@ -403,7 +404,7 @@ export default {
         return false;
       }
       this.searchTypes = this.searchTypes.replace(string + " ", "");
-      if (this.isMobile) {
+      if (state.isMobile) {
         this.$refs.input.focus();
       }
     },
@@ -447,12 +448,6 @@ export default {
       this.showHelp = !this.showHelp;
     },
   },
-  mounted() {
-    window.addEventListener("resize", this.handleResize);
-  },
-  beforeUnmount() {
-    window.removeEventListener("resize", this.handleResize);
-  },
 };
 </script>
 
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index d2c80d68..99b889c3 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -4,45 +4,49 @@
     :class="{ active: active, 'dark-mode': isDarkMode, sticky: user?.stickySidebar }"
   >
     <div class="card">
-      <button
-        v-if="user.username"
-        @click="navigateTo('/settings/profile')"
-        class="action"
-      >
-        <i class="material-icons">person</i>
-        <span>{{ user.username }}</span>
-      </button>
+      <div class="card-wrapper">
+        <button
+          v-if="user.username"
+          @click="navigateTo('/settings/profile')"
+          class="action"
+        >
+          <i class="material-icons">person</i>
+          <span>{{ user.username }}</span>
+        </button>
+      </div>
     </div>
-
-    <div class="card card-wrapper" @mouseleave="resetHoverTextToDefault">
-      <span>{{ hoverText }}</span>
-      <div class="quick-toggles">
-        <div
-          :class="{ active: user?.singleClick }"
-          @click="toggleClick"
-          @mouseover="updateHoverText('Toggle single click')"
-        >
-          <i class="material-icons">ads_click</i>
-        </div>
-        <div
-          :class="{ active: user?.darkMode }"
-          @click="toggleDarkMode"
-          @mouseover="updateHoverText('Toggle dark mode')"
-        >
-          <i class="material-icons">dark_mode</i>
-        </div>
-        <div
-          :class="{ active: user?.stickySidebar }"
-          @click="toggleSticky"
-          @mouseover="updateHoverText('Toggle sticky sidebar')"
-        >
-          <i class="material-icons">push_pin</i>
+    <div class="card">
+      <div class="card-wrapper" @mouseleave="resetHoverTextToDefault">
+        <span>{{ hoverText }}</span>
+        <div class="quick-toggles">
+          <div
+            :class="{ active: user?.singleClick }"
+            @click="toggleClick"
+            @mouseover="updateHoverText('Toggle single click')"
+          >
+            <i class="material-icons">ads_click</i>
+          </div>
+          <div
+            :class="{ active: user?.darkMode }"
+            @click="toggleDarkMode"
+            @mouseover="updateHoverText('Toggle dark mode')"
+          >
+            <i class="material-icons">dark_mode</i>
+          </div>
+          <div
+            :class="{ active: user?.stickySidebar }"
+            @click="toggleSticky"
+            @mouseover="updateHoverText('Toggle sticky sidebar')"
+            v-if="!isMobile"
+          >
+            <i class="material-icons">push_pin</i>
+          </div>
         </div>
       </div>
     </div>
 
     <!-- Section for logged-in users -->
-    <div v-if="isLoggedIn">
+    <div v-if="isLoggedIn" class="sidebar-scroll-list">
       <!-- Buttons visible if user has create permission -->
       <div v-if="user.perm?.create">
         <!-- New Folder button -->
@@ -97,7 +101,7 @@
           <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
-      <div class="sources card card-wrapper">
+      <div v-if="isLoggedIn" class="sources card">
         <span>Sources</span>
         <div class="inner-card">
           <!-- My Files button -->
@@ -120,7 +124,7 @@
     </div>
 
     <!-- Section for non-logged-in users -->
-    <div v-else>
+    <div v-else class="sidebar-scroll-list">
       <!-- Login button -->
       <router-link
         class="action"
@@ -145,10 +149,8 @@
     </div>
 
     <div class="buffer"></div>
-    <!-- Credits and usage information section -->
-    <div class="credits" v-if="isFiles && !disableUsedPercentage && usage">
-      <span v-if="disableExternal">File Browser</span>
-      <span v-else>
+    <div class="credits">
+      <span>
         <a
           rel="noopener noreferrer"
           target="_blank"
@@ -192,9 +194,14 @@ export default {
     };
   },
   mounted() {
-    this.updateUsage();
+    if (getters.isLoggedIn()) {
+      this.updateUsage();
+    }
   },
   computed: {
+    isMobile() {
+      return getters.isMobile();
+    },
     isFiles() {
       return getters.isFiles();
     },
@@ -294,6 +301,10 @@ export default {
 </script>
 
 <style>
+.sidebar-scroll-list {
+  overflow: scroll;
+  margin-bottom: 0px !important;
+}
 #sidebar {
   top: 0;
   display: flex;
@@ -344,10 +355,13 @@ body.rtl nav {
   margin-bottom: 0.5em;
 }
 
+#sidebar .card {
+  overflow: unset !important;
+}
+
 #sidebar .action {
   width: 100%;
   display: block;
-  padding: 0.5em;
   white-space: nowrap;
   height: 100%;
   overflow: hidden;
@@ -369,7 +383,7 @@ body.rtl .action {
 .credits {
   font-size: 1em;
   color: var(--textSecondary);
-  padding: 1em;
+  padding-left: 1em;
 }
 
 .credits > span {
@@ -392,7 +406,7 @@ body.rtl .action {
   display: flex;
   justify-content: space-evenly;
   width: 100%;
-  padding-bottom: 1em !important;
+  margin-top: 0.5em !important;
 }
 
 .quick-toggles button {
@@ -402,16 +416,20 @@ body.rtl .action {
 }
 
 .card-wrapper {
-  display: flex;
+  display: flex !important;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0.5em;
+  padding: 1em !important;
+  min-height: 4em;
+  box-shadow: 0 2px 2px #00000024, 0 1px 5px #0000001f, 0 3px 1px -2px #0003;
+  /* overflow: auto; */
+  border-radius: 1em;
+  height: 100%;
 }
 
 .sources {
-  padding: 0.5em;
-  margin-top: 0.5em;
+  padding: 1em;
 }
 
 .inner-card {
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 08809e24..3cba705a 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -1,7 +1,7 @@
 import { state } from "./state.js";
 
 export const getters = {
-  isMobile: () => window.innerWidth <= 800,
+  isMobile: () => state.isMobile,
   isDarkMode: () => {
     if (state.user == null) {
       return true;
@@ -24,15 +24,23 @@ export const getters = {
     if (!getters.isLoggedIn()) {
       return false
     }
-    return state.showSidebar || state.user.stickySidebar
+    return state.showSidebar || getters.isStickySidebar()
+  },
+  isStickySidebar: () => {
+    if (getters.isMobile()) {
+      return false
+    }
+    if (!getters.isLoggedIn()) {
+      return true
+    }
+    return state.user?.stickySidebar
   },
   showOverlay: () => {
     if (!getters.isLoggedIn()) {
       return false
     }
     const hasPrompt = getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
-    const sidebarHover = (!state.user.stickySidebar && state.showSidebar) || getters.isMobile();
-    return hasPrompt || sidebarHover;
+    return hasPrompt || getters.isSidebarVisible();
   },
   getRoutePath: () => {
     return state.route.path.endsWith("/")
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 1d355f83..89b2116a 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -4,6 +4,11 @@ import { emitStateChanged } from './eventBus'; // Import the function from event
 import { users } from "@/api";
 
 export const mutations = {
+  setMobile() {
+    state.mobile = window.innerWidth <= 800
+    console.log("state updated",state.mobile)
+    emitStateChanged();
+  },
   toggleDarkMode() {
     mutations.updateUser({ "darkMode": !state.user.darkMode });
     emitStateChanged();
diff --git a/frontend/src/store/state.js b/frontend/src/store/state.js
index d6c637da..908c0f1f 100644
--- a/frontend/src/store/state.js
+++ b/frontend/src/store/state.js
@@ -2,6 +2,7 @@ import { reactive } from 'vue';
 import { detectLocale } from "@/i18n";
 
 export const state = reactive({
+  isMobile: window.innerWidth <= 800,
   showSidebar: false,
   usage: {
     used: "0 B",
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index a4f85bc1..cf1cb548 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -14,7 +14,7 @@
     ></editorBar>
     <defaultBar :class="{ 'dark-mode-header': isDarkMode }" v-else></defaultBar>
     <sidebar></sidebar>
-    <search v-if="currentView == 'listingView'"></search>
+    <search v-if="showSearch"></search>
     <main :class="{ 'dark-mode': isDarkMode, moveWithSidebar: moveWithSidebar }">
       <router-view></router-view>
     </main>
@@ -58,7 +58,13 @@ export default {
       itemWeight: 0,
     };
   },
+  mounted() {
+    window.addEventListener("resize", this.updateIsMobile);
+  },
   computed: {
+    showSearch() {
+      return getters.isFiles() && getters.isLoggedIn();
+    },
     isLoggedIn() {
       return getters.isLoggedIn();
     },
@@ -114,6 +120,10 @@ export default {
     },
   },
   methods: {
+    updateIsMobile() {
+      console.log("setting");
+      mutations.setMobile();
+    },
     resetPrompts() {
       mutations.closeSidebar();
       mutations.closeHovers();