14 Commits
v1.8.0 ... main

Author SHA1 Message Date
c4afbdfd7f v1.11.1
Some checks failed
Default (tags) / security (push) Failing after 1s
Default (tags) / test (push) Failing after 13m25s
Default (tags) / release (push) Has been cancelled
Default (tags) / metadata (push) Has been cancelled
2026-01-29 15:56:05 +00:00
b72b36c4ea fix(mongo-browser): increase default editor width and broaden resize range in Mongo browser pane 2026-01-29 15:56:05 +00:00
8c5cea7e0b v1.11.0
Some checks failed
Default (tags) / security (push) Failing after 0s
Default (tags) / test (push) Failing after 14m55s
Default (tags) / release (push) Has been cancelled
Default (tags) / metadata (push) Has been cancelled
2026-01-28 16:49:34 +00:00
d9fc7f8257 feat(s3): add rename support for files and folders in S3 UI columns and keys 2026-01-28 16:49:34 +00:00
b41adc184e v1.10.2
Some checks failed
Default (tags) / security (push) Failing after 0s
Default (tags) / test (push) Failing after 13m2s
Default (tags) / release (push) Has been cancelled
Default (tags) / metadata (push) Has been cancelled
2026-01-28 16:16:26 +00:00
175e9cb691 fix(tsview-s3-columns): append trailing slash to destination key when moving folders to ensure folder destination path 2026-01-28 16:16:26 +00:00
fbd6ac83f8 v1.10.1
Some checks failed
Default (tags) / security (push) Failing after 1s
Default (tags) / test (push) Failing after 11m25s
Default (tags) / release (push) Has been cancelled
Default (tags) / metadata (push) Has been cancelled
2026-01-28 15:38:04 +00:00
ebce6b7e76 fix(playwright-mcp): remove Playwright-generated snapshot images to avoid committing autogenerated test artifacts and reduce repository size 2026-01-28 15:38:04 +00:00
b30e2925aa v1.10.0
Some checks failed
Default (tags) / security (push) Failing after 0s
Default (tags) / test (push) Failing after 14m1s
Default (tags) / release (push) Has been cancelled
Default (tags) / metadata (push) Has been cancelled
2026-01-28 15:35:28 +00:00
e379c2b6b1 feat(s3): add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation 2026-01-28 15:35:28 +00:00
4603154408 v1.9.0
Some checks failed
Default (tags) / security (push) Failing after 0s
Default (tags) / test (push) Failing after 14m44s
Default (tags) / release (push) Has been cancelled
Default (tags) / metadata (push) Has been cancelled
2026-01-28 15:04:42 +00:00
5051e957ec feat(s3-columns): load full prefix path on initial load and add folder upload support 2026-01-28 15:04:42 +00:00
319ee2a7af v1.8.1
Some checks failed
Default (tags) / security (push) Failing after 1s
Default (tags) / test (push) Failing after 13m35s
Default (tags) / release (push) Has been cancelled
Default (tags) / metadata (push) Has been cancelled
2026-01-28 14:10:43 +00:00
8204f06a2a fix(cli): set executable permission on cli.js 2026-01-28 14:10:43 +00:00
35 changed files with 1542 additions and 88 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

View File

@@ -1,5 +1,59 @@
# Changelog
## 2026-01-29 - 1.11.1 - fix(mongo-browser)
increase default editor width and broaden resize range in Mongo browser pane
- Set default editorWidth from 400 to 700
- Update CSS grid-template default editor width variable to 700
- Expand editor resize bounds: min 300 -> 250, max 700 -> 1000 (resizer calculation adjusted)
## 2026-01-28 - 1.11.0 - feat(s3)
add rename support for files and folders in S3 UI columns and keys
- Adds 'Rename' option to context menus in tsview-s3-columns and tsview-s3-keys for files and folders
- Implements a rename dialog with validation, auto-focus and smart selection (preserves extensions), and progress/error states
- Performs renames via apiService.moveObject / apiService.movePrefix and refreshes the UI after success
- Bumps @design.estate/dees-catalog dependency to ^3.41.2
## 2026-01-28 - 1.10.2 - fix(tsview-s3-columns)
append trailing slash to destination key when moving folders to ensure folder destination path
- ts_web/elements/tsview-s3-columns.ts: add '/' to destKey when moveSource.isFolder to preserve folder semantics
- Prevents folder moves from being treated as object moves by ensuring destination key ends with a slash
- Change affects logic that calls apiService.movePrefix for folder moves
## 2026-01-28 - 1.10.1 - fix(playwright-mcp)
remove Playwright-generated snapshot images to avoid committing autogenerated test artifacts and reduce repository size
- Deleted ~22 Playwright PNG snapshot files under .playwright-mcp (visual test artifacts).
- No source code logic changed — this is test artifact cleanup only.
- Reduces repository bloat and prevents noisy visual diffs in future Playwright runs.
## 2026-01-28 - 1.10.0 - feat(s3)
add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation
- Server: added typed handlers for moveObject (copy+delete for a single object) and movePrefix (recursive list, copy all objects to dest then delete source directory). Handlers return success/error and movedCount for prefix moves.
- API: added api.service methods moveObject and movePrefix so web client can call new server handlers.
- Interfaces: introduced IReq_MoveObject and IReq_MovePrefix request/response typings in ts/interfaces.
- Web UI: added move dialogs, a move picker, drag-and-drop support for folders/files, UI states and styles in ts_web elements (tsview-s3-columns, tsview-s3-keys). Move dialogs/picker integrated into existing render flows.
- Utilities: added move-validator utility (validateMove, getParentPrefix) and exported it from utilities index to prevent invalid operations (e.g. moving a folder into itself or to the same parent).
- Behavior notes: prefix move implementation performs recursive listing, copies each object to the new prefix, then deletes the source directory (permanent). Errors are caught and surfaced; movedCount is returned for prefix moves.
## 2026-01-28 - 1.9.0 - feat(s3-columns)
load full prefix path on initial load and add folder upload support
- loadInitialColumn now loads all prefix path segments in parallel and pre-selects child prefixes so multi-column path is restored
- added getPathSegments helper and auto-scroll to show the rightmost column after load
- added separate hidden folder input (webkitdirectory) and folder upload flow; triggerFileUpload now accepts 'files' | 'folder'
- replaced generic 'Upload...' with 'Upload Files...' and added 'Upload Folder...' menu items
- updated updated() to react to currentPrefix changes and cleaned up folder input on disconnectedCallback
## 2026-01-28 - 1.8.1 - fix(cli)
set executable permission on cli.js
- metadata-only change: updated file mode for cli.js (executable bit set)
- no source code changes; ensures package binary is runnable
## 2026-01-28 - 1.8.0 - feat(streaming)
add global activity watchers, client-side buffering, and improved real-time streaming UX

