fix: app list not loading

components/App.vue

@@ -30,7 +30,7 @@
       </nav>
     </div>
 
-    <div class="flex-1 overflow-y-auto shadow-lg">
+    <div class="flex-1 overflow-y-auto shadow-lg" v-if="isLoggedIn">
       <router-view></router-view>
     </div>
   </div>

components/apps/AppList.vue

@@ -4,17 +4,19 @@
       Loading...
 
       <button
-        @click="refresh()"
-        class="px-4 py-2 bg-gray-200 leading-4 rounded mx-auto flex"
+        @click="verify()"
+        class="px-4 py-2 bg-gray-200 leading-4 rounded mx-auto flex items-center"
         title="Reload list"
         aria-label="Reload list"
       >
         <span class="material-icons">refresh</span>
-        <span>Reload list</span>
+        <span class="ml-2">check again</span>
       </button>
     </div>
+
     <div
       class="flex p-4 bg-gray-100 border border-0 border-b-1 sticky top-0 z-10 shadow-sm"
+      v-if="canRunCommands"
     >
       <input
         v-model="search"
@@ -119,7 +121,7 @@ import { usePreference } from "../../composables/usePreference";
 
 const search = ref("");
 const { apps, refresh, addApp } = useApps();
-const { canRunCommands } = useCommands();
+const { canRunCommands, verify } = useCommands();
 const [showGrid, setShowGrid] = usePreference("showGrid");
 
 function toggleView() {

composables/useApps.ts

@@ -13,17 +13,17 @@ const apps = ref<App[]>([]);
 
 export function useApps() {
   const { canRunCommands, run } = useCommands();
+
   const shortenImage = (image: string) =>
     image.replace("ghcr.io/", "gh:").replace(":latest", "");
+
   const shortenVolumes = (volumes: string): string[] =>
     volumes
       .split(",")
       .map((volume) => volume.split(":")[0])
       .filter(Boolean);
 
   async function refresh() {
-    if (!canRunCommands.value) return;
-
     const list: Array<any> = await run('dx.list');
     const running: string[] = await run('dx.ps');
 
@@ -43,10 +43,6 @@ export function useApps() {
   }
 
   onMounted(() => {
-    if (canRunCommands.value) {
-      return refresh();
-    }
-
     const detach = watch(canRunCommands, () => {
       refresh();
       detach();

composables/useRouter.ts

@@ -24,6 +24,7 @@ const topPages = [
     path: "/settings",
     name: "Settings",
     icon: "settings",
+    protected: true,
     component: Settings,
   },
 ];