table density

package-lock.json

@@ -13278,8 +13278,7 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true,
-            "license": "MIT",
+            "license": "MIT"
-            "peer": true
         },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
@@ -18488,4 +18487,4 @@
             }
         }
     }
-}
+}

src/components/NavMenu.vue

@@ -186,12 +186,37 @@
                                 </DropdownMenuSubContent>
                             </DropdownMenuSub>
 
-                            <DropdownMenuCheckboxItem
+                            <DropdownMenuSub>
-                                :model-value="compactTableMode"
+                                <DropdownMenuSubTrigger>
-                                indicator-position="right"
+                                    <span>{{ t('view.settings.appearance.appearance.table_density') }}</span>
-                                @update:modelValue="handleCompactModeToggle">
+                                </DropdownMenuSubTrigger>
-                                <span>{{ t('view.settings.appearance.appearance.compact_table_mode') }}</span>
+                                <DropdownMenuSubContent side="right" align="start" class="w-54">
-                            </DropdownMenuCheckboxItem>
+                                    <DropdownMenuCheckboxItem
+                                        :model-value="tableDensity === 'standard'"
+                                        indicator-position="right"
+                                        @select="handleTableDensitySelect('standard')">
+                                        <span>{{
+                                            t('view.settings.appearance.appearance.table_density_standard')
+                                        }}</span>
+                                    </DropdownMenuCheckboxItem>
+                                    <DropdownMenuCheckboxItem
+                                        :model-value="tableDensity === 'comfortable'"
+                                        indicator-position="right"
+                                        @select="handleTableDensitySelect('comfortable')">
+                                        <span>{{
+                                            t('view.settings.appearance.appearance.table_density_comfortable')
+                                        }}</span>
+                                    </DropdownMenuCheckboxItem>
+                                    <DropdownMenuCheckboxItem
+                                        :model-value="tableDensity === 'compact'"
+                                        indicator-position="right"
+                                        @select="handleTableDensitySelect('compact')">
+                                        <span>{{
+                                            t('view.settings.appearance.appearance.table_density_compact')
+                                        }}</span>
+                                    </DropdownMenuCheckboxItem>
+                                </DropdownMenuSubContent>
+                            </DropdownMenuSub>
                             <DropdownMenuItem @click="handleOpenCustomNavDialog">
                                 <span>{{ t('nav_menu.custom_nav.header') }}</span>
                             </DropdownMenuItem>
@@ -329,12 +354,7 @@
     const { directAccessPaste } = useSearchStore();
     const { logout } = useAuthStore();
     const appearanceSettingsStore = useAppearanceSettingsStore();
-    const {
+    const { themeMode, tableDensity, isDarkMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
-        themeMode,
-        compactTableMode,
-        isDarkMode,
-        isNavCollapsed: isCollapsed
-    } = storeToRefs(appearanceSettingsStore);
     const navLayout = ref([]);
     const navLayoutReady = ref(false);
 
@@ -517,8 +537,8 @@
         appearanceSettingsStore.setThemeMode(isDarkMode.value ? 'light' : 'dark');
     };
 
