Skip to content

Add export all labels as ZIP to library flyout #16

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
tomLadder merged 1 commit into from
Apr 27, 2026
Merged

Add export all labels as ZIP to library flyout #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 20 additions & 0 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions packages/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
"preview": "vite preview"
},
"dependencies": {
"@fontsource-variable/jetbrains-mono": "^5.2.5",
"@fontsource/inter": "^5.2.5",
"@thermoprint/core": "workspace:*",
"fflate": "^0.8.2",
"jsbarcode": "^3.12.3",
"konva": "^10.2.1",
"lucide-react": "^0.577.0",
Expand All @@ -19,9 +22,7 @@
"react-dom": "^19.2.4",
"react-konva": "^19.2.3",
"zundo": "^2.3.0",
"zustand": "^5.0.11",
"@fontsource/inter": "^5.2.5",
"@fontsource-variable/jetbrains-mono": "^5.2.5"
"zustand": "^5.0.11"
},
"devDependencies": {
"@eslint/js": "^9.39.4",
Expand Down
36 changes: 18 additions & 18 deletions packages/web/src/editor/dock/flyouts/library-flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import JsBarcode from "jsbarcode";
import { useEditorV2Store, type BaseElement } from "../../../store/editor-store.ts";
import {
downloadLabelAsJson,
downloadLibraryAsZip,
importLabelFromJson,
type SavedLabel,
} from "../../../lib/library.ts";
Expand Down Expand Up @@ -281,25 +282,19 @@ export function LibraryFlyout({ onClose }: Props) {
return (
<div className="fixed inset-x-2 bottom-20 max-h-[80vh] md:max-h-none md:inset-auto md:absolute md:bottom-44 md:left-1/2 md:-translate-x-1/2 md:w-[680px] md:h-[480px] bg-ink-850/95 backdrop-blur-sm border border-white/8 rounded-xl shadow-panel z-40 overflow-hidden flex flex-col">
{/* Header */}
<div className="px-3 py-2 md:py-0 md:h-11 border-b border-white/5 shrink-0">
<div className="px-3 py-2 border-b border-white/5 shrink-0 space-y-2">
{/* Row 1: title + close */}
<div className="flex items-center justify-between md:hidden mb-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Folder size={16} className="text-accent" />
<span className="text-ui-md font-semibold text-ink-50">Library</span>
<span className="text-ui-xs font-mono tabular-nums text-ink-500 ml-1">{library.labels.length} labels</span>
</div>
<button onClick={onClose} className="text-ink-400 hover:text-ink-100"><X size={15} /></button>
</div>
{/* Row 2 mobile / single row desktop: search + actions */}
<div className="flex items-center gap-2 md:h-11">
<div className="hidden md:flex items-center gap-2">
<Folder size={16} className="text-accent" />
<span className="text-ui-md font-semibold text-ink-50">Library</span>
<span className="text-ui-xs font-mono tabular-nums text-ink-500 ml-1">{library.labels.length} labels</span>
</div>
<div className="hidden md:block flex-1" />
<div className="flex items-center gap-1.5 h-8 px-2 rounded-md bg-ink-800 border border-white/5 flex-1 md:flex-none md:w-48 min-w-0">
{/* Row 2: search + actions */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5 h-8 px-2 rounded-md bg-ink-800 border border-white/5 flex-1 min-w-0">
<Search size={13} className="text-ink-400 shrink-0" />
<input
value={query}
Expand All @@ -310,11 +305,22 @@ export function LibraryFlyout({ onClose }: Props) {
</div>
<button
onClick={handleImport}
className="flex items-center gap-1.5 h-8 px-2 rounded-md bg-ink-800 border border-white/5 text-ink-300 hover:text-ink-100 text-ui-sm shrink-0"
className="flex items-center gap-1.5 h-8 px-2.5 rounded-md bg-ink-800 border border-white/5 text-ink-300 hover:text-ink-100 text-ui-sm shrink-0"
title="Import JSON"
>
<Upload size={13} />
<span className="hidden md:inline">Import</span>
</button>
{library.labels.length > 0 && (
<button
onClick={() => downloadLibraryAsZip(library.labels)}
className="flex items-center gap-1.5 h-8 px-2.5 rounded-md bg-ink-800 border border-white/5 text-ink-300 hover:text-ink-100 text-ui-sm shrink-0"
title="Export all labels as ZIP"
>
<Download size={13} />
<span className="hidden md:inline">Export all</span>
</button>
)}
<button
onClick={() => {
const dirty = useEditorV2Store.getState().currentLabelDirty;
Expand All @@ -331,12 +337,6 @@ export function LibraryFlyout({ onClose }: Props) {
<Plus size={13} />
<span className="hidden md:inline">New label</span>
</button>
<button
onClick={onClose}
className="hidden md:block text-ink-400 hover:text-ink-100"
>
<X size={15} />
</button>
</div>
</div>

Expand Down
34 changes: 34 additions & 0 deletions packages/web/src/lib/library.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { zipSync, strToU8 } from "fflate";
import type { BaseElement, LabelSize } from "../store/editor-store.ts";

// ---- Types ----
Expand Down Expand Up @@ -72,6 +73,39 @@ export function downloadLabelAsJson(label: SavedLabel): void {
URL.revokeObjectURL(url);
}

export function downloadLibraryAsZip(labels: SavedLabel[]): void {
const files: Record<string, Uint8Array> = {};
const usedNames = new Set<string>();

for (const label of labels) {
let baseName = label.name.replace(/[^a-zA-Z0-9_-]/g, "_");
let fileName = baseName;
let i = 1;
while (usedNames.has(fileName)) {
fileName = `${baseName}_${i++}`;
}
usedNames.add(fileName);

const data = {
name: label.name,
label: label.label,
elements: label.elements,
createdAt: label.createdAt,
updatedAt: label.updatedAt,
};
files[`${fileName}.json`] = strToU8(JSON.stringify(data, null, 2));
}

const zipped = zipSync(files);
const blob = new Blob([zipped.buffer as ArrayBuffer], { type: "application/zip" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `thermoprint-library-${new Date().toISOString().slice(0, 10)}.zip`;
a.click();
URL.revokeObjectURL(url);
}

export function importLabelFromJson(file: File): Promise<Omit<SavedLabel, "id">> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
Expand Down
Loading