Storage panel: fold its sections so it reads short

Open
  • Is something wrong?
#509 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
68/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
nextjs, tailwindcss, typescript
Domain
accessibility, frontend

Research direction

Start with components/projects/storage-panel.tsx to see the current sections, then read the collapsible prop and its remembered state in components/ui/panel.tsx before grouping the content into Overview, Offline, Projects and Protection. Check docs/storage.md for the intended behaviour and the existing end-to-end tests for the storage panel. Done when, after Check storage, about twelve lines or fewer are visible by default, section state survives a reload, and the axe scan passes with each section open.

Written by the indexing model from the issue text.

Description

area: projects difficulty: easy enhancement good first issue help wanted v2.0.0

Summary

The Storage panel now holds the sizes, the quota, the offline caches, the keep-for-offline list, the protection line, the largest projects and the version trimming. After Check storage it is a long page. Fold it into sections that open one at a time and remember which is open.

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
  • components/ui/panel.tsx: the collapsible prop and its remembered state
  • docs/storage.md

Behaviour

  • Group it as Overview (sizes and quota), Offline (caches and the keep list), Projects (largest and trimming) and Protection.
  • Open Overview by default and remember the rest like the other panels.
  • Keep every control reachable with the keyboard and keep the existing end-to-end tests passing.

Acceptance criteria

  • After Check storage, at most about twelve lines are visible without opening a section.
  • The sections remember their state after a reload.
  • The axe scan passes with each section open.

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 20m
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.