Fix small bugs in UI (#786)

* chore: added `rel="noopener noreferrer"` to external links for improved security on homepage

* fix: reused variable name

* feat: make the item table use a link instead of a click event

* fix: pagination now shows correct page if loading page that isnt 1

* fix: make save button sticky again on item edit page

* fix: adjust sticky header positioning based on whether legacy header is enabled

* fix: navigate to homepage on unauthorized request in useUserApi function

* fix: enhance link handling in DetailsSection

* fix: improve markdown rendering, don't add big breaks between lines, make the gap smaller and dont have a trailing newline

* fix: use secondary colour as switch secondary colour so its more visible against bg

* fix: call refresh methods on location and label stores during component mount for better data consistency

* fix: loading indicators

* fix: convert detail.text to string for correct URL handling in DetailsSection component

* fix: use replace instead of splice to remove newline at end of markdown

* fix: use css vars for header height

frontend/components/Item/View/Table.vue

@@ -77,7 +77,7 @@
         </TableRow>
       </TableHeader>
       <TableBody>
-        <TableRow v-for="(d, i) in data" :key="d.id" class="cursor-pointer" @click="navigateTo(`/item/${d.id}`)">
+        <TableRow v-for="(d, i) in data" :key="d.id" class="relative cursor-pointer">
           <TableCell
             v-for="h in headers.filter(h => h.enabled)"
             :key="`${h.value}-${i}`"
@@ -88,9 +88,7 @@
             }"
           >
             <template v-if="h.type === 'name'">
-              <NuxtLink class="text-wrap" :to="`/item/${d.id}`">
-                {{ d.name }}
-              </NuxtLink>
+              {{ d.name }}
             </template>
             <template v-else-if="h.type === 'price'">
               <Currency :amount="d.purchasePrice" />
@@ -111,6 +109,11 @@
               {{ extractValue(d, h.value) }}
             </slot>
           </TableCell>
+          <TableCell class="absolute inset-0">
+            <NuxtLink :to="`/item/${d.id}`" class="absolute inset-0">
+              <span class="sr-only">{{ $t("components.item.view.table.view_item") }}</span>
+            </NuxtLink>
+          </TableCell>
         </TableRow>
       </TableBody>
     </Table>

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -17,7 +17,13 @@
               <TooltipProvider :delay-duration="0">
                 <Tooltip>
                   <TooltipTrigger as-child>
-                    <a :href="detail.href" target="_blank" :class="badgeVariants()" class="gap-1">
+                    <a
+                      :href="detail.href"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      :class="badgeVariants()"
+                      class="gap-1"
+                    >
                       <MdiOpenInNew />
                       {{ detail.text }}
                     </a>
@@ -39,7 +45,15 @@
             <template v-else>
               <!-- Fixed version with improved overflow handling -->
               <span class="flex w-full items-center break-words">
-                <span class="overflow-hidden break-all">{{ detail.text }}</span>
+                <a
+                  v-if="maybeUrl(detail.text.toString()).isUrl"
+                  :href="maybeUrl(detail.text.toString()).url"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="overflow-hidden break-all text-primary underline hover:text-primary/80"
+                  >{{ detail.text }}</a
+                >
+                <span v-else class="overflow-hidden break-all">{{ detail.text }}</span>
                 <span
                   v-if="detail.copyable"
                   class="my-0 ml-4 shrink-0 opacity-0 transition-opacity duration-75 group-hover:opacity-100"

frontend/components/global/LabelMaker.vue

@@ -3,6 +3,7 @@
   import { route } from "../../lib/api/base";
   import PageQRCode from "./PageQRCode.vue";
   import { toast } from "@/components/ui/sonner";
+  import MdiLoading from "~icons/mdi/loading";
   import MdiPrinterPos from "~icons/mdi/printer-pos";
   import MdiFileDownload from "~icons/mdi/file-download";
 
@@ -105,7 +106,8 @@
         <img :src="getLabelUrl(false)" />
         <DialogFooter>
           <ButtonGroup>
-            <Button v-if="status?.labelPrinting || false" type="submit" :loading="serverPrinting" @click="serverPrint">
+            <Button v-if="status?.labelPrinting || false" type="submit" :disabled="serverPrinting" @click="serverPrint">
+              <MdiLoading v-if="serverPrinting" class="animate-spin" />
               {{ $t("components.global.label_maker.server_print") }}
             </Button>
             <Button type="submit" @click="browserPrint">

frontend/components/global/Markdown.vue

@@ -11,14 +11,13 @@
   });
 
   const md = new MarkdownIt({
-    breaks: true,
     html: true,
     linkify: true,
     typographer: true,
   });
 
   const raw = computed(() => {
-    const html = md.render(props.source || "");
+    const html = md.render(props.source || "").replace(/\n$/, ""); // remove trailing newline
     return DOMPurify.sanitize(html);
   });
 </script>
@@ -30,7 +29,6 @@
 
 <style scoped>
   * {
-    --y-gap: 0.65rem;
     word-wrap: break-word; /*Fix for long words going out of emelent bounds and issue #407 */
     overflow-wrap: break-word; /*Fix for long words going out of emelent bounds and issue #407 */
     white-space: pre-wrap; /*Fix for long words going out of emelent bounds and issue #407 */

frontend/components/ui/switch/Switch.vue

@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SwitchRoot
     v-bind="forwarded"
     :class="cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary',
       props.class,
     )"
   >