Fix styling issues and add conditional rendering

for actions buttons

src/pages/main/MusicLib.vue

@@ -136,7 +136,7 @@ function handleTitleClick(track: Track) {
     </template>
     <QTable :columns="columns" :data="views" :row-class-name="rowClassName" :row-key="(row) => row.id">
       <template #actions="{ rowIdx }">
-        <div class="flex">
+        <div class="flex invisible group-hover:visible">
           <QHoverButton class="text-passion h-8 w-8" @click="playByIdx(rowIdx)">
             <IconPlay class="text-base" />
           </QHoverButton>
@@ -173,15 +173,7 @@ function handleTitleClick(track: Track) {
 </template>
 
 <style scoped>
-:deep(.playing td) {
+:deep(.playing) {
   color: rgb(249 115 22);
 }
-
-:deep(td[data-col-key="actions"] button) {
-  visibility: hidden;
-}
-
-:deep(tr:hover td[data-col-key="actions"] button) {
-  visibility: visible;
-}
 </style>

src/pages/main/SearchResult.vue

@@ -41,7 +41,10 @@ const ncmCols: Column[] = [
   { key: 'title', title: t('track.title') },
   { key: 'artist', title: t('track.artist') },
   { key: 'album', title: t('track.album') },
-  { key: 'pop', title: t('track.pop') },
+  { key: 'pop', title: t('track.pop'), style: {
+    textAlign: 'right',
+    gridTemplateColumn: '24px',
+  } },
 ];
 </script>
 

src/qui/pivot/QPivot.vue

@@ -45,7 +45,7 @@ function activate(opt: Item) {
       {{ title }}
     </h2>
     <QHorizontalMenu :top="tabs" :activated="activated" class="px-6" @item-click="activate" />
-    <QScrollbar class="px-6">
+    <QScrollbar class="px-6 mr-1">
       <slot />
       <!-- <component :is="child" v-for="(child, idx) of children" v-show="tabs[idx].key === activated" :key="idx" /> -->
     </QScrollbar>

src/qui/table/QTable.vue

@@ -69,7 +69,8 @@ function rowKeyMap(row: Row, idx: number) {
     </div>
     <div
       v-for="(row, rowIdx) in data" :key="rowKeyMap(row, rowIdx)"
-      class="flex-table items-center rounded px-2 h-12 even:bg-layer_1 even:ring-1 even:ring-black/10 odd:hover:bg-layer_1"
+      class="group flex-table items-center rounded px-2 h-12 even:bg-layer_1 even:ring-1 even:ring-black/10 odd:hover:bg-layer_1"
+      :class="rowClassName?.(row) ?? ''"
       role="rowgroup"
     >
       <div

src/store/index.ts

@@ -1,6 +1,7 @@
 import { createPinia, defineStore } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { usePlayerStore } from './player';
+import { useAccountStore } from './user';
 import { ApiClient, WsClient } from '~/api/client';
 import type { Track } from '~/generated/protos/musync';
 import type { TrackId } from '~/model_ext/track';
@@ -51,6 +52,12 @@ export const useMusyncStore = defineStore('musync', {
 
       await ApiClient.set(`${host}:8396`);
 
+      const account = useAccountStore();
+      if (!account.online) {
+        loading.value = false;
+        return;
+      }
+
       await this.updateFoldersFromRemote();
       await this.updatePlayQueueFromRemote();
       loading.value = false;

src/utils/logger.ts

@@ -1,7 +1,10 @@
 import { attachConsole, debug, error, info, trace, warn } from '@tauri-apps/plugin-log';
+import { getPlatform, inTauri } from '~/platforms';
 
 export async function attachLogger() {
-  await attachConsole();
+  await inTauri(async () => {
+    return await attachConsole();
+  });
 }
 
 export interface Logger {
@@ -14,14 +17,28 @@ export interface Logger {
 }
 
 export function createLogger(name: string): Logger {
-  return {
-    trace: message => trace(message, { file: name }),
-    info: message => info(message, { file: name }),
-    error: message => error(message, { file: name }),
-    warn: message => warn(message, { file: name }),
-    debug: message => debug(message, { file: name }),
-    getSubLogger: subName => createLogger(`${name}/${subName}`),
-  };
+  if (getPlatform() === 'tauri') {
+    return {
+      trace: message => trace(message, { file: name }),
+      info: message => info(message, { file: name }),
+      error: message => error(message, { file: name }),
+      warn: message => warn(message, { file: name }),
+      debug: message => debug(message, { file: name }),
+      getSubLogger: subName => createLogger(`${name}/${subName}`),
+    };
+  } else {
+    return {
+      // eslint-disable-next-line no-console
+      trace: message => console.trace(`[${name}] ${message}`),
+      // eslint-disable-next-line no-console
+      info: message => console.info(`[${name}] ${message}`),
+      error: message => console.error(`[${name}] ${message}`),
+      warn: message => console.warn(`[${name}] ${message}`),
+      // eslint-disable-next-line no-console
+      debug: message => console.debug(`[${name}] ${message}`),
+      getSubLogger: subName => createLogger(`${name}/${subName}`),
+    };
+  }
 }
 
 export const logger = createLogger('QSync');