fix(ux): make cretae demo upfront if no files

src/pages/DatabaseSelector.vue

@@ -63,6 +63,26 @@
           </p>
         </div>
       </div>
+
+      <!-- Create Demo (Pink Icon) -->
+      <div
+        v-if="!files?.length"
+        class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
+        :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
+        @click="createDemo"
+      >
+        <div class="w-8 h-8 rounded-full bg-pink-500 relative flex-center">
+          <feather-icon name="monitor" class="w-4 h-4 text-white" />
+        </div>
+        <div>
+          <p class="font-medium">
+            {{ t`Create Demo` }}
+          </p>
+          <p class="text-sm text-gray-600">
+            {{ t`Create an instance with demo data to try out Frappe Books.` }}
+          </p>
+        </div>
+      </div>
       <hr />
 
       <!-- File List -->
@@ -146,6 +166,7 @@
       >
         <LanguageSelector v-show="!creatingDemo" class="text-sm w-28" />
         <button
+          v-if="files?.length"
           class="
             text-sm
             bg-gray-100