stereo.cat/frontend
2
1
Fork 0
Code Issues 4 Pull requests Projects 1 Releases Packages Wiki Activity Actions

refactor: sort files by creation date and improve file display layout

Browse source
This commit is contained in:
grngxd 2025-08-01 08:33:11 +01:00
parent aaaebc20a5
commit 972c8930cd
2 changed files with 30 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/dashboard/Actionbar.tsx
View file

@ -32,7 +32,7 @@ export default component$(() => {
);
input.value = "";
files.value = [...files.value, ...metas];
files.value = [...files.value, ...metas].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
}
});
@ -56,7 +56,7 @@ export default component$(() => {
boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
backdropFilter: "blur(12px)",
}} class="flex items-center justify-center px-6 py-4 gap-5 text-white text-3xl absolute left-1/2 transform -translate-x-1/2">
<a onClick$={() => settingsOpen.value = true}><StereoLogoLinear /></a>
<StereoLogoLinear />
<SolarLibraryLinear />
<a
onClick$={(e) => {
@ -67,7 +67,7 @@ export default component$(() => {
<SolarUploadMinimalisticLinear />
</a>
<SolarRoundedMagniferLinear />
<SolarSettingsLinear />
<a onClick$={() => settingsOpen.value = true}><SolarSettingsLinear /></a>
</div>
<input

35
src/routes/dashboard/index.tsx
View file

@ -38,7 +38,6 @@ const formatSize = (bytes: number) => {
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}
const Files = component$(() => {
const File = component$(({ file }: { file: StereoFile }) => {
const Preview = component$(() => {
@ -113,7 +112,7 @@ const Files = component$(() => {
const hasMore = useSignal(true);
const sentinel = useSignal<HTMLDivElement>();
const files = useNanostore$<StereoFile[]>(loadedFiles, []);
const files = useNanostore$<StereoFile[]>(loadedFiles, [])
const page = useSignal(1);
// TODO: make it load enough images to fill the viewport instead
@ -132,12 +131,12 @@ const Files = component$(() => {
console.log("Loading more files...");
debounce(async () => {
const newFiles = await api.list(page.value, 12); // gotta be a multiple of 4 so pages dont look weird
const newFiles = await api.list(page.value, 12);
if (newFiles.length === 0) {
hasMore.value = false;
if (sentinel.value) observer.unobserve(sentinel.value);
} else {
files.value = [...files.value, ...newFiles];
files.value = [...files.value, ...newFiles].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
page.value++;
}
loadingMore.value = false;
@ -154,10 +153,30 @@ const Files = component$(() => {
return (
<div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
<div class="w-full columns-1 md:columns-2 lg:columns-4 gap-2 space-y-2 relative">
{files.value.map((file) => (
<File key={file.ID} file={file} />
))}
<div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 space-y-2 relative">
<div>
{files.value.filter((_, index) => index % 4 === 0).map((file) => (
<File key={file.ID} file={file} />
))}
</div>
<div>
{files.value.filter((_, index) => index % 4 === 1).map((file) => (
<File key={file.ID} file={file} />
))}
</div>
<div>
{files.value.filter((_, index) => index % 4 === 2).map((file) => (
<File key={file.ID} file={file} />
))}
</div>
<div>
{files.value.filter((_, index) => index % 4 === 3).map((file) => (
<File key={file.ID} file={file} />
))}
</div>
{hasMore.value && (
<div