upd inventory cam layout

This commit is contained in:
beo3000 2026-03-06 18:55:54 +01:00
parent 3674ba396e
commit aa07fe016e
3 changed files with 29 additions and 7 deletions

View File

@ -1 +1 @@
1.2.26
1.2.28

View File

@ -11,6 +11,8 @@
import { refreshLockStatus } from "$lib/stores/aiLock";
import { onMount, onDestroy } from "svelte";
import { afterNavigate } from "$app/navigation";
import { page } from "$app/state";
const isCaptureMode = $derived(page.url.pathname.startsWith('/inventory/capture'));
import type { Snippet } from "svelte";
import {
handleRedirect,
@ -199,7 +201,7 @@
</aside>
<!-- Main content -->
<main class="flex-1 overflow-y-auto p-5 pt-safe md:pt-5 pb-20 md:pb-5">
<main class="flex-1 overflow-y-auto {isCaptureMode ? 'p-0' : 'p-5 pt-safe md:pt-5 pb-20 md:pb-5'}">
<div class="mx-auto max-w-[900px]">
<!-- Desktop sidebar toggle button -->
<div class="hidden md:flex mb-3 -mt-1">
@ -217,8 +219,8 @@
</div>
</main>
<!-- Bottom tab bar (mobile only, hidden when sidebar open) -->
{#if !sidebarOpen}
<!-- Bottom tab bar (mobile only, hidden when sidebar open or in capture mode) -->
{#if !sidebarOpen && !isCaptureMode}
<BottomTabBar onsidebaropen={toggleSidebar} />
{/if}
</div>

View File

@ -29,6 +29,14 @@
let pendingImageId = $state<string | null>(null);
let capturedPreview = $state<string | null>(null);
let error = $state('');
let snackbar = $state('');
let snackbarTimer: ReturnType<typeof setTimeout> | null = null;
function showSnackbar(msg: string) {
snackbar = msg;
if (snackbarTimer) clearTimeout(snackbarTimer);
snackbarTimer = setTimeout(() => { snackbar = ''; }, 2500);
}
// Camera stream
let videoEl = $state<HTMLVideoElement | null>(null);
@ -121,6 +129,11 @@
captureState = 'shooting'; // ready for more photos of same item
}
async function saveAndNextWithFeedback() {
await saveAndNext();
showSnackbar('✓ Gespeichert — bereit für nächsten Gegenstand');
}
async function saveAndNext() {
if (!pendingItem && !(captureState === 'confirm' && recognized)) return;
const label = pendingItem?.label ?? recognized!.label;
@ -214,7 +227,7 @@
{:else}
<div class="flex flex-col h-dvh bg-black">
<!-- Top bar -->
<div class="flex items-center gap-2 px-3 py-2 bg-black/60 z-10">
<div class="flex items-center gap-2 px-3 py-2 bg-black/60 z-10" style="padding-top: max(0.5rem, env(safe-area-inset-top));">
<button class="p-2 rounded-full bg-white/10 text-white hover:bg-white/20" onclick={() => { stopCamera(); goto('/inventory'); }}>
<X size={18} />
</button>
@ -306,12 +319,19 @@
{/if}
</div>
<!-- Snackbar -->
{#if snackbar}
<div class="absolute bottom-36 left-1/2 -translate-x-1/2 z-50 rounded-full bg-white/20 backdrop-blur-sm px-5 py-2.5 text-sm text-white whitespace-nowrap shadow-xl">
{snackbar}
</div>
{/if}
<!-- Bottom action bar -->
<div class="flex items-end justify-around px-6 py-4 bg-black/60">
<div class="flex items-end justify-around px-6 py-4 bg-black/60" style="padding-bottom: max(1rem, env(safe-area-inset-bottom));">
<!-- Nächster Gegenstand -->
<button
class="flex flex-col items-center gap-1 transition-opacity {pendingItem || captureState === 'confirm' ? 'opacity-100' : 'opacity-40'}"
onclick={saveAndNext}
onclick={saveAndNextWithFeedback}
disabled={captureState === 'analyzing' || captureState === 'confirm' || (!pendingItem && captureState !== 'confirm')}
>
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-white/40 text-white">