admin/illusory-mapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: delete actions for device + slightly better ui

Browse Source
This commit is contained in:
user
2026-03-01 18:59:43 +02:00
parent d000ccfeca
commit 48792692ff
11 changed files with 626 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/main/src/lib/domains/files/files.remote.ts
View File

@@ -3,7 +3,7 @@ import {
getFlowExecCtxForRemoteFuncs,
unauthorized,
} from "$lib/core/server.utils";
import { getRequestEvent, query } from "$app/server";
import { command, getRequestEvent, query } from "$app/server";
import * as v from "valibot";
const fc = getFileController();
@@ -46,3 +46,33 @@ export const getFilesSQ = query(getFilesInputSchema, async (input) => {
? { data: res.value, error: null }
: { data: null, error: res.error };
});
const deleteFileInputSchema = v.object({
fileId: v.string(),
});
export const deleteFileSC = command(deleteFileInputSchema, async (input) => {
const event = getRequestEvent();
const fctx = await getFlowExecCtxForRemoteFuncs(event.locals);
if (!fctx.userId) {
return unauthorized(fctx);
}
const res = await fc.deleteFile(fctx, input.fileId, fctx.userId);
return res.isOk()
? { data: res.value, error: null }
: { data: null, error: res.error };
});
export const cleanupDanglingFilesSC = command(v.object({}), async () => {
const event = getRequestEvent();
const fctx = await getFlowExecCtxForRemoteFuncs(event.locals);
if (!fctx.userId) {
return unauthorized(fctx);
}
const res = await fc.cleanupDanglingStorageFiles(fctx, fctx.userId);
return res.isOk()
? { data: res.value, error: null }
: { data: null, error: res.error };
});

51
apps/main/src/lib/domains/files/files.vm.svelte.ts
View File

@@ -1,10 +1,12 @@
import type { File } from "@pkg/logic/domains/files/data";
import { getFilesSQ } from "./files.remote";
import { cleanupDanglingFilesSC, deleteFileSC, getFilesSQ } from "./files.remote";
import { toast } from "svelte-sonner";
class FilesViewModel {
files = $state([] as File[]);
loading = $state(false);
deletingFileId = $state(null as string | null);
cleanupLoading = $state(false);
search = $state("");
page = $state(1);
@@ -55,6 +57,53 @@ class FilesViewModel {
}
return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}
async deleteFile(fileId: string) {
this.deletingFileId = fileId;
try {
const result = await deleteFileSC({ fileId });
if (result?.error) {
toast.error(result.error.message || "Failed to delete file", {
description: result.error.description || "Please try again later",
});
return;
}
toast.success("File deleted");
await this.fetchFiles();
} catch (error) {
toast.error("Failed to delete file", {
description:
error instanceof Error ? error.message : "Please try again later",
});
} finally {
this.deletingFileId = null;
}
}
async cleanupDanglingFiles() {
this.cleanupLoading = true;
try {
const result = await cleanupDanglingFilesSC({});
if (result?.error || !result?.data) {
toast.error(result?.error?.message || "Cleanup failed", {
description: result?.error?.description || "Please try again later",
});
return;
}
toast.success("Storage cleanup completed", {
description: `Deleted ${result.data.deleted} dangling files (scanned ${result.data.scanned})`,
});
} catch (error) {
toast.error("Cleanup failed", {
description:
error instanceof Error ? error.message : "Please try again later",
});
} finally {
this.cleanupLoading = false;
}
}
}
export const filesVM = new FilesViewModel();

20
apps/main/src/lib/domains/mobile/mobile.remote.ts
View File

@@ -8,7 +8,7 @@ import {
getFlowExecCtxForRemoteFuncs,
unauthorized,
} from "$lib/core/server.utils";
import { getRequestEvent, query } from "$app/server";
import { command, getRequestEvent, query } from "$app/server";
import * as v from "valibot";
const mc = getMobileController();
@@ -109,3 +109,21 @@ export const getDeviceMediaSQ = query(
: { data: null, error: res.error };
},
);
export const deleteDeviceSC = command(
v.object({
deviceId: v.pipe(v.number(), v.integer()),
}),
async (payload) => {
const event = getRequestEvent();
const fctx = await getFlowExecCtxForRemoteFuncs(event.locals);
if (!fctx.userId) {
return unauthorized(fctx);
}
const res = await mc.deleteDevice(fctx, payload.deviceId, fctx.userId);
return res.isOk()
? { data: res.value, error: null }
: { data: null, error: res.error };
},
);

