From 3940130dadecb0e18c99f533f216835eccc75d14 Mon Sep 17 00:00:00 2001
From: user <thisemail@doesnotexist.com>
Date: Sun, 1 Mar 2026 19:29:27 +0200
Subject: [PATCH] fixing sum' file logic flaws & device UI stuff stuff

---
 .../src/routes/(main)/dashboard/+page.svelte  | 257 ++++++++++++------
 .../(main)/devices/[deviceId]/+page.svelte    |  26 +-
 packages/logic/domains/files/controller.ts    |  87 +++---
 packages/logic/domains/files/repository.ts    |  42 ++-
 4 files changed, 278 insertions(+), 134 deletions(-)

diff --git a/apps/main/src/routes/(main)/dashboard/+page.svelte b/apps/main/src/routes/(main)/dashboard/+page.svelte
index 6d13b72..37d5813 100644
--- a/apps/main/src/routes/(main)/dashboard/+page.svelte
+++ b/apps/main/src/routes/(main)/dashboard/+page.svelte
@@ -33,7 +33,7 @@
 <MaxWidthWrapper cls="space-y-4">
     <Card.Root>
         <Card.Header>
-            <div class="flex items-center justify-between gap-4">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                 <div class="flex items-center gap-2">
                     <Icon icon={Smartphone} cls="h-5 w-5 text-primary" />
                     <Card.Title>Devices</Card.Title>
@@ -41,35 +41,37 @@
                         {mobileVM.devicesTotal} total
                     </span>
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="grid grid-cols-2 gap-2 sm:flex sm:items-center">
                     <Button
                         variant="outline"
                         size="sm"
                         onclick={() => void filesVM.cleanupDanglingFiles()}
                         disabled={filesVM.cleanupLoading}
+                        class="col-span-1"
                     >
                         <Icon
                             icon={Trash2}
                             cls={`h-4 w-4 mr-2 ${filesVM.cleanupLoading ? "animate-spin" : ""}`}
                         />
-                        Cleanup Storage
+                        <span class="truncate">Cleanup Storage</span>
                     </Button>
                     <Button
                         variant="outline"
                         size="sm"
                         onclick={() => void mobileVM.refreshDevices()}
                         disabled={mobileVM.devicesLoading}
+                        class="col-span-1"
                     >
                         <Icon
                             icon={RefreshCw}
                             cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
                         />
-                        Refresh
+                        <span class="hidden sm:inline">Refresh</span>
                     </Button>
                 </div>
             </div>
 
-            <div class="relative mt-3 max-w-sm">
+            <div class="relative mt-2 w-full sm:max-w-sm">
                 <Icon
                     icon={Search}
                     cls="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
@@ -92,88 +94,173 @@
                     No devices registered yet.
                 </div>
             {:else}
-                <Table.Root>
-                    <Table.Header>
-                        <Table.Row>
-                            <Table.Head>Device</Table.Head>
-                            <Table.Head>Manufacturer / Model</Table.Head>
-                            <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>
-                        {#each mobileVM.devices as device (device.id)}
-                            <Table.Row
-                                class="cursor-pointer"
-                                onclick={() => goto(`/devices/${device.id}`)}
-                            >
-                                <Table.Cell>
-                                    <div class="font-medium">{device.name}</div>
-                                    <div class="text-muted-foreground text-xs">
+                <div class="space-y-3 md:hidden">
+                    {#each mobileVM.devices as device (device.id)}
+                        <div
+                            class="rounded-lg border bg-background p-3"
+                            role="button"
+                            tabindex="0"
+                            onclick={() => goto(`/devices/${device.id}`)}
+                            onkeydown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    void goto(`/devices/${device.id}`);
+                                }
+                            }}
+                        >
+                            <div class="flex items-start justify-between gap-3">
+                                <div class="min-w-0">
+                                    <p class="truncate text-sm font-medium">{device.name}</p>
+                                    <p class="text-muted-foreground truncate text-xs">
                                         {device.externalDeviceId}
-                                    </div>
-                                </Table.Cell>
-                                <Table.Cell>
-                                    {device.manufacturer} / {device.model}
-                                </Table.Cell>
-                                <Table.Cell>{device.androidVersion}</Table.Cell>
-                                <Table.Cell>
-                                    {new Date(device.createdAt).toLocaleString()}
-                                </Table.Cell>
-                                <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>
+                                    </p>
+                                </div>
+                                <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" />
+                                    </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>
+                            </div>
+
+                            <div class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+                                <div>
+                                    <p class="text-muted-foreground">Manufacturer / Model</p>
+                                    <p class="truncate">{device.manufacturer} / {device.model}</p>
+                                </div>
+                                <div>
+                                    <p class="text-muted-foreground">Android</p>
+                                    <p>{device.androidVersion}</p>
+                                </div>
+                                <div>
+                                    <p class="text-muted-foreground">Created</p>
+                                    <p class="truncate">
+                                        {new Date(device.createdAt).toLocaleString()}
+                                    </p>
+                                </div>
+                                <div>
+                                    <p class="text-muted-foreground">Last Ping</p>
+                                    <p class="truncate">
+                                        {mobileVM.formatLastPing(device.lastPingAt)}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+
+                <div class="hidden md:block">
+                    <Table.Root>
+                        <Table.Header>
+                            <Table.Row>
+                                <Table.Head>Device</Table.Head>
+                                <Table.Head>Manufacturer / Model</Table.Head>
+                                <Table.Head>Android</Table.Head>
+                                <Table.Head>Created</Table.Head>
+                                <Table.Head>Last Ping</Table.Head>
+                                <Table.Head>Actions</Table.Head>
                             </Table.Row>
