Skip to content

Commit 0d1c61d

Browse files
nikitalokhmachev-ainikitalokhmachev-ai
committed
feat: move action buttons; implement the delete button
1 parent 7ea27f5 commit 0d1c61d

3 files changed

Lines changed: 135 additions & 31 deletions

File tree

‎src/argo-archive-list.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -210,12 +210,16 @@ export class ArgoArchiveList extends LitElement {
210210
}
211211
}
212212

213-
private buildIndex() {
214-
this.flex = new FlexIndex();
215-
this.pages.forEach((p) => {
216-
const text = p.url + (p.title ? ` ${p.title}` : "");
217-
this.flex.add(p.ts, text); // use ts (timestamp) as a unique id
218-
});
213+
public clearSelection() {
214+
this.selectedPages = new Set();
215+
this.requestUpdate();
216+
this.dispatchEvent(
217+
new CustomEvent("selection-change", {
218+
detail: { count: 0 },
219+
bubbles: true,
220+
composed: true,
221+
}),
222+
);
219223
}
220224

221225
private togglePageSelection(ts: string) {
@@ -226,6 +230,13 @@ export class ArgoArchiveList extends LitElement {
226230
next.add(ts);
227231
}
228232
this.selectedPages = next;
233+
this.dispatchEvent(
234+
new CustomEvent("selection-change", {
235+
detail: { count: this.selectedPages.size },
236+
bubbles: true,
237+
composed: true,
238+
}),
239+
);
229240
}
230241

231242
public getSelectedPages() {
@@ -342,6 +353,7 @@ export class ArgoArchiveList extends LitElement {
342353
<md-checkbox
343354
slot="start"
344355
touch-target="wrapper"
356+
.checked=${this.selectedPages.has(page.ts)}
345357
@click=${(e: Event) => {
346358
e.stopPropagation();
347359
this.togglePageSelection(page.ts);

‎src/ext/bg.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { BrowserRecorder } from "./browser-recorder";
33
import { CollectionLoader } from "@webrecorder/wabac/swlib";
44

55
import { listAllMsg } from "../utils";
6-
76
import {
87
getLocalOption,
98
removeLocalOption,
@@ -110,6 +109,27 @@ function sidepanelHandler(port) {
110109
break;
111110
}
112111

112+
case "deletePages": {
113+
const defaultCollId = await getLocalOption("defaultCollId");
114+
if (!defaultCollId) {
115+
return;
116+
}
117+
const coll = await collLoader.loadColl(defaultCollId);
118+
119+
// delete each page from the local store
120+
for (const id of message.pageIds) {
121+
// swlib’s store.deletePage (or similar) removes it.
122+
// If your API is identical to ReplayWeb.page’s HTTP API:
123+
// DELETE `${this.collInfo.apiPrefix}/page/${id}` :contentReference[oaicite:0]{index=0}
124+
await coll.store.deletePage(id);
125+
}
126+
127+
// now re-send the new list of pages
128+
const pages = await coll.store.getAllPages();
129+
port.postMessage({ type: "pages", pages });
130+
break;
131+
}
132+
113133
case "startRecording": {
114134
isRecordingEnabled = true;
115135
defaultCollId = message.collId;

‎src/sidepanel.ts‎

Lines changed: 96 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,8 @@ class ArgoViewer extends LitElement {
137137
private archiveList!: ArgoArchiveList;
138138
constructor() {
139139
super();
140+
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
141+
this.selectedCount = 0;
140142
// @ts-expect-error - TS2339 - Property 'searchQuery' does not exist on type 'ArgoViewer'.
141143
this.searchQuery = "";
142144
// @ts-expect-error - TS2339 - Property 'collections' does not exist on type 'ArgoViewer'.
@@ -193,6 +195,7 @@ class ArgoViewer extends LitElement {
193195
static get properties() {
194196
return {
195197
searchQuery: { type: String },
198+
selectedCount: { type: Number },
196199
collections: { type: Array },
197200
collId: { type: String },
198201
collTitle: { type: String },
@@ -250,6 +253,16 @@ class ArgoViewer extends LitElement {
250253
})[0];
251254
}
252255

256+
onDeleteSelected() {
257+
const pages = this.archiveList.getSelectedPages();
258+
const ids = pages.map((p) => p.id);
259+
this.sendMessage({ type: "deletePages", pageIds: ids });
260+
// then clear UI
261+
this.archiveList.clearSelection();
262+
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
263+
this.selectedCount = 0;
264+
}
265+
253266
private async onDownload() {
254267
const selectedPages = this.archiveList?.getSelectedPages?.() || [];
255268
if (!selectedPages.length) {
@@ -389,7 +402,7 @@ class ArgoViewer extends LitElement {
389402
}
390403

391404
firstUpdated() {
392-
this.archiveList = this.shadowRoot?.getElementById(
405+
this.archiveList = this.shadowRoot!.getElementById(
393406
"archive-list",
394407
) as ArgoArchiveList;
395408

@@ -439,6 +452,11 @@ class ArgoViewer extends LitElement {
439452
case "update":
440453
this.updateTabInfo();
441454
break;
455+
456+
case "pages":
457+
// @ts-expect-error — pages is internal to the list
458+
this.archiveList.pages = message.pages;
459+
break;
442460
case "status":
443461
// @ts-expect-error - TS2339 - Property 'tabId' does not exist on type 'ArgoViewer'.
444462
if (this.tabId !== message.tabId) {
@@ -816,25 +834,92 @@ class ArgoViewer extends LitElement {
816834

817835
renderTabs() {
818836
return html`
819-
<md-tabs id="tabs" aria-label="Archive tabs">
820-
<md-primary-tab class="md-typescale-label-large"
821-
>My Archives</md-primary-tab
822-
>
823-
<md-primary-tab class="md-typescale-label-large"
824-
>My Shared Archives</md-primary-tab
825-
>
826-
</md-tabs>
837+
${
838+
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
839+
this.selectedCount > 0
840+
? html`
841+
<!-- ─── BULK-ACTION BAR (exact same icons as bottom) ─── -->
842+
843+
<div
844+
style="display:flex; align-items:center; justify-content:space-between; padding: 0.25rem 1rem;"
845+
>
846+
<div style="display:flex; align-items:center; gap: 0.5rem;">
847+
<!-- Deselect All -->
848+
<md-icon-button
849+
aria-label="Deselect All"
850+
@click=${() => {
851+
this.archiveList.clearSelection();
852+
// @ts-expect-error
853+
this.selectedCount = 0;
854+
}}
855+
>
856+
<md-icon style="color: gray">clear</md-icon>
857+
</md-icon-button>
858+
859+
<span class="md-typescale-body-small"
860+
>${
861+
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
862+
this.selectedCount
863+
}
864+
selected</span
865+
>
866+
</div>
867+
868+
<!-- Download -->
869+
<div style="display:flex; align-items:center; gap: 0.5rem;">
870+
<md-icon-button
871+
aria-label="Download"
872+
@click=${this.onDownload}
873+
>
874+
<md-icon style="color: gray">download</md-icon>
875+
</md-icon-button>
876+
877+
<!-- Share -->
878+
<md-icon-button
879+
aria-label="Share"
880+
@click=${this.onShareSelected}
881+
>
882+
<md-icon style="color: gray">share</md-icon>
883+
</md-icon-button>
884+
885+
<!-- Delete -->
886+
<md-icon-button
887+
aria-label="Delete"
888+
@click=${this.onDeleteSelected}
889+
>
890+
<md-icon style="color: gray">delete</md-icon>
891+
</md-icon-button>
892+
</div>
893+
</div>
894+
<md-divider></md-divider>
895+
`
896+
: html`
897+
<!-- ─── NORMAL TABS BAR ─── -->
898+
<md-tabs id="tabs" aria-label="Archive tabs">
899+
<md-primary-tab class="md-typescale-label-large"
900+
>My Archives</md-primary-tab
901+
>
902+
<md-primary-tab class="md-typescale-label-large"
903+
>My Shared Archives</md-primary-tab
904+
>
905+
</md-tabs>
906+
`
907+
}
827908
909+
<!-- ─── PANELS ─── -->
828910
<div
829911
class="tab-panels"
830-
style="flex: 1; overflow-y: auto; position: relative; flex-grow: 1;"
912+
style="flex:1; overflow-y:auto; position:relative; flex-grow:1;"
913+
@selection-change=${(e: CustomEvent) =>
914+
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
915+
(this.selectedCount = e.detail.count)}
831916
>
832917
<div id="my-archives" class="tab-panel" active>
833918
${this.renderStatusCard()}
834919
<argo-archive-list
835920
id="archive-list"
836921
.filterQuery=${
837-
//@ts-expect-error - TS2339 - Property 'searchQuery' does not exist on type 'ArgoViewer'.
922+
// @ts-expect-error - TS2339 - Property 'searchQuery' does not exist on type 'ArgoViewer'.
838923
this.searchQuery
839924
}
840925
></argo-archive-list>
@@ -868,19 +953,6 @@ class ArgoViewer extends LitElement {
868953
<md-icon slot="icon" style="color:white">public</md-icon>
869954
Resume Archiving
870955
</md-filled-button>
871-
<md-icon-button
872-
aria-label="Download"
873-
@click=${this.onDownload}
874-
>
875-
<md-icon style="color: gray;">download</md-icon>
876-
</md-icon-button>
877-
878-
<md-icon-button
879-
aria-label="Share"
880-
@click=${this.onShareSelected}
881-
>
882-
<md-icon style="color: gray;">share</md-icon>
883-
</md-icon-button>
884956
`
885957
: html`
886958
<md-outlined-button

0 commit comments

Comments
 (0)