fix(kiosk): remove kiosk launcher grid, show normal app on the display
The kiosk attached-display showed a separate app-tile launcher grid (Kiosk.vue at /kiosk) instead of the normal onboarding/login/dashboard. The grid is auth-gated, so it only surfaced once the kiosk browser held a persisted session; otherwise it bounced to login — masking the issue. Remove the grid entirely. /kiosk now just persists kiosk mode + safe-area insets and redirects to the root app. The launcher keeps pointing at /kiosk (not directly at /) so the 'kiosk' localStorage flag is still set — App.vue uses it to skip the remote relay, which would otherwise double xdotool input on the kiosk display. Route made public so the auth guard doesn't bounce it before the redirect runs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
archipelago
parent
790ad154f3
commit
786498a57a
@ -1,5 +1,11 @@
|
||||
# Changelog
|
||||
|
||||
## v1.7.96-alpha (2026-06-15)
|
||||
|
||||
- The screen attached to your node now shows the normal Archipelago interface and your dashboard after you sign in, instead of a separate, stripped-down grid of app icons that could appear in its place. That extra screen has been removed so the attached display matches what you see everywhere else.
|
||||
- On a brand-new node, the attached screen now walks through the same welcome and setup steps you'd see on a phone or laptop, and shows the normal sign-in screen once the node is set up — so the on-device display always matches the rest of the interface.
|
||||
- Behind the scenes, a new automated two-node test now exercises real node-to-node features — browsing another node's shared files and handling a removed node — against live nodes before each release, so node-to-node problems are caught earlier.
|
||||
|
||||
## v1.7.95-alpha (2026-06-15)
|
||||
|
||||
- Browsing another node's shared files now works over the fast encrypted mesh. Opening a peer's cloud could fail with a generic "Operation failed" message because the request for their file list wasn't permitted over the mesh and came back as "not found" — and it never retried over Tor. The mesh now serves the file list directly, and if a peer can't answer over the mesh the node automatically falls back to Tor instead of giving up.
|
||||
|
||||
@ -84,12 +84,18 @@ const router = createRouter({
|
||||
meta: { public: true },
|
||||
},
|
||||
{
|
||||
// The kiosk display no longer has its own launcher screen. It runs the
|
||||
// normal app (onboarding → login → dashboard) like any other client.
|
||||
// This route only persists kiosk mode + safe-area insets, then redirects
|
||||
// to the root app. The launcher still points Chromium here (not directly
|
||||
// at `/`) so the 'kiosk' flag gets set — App.vue uses it to skip the
|
||||
// remote relay, which would otherwise double xdotool input on the kiosk
|
||||
// display. Public so the auth guard doesn't bounce us before beforeEnter.
|
||||
path: '/kiosk',
|
||||
name: 'kiosk',
|
||||
component: () => import('../views/Kiosk.vue'),
|
||||
meta: { public: true },
|
||||
component: () => import('../views/RootRedirect.vue'),
|
||||
beforeEnter: (to) => {
|
||||
// Persist kiosk mode before redirect so App.vue can skip the remote relay
|
||||
// (relay duplicates xdotool input on the kiosk display)
|
||||
localStorage.setItem('kiosk', 'true')
|
||||
const safeArea = to.query.safe_area
|
||||
const safeAreaPx = Array.isArray(safeArea) ? safeArea[0] : safeArea
|
||||
@ -106,6 +112,8 @@ const router = createRouter({
|
||||
if (safeAreaYPx && /^\d{1,3}$/.test(safeAreaYPx)) {
|
||||
localStorage.setItem('archipelago_kiosk_safe_area_y_px', safeAreaYPx)
|
||||
}
|
||||
// Grid screen removed — hand off to the normal app flow.
|
||||
return { path: '/' }
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@ -62,7 +62,6 @@
|
||||
.glass-card:focus-visible,
|
||||
.sidebar-nav-item:focus-visible,
|
||||
.path-option-card:focus-visible,
|
||||
.kiosk-app-tile:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
|
||||
@ -1,286 +0,0 @@
|
||||
<template>
|
||||
<div class="kiosk-root" tabindex="0" ref="kioskRoot">
|
||||
<!-- Kiosk launcher grid -->
|
||||
<div class="kiosk-launcher">
|
||||
<!-- Header -->
|
||||
<div class="kiosk-header">
|
||||
<div class="flex items-center gap-4">
|
||||
<img :src="FALLBACK_ICON" alt="Archipelago" class="w-10 h-10" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white font-archipelago">Archipelago</h1>
|
||||
<p class="text-sm text-white/50">{{ currentTime }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="kiosk-status-pill" :class="isConnected ? 'status-success' : 'status-error'">
|
||||
<div class="w-2 h-2 rounded-full" :class="isConnected ? 'bg-green-400' : 'bg-red-400'"></div>
|
||||
{{ isConnected ? t('kiosk.online') : t('kiosk.offline') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App grid -->
|
||||
<div class="kiosk-grid">
|
||||
<button
|
||||
v-for="app in launchableApps"
|
||||
:key="app.id"
|
||||
class="kiosk-app-tile"
|
||||
@click="openApp(app)"
|
||||
:data-controller-focusable="true"
|
||||
>
|
||||
<div class="kiosk-app-icon-wrap">
|
||||
<img
|
||||
:src="app.icon"
|
||||
:alt="app.title"
|
||||
class="kiosk-app-icon"
|
||||
@error="($event.target as HTMLImageElement).src = FALLBACK_ICON"
|
||||
/>
|
||||
<div
|
||||
class="kiosk-app-status"
|
||||
:class="app.running ? 'bg-green-400' : 'bg-white/30'"
|
||||
/>
|
||||
</div>
|
||||
<span class="kiosk-app-label">{{ app.title }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="kiosk-footer">
|
||||
<span class="text-white/30 text-sm">{{ t('kiosk.navHint') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useAppLauncherStore } from '@/stores/appLauncher'
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useAppStore()
|
||||
const appLauncher = useAppLauncherStore()
|
||||
const kioskRoot = ref<HTMLElement | null>(null)
|
||||
|
||||
interface KioskApp {
|
||||
id: string
|
||||
title: string
|
||||
icon: string
|
||||
url: string
|
||||
running: boolean
|
||||
}
|
||||
|
||||
// Public asset path — construct with BASE_URL to avoid Vite resolving it as a module import
|
||||
const FALLBACK_ICON = `${import.meta.env.BASE_URL}assets/img/favico.png`
|
||||
|
||||
const currentTime = ref('')
|
||||
|
||||
const isConnected = computed(() => store.isConnected)
|
||||
|
||||
// Build list of launchable apps from the store's package data
|
||||
const launchableApps = computed<KioskApp[]>(() => {
|
||||
const pkgs = store.data?.['package-data'] || {}
|
||||
const apps: KioskApp[] = []
|
||||
|
||||
// App URL mappings. Bitcoin UI uses its direct host-network port; loading it
|
||||
// through /app/bitcoin-ui/ can render a blank shell because its assets are
|
||||
// rooted at /.
|
||||
const urlMap: Record<string, string> = {
|
||||
'bitcoin-knots': 'http://' + window.location.hostname + ':8334',
|
||||
'lnd': '/app/lnd/',
|
||||
'mempool': '/app/mempool/',
|
||||
'btcpay-server': '/app/btcpay/',
|
||||
'homeassistant': '/app/homeassistant/',
|
||||
'grafana': '/app/grafana/',
|
||||
'jellyfin': '/app/jellyfin/',
|
||||
'nextcloud': '/app/nextcloud/',
|
||||
'immich': '/app/immich/',
|
||||
'photoprism': '/app/photoprism/',
|
||||
'vaultwarden': '/app/vaultwarden/',
|
||||
'filebrowser': '/app/filebrowser/',
|
||||
'searxng': '/app/searxng/',
|
||||
'ollama': '/app/ollama/',
|
||||
'portainer': '/app/portainer/',
|
||||
'uptime-kuma': '/app/uptime-kuma/',
|
||||
'nginx-proxy-manager': '/app/nginx-proxy-manager/',
|
||||
'tailscale': '/app/tailscale/',
|
||||
'fedimint': '/app/fedimint/',
|
||||
'fedimint-gateway': '/app/fedimint-gateway/',
|
||||
'indeedhub': 'http://localhost:7778',
|
||||
'botfights': 'http://localhost:9100',
|
||||
'nwnn': 'https://nwnn.l484.com',
|
||||
'484-kitchen': 'https://484.kitchen',
|
||||
'call-the-operator': 'https://cta.tx1138.com',
|
||||
'arch-presentation': 'https://present.l484.com',
|
||||
'syntropy-institute': 'https://syntropy.institute',
|
||||
't-zero': 'https://teeminuszero.net',
|
||||
}
|
||||
|
||||
for (const [id, pkg] of Object.entries(pkgs)) {
|
||||
const url = urlMap[id]
|
||||
if (!url) continue
|
||||
|
||||
const isRunning = pkg.state === 'running' ||
|
||||
pkg.installed?.status === 'running'
|
||||
|
||||
apps.push({
|
||||
id,
|
||||
title: pkg.manifest?.title || id,
|
||||
icon: pkg['static-files']?.icon || FALLBACK_ICON,
|
||||
url,
|
||||
running: isRunning,
|
||||
})
|
||||
}
|
||||
|
||||
// Sort: running apps first, then alphabetical
|
||||
return apps.sort((a, b) => {
|
||||
if (a.running !== b.running) return a.running ? -1 : 1
|
||||
return a.title.localeCompare(b.title)
|
||||
})
|
||||
})
|
||||
|
||||
function openApp(app: KioskApp) {
|
||||
// Delegate to the app launcher — handles iframe overlay vs new-tab
|
||||
appLauncher.open({ url: app.url, title: app.title })
|
||||
}
|
||||
|
||||
// Clock updater
|
||||
let clockInterval: ReturnType<typeof setInterval> | undefined
|
||||
function updateClock() {
|
||||
const now = new Date()
|
||||
currentTime.value = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateClock()
|
||||
clockInterval = setInterval(updateClock, 30000)
|
||||
kioskRoot.value?.focus()
|
||||
|
||||
// Connect WebSocket if not already
|
||||
if (!store.isConnected) {
|
||||
store.connectWebSocket().catch(() => {})
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (clockInterval) clearInterval(clockInterval)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.kiosk-root {
|
||||
position: fixed;
|
||||
left: var(--kiosk-safe-area-x, 0px);
|
||||
top: var(--kiosk-safe-area-y, 0px);
|
||||
width: calc(100vw - (var(--kiosk-safe-area-x, 0px) * 2));
|
||||
height: calc(100vh - (var(--kiosk-safe-area-y, 0px) * 2));
|
||||
background: #000;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.kiosk-launcher {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: clamp(1rem, 3vh, 2rem) clamp(1.5rem, 4vw, 3rem);
|
||||
background: linear-gradient(180deg, #0a0a12 0%, #000 100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.kiosk-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.kiosk-status-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.kiosk-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 1.5rem;
|
||||
align-content: start;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.kiosk-app-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.kiosk-app-tile:hover,
|
||||
.kiosk-app-tile:focus-visible {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(251, 146, 60, 0.4);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(251, 146, 60, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.kiosk-app-icon-wrap {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.kiosk-app-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.kiosk-app-status {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #000;
|
||||
}
|
||||
|
||||
.kiosk-app-label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kiosk-footer {
|
||||
padding-top: 1.5rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -188,6 +188,18 @@ init()
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 min-h-0 space-y-6 pr-1">
|
||||
<!-- v1.7.96-alpha -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="text-xs font-mono px-2 py-0.5 rounded bg-orange-500/20 text-orange-300">v1.7.96-alpha</span>
|
||||
<span class="text-xs text-white/40">June 15, 2026</span>
|
||||
</div>
|
||||
<div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
|
||||
<p>The screen attached to your node now shows the normal Archipelago interface and your dashboard after you sign in, instead of a separate, stripped-down grid of app icons that could appear in its place. That extra screen has been removed so the attached display matches what you see everywhere else.</p>
|
||||
<p>On a brand-new node, the attached screen now walks through the same welcome and setup steps you'd see on a phone or laptop, and shows the normal sign-in screen once the node is set up — so the on-device display always matches the rest of the interface.</p>
|
||||
<p>Behind the scenes, a new automated two-node test now exercises real node-to-node features — browsing another node's shared files and handling a removed node — against live nodes before each release, so node-to-node problems are caught earlier.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- v1.7.95-alpha -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user