From ed697db871fb21ef7d1afa49efa30cca2cbff6b1 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Sun, 1 Feb 2026 05:19:42 +0000
Subject: [PATCH] New header/footer layout and styles. Use cursorTooltip in
 more places, make it prettier. Fix tooltip still sometimes activating with
 touch (now only with mouse).

---
 frontend/src/App.vue                       |  24 ++++-
 frontend/src/assets/main.css               |  64 +------------
 frontend/src/components/BreadCrumb.vue     |  19 +++-
 frontend/src/components/CursorTooltip.vue  |  32 ++++---
 frontend/src/components/DownloadButton.vue |   2 +-
 frontend/src/components/HeaderMain.vue     | 104 ++++++++++++++-------
 frontend/src/components/HeaderSelected.vue |  35 +++++--
 frontend/src/components/SvgButton.vue      |  16 +++-
 frontend/src/components/TransferBar.vue    |   4 +-
 frontend/src/components/UploadButton.vue   |   4 +-
 10 files changed, 172 insertions(+), 132 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7e201a1..a0ad8de 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,15 +9,14 @@
   <UserManagementModal />
   <AccessDeniedModal />
   <header>
-    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
-      <HeaderSelected :path="path.pathList" />
-    </HeaderMain>
+    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query" />
     <BreadCrumb :path="path.pathList" primary />
   </header>
   <main>
     <RouterView :path="path.pathList" :query="path.query" />
   </main>
-  <footer>
+  <footer v-if="store.selected.size || store.uprogress.total || store.dprogress.total">
+    <HeaderSelected :path="path.pathList" />
     <TransferBar :status=store.uprogress @cancel=store.cancelUploads class=upload />
     <TransferBar :status=store.dprogress @cancel=store.cancelDownloads class=download />
   </footer>
@@ -104,7 +103,7 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (keyup && event.key === 'Escape') {
     store.error = ''
     store.clearToast()
-    headerMain.value!.closeSearch(event)
+    headerMain.value!.clearSearch(event)
     store.focusBreadcrumb()
   }
   else if (!input && keyup && event.key === 'Backspace') {
@@ -189,4 +188,19 @@ export type { Path }
   background: #555;
   color: #fff;
 }
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  z-index: 50;
+}
+footer > * {
+  justify-content: center;
+}
 </style>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index bd373f4..23c62c9 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -43,44 +43,14 @@
     --root-font-size: 1.5rem;
   }
 }