34
apps/main/src/lib/domains/mobile/mobile.vm.svelte.ts
View File

@@ -5,6 +5,7 @@ import type {
MobileSMS,
} from "@pkg/logic/domains/mobile/data";
import {
deleteDeviceSC,
getDeviceDetailSQ,
getDeviceMediaSQ,
getDeviceSmsSQ,
@@ -34,6 +35,7 @@ class MobileViewModel {
mediaPage = $state(1);
mediaPageSize = $state(25);
mediaTotal = $state(0);
deletingDeviceId = $state(null as number | null);
private devicesPollTimer: ReturnType<typeof setInterval> | null = null;
private smsPollTimer: ReturnType<typeof setInterval> | null = null;
@@ -177,6 +179,38 @@ class MobileViewModel {
}
}
async deleteDevice(deviceId: number) {
this.deletingDeviceId = deviceId;
try {
const result = await deleteDeviceSC({ deviceId });
if (result?.error || !result?.data) {
toast.error(result?.error?.message || "Failed to delete device", {
description: result?.error?.description || "Please try again later",
});
return false;
}
this.devices = this.devices.filter((d) => d.id !== deviceId);
this.devicesTotal = Math.max(0, this.devicesTotal - 1);
if (this.selectedDeviceDetail?.device.id === deviceId) {
this.selectedDeviceDetail = null;
}
toast.success("Device deleted", {
description: `Deleted ${result.data.deletedFileCount} related file(s)`,
});
return true;
} catch (error) {
toast.error("Failed to delete device", {
description:
error instanceof Error ? error.message : "Please try again later",
});
return false;
} finally {
this.deletingDeviceId = null;
}
}
startDevicesPolling(intervalMs = 5000) {
this.stopDevicesPolling();
this.devicesPollTimer = setInterval(() => {

88
apps/main/src/routes/(main)/dashboard/+page.svelte
View File

@@ -1,17 +1,21 @@
<script lang="ts">
import { goto } from "$app/navigation";
import Icon from "$lib/components/atoms/icon.svelte";
import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
import { Button } from "$lib/components/ui/button";
import { buttonVariants } from "$lib/components/ui/button";
import * as Card from "$lib/components/ui/card";
import { Input } from "$lib/components/ui/input";
import * as Table from "$lib/components/ui/table";
import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
import { mainNavTree } from "$lib/core/constants";
import { filesVM } from "$lib/domains/files/files.vm.svelte";
import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
import { breadcrumbs } from "$lib/global.stores";
import Smartphone from "@lucide/svelte/icons/smartphone";
import RefreshCw from "@lucide/svelte/icons/refresh-cw";
import Search from "@lucide/svelte/icons/search";
import Trash2 from "@lucide/svelte/icons/trash-2";
import { onDestroy, onMount } from "svelte";
breadcrumbs.set([mainNavTree[0]]);
@@ -37,18 +41,32 @@
{mobileVM.devicesTotal} total
</span>
</div>
<Button
variant="outline"
size="sm"
onclick={() => void mobileVM.refreshDevices()}
disabled={mobileVM.devicesLoading}
>
<Icon
icon={RefreshCw}
cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
/>
Refresh
</Button>
<div class="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onclick={() => void filesVM.cleanupDanglingFiles()}
disabled={filesVM.cleanupLoading}
>
<Icon
icon={Trash2}
cls={`h-4 w-4 mr-2 ${filesVM.cleanupLoading ? "animate-spin" : ""}`}
/>
Cleanup Storage
</Button>
<Button
variant="outline"
size="sm"
onclick={() => void mobileVM.refreshDevices()}
disabled={mobileVM.devicesLoading}
>
<Icon
icon={RefreshCw}
cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
/>
Refresh
</Button>
</div>
</div>
<div class="relative mt-3 max-w-sm">
@@ -82,6 +100,7 @@
<Table.Head>Android</Table.Head>
<Table.Head>Created</Table.Head>
<Table.Head>Last Ping</Table.Head>
<Table.Head>Actions</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
@@ -106,6 +125,51 @@
<Table.Cell>
{mobileVM.formatLastPing(device.lastPingAt)}
</Table.Cell>
<Table.Cell>
<AlertDialog.Root>
<AlertDialog.Trigger
class={buttonVariants({
variant: "destructive",
size: "sm",
})}
disabled={mobileVM.deletingDeviceId ===
device.id}
onclick={(e) => e.stopPropagation()}
>
<Icon
icon={Trash2}
cls="h-4 w-4"
/>
Delete
</AlertDialog.Trigger>
<AlertDialog.Content>
<AlertDialog.Header>
<AlertDialog.Title>
Delete device?
</AlertDialog.Title>
<AlertDialog.Description>
This deletes the device and all related SMS/media data.
Files in storage linked to this device are also removed.
</AlertDialog.Description>
</AlertDialog.Header>
<AlertDialog.Footer>
<AlertDialog.Cancel>
Cancel
</AlertDialog.Cancel>
<AlertDialog.Action
onclick={async (e) => {
e.stopPropagation();
await mobileVM.deleteDevice(
device.id,
);
}}
>
Delete
</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Root>
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>

266
apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte
View File

@@ -1,12 +1,13 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { page } from "$app/state";
import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
import Icon from "$lib/components/atoms/icon.svelte";
import { Button } from "$lib/components/ui/button";
import { Button, buttonVariants } from "$lib/components/ui/button";
import * as Card from "$lib/components/ui/card";
import * as Dialog from "$lib/components/ui/dialog/index.js";
import * as Table from "$lib/components/ui/table";
import * as Tabs from "$lib/components/ui/tabs/index.js";
import type { MobileMediaAsset } from "@pkg/logic/domains/mobile/data";
import { mainNavTree } from "$lib/core/constants";
import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
import { breadcrumbs } from "$lib/global.stores";
@@ -15,7 +16,9 @@
import ImageIcon from "@lucide/svelte/icons/image";
import MessageSquare from "@lucide/svelte/icons/message-square";
import Smartphone from "@lucide/svelte/icons/smartphone";
import Trash2 from "@lucide/svelte/icons/trash-2";
import VideoIcon from "@lucide/svelte/icons/video";
import type { MobileMediaAsset } from "@pkg/logic/domains/mobile/data";
import { onDestroy, onMount } from "svelte";
let selectedTab = $state("sms");
@@ -35,7 +38,8 @@
if (!size || size <= 0) return "-";
if (size < 1024) return `${size} B`;
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;
if (size < 1024 * 1024 * 1024)
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}
@@ -65,11 +69,53 @@
</script>
<div class="space-y-4">
<div class="flex items-center gap-2">
<Button variant="outline" size="sm" href="/dashboard">
<Icon icon={ArrowLeft} cls="h-4 w-4 mr-1" />
Back
</Button>
<div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
<Button variant="outline" size="sm" href="/dashboard">
<Icon icon={ArrowLeft} cls="h-4 w-4 mr-1" />
Back
</Button>
</div>
{#if mobileVM.selectedDeviceDetail}
<AlertDialog.Root>
<AlertDialog.Trigger
class={buttonVariants({
variant: "destructive",
size: "sm",
})}
disabled={mobileVM.deletingDeviceId ===
mobileVM.selectedDeviceDetail.device.id}
>
<Icon icon={Trash2} cls="h-4 w-4" />
Delete Device
</AlertDialog.Trigger>
<AlertDialog.Content>
<AlertDialog.Header>
<AlertDialog.Title>Delete device?</AlertDialog.Title>
<AlertDialog.Description>
This permanently removes the device with all SMS/media entries and
related files in storage.
</AlertDialog.Description>
</AlertDialog.Header>
<AlertDialog.Footer>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action
onclick={async () => {
if (!mobileVM.selectedDeviceDetail) return;
const deleted = await mobileVM.deleteDevice(
mobileVM.selectedDeviceDetail.device.id,
);
if (deleted) {
await goto("/dashboard");
}
}}
>
Delete Device
</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Root>
{/if}
</div>
<Card.Root>
@@ -83,38 +129,75 @@
</Card.Header>
<Card.Content>
{#if mobileVM.selectedDeviceDetail}
<div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
<div>
<span class="text-muted-foreground">External ID:</span>
<div class="font-mono">
{mobileVM.selectedDeviceDetail.device.externalDeviceId}
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
<div class="rounded-xl border bg-muted/30 p-4 lg:col-span-2">
<div class="flex flex-wrap items-start justify-between gap-3">
<div>
<p class="text-lg font-semibold">
{mobileVM.selectedDeviceDetail.device.name}
</p>
<p class="font-mono text-xs text-muted-foreground">
{mobileVM.selectedDeviceDetail.device.externalDeviceId}
</p>
</div>
<div class="text-right text-xs text-muted-foreground">
<p>Created</p>
<p class="text-foreground">
{new Date(
mobileVM.selectedDeviceDetail.device.createdAt,
).toLocaleString()}
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
<div>
<p class="text-xs text-muted-foreground">Manufacturer</p>
<p class="font-medium">
{mobileVM.selectedDeviceDetail.device.manufacturer}
</p>
</div>
<div>
<p class="text-xs text-muted-foreground">Model</p>
<p class="font-medium">
{mobileVM.selectedDeviceDetail.device.model}
</p>
</div>
<div>
<p class="text-xs text-muted-foreground">Android Version</p>
<p class="font-medium">
{mobileVM.selectedDeviceDetail.device.androidVersion}
</p>
</div>
<div>
<p class="text-xs text-muted-foreground">Last Ping</p>
<p class="font-medium">
{mobileVM.formatLastPing(
mobileVM.selectedDeviceDetail.device.lastPingAt,
)}
</p>
</div>
</div>
</div>
<div>
<span class="text-muted-foreground">Last Ping:</span>
<div>
{mobileVM.formatLastPing(
mobileVM.selectedDeviceDetail.device.lastPingAt,
)}
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
<div class="rounded-xl border bg-background p-4">
<div class="flex items-center gap-2 text-muted-foreground">
<Icon icon={MessageSquare} cls="h-4 w-4" />
<p class="text-xs">Total SMS</p>
</div>
<p class="mt-2 text-2xl font-semibold">
{mobileVM.selectedDeviceDetail.smsCount}
</p>
</div>
</div>
<div>
<span class="text-muted-foreground">Manufacturer:</span>
<div>{mobileVM.selectedDeviceDetail.device.manufacturer}</div>
</div>
<div>
<span class="text-muted-foreground">Model:</span>
<div>{mobileVM.selectedDeviceDetail.device.model}</div>
</div>
<div>
<span class="text-muted-foreground">Android:</span>
<div>{mobileVM.selectedDeviceDetail.device.androidVersion}</div>
</div>
<div>
<span class="text-muted-foreground">Counts:</span>
<div>
SMS: {mobileVM.selectedDeviceDetail.smsCount}, Media:
{mobileVM.selectedDeviceDetail.mediaCount}
<div class="rounded-xl border bg-background p-4">
<div class="flex items-center gap-2 text-muted-foreground">
<Icon icon={ImageIcon} cls="h-4 w-4" />
<p class="text-xs">Total Media</p>
</div>
<p class="mt-2 text-2xl font-semibold">
{mobileVM.selectedDeviceDetail.mediaCount}
</p>
</div>
</div>
</div>
@@ -141,11 +224,15 @@
</Card.Header>
<Card.Content>
{#if !mobileVM.smsLoading && mobileVM.sms.length === 0}
<div class="py-8 text-center text-sm text-muted-foreground">
<div
class="py-8 text-center text-sm text-muted-foreground"
>
No SMS records yet.
</div>
{:else}
<div class="max-h-[65vh] overflow-auto rounded-md border">
<div
class="max-h-[55vh] overflow-auto rounded-md border"
>
<Table.Root>
<Table.Header>
<Table.Row>
@@ -158,15 +245,21 @@
<Table.Body>
{#each mobileVM.sms as message (message.id)}
<Table.Row>
<Table.Cell>{message.sender}</Table.Cell>
<Table.Cell
>{message.sender}</Table.Cell
>
<Table.Cell>
{message.recipient || "-"}
</Table.Cell>
<Table.Cell class="max-w-[520px] truncate">
<Table.Cell
class="max-w-[520px] truncate"
>
{message.body}
</Table.Cell>
<Table.Cell>
{new Date(message.sentAt).toLocaleString()}
{new Date(
message.sentAt,
).toLocaleString()}
</Table.Cell>
</Table.Row>
{/each}
@@ -185,11 +278,15 @@
</Card.Header>
<Card.Content>
{#if !mobileVM.mediaLoading && mobileVM.media.length === 0}
<div class="py-8 text-center text-sm text-muted-foreground">
<div
class="py-8 text-center text-sm text-muted-foreground"
>
No media assets yet.
</div>
{:else}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"
>
{#each mobileVM.media as asset (asset.id)}
<button
type="button"
@@ -197,26 +294,43 @@
onclick={() => openMediaPreview(asset)}
disabled={!asset.r2Url}
>
<div class="bg-muted relative aspect-square">
<div
class="bg-muted relative aspect-square"
>
{#if isImageAsset(asset) && asset.r2Url}
<img
src={asset.r2Url}
alt={asset.filename || asset.fileId}
alt={asset.filename ||
asset.fileId}
class="h-full w-full object-cover"
loading="lazy"
/>
{:else if isVideoAsset(asset)}
<div class="flex h-full w-full items-center justify-center text-muted-foreground">
<div
class="flex h-full w-full items-center justify-center text-muted-foreground"
>
<div class="text-center">
<Icon icon={VideoIcon} cls="mx-auto h-10 w-10" />
<p class="mt-2 text-xs">Video file</p>
<Icon
icon={VideoIcon}
cls="mx-auto h-10 w-10"
/>
<p class="mt-2 text-xs">
Video file
</p>
</div>
</div>
{:else}
<div class="flex h-full w-full items-center justify-center text-muted-foreground">
<div
class="flex h-full w-full items-center justify-center text-muted-foreground"
>
<div class="text-center">
<Icon icon={FileIcon} cls="mx-auto h-10 w-10" />
<p class="mt-2 text-xs">File</p>
<Icon
icon={FileIcon}
cls="mx-auto h-10 w-10"
/>
<p class="mt-2 text-xs">
File
</p>
</div>
</div>
{/if}
@@ -225,14 +339,24 @@
<p class="truncate text-sm font-medium">
{asset.filename || "Untitled"}
</p>
<p class="text-muted-foreground truncate text-xs">
<p
class="text-muted-foreground truncate text-xs"
>
{asset.mimeType}
</p>
<div class="flex items-center justify-between text-xs text-muted-foreground">
<span>{formatSize(asset.sizeBytes)}</span>
<div
class="flex items-center justify-between text-xs text-muted-foreground"
>
<span
>{formatSize(
asset.sizeBytes,
)}</span
>
<span>
{asset.capturedAt
? new Date(asset.capturedAt).toLocaleDateString()
? new Date(
asset.capturedAt,
).toLocaleDateString()
: "-"}
</span>
</div>
@@ -251,8 +375,11 @@
<Dialog.Content class="max-w-6xl p-8">
{#if selectedMedia}
<Dialog.Header>
<Dialog.Title>{selectedMedia.filename || "Media Preview"}</Dialog.Title>
<Dialog.Description>{selectedMedia.mimeType}</Dialog.Description>
<Dialog.Title
>{selectedMedia.filename || "Media Preview"}</Dialog.Title
>
<Dialog.Description>{selectedMedia.mimeType}</Dialog.Description
>
</Dialog.Header>
<div class="mt-2">
@@ -263,17 +390,25 @@
class="max-h-[80vh] w-full rounded-md object-contain"
/>
{:else if isVideoAsset(selectedMedia)}
<div class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground">
<div
class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground"
>
<div>
<Icon icon={VideoIcon} cls="mx-auto h-10 w-10" />
<p class="mt-2">Video preview opens in a new tab.</p>
<p class="mt-2">
Video preview opens in a new tab.
</p>
</div>
</div>
{:else}
<div class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground">
<div
class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground"
>
<div>
<Icon icon={FileIcon} cls="mx-auto h-10 w-10" />
<p class="mt-2">Preview unavailable for this file type.</p>
<p class="mt-2">
Preview unavailable for this file type.
</p>
</div>
</div>
{/if}
@@ -283,7 +418,12 @@
{#if selectedMedia.r2Url}
<Button
variant="outline"
onclick={() => window.open(selectedMedia?.r2Url, "_blank", "noopener,noreferrer")}
onclick={() =>
window.open(
selectedMedia?.r2Url,
"_blank",
"noopener,noreferrer",
)}
>
Open Raw File
</Button>

13
apps/main/src/routes/(main)/files/+page.svelte
View File

@@ -11,6 +11,7 @@
import FileArchive from "@lucide/svelte/icons/file-archive";
import RefreshCw from "@lucide/svelte/icons/refresh-cw";
import Search from "@lucide/svelte/icons/search";
import Trash2 from "@lucide/svelte/icons/trash-2";
import { onMount } from "svelte";
const filesNavItem = mainNavTree.find((item) => item.url === "/files");
@@ -78,6 +79,7 @@
<Table.Head>Status</Table.Head>
<Table.Head>Uploaded</Table.Head>
<Table.Head>R2 URL</Table.Head>
<Table.Head>Actions</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
@@ -105,6 +107,17 @@
Open
</a>
</Table.Cell>
<Table.Cell>
<Button
variant="destructive"
size="sm"
disabled={filesVM.deletingFileId === item.id}
onclick={() => void filesVM.deleteFile(item.id)}
>
<Icon icon={Trash2} cls="h-4 w-4" />
Delete
</Button>
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>