Skip to content

feat: move action buttons; implement the delete button #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nikitalokhmachev-ai merged 5 commits into from
May 22, 2025
Merged

feat: move action buttons; implement the delete button #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d1c61d
feat: move action buttons; implement the delete button
nikitalokhmachev-ai May 21, 2025
d74f733
chore: remove useless comments
nikitalokhmachev-ai May 21, 2025
c323d64
fix: port disconnecting
nikitalokhmachev-ai May 21, 2025
fe41ff1
feat: button colors
nikitalokhmachev-ai May 22, 2025
f9a206c
feat: animations
nikitalokhmachev-ai May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions src/argo-archive-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,12 +210,16 @@ export class ArgoArchiveList extends LitElement {
}
}

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

private togglePageSelection(ts: string) {
Expand All @@ -226,6 +230,13 @@ export class ArgoArchiveList extends LitElement {
next.add(ts);
}
this.selectedPages = next;
this.dispatchEvent(
new CustomEvent("selection-change", {
detail: { count: this.selectedPages.size },
bubbles: true,
composed: true,
}),
);
}

public getSelectedPages() {
Expand Down Expand Up @@ -342,6 +353,7 @@ export class ArgoArchiveList extends LitElement {
<md-checkbox
slot="start"
touch-target="wrapper"
.checked=${this.selectedPages.has(page.ts)}
@click=${(e: Event) => {
e.stopPropagation();
this.togglePageSelection(page.ts);
Expand Down
18 changes: 17 additions & 1 deletion src/ext/bg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { BrowserRecorder } from "./browser-recorder";
import { CollectionLoader } from "@webrecorder/wabac/swlib";

import { listAllMsg } from "../utils";

import {
getLocalOption,
removeLocalOption,
Expand Down Expand Up @@ -110,6 +109,23 @@ function sidepanelHandler(port) {
break;
}

case "deletePages": {
const defaultCollId = await getLocalOption("defaultCollId");
if (!defaultCollId) {
return;
}
const coll = await collLoader.loadColl(defaultCollId);

for (const id of message.pageIds) {
await coll.store.deletePage(id);
}

// now re-send the new list of pages
const pages = await coll.store.getAllPages();
port.postMessage({ type: "pages", pages });
break;
}

case "startRecording": {
isRecordingEnabled = true;
defaultCollId = message.collId;
Expand Down
185 changes: 149 additions & 36 deletions src/sidepanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import "@material/web/icon/icon.js";
import { ArgoArchiveList } from "./argo-archive-list";
import { Downloader } from "./sw/downloader";

import wrRec from "./assets/icons/recLogo.svg";

import {
getLocalOption,
// removeLocalOption,
Expand Down Expand Up @@ -128,6 +126,35 @@ class ArgoViewer extends LitElement {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}

/* Fade overlay styles */
.tabs-wrapper {
position: relative;
}

.tabs-overlay {
transition: opacity 0.3s ease;
}
.tabs-overlay.inactive {
opacity: 0;
pointer-events: none;
}

.actions-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none;
background: white;
z-index: 1;
}
.actions-overlay.active {
opacity: 1;
pointer-events: auto;
}

md-icon[filled] {
font-variation-settings: "FILL" 1;
}
Expand All @@ -137,6 +164,8 @@ class ArgoViewer extends LitElement {
private archiveList!: ArgoArchiveList;
constructor() {
super();
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
this.selectedCount = 0;
// @ts-expect-error - TS2339 - Property 'searchQuery' does not exist on type 'ArgoViewer'.
this.searchQuery = "";
// @ts-expect-error - TS2339 - Property 'collections' does not exist on type 'ArgoViewer'.
Expand Down Expand Up @@ -193,6 +222,7 @@ class ArgoViewer extends LitElement {
static get properties() {
return {
searchQuery: { type: String },
selectedCount: { type: Number },
collections: { type: Array },
collId: { type: String },
collTitle: { type: String },
Expand Down Expand Up @@ -250,6 +280,16 @@ class ArgoViewer extends LitElement {
})[0];
}

onDeleteSelected() {
const pages = this.archiveList.getSelectedPages();
const ids = pages.map((p) => p.id);
this.sendMessage({ type: "deletePages", pageIds: ids });
// then clear UI
this.archiveList.clearSelection();
// @ts-expect-error - TS2339 - Property 'selectedCount' does not exist on type 'ArgoViewer'.
this.selectedCount = 0;
}

private async onDownload() {
const selectedPages = this.archiveList?.getSelectedPages?.() || [];
if (!selectedPages.length) {
Expand Down Expand Up @@ -389,7 +429,7 @@ class ArgoViewer extends LitElement {
}

firstUpdated() {
this.archiveList = this.shadowRoot?.getElementById(
this.archiveList = this.shadowRoot!.getElementById(
"archive-list",
) as ArgoArchiveList;

Expand All @@ -416,29 +456,54 @@ class ArgoViewer extends LitElement {
});
}

registerMessages() {
// @ts-expect-error - TS2339 - Property 'port' does not exist on type 'ArgoViewer'.
private connectPort() {
// if already connected, do nothing
// @ts-expect-error
if (this.port) return;
// @ts-expect-error
this.port = chrome.runtime.connect({ name: "sidepanel-port" });
// @ts-expect-error
this.port.onMessage.addListener((msg) => this.onMessage(msg));
// @ts-expect-error
this.port.onDisconnect.addListener(() => {
// clear so next sendMessage() will reconnect
console.warn("Port disconnected, will reconnect on next send.");
// @ts-expect-error
this.port = null;
});
}

registerMessages() {
this.connectPort();
this.updateTabInfo();

// @ts-expect-error - TS2339 - Property 'port' does not exist on type 'ArgoViewer'.
this.port.onMessage.addListener((message) => {
this.onMessage(message);
});
}

// @ts-expect-error - TS7006 - Parameter 'message' implicitly has an 'any' type.
sendMessage(message) {
// @ts-expect-error - TS2339 - Property 'port' does not exist on type 'ArgoViewer'.
this.port.postMessage(message);
private sendMessage(message: any) {
// reconnect if needed
// @ts-expect-error
if (!this.port) this.connectPort();
try {
// @ts-expect-error
this.port!.postMessage(message);
} catch (e) {
console.warn(
"Port died while sending, retrying via chrome.runtime.sendMessage",
e,
);
chrome.runtime.sendMessage(message);
}
}
// @ts-expect-error - TS7006 - Parameter 'message' implicitly has an 'any' type.
async onMessage(message) {
switch (message.type) {
case "update":
this.updateTabInfo();
break;

case "pages":
// @ts-expect-error — pages is internal to the list
this.archiveList.pages = message.pages;
break;
case "status":
// @ts-expect-error - TS2339 - Property 'tabId' does not exist on type 'ArgoViewer'.
if (this.tabId !== message.tabId) {
Expand Down Expand Up @@ -704,7 +769,7 @@ class ArgoViewer extends LitElement {
style="color: white; border-radius: 9999px; align-self: flex-end;"
@click=${this.onShareCurrent}
>
<md-icon slot="icon" style="color:white">share</md-icon>
<md-icon slot="icon" style="color:#444">share</md-icon>
Share Current Page
</md-filled-button> `
: ""
Expand Down Expand Up @@ -816,25 +881,86 @@ class ArgoViewer extends LitElement {

renderTabs() {
return html`
<md-tabs id="tabs" aria-label="Archive tabs">
<md-primary-tab class="md-typescale-label-large"
>My Archives</md-primary-tab
<div class="tabs-wrapper">
<!-- Original tabs overlay -->
<div
class="tabs-overlay ${
//@ts-expect-error
this.selectedCount > 0 ? "inactive" : ""
}"
>
<md-primary-tab class="md-typescale-label-large"
>My Shared Archives</md-primary-tab
<md-tabs id="tabs" aria-label="Archive tabs">
<md-primary-tab class="md-typescale-label-large"
>My Archives</md-primary-tab
>
<md-primary-tab class="md-typescale-label-large"
>My Shared Archives</md-primary-tab
>
</md-tabs>
</div>

<!-- Actions overlay on selection -->
<div
class="actions-overlay ${
//@ts-expect-error
this.selectedCount > 0 ? "active" : ""
}"
>
</md-tabs>
<div
style="display:flex; align-items:center; justify-content:space-between; padding: 0.25rem 1rem;"
>
<div style="display:flex; align-items:center; gap: 0.5rem;">
<md-icon-button
aria-label="Deselect All"
@click=${() => {
this.archiveList.clearSelection();
//@ts-expect-error
this.selectedCount = 0;
}}
>
<md-icon style="color: gray">clear</md-icon>
</md-icon-button>
<span class="md-typescale-body-small"
>${
//@ts-expect-error
this.selectedCount
}
selected</span
>
</div>

<div style="display:flex; align-items:center; gap: 0.5rem;">
<md-icon-button aria-label="Download" @click=${this.onDownload}
><md-icon>download</md-icon></md-icon-button
>
<md-icon-button aria-label="Share" @click=${this.onShareSelected}
><md-icon>share</md-icon></md-icon-button
>
<md-icon-button
aria-label="Delete"
@click=${this.onDeleteSelected}
><md-icon>delete</md-icon></md-icon-button
>
</div>
</div>
<md-divider></md-divider>
</div>
</div>

<!-- Panels remain unchanged -->
<div
class="tab-panels"
style="flex: 1; overflow-y: auto; position: relative; flex-grow: 1;"
style="flex:1; overflow-y:auto; position:relative; flex-grow:1;"
@selection-change=${(e: CustomEvent) =>
// @ts-expect-error
(this.selectedCount = e.detail.count)}
>
<div id="my-archives" class="tab-panel" active>
${this.renderStatusCard()}
<argo-archive-list
id="archive-list"
.filterQuery=${
//@ts-expect-error - TS2339 - Property 'searchQuery' does not exist on type 'ArgoViewer'.
// @ts-expect-error
this.searchQuery
}
></argo-archive-list>
Expand Down Expand Up @@ -868,19 +994,6 @@ class ArgoViewer extends LitElement {
<md-icon slot="icon" style="color:white">public</md-icon>
Resume Archiving
</md-filled-button>
<md-icon-button
aria-label="Download"
@click=${this.onDownload}
>
<md-icon style="color: gray;">download</md-icon>
</md-icon-button>

<md-icon-button
aria-label="Share"
@click=${this.onShareSelected}
>
<md-icon style="color: gray;">share</md-icon>
</md-icon-button>
`
: html`
<md-outlined-button
Expand Down
Loading