View File

@@ -1,6 +1,6 @@
{
"name": "@git.zone/tsview",
"version": "1.8.0",
"version": "1.11.1",
"private": false,
"description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
"main": "dist_ts/index.js",
@@ -34,7 +34,7 @@
"@api.global/typedrequest-interfaces": "^3.0.19",
"@api.global/typedserver": "^8.3.0",
"@aws-sdk/client-s3": "^3.975.0",
"@design.estate/dees-catalog": "^3.41.1",
"@design.estate/dees-catalog": "^3.41.2",
"@design.estate/dees-element": "^2.1.6",
"@push.rocks/early": "^4.0.4",
"@push.rocks/npmextra": "^5.3.3",

108
pnpm-lock.yaml generated
View File

@@ -21,8 +21,8 @@ importers:
specifier: ^3.975.0
version: 3.975.0
'@design.estate/dees-catalog':
specifier: ^3.41.1
version: 3.41.1(@tiptap/pm@2.27.2)
specifier: ^3.41.2
version: 3.41.2(@tiptap/pm@2.27.2)
'@design.estate/dees-element':
specifier: ^2.1.6
version: 2.1.6
@@ -331,8 +331,8 @@ packages:
'@configvault.io/interfaces@1.0.17':
resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
'@design.estate/dees-catalog@3.41.1':
resolution: {integrity: sha512-AMD0VNLQEWXYRUYWwjLA8K8KEKAiUO7GiriWQm+ld7cj+LrCMsJO0jjVfOCsd4G7fURMqmab9ereBJyxqjoFgQ==}
'@design.estate/dees-catalog@3.41.2':
resolution: {integrity: sha512-G6b7TbqkEupHwty3q+Y42xbmwkfFBf3S5JBrMLAw1S0kR88ZCio0dOBcvmvQTQ5pQBz6TDRkx1prXpoQbZDt7A==}
'@design.estate/dees-comms@1.0.30':
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
@@ -660,74 +660,74 @@ packages:
'@mongodb-js/saslprep@1.4.5':
resolution: {integrity: sha512-k64Lbyb7ycCSXHSLzxVdb2xsKGPMvYZfCICXvDsI8Z65CeWQzTEKS4YmGbnqw+U9RBvLPTsB6UCmwkgsDTGWIw==}
'@napi-rs/canvas-android-arm64@0.1.88':
resolution: {integrity: sha512-KEaClPnZuVxJ8smUWjV1wWFkByBO/D+vy4lN+Dm5DFH514oqwukxKGeck9xcKJhaWJGjfruGmYGiwRe//+/zQQ==}
'@napi-rs/canvas-android-arm64@0.1.89':
resolution: {integrity: sha512-CXxQTXsjtQqKGENS8Ejv9pZOFJhOPIl2goenS+aU8dY4DygvkyagDhy/I07D1YLqrDtPvLEX5zZHt8qUdnuIpQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
'@napi-rs/canvas-darwin-arm64@0.1.88':
resolution: {integrity: sha512-Xgywz0dDxOKSgx3eZnK85WgGMmGrQEW7ZLA/E7raZdlEE+xXCozobgqz2ZvYigpB6DJFYkqnwHjqCOTSDGlFdg==}
'@napi-rs/canvas-darwin-arm64@0.1.89':
resolution: {integrity: sha512-k29cR/Zl20WLYM7M8YePevRu2VQRaKcRedYr1V/8FFHkyIQ8kShEV+MPoPGi+znvmd17Eqjy2Pk2F2kpM2umVg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@napi-rs/canvas-darwin-x64@0.1.88':
resolution: {integrity: sha512-Yz4wSCIQOUgNucgk+8NFtQxQxZV5NO8VKRl9ePKE6XoNyNVC8JDqtvhh3b3TPqKK8W5p2EQpAr1rjjm0mfBxdg==}
'@napi-rs/canvas-darwin-x64@0.1.89':
resolution: {integrity: sha512-iUragqhBrA5FqU13pkhYBDbUD1WEAIlT8R2+fj6xHICY2nemzwMUI8OENDhRh7zuL06YDcRwENbjAVxOmaX9jg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.88':
resolution: {integrity: sha512-9gQM2SlTo76hYhxHi2XxWTAqpTOb+JtxMPEIr+H5nAhHhyEtNmTSDRtz93SP7mGd2G3Ojf2oF5tP9OdgtgXyKg==}
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.89':
resolution: {integrity: sha512-y3SM9sfDWasY58ftoaI09YBFm35Ig8tosZqgahLJ2WGqawCusGNPV9P0/4PsrLOCZqGg629WxexQMY25n7zcvA==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
'@napi-rs/canvas-linux-arm64-gnu@0.1.88':
resolution: {integrity: sha512-7qgaOBMXuVRk9Fzztzr3BchQKXDxGbY+nwsovD3I/Sx81e+sX0ReEDYHTItNb0Je4NHbAl7D0MKyd4SvUc04sg==}
'@napi-rs/canvas-linux-arm64-gnu@0.1.89':
resolution: {integrity: sha512-NEoF9y8xq5fX8HG8aZunBom1ILdTwt7ayBzSBIwrmitk7snj4W6Fz/yN/ZOmlM1iyzHDNX5Xn0n+VgWCF8BEdA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@napi-rs/canvas-linux-arm64-musl@0.1.88':
resolution: {integrity: sha512-kYyNrUsHLkoGHBc77u4Unh067GrfiCUMbGHC2+OTxbeWfZkPt2o32UOQkhnSswKd9Fko/wSqqGkY956bIUzruA==}
'@napi-rs/canvas-linux-arm64-musl@0.1.89':
resolution: {integrity: sha512-UQQkIEzV12/l60j1ziMjZ+mtodICNUbrd205uAhbyTw0t60CrC/EsKb5/aJWGq1wM0agvcgZV72JJCKfLS6+4w==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@napi-rs/canvas-linux-riscv64-gnu@0.1.88':
resolution: {integrity: sha512-HVuH7QgzB0yavYdNZDRyAsn/ejoXB0hn8twwFnOqUbCCdkV+REna7RXjSR7+PdfW0qMQ2YYWsLvVBT5iL/mGpw==}
'@napi-rs/canvas-linux-riscv64-gnu@0.1.89':
resolution: {integrity: sha512-1/VmEoFaIO6ONeeEMGoWF17wOYZOl5hxDC1ios2Bkz/oQjbJJ8DY/X22vWTmvuUKWWhBVlo63pxLGZbjJU/heA==}
engines: {node: '>= 10'}
cpu: [riscv64]
os: [linux]
'@napi-rs/canvas-linux-x64-gnu@0.1.88':
resolution: {integrity: sha512-hvcvKIcPEQrvvJtJnwD35B3qk6umFJ8dFIr8bSymfrSMem0EQsfn1ztys8ETIFndTwdNWJKWluvxztA41ivsEw==}
'@napi-rs/canvas-linux-x64-gnu@0.1.89':
resolution: {integrity: sha512-ebLuqkCuaPIkKgKH9q4+pqWi1tkPOfiTk5PM1LKR1tB9iO9sFNVSIgwEp+SJreTSbA2DK5rW8lQXiN78SjtcvA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@napi-rs/canvas-linux-x64-musl@0.1.88':
resolution: {integrity: sha512-eSMpGYY2xnZSQ6UxYJ6plDboxq4KeJ4zT5HaVkUnbObNN6DlbJe0Mclh3wifAmquXfrlgTZt6zhHsUgz++AK6g==}
'@napi-rs/canvas-linux-x64-musl@0.1.89':
resolution: {integrity: sha512-w+5qxHzplvA4BkHhCaizNMLLXiI+CfP84YhpHm/PqMub4u8J0uOAv+aaGv40rYEYra5hHRWr9LUd6cfW32o9/A==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@napi-rs/canvas-win32-arm64-msvc@0.1.88':
resolution: {integrity: sha512-qcIFfEgHrchyYqRrxsCeTQgpJZ/GqHiqPcU/Fvw/ARVlQeDX1VyFH+X+0gCR2tca6UJrq96vnW+5o7buCq+erA==}
'@napi-rs/canvas-win32-arm64-msvc@0.1.89':
resolution: {integrity: sha512-DmyXa5lJHcjOsDC78BM3bnEECqbK3xASVMrKfvtT/7S7Z8NGQOugvu+L7b41V6cexCd34mBWgMOsjoEBceeB1Q==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@napi-rs/canvas-win32-x64-msvc@0.1.88':
resolution: {integrity: sha512-ROVqbfS4QyZxYkqmaIBBpbz/BQvAR+05FXM5PAtTYVc0uyY8Y4BHJSMdGAaMf6TdIVRsQsiq+FG/dH9XhvWCFQ==}
'@napi-rs/canvas-win32-x64-msvc@0.1.89':
resolution: {integrity: sha512-WMej0LZrIqIncQcx0JHaMXlnAG7sncwJh7obs/GBgp0xF9qABjwoRwIooMWCZkSansapKGNUHhamY6qEnFN7gA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
'@napi-rs/canvas@0.1.88':
resolution: {integrity: sha512-/p08f93LEbsL5mDZFQ3DBxcPv/I4QG9EDYRRq1WNlCOXVfAHBTHMSVMwxlqG/AtnSfUr9+vgfN7MKiyDo0+Weg==}
'@napi-rs/canvas@0.1.89':
resolution: {integrity: sha512-7GjmkMirJHejeALCqUnZY3QwID7bbumOiLrqq2LKgxrdjdmxWQBTc6rcASa2u8wuWrH7qo4/4n/VNrOwCoKlKg==}
engines: {node: '>= 10'}
'@napi-rs/wasm-runtime@1.0.7':
@@ -4066,7 +4066,7 @@ snapshots:
'@api.global/typedrequest-interfaces': 3.0.19
'@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@2.0.1)
'@cloudflare/workers-types': 4.20260123.0
'@design.estate/dees-catalog': 3.41.1(@tiptap/pm@2.27.2)
'@design.estate/dees-catalog': 3.41.2(@tiptap/pm@2.27.2)
'@design.estate/dees-comms': 1.0.30
'@push.rocks/lik': 6.2.2
'@push.rocks/smartdelay': 3.0.5
@@ -4694,7 +4694,7 @@ snapshots:
dependencies:
'@api.global/typedrequest-interfaces': 3.0.19
'@design.estate/dees-catalog@3.41.1(@tiptap/pm@2.27.2)':
'@design.estate/dees-catalog@3.41.2(@tiptap/pm@2.27.2)':
dependencies:
'@design.estate/dees-domtools': 2.3.8
'@design.estate/dees-element': 2.1.6
@@ -5203,52 +5203,52 @@ snapshots:
dependencies:
sparse-bitfield: 3.0.3
'@napi-rs/canvas-android-arm64@0.1.88':
'@napi-rs/canvas-android-arm64@0.1.89':
optional: true
'@napi-rs/canvas-darwin-arm64@0.1.88':
'@napi-rs/canvas-darwin-arm64@0.1.89':
optional: true
'@napi-rs/canvas-darwin-x64@0.1.88':
'@napi-rs/canvas-darwin-x64@0.1.89':
optional: true
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.88':
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.89':
optional: true
'@napi-rs/canvas-linux-arm64-gnu@0.1.88':
'@napi-rs/canvas-linux-arm64-gnu@0.1.89':
optional: true
'@napi-rs/canvas-linux-arm64-musl@0.1.88':
'@napi-rs/canvas-linux-arm64-musl@0.1.89':
optional: true
'@napi-rs/canvas-linux-riscv64-gnu@0.1.88':
'@napi-rs/canvas-linux-riscv64-gnu@0.1.89':
optional: true
'@napi-rs/canvas-linux-x64-gnu@0.1.88':
'@napi-rs/canvas-linux-x64-gnu@0.1.89':
optional: true
'@napi-rs/canvas-linux-x64-musl@0.1.88':
'@napi-rs/canvas-linux-x64-musl@0.1.89':
optional: true
'@napi-rs/canvas-win32-arm64-msvc@0.1.88':
'@napi-rs/canvas-win32-arm64-msvc@0.1.89':
optional: true
'@napi-rs/canvas-win32-x64-msvc@0.1.88':
'@napi-rs/canvas-win32-x64-msvc@0.1.89':
optional: true
'@napi-rs/canvas@0.1.88':
'@napi-rs/canvas@0.1.89':
optionalDependencies:
'@napi-rs/canvas-android-arm64': 0.1.88
'@napi-rs/canvas-darwin-arm64': 0.1.88
'@napi-rs/canvas-darwin-x64': 0.1.88
'@napi-rs/canvas-linux-arm-gnueabihf': 0.1.88
'@napi-rs/canvas-linux-arm64-gnu': 0.1.88
'@napi-rs/canvas-linux-arm64-musl': 0.1.88
'@napi-rs/canvas-linux-riscv64-gnu': 0.1.88
'@napi-rs/canvas-linux-x64-gnu': 0.1.88
'@napi-rs/canvas-linux-x64-musl': 0.1.88
'@napi-rs/canvas-win32-arm64-msvc': 0.1.88
'@napi-rs/canvas-win32-x64-msvc': 0.1.88
'@napi-rs/canvas-android-arm64': 0.1.89
'@napi-rs/canvas-darwin-arm64': 0.1.89
'@napi-rs/canvas-darwin-x64': 0.1.89
'@napi-rs/canvas-linux-arm-gnueabihf': 0.1.89
'@napi-rs/canvas-linux-arm64-gnu': 0.1.89
'@napi-rs/canvas-linux-arm64-musl': 0.1.89
'@napi-rs/canvas-linux-riscv64-gnu': 0.1.89
'@napi-rs/canvas-linux-x64-gnu': 0.1.89
'@napi-rs/canvas-linux-x64-musl': 0.1.89
'@napi-rs/canvas-win32-arm64-msvc': 0.1.89
'@napi-rs/canvas-win32-x64-msvc': 0.1.89
optional: true
'@napi-rs/wasm-runtime@1.0.7':
@@ -8747,7 +8747,7 @@ snapshots:
pdfjs-dist@4.10.38:
optionalDependencies:
'@napi-rs/canvas': 0.1.88
'@napi-rs/canvas': 0.1.89
peek-readable@5.4.2: {}

View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@git.zone/tsview',
version: '1.8.0',
version: '1.11.1',
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
}

View File

@@ -465,4 +465,131 @@ export async function registerS3Handlers(
}
)
);
// Move object (copy + delete)
typedrouter.addTypedHandler(
new plugins.typedrequest.TypedHandler<interfaces.IReq_MoveObject>(
'moveObject',
async (reqData) => {
const smartbucket = await tsview.getSmartBucket();
if (!smartbucket) {
return { success: false, error: 'S3 not configured' };
}
try {
const bucket = await smartbucket.getBucketByName(reqData.bucketName);
if (!bucket) {
return { success: false, error: `Bucket ${reqData.bucketName} not found` };
}
// Read source content
const content = await bucket.fastGet({ path: reqData.sourceKey });
// Write to destination
await bucket.fastPut({
path: reqData.destKey,
contents: content,
overwrite: true,
});
// Delete source
await bucket.fastRemove({ path: reqData.sourceKey });
return { success: true };
} catch (err) {
console.error('Error moving object:', err);
return { success: false, error: String(err) };
}
}
)
);
// Move prefix (folder) - copy all objects then delete all
typedrouter.addTypedHandler(
new plugins.typedrequest.TypedHandler<interfaces.IReq_MovePrefix>(
'movePrefix',
async (reqData) => {
const smartbucket = await tsview.getSmartBucket();
if (!smartbucket) {
return { success: false, movedCount: 0, error: 'S3 not configured' };
}
try {
const bucket = await smartbucket.getBucketByName(reqData.bucketName);
if (!bucket) {
return { success: false, movedCount: 0, error: `Bucket ${reqData.bucketName} not found` };
}
// List all objects under the source prefix recursively
const allObjects: string[] = [];
const listRecursive = async (prefix: string): Promise<void> => {
const baseDir = await bucket.getBaseDirectory();
let targetDir = baseDir;
if (prefix) {
const prefixParts = prefix.replace(/\/$/, '').split('/').filter(Boolean);
for (const part of prefixParts) {
const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
if (subDir) {
targetDir = subDir;
} else {
return;
}
}
}
// Get files in this directory
const files = await targetDir.listFiles();
for (const file of files) {
allObjects.push(prefix + file.name);
}
// Recurse into subdirectories
const dirs = await targetDir.listDirectories();
for (const dir of dirs) {
await listRecursive(prefix + dir.name + '/');
}
};
await listRecursive(reqData.sourcePrefix);
// Copy all objects to new location
for (const objKey of allObjects) {
const relativePath = objKey.substring(reqData.sourcePrefix.length);
const newKey = reqData.destPrefix + relativePath;
const content = await bucket.fastGet({ path: objKey });
await bucket.fastPut({
path: newKey,
contents: content,
overwrite: true,
});
}
// Delete the source directory
const baseDir = await bucket.getBaseDirectory();
let targetDir = baseDir;
const prefix = reqData.sourcePrefix.replace(/\/$/, '');
const prefixParts = prefix.split('/').filter(Boolean);
for (const part of prefixParts) {
const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
if (subDir) {
targetDir = subDir;
} else {
return { success: false, movedCount: 0, error: 'Source folder not found' };
}
}
await targetDir.delete({ mode: 'permanent' });
return { success: true, movedCount: allObjects.length };
} catch (err) {
console.error('Error moving prefix:', err);
return { success: false, movedCount: 0, error: String(err) };
}
}
)
);
}

File diff suppressed because one or more lines are too long

View File

@@ -213,6 +213,39 @@ export interface IReq_DeletePrefix extends plugins.typedrequestInterfaces.implem
};
}
export interface IReq_MoveObject extends plugins.typedrequestInterfaces.implementsTR<
plugins.typedrequestInterfaces.ITypedRequest,
IReq_MoveObject
> {
method: 'moveObject';
request: {
bucketName: string;
sourceKey: string;
destKey: string;
};
response: {
success: boolean;
error?: string;
};
}
export interface IReq_MovePrefix extends plugins.typedrequestInterfaces.implementsTR<
plugins.typedrequestInterfaces.ITypedRequest,
IReq_MovePrefix
> {
method: 'movePrefix';
request: {
bucketName: string;
sourcePrefix: string;
destPrefix: string;
};
response: {
success: boolean;
movedCount: number;
error?: string;
};
}
export interface IReq_GetObjectUrl extends plugins.typedrequestInterfaces.implementsTR<
plugins.typedrequestInterfaces.ITypedRequest,
IReq_GetObjectUrl

View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@git.zone/tsview',
version: '1.8.0',
version: '1.11.1',
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
}

View File

@@ -25,7 +25,7 @@ export class TsviewMongoBrowser extends DeesElement {
private accessor stats: ICollectionStats | null = null;
@state()
private accessor editorWidth: number = 400;
private accessor editorWidth: number = 700;
@state()
private accessor isResizingEditor: boolean = false;
@@ -117,7 +117,7 @@ export class TsviewMongoBrowser extends DeesElement {
.content {
flex: 1;
display: grid;
grid-template-columns: 1fr 4px var(--editor-width, 400px);
grid-template-columns: 1fr 4px var(--editor-width, 700px);
gap: 0;
overflow: hidden;
}
@@ -305,7 +305,7 @@ export class TsviewMongoBrowser extends DeesElement {
const contentEl = this.shadowRoot?.querySelector('.content');
if (!contentEl) return;
const containerRect = contentEl.getBoundingClientRect();
const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 300), 700);
const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
this.editorWidth = newWidth;
};

View File

@@ -1,6 +1,6 @@
import * as plugins from '../plugins.js';
import { apiService, type IS3Object } from '../services/index.js';
import { getFileName } from '../utilities/index.js';
import { getFileName, validateMove, getParentPrefix } from '../utilities/index.js';
import { themeStyles } from '../styles/index.js';
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
@@ -74,6 +74,58 @@ export class TsviewS3Columns extends DeesElement {
@state()
private accessor uploadProgress: { current: number; total: number } | null = null;
// 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;
// Internal drag state
@state()
private accessor draggedItem: { key: string; isFolder: boolean } | null = null;
private resizing: { columnIndex: number; startX: number; startWidth: number } | null = null;
private readonly DEFAULT_COLUMN_WIDTH = 250;
private readonly MIN_COLUMN_WIDTH = 150;
@@ -81,6 +133,7 @@ export class TsviewS3Columns extends DeesElement {
private dragCounters: Map<number, number> = new Map();
private folderHoverTimer: ReturnType<typeof setTimeout> | null = null;
private fileInputElement: HTMLInputElement | null = null;
private folderInputElement: HTMLInputElement | null = null;
public static styles = [
cssManager.defaultStyles,
@@ -367,6 +420,134 @@ export class TsviewS3Columns extends DeesElement {
opacity: 0.5;
cursor: not-allowed;
}
/* Move dialog styles */
.move-summary {
background: 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: #888;
min-width: 40px;
}
.move-path {
color: #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: rgba(0, 0, 0, 0.2);
border-radius: 6px;
margin-bottom: 12px;
font-size: 12px;
overflow-x: auto;
}
.picker-crumb {
color: #888;
cursor: pointer;
white-space: nowrap;
}
.picker-crumb:hover {
color: #fff;
}
.picker-separator {
color: #555;
}
.picker-list {
max-height: 280px;
overflow-y: auto;
border: 1px solid #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: 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: #666;
font-size: 13px;
}
.column-item.dragging {
opacity: 0.5;
}
.column-item.drop-target {
background: rgba(59, 130, 246, 0.15) !important;
outline: 1px dashed rgba(59, 130, 246, 0.5);
}
.column-item.drop-invalid {
background: rgba(239, 68, 68, 0.1) !important;
cursor: not-allowed;
}
`,
];
@@ -380,10 +561,11 @@ export class TsviewS3Columns extends DeesElement {
this.clearFolderHover();
this.dragCounters.clear();
if (this.fileInputElement) { this.fileInputElement.remove(); this.fileInputElement = null; }
if (this.folderInputElement) { this.folderInputElement.remove(); this.folderInputElement = null; }
}
updated(changedProperties: Map<string, unknown>) {
if (changedProperties.has('bucketName')) {
if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix')) {
this.loadInitialColumn();
} else if (changedProperties.has('refreshKey')) {
this.refreshAllColumns();
@@ -393,16 +575,37 @@ export class TsviewS3Columns extends DeesElement {
private async loadInitialColumn() {
this.loading = true;
try {
const result = await apiService.listObjects(this.bucketName, this.currentPrefix, '/');
this.columns = [
{
prefix: this.currentPrefix,
// Parse the path segments from currentPrefix
// e.g., "folder1/folder2/folder3/" → ["folder1/", "folder1/folder2/", "folder1/folder2/folder3/"]
const pathSegments = this.getPathSegments(this.currentPrefix);
// Build all prefixes we need to load (including root)
const prefixesToLoad = ['', ...pathSegments];
// Load all columns in parallel
const columnResults = await Promise.all(
prefixesToLoad.map(prefix =>
apiService.listObjects(this.bucketName, prefix, '/')
)
);
// Build columns array with proper selections
this.columns = columnResults.map((result, index) => {
const prefix = prefixesToLoad[index];
// The selected item is the next prefix in the path (if any)
const selectedItem = index < pathSegments.length ? pathSegments[index] : null;
return {
prefix,
objects: result.objects,
prefixes: result.prefixes,
selectedItem: null,
selectedItem,
width: this.DEFAULT_COLUMN_WIDTH,
},
];
};
});
// Auto-scroll to show the rightmost column
this.updateComplete.then(() => this.scrollToEnd());
} catch (err) {
console.error('Error loading objects:', err);
this.columns = [];
@@ -410,6 +613,22 @@ export class TsviewS3Columns extends DeesElement {
this.loading = false;
}
// Helper to parse prefix into cumulative path segments
private getPathSegments(prefix: string): string[] {
if (!prefix) return [];
const parts = prefix.split('/').filter(p => p); // Remove empty strings
const segments: string[] = [];
let cumulative = '';
for (const part of parts) {
cumulative += part + '/';
segments.push(cumulative);
}
return segments;
}
private async refreshAllColumns() {
const updatedColumns = await Promise.all(
this.columns.map(async (col) => {
@@ -554,6 +773,17 @@ export class TsviewS3Columns extends DeesElement {
await navigator.clipboard.writeText(prefix);
},
},
{
name: 'Rename',
iconName: 'lucide:pencil',
action: async () => this.openRenameDialog(prefix, true),
},
{ divider: true },
{
name: 'Move to...',
iconName: 'lucide:folderInput',
action: async () => this.openMovePickerDialog(prefix, true),
},
{ divider: true },
{
name: 'New Folder Inside',
@@ -566,9 +796,14 @@ export class TsviewS3Columns extends DeesElement {
action: async () => this.openCreateDialog('file', prefix),
},
{
name: 'Upload...',
iconName: 'lucide:upload',
action: async () => this.triggerFileUpload(prefix),
name: 'Upload Files...',
iconName: 'lucide:file',
action: async () => this.triggerFileUpload(prefix, 'files'),
},
{
name: 'Upload Folder...',
iconName: 'lucide:folderUp',
action: async () => this.triggerFileUpload(prefix, 'folder'),
},
{ divider: true },
{
@@ -619,6 +854,17 @@ export class TsviewS3Columns extends DeesElement {
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',
@@ -654,9 +900,14 @@ export class TsviewS3Columns extends DeesElement {
action: async () => this.openCreateDialog('file', prefix),
},
{
name: 'Upload...',
iconName: 'lucide:upload',
action: async () => this.triggerFileUpload(prefix),
name: 'Upload Files...',
iconName: 'lucide:file',
action: async () => this.triggerFileUpload(prefix, 'files'),
},
{
name: 'Upload Folder...',
iconName: 'lucide:folderUp',
action: async () => this.triggerFileUpload(prefix, 'folder'),
},
]);
}
@@ -697,20 +948,27 @@ export class TsviewS3Columns extends DeesElement {
// --- File upload helpers ---
private ensureFileInput(): HTMLInputElement {
private ensureFileInputs(): void {
if (!this.fileInputElement) {
this.fileInputElement = document.createElement('input');
this.fileInputElement.type = 'file';
this.fileInputElement.multiple = true;
(this.fileInputElement as any).webkitdirectory = true; // Enable folder selection
this.fileInputElement.style.display = 'none';
this.shadowRoot!.appendChild(this.fileInputElement);
}
return this.fileInputElement;
if (!this.folderInputElement) {
this.folderInputElement = document.createElement('input');
this.folderInputElement.type = 'file';
this.folderInputElement.multiple = true;
(this.folderInputElement as any).webkitdirectory = true;
this.folderInputElement.style.display = 'none';
this.shadowRoot!.appendChild(this.folderInputElement);
}
}
private triggerFileUpload(targetPrefix: string) {
const input = this.ensureFileInput();
private triggerFileUpload(targetPrefix: string, type: 'files' | 'folder') {
this.ensureFileInputs();
const input = type === 'folder' ? this.folderInputElement! : this.fileInputElement!;
input.value = '';
const handler = async () => {
input.removeEventListener('change', handler);
@@ -812,7 +1070,9 @@ export class TsviewS3Columns extends DeesElement {
private handleColumnDragOver(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
if (e.dataTransfer) {
e.dataTransfer.dropEffect = this.draggedItem ? 'move' : 'copy';
}
}
private handleColumnDragLeave(e: DragEvent, columnIndex: number) {
@@ -829,13 +1089,25 @@ export class TsviewS3Columns extends DeesElement {
private async handleColumnDrop(e: DragEvent, columnIndex: number) {
e.preventDefault();
e.stopPropagation();
const targetPrefix = this.dragOverFolderPrefix ?? this.columns[columnIndex].prefix;
// Check if this is an internal move (item from within the app)
if (this.draggedItem) {
this.initiateMove(this.draggedItem.key, this.draggedItem.isFolder, targetPrefix);
this.draggedItem = null;
this.clearFolderHover();
this.dragCounters.clear();
this.dragOverColumnIndex = -1;
return;
}
this.dragCounters.clear();
this.dragOverColumnIndex = -1;
const items = e.dataTransfer?.items;
if (!items || items.length === 0) return;
const targetPrefix = this.dragOverFolderPrefix ?? this.columns[columnIndex].prefix;
this.clearFolderHover();
// Collect all files (including from nested folders)
@@ -886,6 +1158,12 @@ export class TsviewS3Columns extends DeesElement {
private handleFolderDragLeave(e: DragEvent, folderPrefix: string) {
e.stopPropagation();
// Check if we're leaving to a child element - if so, don't cancel the hover
const target = e.currentTarget as HTMLElement;
const relatedTarget = e.relatedTarget as Node | null;
if (relatedTarget && target.contains(relatedTarget)) {
return; // Still inside the folder, ignore this dragleave
}
if (this.dragOverFolderPrefix === folderPrefix) this.dragOverFolderPrefix = null;
if (this.folderHoverTimer) {
clearTimeout(this.folderHoverTimer);
@@ -893,11 +1171,362 @@ export class TsviewS3Columns extends DeesElement {
}
}
private handleFolderDragOver(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer) {
e.dataTransfer.dropEffect = this.draggedItem ? 'move' : 'copy';
}
}
private clearFolderHover() {
if (this.folderHoverTimer) { clearTimeout(this.folderHoverTimer); this.folderHoverTimer = null; }
this.dragOverFolderPrefix = null;
}
// --- Internal drag handlers for move ---
private handleItemDragStart(e: DragEvent, key: string, isFolder: boolean) {
this.draggedItem = { key, isFolder };
e.dataTransfer?.setData('text/plain', key);
e.dataTransfer!.effectAllowed = 'copyMove'; // Allow both for flexibility
// Add visual feedback to dragged item
const target = e.target as HTMLElement;
target.classList.add('dragging');
}
private handleItemDragEnd(e: DragEvent) {
this.draggedItem = null;
const target = e.target as HTMLElement;
target.classList.remove('dragging');
}
// --- 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) {
this.movePickerLoading = true;
try {
const result = await apiService.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) return;
this.moveInProgress = true;
try {
const sourceName = getFileName(this.moveSource.key);
const destKey = this.moveDestination + sourceName + (this.moveSource.isFolder ? '/' : '');
let result: { success: boolean; error?: string };
if (this.moveSource.isFolder) {
result = await apiService.movePrefix(
this.bucketName,
this.moveSource.key,
destKey
);
} else {
result = await apiService.moveObject(
this.bucketName,
this.moveSource.key,
destKey
);
}
if (result.success) {
this.closeMoveDialog();
await this.refreshAllColumns();
} 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;
// Auto-focus and smart selection
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()) 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 apiService.movePrefix(this.bucketName, this.renameSource.key, newKey);
} else {
result = await apiService.moveObject(this.bucketName, this.renameSource.key, newKey);
}
if (result.success) {
this.closeRenameDialog();
await this.refreshAllColumns();
} 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>
${this.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) // Hide source from list
.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>
`;
}
private async handleCreate() {
if (!this.createDialogName.trim()) return;
@@ -980,6 +1609,9 @@ export class TsviewS3Columns extends DeesElement {
${this.columns.map((column, index) => this.renderColumnWrapper(column, index))}
</div>
${this.renderCreateDialog()}
${this.renderMoveDialog()}
${this.renderMovePickerDialog()}
${this.renderRenameDialog()}
`;
}
@@ -1020,9 +1652,13 @@ export class TsviewS3Columns extends DeesElement {
(prefix) => html`
<div
class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''} ${this.dragOverFolderPrefix === prefix ? 'drag-target' : ''}"
draggable="true"
@click=${() => this.selectFolder(index, prefix)}
@contextmenu=${(e: MouseEvent) => this.handleFolderContextMenu(e, index, prefix)}
@dragstart=${(e: DragEvent) => this.handleItemDragStart(e, prefix, true)}
@dragend=${(e: DragEvent) => this.handleItemDragEnd(e)}
@dragenter=${(e: DragEvent) => this.handleFolderDragEnter(e, prefix)}
@dragover=${(e: DragEvent) => this.handleFolderDragOver(e)}
@dragleave=${(e: DragEvent) => this.handleFolderDragLeave(e, prefix)}
>
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
@@ -1039,8 +1675,11 @@ export class TsviewS3Columns extends DeesElement {
(obj) => html`
<div
class="column-item ${column.selectedItem === obj.key ? 'selected' : ''}"
draggable="true"
@click=${() => this.selectFile(index, obj.key)}
@contextmenu=${(e: MouseEvent) => this.handleFileContextMenu(e, index, obj.key)}
@dragstart=${(e: DragEvent) => this.handleItemDragStart(e, obj.key, false)}
@dragend=${(e: DragEvent) => this.handleItemDragEnd(e)}
>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="${this.getFileIcon(obj.key)}" />
@@ -1052,9 +1691,13 @@ export class TsviewS3Columns extends DeesElement {
</div>
${this.dragOverColumnIndex === index ? html`
<div class="drag-hint">
${this.dragOverFolderPrefix
? `Drop to upload into ${getFileName(this.dragOverFolderPrefix)}`
: 'Drop to upload here'}
${this.draggedItem
? (this.dragOverFolderPrefix
? `Move to ${getFileName(this.dragOverFolderPrefix)}`
: 'Move here')
: (this.dragOverFolderPrefix
? `Drop to upload into ${getFileName(this.dragOverFolderPrefix)}`
: 'Drop to upload here')}
</div>
` : ''}
${this.uploading ? html`

View File

@@ -1,6 +1,6 @@
import * as plugins from '../plugins.js';
import { apiService, type IS3Object } from '../services/index.js';
import { formatSize, getFileName } from '../utilities/index.js';
import { formatSize, getFileName, validateMove, getParentPrefix } from '../utilities/index.js';
import { themeStyles } from '../styles/index.js';
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
@@ -44,6 +44,54 @@ export class TsviewS3Keys extends DeesElement {
@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,
themeStyles,
@@ -256,6 +304,120 @@ export class TsviewS3Keys extends DeesElement {
opacity: 0.5;
cursor: not-allowed;
}
/* Move dialog styles */
.move-summary {
background: 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: #888;
min-width: 40px;
}
.move-path {
color: #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: rgba(0, 0, 0, 0.2);
border-radius: 6px;
margin-bottom: 12px;
font-size: 12px;
overflow-x: auto;
}
.picker-crumb {
color: #888;
cursor: pointer;
white-space: nowrap;
}
.picker-crumb:hover {
color: #fff;
}
.picker-separator {
color: #555;
}
.picker-list {
max-height: 280px;
overflow-y: auto;
border: 1px solid #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: 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: #666;
font-size: 13px;
}
`,
];
@@ -340,6 +502,17 @@ export class TsviewS3Keys extends DeesElement {
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',
@@ -392,6 +565,17 @@ export class TsviewS3Keys extends DeesElement {
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',
@@ -533,6 +717,346 @@ export class TsviewS3Keys extends DeesElement {
`;
}
// --- Helper for path segments ---
private getPathSegments(prefix: string): string[] {
if (!prefix) return [];
const parts = prefix.split('/').filter(p => p);
const segments: string[] = [];
let cumulative = '';
for (const part of parts) {
cumulative += part + '/';
segments.push(cumulative);
}
return segments;
}
// --- 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) {
this.movePickerLoading = true;
try {
const result = await apiService.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) 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 apiService.movePrefix(
this.bucketName,
this.moveSource.key,
destKey
);
} else {
result = await apiService.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;
// Auto-focus and smart selection
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()) 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 apiService.movePrefix(this.bucketName, this.renameSource.key, newKey);
} else {
result = await apiService.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>
${this.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) // Hide source from list
.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">
@@ -595,6 +1119,9 @@ export class TsviewS3Keys extends DeesElement {
</div>
</div>
${this.renderCreateDialog()}
${this.renderMoveDialog()}
${this.renderMovePickerDialog()}
${this.renderRenameDialog()}
`;
}
}

View File

@@ -168,6 +168,28 @@ export class ApiService {
return result.success;
}
async moveObject(
bucketName: string,
sourceKey: string,
destKey: string
): Promise<{ success: boolean; error?: string }> {
return this.request<
{ bucketName: string; sourceKey: string; destKey: string },
{ success: boolean; error?: string }
>('moveObject', { bucketName, sourceKey, destKey });
}
async movePrefix(
bucketName: string,
sourcePrefix: string,
destPrefix: string
): Promise<{ success: boolean; movedCount: number; error?: string }> {
return this.request<
{ bucketName: string; sourcePrefix: string; destPrefix: string },
{ success: boolean; movedCount: number; error?: string }
>('movePrefix', { bucketName, sourcePrefix, destPrefix });
}
// ===========================================
// MongoDB API Methods
// ===========================================

View File

@@ -1 +1,2 @@
export * from './formatters.js';
export * from './move-validator.js';

View File

@@ -0,0 +1,47 @@
/**
* Move validation utilities for S3 objects
*/
export interface IMoveValidation {
valid: boolean;
error?: string;
}
/**
* Validates if a move operation is allowed
* @param sourceKey The source object key (file or folder with trailing /)
* @param destPrefix The destination prefix (folder)
* @returns Validation result with error message if invalid
*/
export function validateMove(sourceKey: string, destPrefix: string): IMoveValidation {
// Check: Moving folder into itself or a subfolder of itself
if (sourceKey.endsWith('/')) {
// It's a folder - check if destPrefix starts with sourceKey
if (destPrefix.startsWith(sourceKey)) {
return { valid: false, error: 'Cannot move a folder into itself' };
}
}
// Check: Source and dest are the same location
const sourceParent = getParentPrefix(sourceKey);
if (sourceParent === destPrefix) {
return { valid: false, error: 'Item is already in this location' };
}
return { valid: true };
}
/**
* Gets the parent prefix (directory) of a given key
* @param key The object key (file or folder)
* @returns The parent prefix
*/
export function getParentPrefix(key: string): string {
// "folder1/folder2/file.txt" -> "folder1/folder2/"
// "folder1/folder2/" -> "folder1/"
// "file.txt" -> ""
// "folder/" -> ""
const trimmed = key.endsWith('/') ? key.slice(0, -1) : key;
const lastSlash = trimmed.lastIndexOf('/');
return lastSlash >= 0 ? trimmed.substring(0, lastSlash + 1) : '';
}