@design.estate/dees-catalog 3.47.0 → 3.48.2

package/ts_web/elements/00group-dataview/dees-s3-browser/dees-s3-keys.ts

@@ -0,0 +1,1094 @@
+import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IS3DataProvider, IS3Object } from './interfaces.js';
+import { formatSize, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-s3-keys': DeesS3Keys;
+  }
+}
+
+@customElement('dees-s3-keys')
+export class DeesS3Keys extends DeesElement {
+  @property({ type: Object })
+  public accessor dataProvider: IS3DataProvider | null = null;
+
+  @property({ type: String })
+  public accessor bucketName: string = '';
+
+  @property({ type: String })
+  public accessor currentPrefix: string = '';
+
+  @property({ type: Number })
+  public accessor refreshKey: number = 0;
+
+  @state()
+  private accessor allKeys: IS3Object[] = [];
+
+  @state()
+  private accessor prefixes: string[] = [];
+
+  @state()
+  private accessor loading: boolean = false;
+
+  @state()
+  private accessor selectedKey: string = '';
+
+  @state()
+  private accessor filterText: string = '';
+
+  @state()
+  private accessor showCreateDialog: boolean = false;
+
+  @state()
+  private accessor createDialogType: 'folder' | 'file' = 'folder';
+
+  @state()
+  private accessor createDialogPrefix: string = '';
+
+  @state()
+  private accessor createDialogName: string = '';
+
+  // Move dialog state
+  @state()
+  private accessor showMoveDialog: boolean = false;
+
+  @state()
+  private accessor moveSource: { key: string; isFolder: boolean } | null = null;
+
+  @state()
+  private accessor moveDestination: string = '';
+
+  @state()
+  private accessor moveInProgress: boolean = false;
+
+  @state()
+  private accessor moveError: string | null = null;
+
+  // Move picker dialog state
+  @state()
+  private accessor showMovePickerDialog: boolean = false;
+
+  @state()
+  private accessor movePickerSource: { key: string; isFolder: boolean } | null = null;
+
+  @state()
+  private accessor movePickerCurrentPrefix: string = '';
+
+  @state()
+  private accessor movePickerPrefixes: string[] = [];
+
+  @state()
+  private accessor movePickerLoading: boolean = false;
+
+  // Rename dialog state
+  @state()
+  private accessor showRenameDialog: boolean = false;
+
+  @state()
+  private accessor renameSource: { key: string; isFolder: boolean } | null = null;
+
+  @state()
+  private accessor renameName: string = '';
+
+  @state()
+  private accessor renameInProgress: boolean = false;
+
+  @state()
+  private accessor renameError: string | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeDefaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .keys-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .filter-bar {
+        padding: 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+      }
+
+      .filter-input {
+        width: 100%;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.3)')};
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+        font-size: 14px;
+      }
+
+      .filter-input:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('#a1a1aa', '#404040')};
+      }
+
+      .filter-input::placeholder {
+        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+      }
+
+      .keys-list {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      thead {
+        position: sticky;
+        top: 0;
+        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
+        z-index: 1;
+      }
+
+      th {
+        text-align: left;
+        padding: 10px 12px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#666')};
+        text-transform: uppercase;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+      }
+
+      td {
+        padding: 8px 12px;
+        font-size: 13px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#2a2a3e')};
+      }
+
+      tr:hover td {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.03)')};
+      }
+
+      tr.selected td {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(255, 255, 255, 0.08)')};
+      }
+
+      .key-cell {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+      }
+
+      .key-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+
+      .folder-icon {
+        color: #fbbf24;
+      }
+
+      .key-name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .size-cell {
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        font-variant-numeric: tabular-nums;
+      }
+
+      .empty-state {
+        padding: 32px;
+        text-align: center;
+        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+      }
+
+      .dialog-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+      }
+
+      .dialog {
+        background: ${cssManager.bdTheme('#ffffff', '#1e1e1e')};
+        border-radius: 12px;
+        padding: 24px;
+        min-width: 400px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+      }
+
+      .dialog-title {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .dialog-location {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        margin-bottom: 12px;
+        font-family: monospace;
+      }
+
+      .dialog-input {
+        width: 100%;
+        padding: 10px 12px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#141414')};
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#333')};
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+        font-size: 14px;
+        margin-bottom: 8px;
+        box-sizing: border-box;
+      }
+
+      .dialog-input:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('#a1a1aa', '#e0e0e0')};
+      }
+
+      .dialog-hint {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+        margin-bottom: 16px;
+      }
+
+      .dialog-actions {
+        display: flex;
+        gap: 12px;
+        justify-content: flex-end;
+      }
+
+      .dialog-btn {
+        padding: 8px 16px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .dialog-btn-cancel {
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
+        color: ${cssManager.bdTheme('#71717a', '#aaa')};
+      }
+
+      .dialog-btn-cancel:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .dialog-btn-create {
+        background: ${cssManager.bdTheme('#e5e7eb', '#404040')};
+        border: none;
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .dialog-btn-create:hover {
+        background: ${cssManager.bdTheme('#d4d4d8', '#505050')};
+      }
+
+      .dialog-btn-create:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* Move dialog styles */
+      .move-summary {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+      }
+
+      .move-item {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .move-item:last-child {
+        margin-bottom: 0;
+      }
+
+      .move-label {
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        min-width: 40px;
+      }
+
+      .move-path {
+        color: ${cssManager.bdTheme('#3f3f46', '#e0e0e0')};
+        font-family: monospace;
+        font-size: 12px;
+        word-break: break-all;
+      }
+
+      .move-error {
+        background: rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.3);
+        color: #f87171;
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        font-size: 13px;
+      }
+
+      /* Move picker dialog styles */
+      .move-picker-dialog {
+        min-width: 450px;
+        max-height: 500px;
+      }
+
+      .picker-breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 6px;
+        margin-bottom: 12px;
+        font-size: 12px;
+        overflow-x: auto;
+      }
+
+      .picker-crumb {
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      .picker-crumb:hover {
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .picker-separator {
+        color: ${cssManager.bdTheme('#d4d4d8', '#555')};
+      }
+
+      .picker-list {
+        max-height: 280px;
+        overflow-y: auto;
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+        border-radius: 6px;
+        margin-bottom: 16px;
+        min-height: 100px;
+      }
+
+      .picker-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        color: #fbbf24;
+      }
+
+      .picker-item:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
+      }
+
+      .picker-item .icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+
+      .picker-item .name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .picker-empty {
+        padding: 24px;
+        text-align: center;
+        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+        font-size: 13px;
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.loadObjects();
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix') || changedProperties.has('refreshKey')) {
+      this.loadObjects();
+    }
+  }
+
+  private async loadObjects() {
+    if (!this.dataProvider) return;
+    this.loading = true;
+    try {
+      const result = await this.dataProvider.listObjects(this.bucketName, this.currentPrefix, '/');
+      this.allKeys = result.objects;
+      this.prefixes = result.prefixes;
+    } catch (err) {
+      console.error('Error loading objects:', err);
+      this.allKeys = [];
+      this.prefixes = [];
+    }
+    this.loading = false;
+  }
+
+  private handleFilterInput(e: Event) {
+    this.filterText = (e.target as HTMLInputElement).value;
+  }
+
+  private selectKey(key: string, isFolder: boolean) {
+    this.selectedKey = key;
+
+    if (isFolder) {
+      this.dispatchEvent(
+        new CustomEvent('navigate', {
+          detail: { prefix: key },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } else {
+      this.dispatchEvent(
+        new CustomEvent('key-selected', {
+          detail: { key },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  private get filteredItems() {
+    const filter = this.filterText.toLowerCase();
+    const folders = this.prefixes
+      .filter((p) => !filter || getFileName(p).toLowerCase().includes(filter))
+      .map((p) => ({ key: p, isFolder: true, size: undefined as number | undefined }));
+    const files = this.allKeys
+      .filter((o) => !filter || getFileName(o.key).toLowerCase().includes(filter))
+      .map((o) => ({ key: o.key, isFolder: false, size: o.size }));
+    return [...folders, ...files];
+  }
+
+  private handleItemContextMenu(event: MouseEvent, key: string, isFolder: boolean) {
+    if (!this.dataProvider) return;
+    event.preventDefault();
+
+    if (isFolder) {
+      DeesContextmenu.openContextMenuWithOptions(event, [
+        {
+          name: 'Open',
+          iconName: 'lucide:folderOpen',
+          action: async () => {
+            this.selectKey(key, true);
+          },
+        },
+        {
+          name: 'Copy Path',
+          iconName: 'lucide:copy',
+          action: async () => {
+            await navigator.clipboard.writeText(key);
+          },
+        },
+        {
+          name: 'Rename',
+          iconName: 'lucide:pencil',
+          action: async () => this.openRenameDialog(key, true),
+        },
+        { divider: true },
+        {
+          name: 'Move to...',
+          iconName: 'lucide:folderInput',
+          action: async () => this.openMovePickerDialog(key, true),
+        },
+        { divider: true },
+        {
+          name: 'New Folder Inside',
+          iconName: 'lucide:folderPlus',
+          action: async () => this.openCreateDialog('folder', key),
+        },
+        {
+          name: 'New File Inside',
+          iconName: 'lucide:filePlus',
+          action: async () => this.openCreateDialog('file', key),
+        },
+        { divider: true },
+        {
+          name: 'Delete Folder',
+          iconName: 'lucide:trash2',
+          action: async () => {
+            if (confirm(`Delete folder "${getFileName(key)}" and all its contents?`)) {
+              const success = await this.dataProvider!.deletePrefix(this.bucketName, key);
+              if (success) {
+                await this.loadObjects();
+              }
+            }
+          },
+        },
+      ]);
+    } else {
+      DeesContextmenu.openContextMenuWithOptions(event, [
+        {
+          name: 'Preview',
+          iconName: 'lucide:eye',
+          action: async () => {
+            this.selectKey(key, false);
+          },
+        },
+        {
+          name: 'Download',
+          iconName: 'lucide:download',
+          action: async () => {
+            const url = await this.dataProvider!.getObjectUrl(this.bucketName, key);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = getFileName(key);
+            link.click();
+          },
+        },
+        {
+          name: 'Copy Path',
+          iconName: 'lucide:copy',
+          action: async () => {
+            await navigator.clipboard.writeText(key);
+          },
+        },
+        {
+          name: 'Rename',
+          iconName: 'lucide:pencil',
+          action: async () => this.openRenameDialog(key, false),
+        },
+        { divider: true },
+        {
+          name: 'Move to...',
+          iconName: 'lucide:folderInput',
+          action: async () => this.openMovePickerDialog(key, false),
+        },
+        { divider: true },
+        {
+          name: 'Delete',
+          iconName: 'lucide:trash2',
+          action: async () => {
+            if (confirm(`Delete file "${getFileName(key)}"?`)) {
+              const success = await this.dataProvider!.deleteObject(this.bucketName, key);
+              if (success) {
+                await this.loadObjects();
+              }
+            }
+          },
+        },
+      ]);
+    }
+  }
+
+  private handleEmptySpaceContextMenu(event: MouseEvent) {
+    if ((event.target as HTMLElement).closest('tr')) return;
+    event.preventDefault();
+
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'New Folder',
+        iconName: 'lucide:folderPlus',
+        action: async () => this.openCreateDialog('folder', this.currentPrefix),
+      },
+      {
+        name: 'New File',
+        iconName: 'lucide:filePlus',
+        action: async () => this.openCreateDialog('file', this.currentPrefix),
+      },
+    ]);
+  }
+
+  private openCreateDialog(type: 'folder' | 'file', prefix: string) {
+    this.createDialogType = type;
+    this.createDialogPrefix = prefix;
+    this.createDialogName = '';
+    this.showCreateDialog = true;
+  }
+
+  private async handleCreate() {
+    if (!this.createDialogName.trim() || !this.dataProvider) return;
+
+    const name = this.createDialogName.trim();
+    let path: string;
+
+    if (this.createDialogType === 'folder') {
+      path = this.createDialogPrefix + name + '/.keep';
+    } else {
+      path = this.createDialogPrefix + name;
+    }
+
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const contentType = this.createDialogType === 'file' ? getContentType(ext) : 'application/octet-stream';
+    const content = this.createDialogType === 'file' ? getDefaultContent(ext) : '';
+
+    const success = await this.dataProvider.putObject(
+      this.bucketName,
+      path,
+      btoa(content),
+      contentType
+    );
+
+    if (success) {
+      this.showCreateDialog = false;
+      await this.loadObjects();
+    }
+  }
+
+  private renderCreateDialog() {
+    if (!this.showCreateDialog) return '';
+
+    const isFolder = this.createDialogType === 'folder';
+    const title = isFolder ? 'Create New Folder' : 'Create New File';
+    const placeholder = isFolder ? 'folder-name or path/to/folder' : 'filename.txt or path/to/file.txt';
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.showCreateDialog = false}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">${title}</div>
+          <div class="dialog-location">
+            Location: ${this.bucketName}/${this.createDialogPrefix}
+          </div>
+          <input
+            type="text"
+            class="dialog-input"
+            placeholder=${placeholder}
+            .value=${this.createDialogName}
+            @input=${(e: InputEvent) => this.createDialogName = (e.target as HTMLInputElement).value}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
+          />
+          <div class="dialog-hint">
+            Use "/" to create nested ${isFolder ? 'folders' : 'path'} (e.g., ${isFolder ? 'parent/child' : 'folder/file.txt'})
+          </div>
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.showCreateDialog = false}>
+              Cancel
+            </button>
+            <button
+              class="dialog-btn dialog-btn-create"
+              ?disabled=${!this.createDialogName.trim()}
+              @click=${() => this.handleCreate()}
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  // --- Move picker dialog ---
+
+  private async openMovePickerDialog(key: string, isFolder: boolean) {
+    this.movePickerSource = { key, isFolder };
+    this.movePickerCurrentPrefix = '';
+    this.showMovePickerDialog = true;
+    await this.loadMovePickerPrefixes('');
+  }
+
+  private async navigateMovePicker(prefix: string) {
+    this.movePickerCurrentPrefix = prefix;
+    await this.loadMovePickerPrefixes(prefix);
+  }
+
+  private async loadMovePickerPrefixes(prefix: string) {
+    if (!this.dataProvider) return;
+    this.movePickerLoading = true;
+    try {
+      const result = await this.dataProvider.listObjects(this.bucketName, prefix, '/');
+      this.movePickerPrefixes = result.prefixes;
+    } catch {
+      this.movePickerPrefixes = [];
+    }
+    this.movePickerLoading = false;
+  }
+
+  private selectMoveDestination(destPrefix: string) {
+    if (!this.movePickerSource) return;
+    this.closeMovePickerDialog();
+    this.initiateMove(this.movePickerSource.key, this.movePickerSource.isFolder, destPrefix);
+  }
+
+  private closeMovePickerDialog() {
+    this.showMovePickerDialog = false;
+    this.movePickerSource = null;
+    this.movePickerCurrentPrefix = '';
+    this.movePickerPrefixes = [];
+  }
+
+  // --- Move confirmation dialog ---
+
+  private initiateMove(sourceKey: string, isFolder: boolean, destPrefix: string) {
+    const validation = validateMove(sourceKey, destPrefix);
+
+    if (!validation.valid) {
+      this.moveSource = { key: sourceKey, isFolder };
+      this.moveDestination = destPrefix;
+      this.moveError = validation.error!;
+      this.showMoveDialog = true;
+      return;
+    }
+
+    this.moveSource = { key: sourceKey, isFolder };
+    this.moveDestination = destPrefix;
+    this.moveError = null;
+    this.showMoveDialog = true;
+  }
+
+  private async executeMove() {
+    if (!this.moveSource || !this.dataProvider) return;
+
+    this.moveInProgress = true;
+
+    try {
+      const sourceName = getFileName(this.moveSource.key);
+      const destKey = this.moveDestination + sourceName;
+
+      let result: { success: boolean; error?: string };
+      if (this.moveSource.isFolder) {
+        result = await this.dataProvider.movePrefix(
+          this.bucketName,
+          this.moveSource.key,
+          destKey
+        );
+      } else {
+        result = await this.dataProvider.moveObject(
+          this.bucketName,
+          this.moveSource.key,
+          destKey
+        );
+      }
+
+      if (result.success) {
+        this.closeMoveDialog();
+        await this.loadObjects();
+      } else {
+        this.moveError = result.error || 'Move operation failed';
+      }
+    } catch (err) {
+      this.moveError = `Error: ${err}`;
+    }
+
+    this.moveInProgress = false;
+  }
+
+  private closeMoveDialog() {
+    this.showMoveDialog = false;
+    this.moveSource = null;
+    this.moveDestination = '';
+    this.moveError = null;
+    this.moveInProgress = false;
+  }
+
+  // --- Rename dialog methods ---
+
+  private openRenameDialog(key: string, isFolder: boolean) {
+    this.renameSource = { key, isFolder };
+    this.renameName = getFileName(key);
+    this.renameError = null;
+    this.showRenameDialog = true;
+
+    this.updateComplete.then(() => {
+      const input = this.shadowRoot?.querySelector('.rename-dialog-input') as HTMLInputElement;
+      if (input) {
+        input.focus();
+        if (!isFolder) {
+          const lastDot = this.renameName.lastIndexOf('.');
+          if (lastDot > 0) {
+            input.setSelectionRange(0, lastDot);
+          } else {
+            input.select();
+          }
+        } else {
+          input.select();
+        }
+      }
+    });
+  }
+
+  private async executeRename() {
+    if (!this.renameSource || !this.renameName.trim() || !this.dataProvider) return;
+
+    const newName = this.renameName.trim();
+    const currentName = getFileName(this.renameSource.key);
+
+    if (newName === currentName) {
+      this.renameError = 'Name is the same as current';
+      return;
+    }
+    if (!newName) {
+      this.renameError = 'Name cannot be empty';
+      return;
+    }
+    if (newName.includes('/')) {
+      this.renameError = 'Name cannot contain "/"';
+      return;
+    }
+
+    this.renameInProgress = true;
+    this.renameError = null;
+
+    try {
+      const parentPrefix = getParentPrefix(this.renameSource.key);
+      const newKey = parentPrefix + newName + (this.renameSource.isFolder ? '/' : '');
+
+      let result: { success: boolean; error?: string };
+      if (this.renameSource.isFolder) {
+        result = await this.dataProvider.movePrefix(this.bucketName, this.renameSource.key, newKey);
+      } else {
+        result = await this.dataProvider.moveObject(this.bucketName, this.renameSource.key, newKey);
+      }
+
+      if (result.success) {
+        this.closeRenameDialog();
+        await this.loadObjects();
+      } else {
+        this.renameError = result.error || 'Rename failed';
+      }
+    } catch (err) {
+      this.renameError = `Error: ${err}`;
+    }
+    this.renameInProgress = false;
+  }
+
+  private closeRenameDialog() {
+    this.showRenameDialog = false;
+    this.renameSource = null;
+    this.renameName = '';
+    this.renameError = null;
+    this.renameInProgress = false;
+  }
+
+  private renderRenameDialog() {
+    if (!this.showRenameDialog || !this.renameSource) return '';
+
+    const isFolder = this.renameSource.isFolder;
+    const title = isFolder ? 'Rename Folder' : 'Rename File';
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.closeRenameDialog()}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">${title}</div>
+          <div class="dialog-location">
+            Location: ${this.bucketName}/${getParentPrefix(this.renameSource.key)}
+          </div>
+          ${this.renameError ? html`<div class="move-error">${this.renameError}</div>` : ''}
+          <input
+            type="text"
+            class="dialog-input rename-dialog-input"
+            placeholder=${isFolder ? 'folder-name' : 'filename.ext'}
+            .value=${this.renameName}
+            @input=${(e: InputEvent) => {
+              this.renameName = (e.target as HTMLInputElement).value;
+              this.renameError = null;
+            }}
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === 'Enter') this.executeRename();
+              if (e.key === 'Escape') this.closeRenameDialog();
+            }}
+          />
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel"
+                    @click=${() => this.closeRenameDialog()}
+                    ?disabled=${this.renameInProgress}>Cancel</button>
+            <button class="dialog-btn dialog-btn-create"
+                    @click=${() => this.executeRename()}
+                    ?disabled=${this.renameInProgress || !this.renameName.trim()}>
+              ${this.renameInProgress ? 'Renaming...' : 'Rename'}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMoveDialog() {
+    if (!this.showMoveDialog || !this.moveSource) return '';
+
+    const sourceName = getFileName(this.moveSource.key);
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.closeMoveDialog()}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">Move ${this.moveSource.isFolder ? 'Folder' : 'File'}</div>
+
+          ${this.moveError ? html`
+            <div class="move-error">${this.moveError}</div>
+          ` : html`
+            <div class="move-summary">
+              <div class="move-item">
+                <span class="move-label">From:</span>
+                <span class="move-path">${this.moveSource.key}</span>
+              </div>
+              <div class="move-item">
+                <span class="move-label">To:</span>
+                <span class="move-path">${this.moveDestination}${sourceName}</span>
+              </div>
+            </div>
+          `}
+
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel"
+                    @click=${() => this.closeMoveDialog()}
+                    ?disabled=${this.moveInProgress}>
+              Cancel
+            </button>
+            ${!this.moveError ? html`
+              <button class="dialog-btn dialog-btn-create"
+                      @click=${() => this.executeMove()}
+                      ?disabled=${this.moveInProgress}>
+                ${this.moveInProgress ? 'Moving...' : 'Move'}
+              </button>
+            ` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMovePickerDialog() {
+    if (!this.showMovePickerDialog || !this.movePickerSource) return '';
+
+    const sourceName = getFileName(this.movePickerSource.key);
+    const sourceParent = getParentPrefix(this.movePickerSource.key);
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.closeMovePickerDialog()}>
+        <div class="dialog move-picker-dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">Move "${sourceName}" to...</div>
+
+          <div class="picker-breadcrumb">
+            <span class="picker-crumb" @click=${() => this.navigateMovePicker('')}>
+              ${this.bucketName}
+            </span>
+            ${getPathSegments(this.movePickerCurrentPrefix).map(seg => html`
+              <span class="picker-separator">/</span>
+              <span class="picker-crumb" @click=${() => this.navigateMovePicker(seg)}>
+                ${getFileName(seg)}
+              </span>
+            `)}
+          </div>
+
+          <div class="picker-list">
+            ${this.movePickerLoading ? html`<div class="picker-empty">Loading...</div>` : ''}
+            ${!this.movePickerLoading && this.movePickerPrefixes.filter(p => p !== this.movePickerSource!.key).length === 0 ? html`
+              <div class="picker-empty">No subfolders</div>
+            ` : ''}
+            ${this.movePickerPrefixes
+              .filter(p => p !== this.movePickerSource!.key)
+              .map(prefix => html`
+                <div class="picker-item"
+                     @click=${() => this.navigateMovePicker(prefix)}
+                     @dblclick=${() => this.selectMoveDestination(prefix)}>
+                  <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+                  </svg>
+                  <span class="name">${getFileName(prefix)}</span>
+                </div>
+              `)}
+          </div>
+
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.closeMovePickerDialog()}>
+              Cancel
+            </button>
+            <button class="dialog-btn dialog-btn-create"
+                    @click=${() => this.selectMoveDestination(this.movePickerCurrentPrefix)}
+                    ?disabled=${this.movePickerCurrentPrefix === sourceParent}>
+              Move Here
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="keys-container">
+        <div class="filter-bar">
+          <input
+            type="text"
+            class="filter-input"
+            placeholder="Filter files..."
+            .value=${this.filterText}
+            @input=${this.handleFilterInput}
+          />
+        </div>
+
+        <div class="keys-list" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e)}>
+          ${this.loading
+            ? html`<div class="empty-state">Loading...</div>`
+            : this.filteredItems.length === 0
+              ? html`<div class="empty-state">No objects found</div>`
+              : html`
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th style="width: 100px;">Size</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${this.filteredItems.map(
+                        (item) => html`
+                          <tr
+                            class="${this.selectedKey === item.key ? 'selected' : ''}"
+                            @click=${() => this.selectKey(item.key, item.isFolder)}
+                            @contextmenu=${(e: MouseEvent) => this.handleItemContextMenu(e, item.key, item.isFolder)}
+                          >
+                            <td>
+                              <div class="key-cell">
+                                ${item.isFolder
+                                  ? html`
+                                      <svg class="key-icon folder-icon" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                                      </svg>
+                                    `
+                                  : html`
+                                      <svg class="key-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                                      </svg>
+                                    `}
+                                <span class="key-name">${getFileName(item.key)}</span>
+                              </div>
+                            </td>
+                            <td class="size-cell">
+                              ${item.isFolder ? '-' : formatSize(item.size)}
+                            </td>
+                          </tr>
+                        `
+                      )}
+                    </tbody>
+                  </table>
+                `}
+        </div>
+      </div>
+      ${this.renderCreateDialog()}
+      ${this.renderMoveDialog()}
+      ${this.renderMovePickerDialog()}
+      ${this.renderRenameDialog()}
+    `;
+  }
+}