-                        {/each}
-                    </Table.Body>
-                </Table.Root>
+                        </Table.Header>
+                        <Table.Body>
+                            {#each mobileVM.devices as device (device.id)}
+                                <Table.Row
+                                    class="cursor-pointer"
+                                    onclick={() => goto(`/devices/${device.id}`)}
+                                >
+                                    <Table.Cell>
+                                        <div class="font-medium">{device.name}</div>
+                                        <div class="text-muted-foreground text-xs">
+                                            {device.externalDeviceId}
+                                        </div>
+                                    </Table.Cell>
+                                    <Table.Cell>
+                                        {device.manufacturer} / {device.model}
+                                    </Table.Cell>
+                                    <Table.Cell>{device.androidVersion}</Table.Cell>
+                                    <Table.Cell>
+                                        {new Date(device.createdAt).toLocaleString()}
+                                    </Table.Cell>
+                                    <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>
+                    </Table.Root>
+                </div>
             {/if}
         </Card.Content>
     </Card.Root>
diff --git a/apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte b/apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte
index d4d37ce..a65e25a 100644
--- a/apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte
+++ b/apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte
@@ -372,7 +372,9 @@
 </div>
 
 <Dialog.Root bind:open={mediaPreviewOpen}>
-    <Dialog.Content class="max-w-6xl p-8">
+    <Dialog.Content
+        class="h-[92vh] w-[96vw] overflow-hidden p-4 sm:max-w-[96vw] md:max-w-[94vw] lg:max-w-[90vw] xl:max-w-[86vw] 2xl:max-w-[82vw] md:p-6"
+    >
         {#if selectedMedia}
             <Dialog.Header>
                 <Dialog.Title
@@ -382,22 +384,30 @@
                 >
             </Dialog.Header>
 
-            <div class="mt-2">
+            <div
+                class="bg-muted/30 mt-1 flex h-[calc(92vh-10.5rem)] items-center justify-center overflow-hidden rounded-md"
+            >
                 {#if isImageAsset(selectedMedia) && selectedMedia.r2Url}
                     <img
                         src={selectedMedia.r2Url}
                         alt={selectedMedia.filename || selectedMedia.fileId}
-                        class="max-h-[80vh] w-full rounded-md object-contain"
+                        class="h-full w-full object-contain"
+                    />
+                {:else if isVideoAsset(selectedMedia) && selectedMedia.r2Url}
+                    <video
+                        src={selectedMedia.r2Url}
+                        controls
+                        playsinline
+                        preload="metadata"
+                        class="h-full w-full bg-black 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"
+                        class="flex h-full w-full items-center justify-center 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 URL unavailable for preview.</p>
                         </div>
                     </div>
                 {:else}
@@ -414,7 +424,7 @@
                 {/if}
             </div>
 
-            <Dialog.Footer class="mt-3">
+            <Dialog.Footer class="mt-2 justify-end">
                 {#if selectedMedia.r2Url}
                     <Button
                         variant="outline"
diff --git a/packages/logic/domains/files/controller.ts b/packages/logic/domains/files/controller.ts
index ff8b0ff..cc8a5e1 100644
--- a/packages/logic/domains/files/controller.ts
+++ b/packages/logic/domains/files/controller.ts
@@ -214,46 +214,59 @@ export class FileController {
             attributes: { "app.user.id": userId },
             fn: () =>
                 this.fileRepo
-                    .listReferencedObjectKeysForUser(fctx, userId)
-                    .andThen((referencedKeys) => {
-                        const referencedSet = new Set(referencedKeys);
-                        return ResultAsync.combine([
-                            this.storageRepo.listObjectKeys(
-                                fctx,
-                                `uploads/${userId}/`,
-                            ),
-                            this.storageRepo.listObjectKeys(
-                                fctx,
-                                `thumbnails/${userId}/`,
-                            ),
-                        ]).andThen(([uploadKeys, thumbnailKeys]) => {
-                            const existingStorageKeys = [
-                                ...new Set([...uploadKeys, ...thumbnailKeys]),
-                            ];
+                    .listMobileMediaReferencedObjectKeysForUser(fctx, userId)
+                    .andThen((referencedKeys) =>
+                        this.fileRepo
+                            .listMobileMediaDanglingFileIdsForUser(fctx, userId)
+                            .andThen((danglingFileIds) => {
+                                const referencedSet = new Set(referencedKeys);
+                                return ResultAsync.combine([
+                                    this.storageRepo.listObjectKeys(
+                                        fctx,
+                                        `uploads/${userId}/`,
+                                    ),
+                                    this.storageRepo.listObjectKeys(
+                                        fctx,
+                                        `thumbnails/${userId}/`,
+                                    ),
+                                ]).andThen(([uploadKeys, thumbnailKeys]) => {
+                                    const existingStorageKeys = [
+                                        ...new Set([...uploadKeys, ...thumbnailKeys]),
+                                    ];
 
-                            const danglingKeys = existingStorageKeys.filter(
-                                (key) => !referencedSet.has(key),
-                            );
+                                    const danglingKeys = existingStorageKeys.filter(
+                                        (key) => !referencedSet.has(key),
+                                    );
 
-                            if (danglingKeys.length === 0) {
-                                return okAsync({
-                                    scanned: existingStorageKeys.length,
-                                    referenced: referencedKeys.length,
-                                    dangling: 0,
-                                    deleted: 0,
+                                    const deleteStorage =
+                                        danglingKeys.length > 0
+                                            ? this.storageRepo.deleteFiles(
+                                                  fctx,
+                                                  danglingKeys,
+                                              )
+                                            : okAsync(true);
+
+                                    return deleteStorage.andThen(() => {
+                                        const deleteRows =
+                                            danglingFileIds.length > 0
+                                                ? this.fileRepo.deleteFiles(
+                                                      fctx,
+                                                      danglingFileIds,
+                                                      userId,
+                                                  )
+                                                : okAsync(true);
+
+                                        return deleteRows.map(() => ({
+                                            scanned: existingStorageKeys.length,
+                                            referenced: referencedKeys.length,
+                                            dangling: danglingKeys.length,
+                                            deleted: danglingKeys.length,
+                                            deletedRows: danglingFileIds.length,
+                                        }));
+                                    });
                                 });
-                            }
-
-                            return this.storageRepo
-                                .deleteFiles(fctx, danglingKeys)
-                                .map(() => ({
-                                    scanned: existingStorageKeys.length,
-                                    referenced: referencedKeys.length,
-                                    dangling: danglingKeys.length,
-                                    deleted: danglingKeys.length,
-                                }));
-                        });
-                    }),
+                            }),
+                    ),
         });
     }
 
diff --git a/packages/logic/domains/files/repository.ts b/packages/logic/domains/files/repository.ts
index 1a8a37c..1d49bde 100644
--- a/packages/logic/domains/files/repository.ts
+++ b/packages/logic/domains/files/repository.ts
@@ -20,7 +20,7 @@ import {
 } from "@pkg/db";
 import { ResultAsync, errAsync, okAsync } from "neverthrow";
 import { FlowExecCtx } from "@core/flow.execution.context";
-import { file, fileAccess } from "@pkg/db/schema";
+import { file, fileAccess, mobileDevice, mobileMediaAsset } from "@pkg/db/schema";
 import { type Err } from "@pkg/result";
 import { fileErrors } from "./errors";
 import { logDomainEvent } from "@pkg/logger";
@@ -381,7 +381,7 @@ export class FileRepository {
         });
     }
 
-    listReferencedObjectKeysForUser(
+    listMobileMediaReferencedObjectKeysForUser(
         fctx: FlowExecCtx,
         userId: string,
     ): ResultAsync<string[], Err> {
@@ -391,8 +391,13 @@ export class FileRepository {
                     objectKey: file.objectKey,
                     metadata: file.metadata,
                 })
-                .from(file)
-                .where(eq(file.userId, userId)),
+                .from(mobileMediaAsset)
+                .innerJoin(file, eq(mobileMediaAsset.fileId, file.id))
+                .innerJoin(
+                    mobileDevice,
+                    eq(mobileMediaAsset.deviceId, mobileDevice.id),
+                )
+                .where(eq(mobileDevice.ownerUserId, userId)),
             (error) =>
                 fileErrors.getFilesFailed(
                     fctx,
@@ -422,6 +427,35 @@ export class FileRepository {
         });
     }
 
+    listMobileMediaDanglingFileIdsForUser(
+        fctx: FlowExecCtx,
+        userId: string,
+    ): ResultAsync<string[], Err> {
+        return ResultAsync.fromPromise(
+            this.db
+                .select({ id: file.id })
+                .from(file)
+                .where(
+                    and(
+                        eq(file.userId, userId),
+                        sql`NOT EXISTS (
+                            SELECT 1
+                            FROM ${mobileMediaAsset}
+                            INNER JOIN ${mobileDevice}
+                                ON ${mobileMediaAsset.deviceId} = ${mobileDevice.id}
+                            WHERE ${mobileMediaAsset.fileId} = ${file.id}
+                                AND ${mobileDevice.ownerUserId} = ${userId}
+                        )`,
+                    ),
+                ),
+            (error) =>
+                fileErrors.getFilesFailed(
+                    fctx,
+                    error instanceof Error ? error.message : String(error),
+                ),
+        ).map((rows) => rows.map((row) => row.id));
+    }
+
     updateFileStatus(
         fctx: FlowExecCtx,
         fileId: string,