-/* Low (landscape) screens: smaller header */
-@media screen and (max-height: 600px) {
-  :root {
-    --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
-    --root-font-size: 0.8rem;
-    --header-height: 2rem;
-  }
-  header .breadcrumb > * {
-    padding-top: calc(8 + 8 * 100vh / 600) !important;
-    padding-bottom: calc(8 + 8 * 100vh / 600) !important;
-  }
-}
-@media screen and (max-height: 300px) {
-  :root {
-    --header-font-size: 15px;  /* Don't go smaller than this, no benefit */
-    --header-height: calc(1.75 * 16px);
-    --root-font-size: 0.6rem;
-  }
-  header .breadcrumb > * {
-    padding-top: 14px !important;
-    padding-bottom: 14px !important;
-  }
-}
 @media screen and (orientation: landscape) and (min-width: 700px) {
   /* Breadcrumbs and buttons side by side */
-  :root {
-    --header-font-size: calc(8px + 8 * 100vh / 600);  /* 16px (1rem nominal) at 600px height */
-  }
   header {
     display: flex;
     justify-content: space-between;
   }
   header .headermain { order: 1; }
   header .breadcrumb { align-self: stretch; }
-  header .action-button {
-    width: 2em;
-    height: 2em;
-  }
 }
 @media print {
   :root {
@@ -241,39 +211,7 @@ header nav.headermain {
 .spacer { flex-grow: 1 }
 .smallgap { flex-shrink: 1; width: 2em }
 
-[data-tooltip]:hover:after {
-  z-index: 101;
-  content: attr(data-tooltip);
-  position: absolute;
-  pointer-events: none;
-  font-size: 1rem;
-  text-align: center;
-  padding: .5rem 1rem;
-  border-radius: 3rem 0 3rem 0;
-  box-shadow: 0 0 1rem var(--accent-color);
-  transform: translate(calc(1rem + -50%), 150%);
-  background-color: var(--accent-color);
-  color: var(--primary-color);
-  white-space: pre;
-  animation: appearbriefly calc(10 * var(--transition-time)) linear forwards;
-}
-@keyframes appearbriefly {
-  from {
-    opacity: 0;
-  }
-  30% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-  90% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
+
 .error-message {
   padding: .5em;
   font-weight: bold;
diff --git a/frontend/src/components/BreadCrumb.vue b/frontend/src/components/BreadCrumb.vue
index 318b6e2..2c1700c 100644
--- a/frontend/src/components/BreadCrumb.vue
+++ b/frontend/src/components/BreadCrumb.vue
@@ -14,9 +14,12 @@
       :class="{ current: !!isCurrent(0) }"
       :aria-current="isCurrent(0)"
       @click.prevent="navigate(0)"
-      title="/"
+      @mouseenter="homeTooltip?.startHover"
+      @mousemove="homeTooltip?.updatePosition"
+      @mouseleave="homeTooltip?.endHover"
     >
       <component :is="home" />
+      <CursorTooltip ref="homeTooltip" text="/">/</CursorTooltip>
     </a>
     <template v-for="(location, index) in longest" :key="index">
       <a :href="`/#/${longest.slice(0, index + 1).join('/')}/`"
@@ -24,8 +27,10 @@
         :aria-current="isCurrent(index + 1)"
         @click.prevent="navigate(index + 1)"
         :ref="el => setLinkRef(index + 1, el)"
-        :title="`/${longest.slice(0, index + 1).join('/')}`"
-      >{{ location }}</a>
+        @mouseenter="pathTooltips.get(index)?.startHover"
+        @mousemove="pathTooltips.get(index)?.updatePosition"
+        @mouseleave="pathTooltips.get(index)?.endHover"
+      >{{ location }}<CursorTooltip :ref="el => setPathTooltipRef(index, el)" :text="`/${longest.slice(0, index + 1).join('/')}`">{{ `/${longest.slice(0, index + 1).join('/')}` }}</CursorTooltip></a>
     </template>
   </nav>
 </template>
@@ -35,6 +40,7 @@ import { Home } from '@/assets/svg'
 import { nextTick, onBeforeUpdate, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import { exists } from '@/utils/fileutil'
+import CursorTooltip from './CursorTooltip.vue'
 
 const home = Home
 const router = useRouter()
@@ -43,6 +49,13 @@ const links = [] as Array<HTMLElement>
 const setLinkRef = (index: number, el: any) => { if (el) links[index] = el }
 onBeforeUpdate(() => { links.length = 1 })  // 1 to keep home
 
+const homeTooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
+const pathTooltips = ref<Map<number, InstanceType<typeof CursorTooltip>>>(new Map())
+const setPathTooltipRef = (index: number, el: any) => {
+  if (el) pathTooltips.value.set(index, el)
+  else pathTooltips.value.delete(index)
+}
+
 const props = defineProps<{
   path: Array<string>
   primary?: boolean
diff --git a/frontend/src/components/CursorTooltip.vue b/frontend/src/components/CursorTooltip.vue
index 9f3e706..bd1c246 100644
--- a/frontend/src/components/CursorTooltip.vue
+++ b/frontend/src/components/CursorTooltip.vue
@@ -10,12 +10,12 @@
 // Global activation state - shared across all instances
 let globalActive = false
 let globalDeactivateTimer: ReturnType<typeof setTimeout> | null = null
-// Track if we've seen real mouse movement (not touch-simulated)
-let hasRealMouse = false
+// Track recent touch to suppress touch-triggered mouse events
+let lastTouchTime = 0
 </script>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps<{
   text: string
@@ -37,8 +37,13 @@ const tooltipStyle = computed(() => ({
   top: `${mouseY.value}px`,
 }))
 
-// Check if the device likely has a real mouse (fine pointer)
-const hasFinePointer = () => window.matchMedia('(pointer: fine)').matches
+// Track touch events globally to suppress touch-simulated mouse events
+const onTouchStart = () => { lastTouchTime = Date.now() }
+onMounted(() => document.addEventListener('touchstart', onTouchStart, { passive: true }))
+onUnmounted(() => document.removeEventListener('touchstart', onTouchStart))
+
+// Check if event is likely from touch (touch happened within last 500ms)
+const isTouchEvent = () => Date.now() - lastTouchTime < 500
 
 const showTooltip = () => {
   visible.value = true
@@ -56,8 +61,8 @@ const scheduleTooltip = () => {
 }
 
 const startHover = (e: MouseEvent) => {
-  // Ignore touch events (no fine pointer and no confirmed real mouse)
-  if (!hasFinePointer() && !hasRealMouse) return
+  // Ignore touch-simulated mouse events
+  if (isTouchEvent()) return
 
   mouseX.value = e.clientX
   mouseY.value = e.clientY
@@ -66,9 +71,8 @@ const startHover = (e: MouseEvent) => {
 }
 
 const updatePosition = (e: MouseEvent) => {
-  // Detect real mouse via movement (touch events don't generate continuous mousemove)
-  if (e.movementX !== 0 || e.movementY !== 0) hasRealMouse = true
-  if (!hasFinePointer() && !hasRealMouse) return
+  // Ignore touch-simulated mouse events
+  if (isTouchEvent()) return
 
   mouseX.value = e.clientX
   mouseY.value = e.clientY
@@ -122,9 +126,11 @@ defineExpose({
   z-index: 10000;
   padding: .5rem 1rem;
   border-radius: 3rem 0 3rem 0;
-  box-shadow: 0 0 1rem var(--accent-color);
-  background-color: var(--accent-color);
-  color: var(--primary-color);
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  color: #fff;
   white-space: nowrap;
   pointer-events: none;
   font-size: 1rem;
diff --git a/frontend/src/components/DownloadButton.vue b/frontend/src/components/DownloadButton.vue
index 4ba16a3..0eb2ae4 100644
--- a/frontend/src/components/DownloadButton.vue
+++ b/frontend/src/components/DownloadButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <SvgButton name="download" data-tooltip="Download" @click="download" />
+  <SvgButton name="download" tooltip="Download" @click="download" />
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index c88981c..73e6ede 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -3,23 +3,23 @@
     <UploadButton :path="props.path" />
     <SvgButton
       name="create-folder"
-      data-tooltip="New folder"
-      @click="() => {  console.log('New', store.fileExplorer); store.fileExplorer!.newFolder(); console.log('Done')}"
+      tooltip="New folder"
+      @click="() => { store.fileExplorer!.newFolder() }"
     />
-    <slot></slot>
-    <div class="spacer smallgap"></div>
-    <template v-if="showSearchInput">
+    <div class="smallgap"></div>
+    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" tooltip="Details/Gallery" />
+    <div class="search-group">
+      <SvgButton name="find" @click="focusSearch" tooltip="Search" />
       <input
         ref="search"
         type="search"
         :value="query"
         @input="updateSearch"
-        placeholder="Find files"
-        class="margin-input"
+        @keydown.escape="clearSearch"
       />
-    </template>
-    <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" />
+      <span v-if="!query" class="search-hint" @click="focusSearch">/</span>
+    </div>
+    <div class="spacer smallgap"></div>
     <SvgButton name="cog" @click="settingsMenu" />
   </nav>
 </template>
@@ -35,21 +35,25 @@ import router from '@/router';
 
 const store = useMainStore()
 const ssoStore = useSsoAuthStore()
-const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
-const searchButton = ref<HTMLButtonElement | null>()
 
   const props = defineProps<{
   path: Array<string>
   query: string
 }>()
 
-const closeSearch = (ev: Event) => {
-  if (!showSearchInput.value) return  // Already closing
-  showSearchInput.value = false
+const clearSearch = (ev: Event) => {
+  const input = search.value
+  if (input) {
+    input.value = ''
+    updateSearch(ev)
+  }
   const breadcrumb = document.querySelector('.breadcrumb') as HTMLElement
   breadcrumb.focus()
-  updateSearch(ev)
+}
+
+const focusSearch = () => {
+  search.value?.focus()
 }
 
 // Track pending route update
@@ -78,17 +82,10 @@ const updateSearch = (ev: Event) => {
     router.replace(u)
   })
 }
-const toggleSearchInput = (ev: Event) => {
-  showSearchInput.value = !showSearchInput.value
-  if (!showSearchInput.value) return closeSearch(ev)
-  nextTick(() => {
-    const input = search.value
-    if (input) input.focus()
-  })
+
+const toggleSearchInput = () => {
+  search.value?.focus()
 }
-watchEffect(() => {
-  if (props.query) showSearchInput.value = true
-})
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
@@ -131,7 +128,7 @@ const settingsMenu = (e: Event) => {
 }
 defineExpose({
   toggleSearchInput,
-  closeSearch,
+  clearSearch,
 })
 </script>
 
@@ -143,12 +140,53 @@ defineExpose({
   align-items: center;
   z-index: 10;
 }
-input[type='search'] {
-  background: var(--input-background);
-  color: var(--input-color);
-  border: 0;
-  border-radius: 0.1em;
+.search-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 1.5em;
+  padding: 0 0.3em;
+  transition: background 0.2s ease;
+  flex: 1 1 auto;
+  min-width: 5.5em;
+  max-width: 20em;
+}
+.search-group:focus-within {
+  background: rgba(255, 255, 255, 0.2);
+}
+.search-group:focus-within .search-hint {
+  opacity: 0;
+  pointer-events: none;
+}
+.search-group :deep(.action-button) {
+  width: 2.2em;
+  height: 2.2em;
+  flex-shrink: 0;
+}
+.search-group input[type='search'] {
+  background: transparent;
+  color: var(--header-color);
+  border: none;
   outline: none;
-  max-width: 15ch;
+  padding: 0.2em 0.5em 0.2em 0;
+  font-size: var(--header-font-size);
+  flex: 1 1 3em;
+  min-width: 3em;
+}
+.search-hint {
+  position: absolute;
+  right: 0.5em;
+  font-family: system-ui, sans-serif;
+  font-size: 1em;
+  font-weight: 700;
+  color: #333;
+  background: #ccc;
+  border: 1px solid #999;
+  border-radius: 0.3em;
+  padding: 0 0.45em;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
 }
 </style>
diff --git a/frontend/src/components/HeaderSelected.vue b/frontend/src/components/HeaderSelected.vue
index 67fbff7..8eb5b92 100644
--- a/frontend/src/components/HeaderSelected.vue
+++ b/frontend/src/components/HeaderSelected.vue
@@ -1,19 +1,27 @@
 <template>
-  <template v-if="store.selected.size">
-    <div class="smallgap"></div>
-    <p class="select-text">{{ store.selected.size }} selected ➤</p>
+  <div class="selection-bar" v-if="store.selected.size">
+    <p class="select-text">{{ store.selected.size }} selected</p>
     <DownloadButton />
-    <SvgButton name="copy" data-tooltip="Copy here" @click="op('cp', dst)" />
-    <SvgButton name="paste" data-tooltip="Move here" @click="op('mv', dst)" />
-    <SvgButton name="trash" data-tooltip="Delete ⚠️" @click="op('rm')" />
-    <button class="action-button unselect" data-tooltip="Unselect all" @click="store.selected.clear()">❌</button>
-  </template>
+    <SvgButton name="copy" tooltip="Copy here" @click="op('cp', dst)" />
+    <SvgButton name="paste" tooltip="Move here" @click="op('mv', dst)" />
+    <SvgButton name="trash" tooltip="Delete ⚠️" @click="op('rm')" />
+    <button
+      class="action-button unselect"
+      @click="store.selected.clear()"
+      @mouseenter="unselectTooltip?.startHover"
+      @mousemove="unselectTooltip?.updatePosition"
+      @mouseleave="unselectTooltip?.endHover"
+    >❌<CursorTooltip ref="unselectTooltip" text="Unselect all">Unselect all</CursorTooltip></button>
+  </div>
 </template>
 
 <script setup lang="ts">
 import {connect, controlUrl} from '@/repositories/WS'
 import { useMainStore } from '@/stores/main'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import CursorTooltip from './CursorTooltip.vue'
+
+const unselectTooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
 
 const store = useMainStore()
 const props = defineProps({
@@ -57,11 +65,20 @@ const op = (opName: string, dst?: string) => {
 </script>
 
 <style>
+.selection-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3em 0.5em;
+  background: transparent;
+  color: var(--header-color);
+}
 .select-text {
   color: var(--accent-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
+  padding-right: 0.5em;
 }
 </style>
diff --git a/frontend/src/components/SvgButton.vue b/frontend/src/components/SvgButton.vue
index bb7502b..0009792 100644
--- a/frontend/src/components/SvgButton.vue
+++ b/frontend/src/components/SvgButton.vue
@@ -1,16 +1,28 @@
 <template>
-  <button class="action-button">
+  <button
+    class="action-button"
+    @mouseenter="tooltip?.startHover"
+    @mousemove="tooltip?.updatePosition"
+    @mouseleave="tooltip?.endHover"
+  >
     <component :is="icons[name]" />
     <slot></slot>
+    <CursorTooltip v-if="tooltipText" ref="tooltip" :text="tooltipText">{{ tooltipText }}</CursorTooltip>
   </button>
 </template>
 
 <script setup lang="ts">
 import { icons, type IconName } from '@/assets/svg'
+import { ref } from 'vue'
+import CursorTooltip from './CursorTooltip.vue'
 
-defineProps<{
+const props = defineProps<{
   name: IconName
+  tooltip?: string
 }>()
+
+const tooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
+const tooltipText = props.tooltip ?? ''
 </script>
 
 <style>
diff --git a/frontend/src/components/TransferBar.vue b/frontend/src/components/TransferBar.vue
index fa9646a..ea96983 100644
--- a/frontend/src/components/TransferBar.vue
+++ b/frontend/src/components/TransferBar.vue
@@ -53,15 +53,17 @@ const speeddisp = computed(() => speed.value ? speed.value.toFixed(speed.value <
 <style scoped>
 .transferprogress {
   --bar: var(--accent-color);
-  --nobar: var(--header-background);
+  --nobar: transparent;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   color: var(--primary-color);
   width: 100%;
 }
 .statustext {
   display: flex;
   align-items: center;
+  justify-content: center;
   margin: 0 .5em;
   padding: 0.5rem 0;
 }
diff --git a/frontend/src/components/UploadButton.vue b/frontend/src/components/UploadButton.vue
index 7b8a398..64bf732 100644
--- a/frontend/src/components/UploadButton.vue
+++ b/frontend/src/components/UploadButton.vue
@@ -3,8 +3,8 @@
     <input ref="fileInput" @change="uploadHandler" type="file" multiple>
     <input ref="folderInput" @change="uploadHandler" type="file" webkitdirectory>
   </template>
-  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileInput.click()" />
-  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderInput.click()" />
+  <SvgButton name="add-file" tooltip="Upload files" @click="fileInput.click()" />
+  <SvgButton name="add-folder" tooltip="Upload folder" @click="folderInput.click()" />
 </template>
 
 <script setup lang="ts">