feat: add history and favourites system#38
Merged
Conversation
- Add MoleculeEntry type to src/types/molecule.ts - Create src/utils/storage.ts with localStorage helpers and display name logic - Create src/hooks/useMoleculeHistory.ts (max 50 entries, deduplication, addEntry/removeEntry/clearHistory) - Create src/hooks/useFavourites.ts (toggleFavourite, isFavourite, clearFavourites) - Create src/components/HistoryFavouritesPanel.tsx with restore, star, and remove actions - Update App.tsx: tabbed panel (Search / History / Favourites), wire hooks, save history on successful lookup - Update InputForm.tsx: favourite star button in header when molecule is loaded Resolves #9 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
There was a problem hiding this comment.
Pull request overview
Adds a persistent “History” and “Favourites” feature to Modelcules by storing molecule entries in localStorage and exposing them via new React hooks and a tabbed dropdown panel UI.
Changes:
- Introduces
MoleculeEntrypluslocalStoragehelpers for history/favourites persistence. - Adds
useMoleculeHistoryanduseFavouriteshooks to manage entry lists and toggling logic. - Updates the dropdown panel to a 3-tab UI (Search/History/Favourites) and adds star controls in the Search header and list items.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
src/types/molecule.ts |
Adds MoleculeEntry to represent persisted history/favourite items. |
src/utils/storage.ts |
Adds localStorage load/save helpers plus display-name and key derivation utilities. |
src/hooks/useMoleculeHistory.ts |
New hook for capped, de-duplicated history list persisted to storage. |
src/hooks/useFavourites.ts |
New hook for favourites persistence and toggle logic. |
src/components/HistoryFavouritesPanel.tsx |
New shared list UI for history/favourites entries with restore/star/remove actions. |
src/App.tsx |
Wires hooks into the main app, adds tabbed panel UI, and saves successful lookups to history. |
src/components/InputForm.tsx |
Adds a header star button to toggle favourites from the Search tab. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+17
to
+35
| const toggleFavourite = useCallback((identifiers: ChemicalIdentifiers) => { | ||
| const key = getMoleculeKey(identifiers); | ||
| setFavourites(prev => { | ||
| let next: MoleculeEntry[]; | ||
| if (key && prev.some(e => getMoleculeKey(e.identifiers) === key)) { | ||
| next = prev.filter(e => getMoleculeKey(e.identifiers) !== key); | ||
| } else { | ||
| const entry: MoleculeEntry = { | ||
| id: key || crypto.randomUUID(), | ||
| displayName: getDisplayName(identifiers), | ||
| identifiers, | ||
| timestamp: Date.now(), | ||
| }; | ||
| next = [entry, ...prev]; | ||
| } | ||
| saveFavourites(next); | ||
| return next; | ||
| }); | ||
| }, []); |
Comment on lines
+245
to
+247
| isFavourite={isFavourite(identifiers)} | ||
| onToggleFavourite={() => toggleFavourite(identifiers)} | ||
| /> |
Comment on lines
+86
to
+90
| <button | ||
| onClick={() => onRemove(entry.id)} | ||
| className="flex-shrink-0 p-0.5 text-gray-300 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100" | ||
| title="Remove" | ||
| > |
- useFavourites: guard toggleFavourite against empty key to prevent unstable favourites - App.tsx: only pass onToggleFavourite when a stable key exists and not loading - InputForm.tsx: add aria-label to favourite star button - HistoryFavouritesPanel.tsx: add aria-label to star and remove buttons; make remove visible on keyboard focus Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #9
Summary
Implements a history and favourites system for Modelcules, persisted to
localStorage.What's new
Auto-save History
Every successful molecule lookup is automatically saved to a browsing history (capped at 50 entries). Duplicate molecules (matched by SMILES / InChI / CAS Number) are moved to the top instead of duplicated.
Favourites
Users can star any loaded molecule to save it to a persistent favourites list. Stars can be toggled from the Search tab header or directly from the History/Favourites list.
Tabbed Panel UI
The existing dropdown panel now has three tabs:
Each list entry has:
Files changed
src/types/molecule.tsMoleculeEntryinterfacesrc/utils/storage.tssrc/hooks/useMoleculeHistory.tssrc/hooks/useFavourites.tssrc/components/HistoryFavouritesPanel.tsxsrc/App.tsxsrc/components/InputForm.tsx