-    const handleCompactModeToggle = () => {
+    const handleTableDensitySelect = (density) => {
-        appearanceSettingsStore.setCompactTableMode();
+        appearanceSettingsStore.setTableDensity(density);
     };
 
     const handleThemeColorSelect = async (theme) => {

src/components/ui/data-table/DataTableLayout.vue

@@ -5,7 +5,7 @@
         </div>
 
         <div class="rounded-md border">
-            <div class="overflow-auto" :style="tableStyle">
+            <ScrollArea class="max-w-full" :style="tableStyle">
                 <Table :class="tableClassValue" :style="tableElementStyle">
                     <colgroup>
                         <col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -65,7 +65,7 @@
                         </TableRow>
                     </TableBody>
                 </Table>
-            </div>
+            </ScrollArea>
         </div>
 
         <div v-if="showPagination" class="mt-4 flex w-full items-center gap-3">
@@ -124,6 +124,7 @@
         PaginationPrevious
     } from '../pagination';
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+    import { ScrollArea } from '../scroll-area';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
 
     const props = defineProps({
@@ -271,7 +272,6 @@
         const meta = columnDef?.meta ?? {};
         const pinned = getPinnedState(cell?.column);
         return joinClasses(
-            'py-1.5',
             pinned && 'sticky bg-background z-20',
             isSpacer(cell.column) && 'p-0',
             resolveClassValue(meta.class, cell?.getContext?.()),

src/components/ui/table/TableCell.vue

@@ -11,7 +11,7 @@
         data-slot="table-cell"
         :class="
             cn(
-                'p-2 align-middle whitespace-nowrap in-[.is-compact-table]:py-1! [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
+                'p-2 align-middle whitespace-nowrap in-[.is-compact-table]:py-1! in-[.is-comfortable-table]:py-1.5! [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
                 props.class
             )
         ">

src/localization/en.json

@@ -579,7 +579,10 @@
                     "table_page_sizes": "Table Page Sizes",
                     "table_page_sizes_error": "Page size must be a number between 1 and 1000",
                     "show_notification_icon_dot": "Show Tray Notification Dot",
-                    "compact_table_mode": "Compact Mode"
+                    "table_density": "Table Density",
+                    "table_density_standard": "Standard",
+                    "table_density_comfortable": "Comfortable",
+                    "table_density_compact": "Compact"
                 },
                 "timedate": {
                     "header": "Time/Date",

src/localization/zh-CN.json

@@ -572,8 +572,7 @@
                     "table_max_size": "最大显示记录",
                     "table_page_sizes": "显示记录大小",
                     "table_page_sizes_error": "记录大小必须是 1 到 1000 之间的数字",
-                    "show_notification_icon_dot": "显示托盘通知",
+                    "show_notification_icon_dot": "显示托盘通知"
-                    "compact_table_mode": "紧凑模式"
                 },
                 "timedate": {
                     "header": "时间 / 日期",

src/localization/zh-TW.json

@@ -573,8 +573,7 @@
                     "table_max_size": "表格大小",
                     "table_page_sizes": "表格每頁筆數",
                     "table_page_sizes_error": "每頁筆數必須是 1 到 1000 之間的數字",
-                    "show_notification_icon_dot": "顯示通知圖示提示點",
+                    "show_notification_icon_dot": "顯示通知圖示提示點"
-                    "compact_table_mode": "精簡模式"
                 },
                 "timedate": {
                     "header": "時間 / 日期",

src/stores/settings/appearance.js

@@ -73,7 +73,7 @@ export const useAppearanceSettingsStore = defineStore(
         const hideUserMemos = ref(false);
         const hideUnfriends = ref(false);
         const randomUserColours = ref(false);
-        const compactTableMode = ref(false);
+        const tableDensity = ref('standard');
         const TRUST_COLOR_DEFAULTS = Object.freeze({
             untrusted: '#CCCCCC',
             basic: '#1778FF',
@@ -126,6 +126,7 @@ export const useAppearanceSettingsStore = defineStore(
                 hideUserMemosConfig,
                 hideUnfriendsConfig,
                 randomUserColoursConfig,
+                tableDensityConfig,
                 compactTableModeConfig,
                 trustColorConfig,
                 notificationIconDotConfig,
@@ -177,6 +178,7 @@ export const useAppearanceSettingsStore = defineStore(
                 configRepository.getBool('VRCX_hideUserMemos', false),
                 configRepository.getBool('VRCX_hideUnfriends', false),
                 configRepository.getBool('VRCX_randomUserColours', false),
+                configRepository.getString('VRCX_tableDensity'),
                 configRepository.getBool('VRCX_compactTableMode', false),
                 configRepository.getString(
                     'VRCX_trustColor',
@@ -250,8 +252,18 @@ export const useAppearanceSettingsStore = defineStore(
             hideUnfriends.value = hideUnfriendsConfig;
             randomUserColours.value = randomUserColoursConfig;
             notificationIconDot.value = notificationIconDotConfig;
-            compactTableMode.value = compactTableModeConfig;
+            const resolvedTableDensity = normalizeTableDensity(
-            applyCompactTableMode(compactTableMode.value);
+                tableDensityConfig ||
+                    (compactTableModeConfig ? 'compact' : 'standard')
+            );
+            tableDensity.value = resolvedTableDensity;
+            applyTableDensity(tableDensity.value);
+            if (!tableDensityConfig) {
+                configRepository.setString(
+                    'VRCX_tableDensity',
+                    tableDensity.value
+                );
+            }
             isNavCollapsed.value = navIsCollapsedConfig;
 
             await configRepository.remove('VRCX_navWidth');
@@ -649,13 +661,22 @@ export const useAppearanceSettingsStore = defineStore(
                 randomUserColours.value
             );
         }
-        function setCompactTableMode() {
+        function normalizeTableDensity(value) {
-            compactTableMode.value = !compactTableMode.value;
+            if (
-            applyCompactTableMode(compactTableMode.value);
+                value === 'compact' ||
-            configRepository.setBool(
+                value === 'comfortable' ||
-                'VRCX_compactTableMode',
+                value === 'standard'
-                compactTableMode.value
+            ) {
-            );
+                return value;
+            }
+            return 'standard';
+        }
+
+        function setTableDensity(density) {
+            const normalized = normalizeTableDensity(density);
+            tableDensity.value = normalized;
+            applyTableDensity(tableDensity.value);
+            configRepository.setString('VRCX_tableDensity', tableDensity.value);
         }
         /**
          * @param {object} color
@@ -784,12 +805,14 @@ export const useAppearanceSettingsStore = defineStore(
             await userColourInit();
         }
 
-        function applyCompactTableMode(isCompact) {
+        function applyTableDensity(density) {
-            const className = 'is-compact-table';
+            const classList = document.documentElement.classList;
-            if (isCompact) {
+            classList.remove('is-compact-table', 'is-comfortable-table');
-                document.documentElement.classList.add(className);
+            if (density === 'compact') {
-            } else {
+                classList.add('is-compact-table');
-                document.documentElement.classList.remove(className);
+            }
+            if (density === 'comfortable') {
+                classList.add('is-comfortable-table');
             }
         }
 
@@ -820,7 +843,7 @@ export const useAppearanceSettingsStore = defineStore(
             hideUserMemos,
             hideUnfriends,
             randomUserColours,
-            compactTableMode,
+            tableDensity,
             trustColor,
             currentCulture,
             isSideBarTabShow,
@@ -851,7 +874,7 @@ export const useAppearanceSettingsStore = defineStore(
             setHideUserMemos,
             setHideUnfriends,
             setRandomUserColours,
-            setCompactTableMode,
+            setTableDensity,
             setTrustColor,
             tryInitUserColours,
             updateTrustColor,
@@ -860,7 +883,7 @@ export const useAppearanceSettingsStore = defineStore(
             changeAppLanguage,
             promptMaxTableSizeDialog,
             setNotificationIconDot,
-            applyCompactTableMode,
+            applyTableDensity,
             setNavCollapsed,
             toggleNavCollapsed,
             setThemeMode

src/views/Layout/AuthenticatedLayout.vue

@@ -3,7 +3,7 @@
         <SidebarProvider
             :open="sidebarOpen"
             :width="navWidth"
-            width-icon="64"
+            :width-icon="64"
             class="relative flex-1 h-full min-w-0"
             @update:open="handleSidebarOpenChange">
             <NavMenu />