Rodrigo Rodriguez (Pragmatismo)
01e89c9358
Added actix-files and its dependencies (http-range, mime_guess, unicase, v_htmlescape) to enable static file functionality in the botserver. This will allow serving static assets and files through the web server. The change includes all required transitive dependencies for proper file handling and MIME type detection.
67 lines
2.9 KiB
HTML
67 lines
2.9 KiB
HTML
<div class="drive-layout" x-data="driveApp()" x-cloak>
|
|
<div class="panel drive-sidebar">
|
|
<div style="padding: 1rem; border-bottom: 1px solid #334155;">
|
|
<h3>General Bots Drive</h3>
|
|
</div>
|
|
<template x-for="item in navItems" :key="item.name">
|
|
<div class="nav-item"
|
|
:class="{ active: current === item.name }"
|
|
@click="current = item.name">
|
|
<span x-text="item.icon"></span>
|
|
<span x-text="item.name"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="panel drive-main">
|
|
<div style="padding: 1rem; border-bottom: 1px solid #334155;">
|
|
<h2 x-text="current"></h2>
|
|
<input type="text" x-model="search" placeholder="Search files..."
|
|
style="width: 100%; margin-top: 0.5rem; padding: 0.5rem; background: #0f172a; border: 1px solid #334155; border-radius: 0.375rem; color: #e2e8f0;">
|
|
</div>
|
|
<div class="file-list">
|
|
<template x-for="file in filteredFiles" :key="file.id">
|
|
<div class="file-item"
|
|
:class="{ selected: selectedFile?.id === file.id }"
|
|
@click="selectedFile = file">
|
|
<span class="file-icon" x-text="file.icon"></span>
|
|
<div style="flex: 1;">
|
|
<div style="font-weight: 600;" x-text="file.name"></div>
|
|
<div class="text-xs text-gray" x-text="file.date"></div>
|
|
</div>
|
|
<div class="text-sm text-gray" x-text="file.size"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel drive-details">
|
|
<template x-if="selectedFile">
|
|
<div style="padding: 2rem;">
|
|
<div style="text-align: center; margin-bottom: 2rem;">
|
|
<div style="font-size: 4rem; margin-bottom: 1rem;" x-text="selectedFile.icon"></div>
|
|
<h3 x-text="selectedFile.name"></h3>
|
|
<p class="text-sm text-gray" x-text="selectedFile.type"></p>
|
|
</div>
|
|
<div style="margin-bottom: 1rem;">
|
|
<div class="text-sm" style="margin-bottom: 0.5rem;">Size</div>
|
|
<div class="text-gray" x-text="selectedFile.size"></div>
|
|
</div>
|
|
<div style="margin-bottom: 1rem;">
|
|
<div class="text-sm" style="margin-bottom: 0.5rem;">Modified</div>
|
|
<div class="text-gray" x-text="selectedFile.date"></div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 2rem;">
|
|
<button style="flex: 1; padding: 0.75rem; background: #3b82f6; color: white; border: none; border-radius: 0.375rem; cursor: pointer;">Download</button>
|
|
<button style="flex: 1; padding: 0.75rem; background: #10b981; color: white; border: none; border-radius: 0.375rem; cursor: pointer;">Share</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template x-if="!selectedFile">
|
|
<div style="padding: 2rem; text-align: center; color: #64748b;">
|
|
<div style="font-size: 4rem; margin-bottom: 1rem;">📄</div>
|
|
<p>Select a file to view details</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|