Offline: a button to keep a studio for offline use now

Closed
  • Is something wrong?
#500 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
nextjs, node.js, typescript
Domain
frontend, performance, web-dev

Research direction

Start with the existing offline logic in scripts/service-worker-source.mjs (the rememberRoute function and the REMEMBER_ROUTE message), then read components/projects/storage-panel.tsx and hooks/use-kept-studios.ts. Done means a Keep selected button in the Storage panel that fetches only the chosen studios, shows progress and size, reports what did not fit under the 300-file cap, and passes an end-to-end test that keeps a never-opened studio, goes offline and opens it.

Written by the indexing model from the issue text.

Description

area: ui difficulty: medium enhancement help wanted v2.0.0

Summary

A studio is kept for offline use only after it has been opened with a connection. Someone about to lose their connection cannot prepare. Add a Keep for offline button in the Storage panel that fetches the studios they choose now.

Part of the 2.0.0 plan: fewer, better and fully tested studios, on a calmer and faster site.

Where to look

  • components/projects/storage-panel.tsx
  • scripts/service-worker-source.mjs: rememberRoute and the REMEMBER_ROUTE message
  • hooks/use-kept-studios.ts

Behaviour

  • List the studios with a checkbox each and their state (kept or not), and a Keep selected button that sends the worker one message per studio.
  • Show progress and the size added, and never fetch without the person asking.
  • Respect the 300 file cap of the runtime cache and say if something did not fit.

Acceptance criteria

  • An end-to-end test keeps a studio that was never opened, goes offline and opens it.
  • The sidebar marker updates when it is kept.
  • docs/storage.md and the FAQ describe it.

Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build (CI fails on unformatted files, so pnpm format first). See CONTRIBUTING.md and the first contribution walkthrough.

Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.

Dominant language
TypeScript
Stars
11
Forks
3
Avg merge
5h 44m
Merged PRs (30d)
72

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from yakew7/DesignHub

All issues in yakew7/DesignHub

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.