External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: mobile layout for tool-first flow

Browse Source
This commit is contained in:
SnapOtter
2026-06-14 19:32:04 +08:00
parent 433d59c726
commit 896acda7ed
1 changed files with 47 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/tool-page.tsx
+47 -25
View File
@@ -4,6 +4,7 @@ import {
CheckCircle2, CheckCircle2,
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
ChevronUp,
Download, Download,
FileImage, FileImage,
Loader2, Loader2,
@@ -508,13 +509,15 @@ export function ToolPage() {
if (isAiTool && !toolInstalled && featureBundle) { if (isAiTool && !toolInstalled && featureBundle) {
return ( return (
<AppLayout breadcrumb={breadcrumb}> <AppLayout breadcrumb={breadcrumb}>
<div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20"> <div className="flex-1 overflow-y-auto bg-muted/20">
<FeatureInstallPrompt <div className="flex items-center justify-center min-h-full">
bundle={featureBundle} <FeatureInstallPrompt
isAdmin={isAdmin} bundle={featureBundle}
toolName={tool?.name} isAdmin={isAdmin}
toolDescription={tool?.description} toolName={tool?.name}
/> toolDescription={tool?.description}
/>
</div>
</div> </div>
</AppLayout> </AppLayout>
); );
@@ -972,15 +975,17 @@ export function ToolPage() {
if (!hasFile && !isNoDropzone) { if (!hasFile && !isNoDropzone) {
return ( return (
<AppLayout breadcrumb={breadcrumb}> <AppLayout breadcrumb={breadcrumb}>
<div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20"> <div className="flex-1 overflow-y-auto bg-muted/20">
<ToolDropzone <div className="flex items-center justify-center min-h-full">
tool={tool} <ToolDropzone
accept={toolAccept} tool={tool}
fileFilter={toolFileFilter} accept={toolAccept}
multiple fileFilter={toolFileFilter}
onFiles={handleFiles} multiple
onUrlImport={handleUrlImport} onFiles={handleFiles}
/> onUrlImport={handleUrlImport}
/>
</div>
</div> </div>
</AppLayout> </AppLayout>
); );
@@ -1053,6 +1058,21 @@ export function ToolPage() {
)} )}
</section> </section>
{/* Peek bar -- visible when bottom sheet is collapsed */}
{!mobileSettingsOpen && (
<button
type="button"
onClick={() => setMobileSettingsOpen(true)}
className="shrink-0 border-t border-border bg-background px-4 py-3 flex items-center justify-between"
>
<div className="flex items-center gap-2">
<div className="w-8 h-1 rounded-full bg-muted-foreground/30" />
<span className="text-sm font-medium text-foreground">{t.common.process}</span>
</div>
<ChevronUp className="h-4 w-4 text-muted-foreground" />
</button>
)}
{/* Settings BottomSheet */} {/* Settings BottomSheet */}
<BottomSheet <BottomSheet
open={mobileSettingsOpen} open={mobileSettingsOpen}
@@ -1070,15 +1090,17 @@ export function ToolPage() {
if (!hasFile && !isNoDropzone) { if (!hasFile && !isNoDropzone) {
return ( return (
<AppLayout breadcrumb={breadcrumb}> <AppLayout breadcrumb={breadcrumb}>
<div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20"> <div className="flex-1 overflow-y-auto bg-muted/20">
<ToolDropzone <div className="flex items-center justify-center min-h-full">
tool={tool} <ToolDropzone
accept={toolAccept} tool={tool}
fileFilter={toolFileFilter} accept={toolAccept}
multiple fileFilter={toolFileFilter}
onFiles={handleFiles} multiple
onUrlImport={handleUrlImport} onFiles={handleFiles}
/> onUrlImport={handleUrlImport}
/>
</div>
</div> </div>
</AppLayout> </AppLayout>
); );