improve add new dashboard behavior

src/components/nav-menu/NavMenu.vue

@@ -1,6 +1,6 @@
 <template>
     <Sidebar side="left" variant="sidebar" collapsible="icon">
-        <SidebarHeader class="px-2 py-2">
+        <SidebarHeader v-if="!hasDashboards" class="px-2 py-2">
             <SidebarMenu>
                 <SidebarMenuItem>
                     <SidebarMenuButton
@@ -264,6 +264,7 @@
     const collapsedDropdownOpenId = ref(null);
     const customNavDialogVisible = ref(false);
 
+    const hasDashboards = computed(() => dashboards.value.length > 0);
     const hasNotifications = computed(() => notifiedMenus.value.length > 0);
     const version = computed(() => appVersion.value?.split('VRCX ')?.[1] || '-');
     const vrcxLogo = new URL('../../../images/VRCX.png', import.meta.url).href;

src/localization/en.json

@@ -131,6 +131,7 @@
             "instance_not_in_game": "Not in game",
             "time_ago": "{time} ago"
         },
+        "first_save_tip": "You can create more dashboards. Right-click the Navigation Menu or use the Customize Navigation dialog to add new ones.",
         "confirmations": {
             "delete_title": "Delete Dashboard",
             "delete_description": "Are you sure you want to delete this dashboard? This action cannot be undone."

src/stores/dashboard.js

@@ -138,8 +138,23 @@ export const useDashboardStore = defineStore('dashboard', () => {
         return `dashboard-${Date.now()}-${Math.random().toString().slice(2, 8)}`;
     }
 
-    async function createDashboard(name = 'Dashboard') {
+    function generateNextDashboardName(baseName = 'Dashboard') {
+        const existingNames = new Set(
+            dashboards.value.map((d) => d.name)
+        );
+        if (!existingNames.has(baseName)) {
+            return baseName;
+        }
+        let n = 1;
+        while (existingNames.has(`${baseName} ${n}`)) {
+            n++;
+        }
+        return `${baseName} ${n}`;
+    }
+
+    async function createDashboard(baseName = 'Dashboard') {
         const id = generateDashboardId();
+        const name = generateNextDashboardName(baseName);
         const dashboard = {
             id,
             name,

src/views/Dashboard/Dashboard.vue

@@ -81,6 +81,7 @@
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { Plus } from 'lucide-vue-next';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { useRouter } from 'vue-router';
 
@@ -179,11 +180,19 @@
     };
 
     const handleSave = async () => {
+        const isFirstSave =
+            dashboardStore.dashboards.length === 1 &&
+            (!dashboard.value?.rows || dashboard.value.rows.length === 0);
+
         await dashboardStore.updateDashboard(props.id, {
             name: editName.value.trim() || dashboard.value?.name || 'Dashboard',
             rows: editRows.value
         });
         isEditing.value = false;
+
+        if (isFirstSave) {
+            toast(t('dashboard.first_save_tip'), { duration: 6000 });
+        }
     };
 
     const handleCancelEdit = () => {