Skip to content

Commit db8010b

Browse files
Aniket-EnggAniket-Engg
committed
save all 3 panel states in localstorage
1 parent 060448c commit db8010b

File tree

3 files changed

+121
-25
lines changed

3 files changed

+121
-25
lines changed

‎apps/remix-ide/src/app/components/right-side-panel.tsx‎

Lines changed: 64 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,36 @@ export class RightSidePanel extends AbstractPanel {
3939
}
4040
})
4141

42-
// Initialize isHidden state from localStorage
43-
const rightSidePanelState = window.localStorage.getItem('rightSidePanelState')
44-
if (rightSidePanelState) {
45-
try {
46-
const state = JSON.parse(rightSidePanelState)
47-
this.isHidden = state.isHidden || false
48-
} catch (e) {
49-
this.isHidden = false
42+
// Initialize isHidden state from panelStates in localStorage
43+
const panelStatesStr = window.localStorage.getItem('panelStates')
44+
let panelStates = panelStatesStr ? JSON.parse(panelStatesStr) : {}
45+
46+
if (panelStates.rightSidePanel) {
47+
this.isHidden = panelStates.rightSidePanel.isHidden || false
48+
49+
// Apply d-none class to hide the panel on reload if it was hidden
50+
if (this.isHidden) {
51+
const pinnedPanel = document.querySelector('#right-side-panel')
52+
pinnedPanel?.classList.add('d-none')
53+
// Initialize hiddenPlugin from panelStates if we have a pluginProfile
54+
if (panelStates.rightSidePanel.pluginProfile) {
55+
this.hiddenPlugin = panelStates.rightSidePanel.pluginProfile
56+
} else {
57+
this.hiddenPlugin = null
58+
}
59+
} else {
60+
this.hiddenPlugin = null
5061
}
5162
} else {
63+
// Initialize with default state if not found
5264
this.isHidden = false
53-
window.localStorage.setItem('rightSidePanelState', JSON.stringify({}))
65+
this.hiddenPlugin = null
66+
// Note: pluginProfile will be set when a plugin is pinned
67+
panelStates.rightSidePanel = {
68+
isHidden: this.isHidden,
69+
pluginProfile: null
70+
}
71+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
5472
}
5573
}
5674

@@ -60,7 +78,10 @@ export class RightSidePanel extends AbstractPanel {
6078
pinnedPanel?.classList.remove('d-none')
6179
this.hiddenPlugin = null
6280
this.isHidden = false
63-
window.localStorage.setItem('rightSidePanelState', JSON.stringify({ pluginProfile: profile, isHidden: false }))
81+
// Update panelStates
82+
const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
83+
panelStates.rightSidePanel = { isHidden: false, pluginProfile: profile }
84+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
6485
this.events.emit('rightSidePanelShown')
6586
this.emit('rightSidePanelShown')
6687
}
@@ -75,23 +96,33 @@ export class RightSidePanel extends AbstractPanel {
7596
this.addView(profile, view)
7697
this.plugins[profile.name].pinned = true
7798
this.plugins[profile.name].active = true
78-
let rightSidePanelState = window.localStorage.getItem('rightSidePanelState')
99+
// Read isHidden state from panelStates
100+
const panelStates = window.localStorage.getItem('panelStates')
79101
let isHidden = false
80-
if (rightSidePanelState) {
81-
rightSidePanelState = JSON.parse(rightSidePanelState)
82-
if (rightSidePanelState['isHidden']) {
83-
isHidden = true
84-
const pinnedPanel = document.querySelector('#right-side-panel')
85-
pinnedPanel?.classList.add('d-none')
86-
this.hiddenPlugin = profile
87-
this.isHidden = true
88-
}
102+
if (panelStates) {
103+
try {
104+
const states = JSON.parse(panelStates)
105+
if (states.rightSidePanel?.isHidden) {
106+
isHidden = true
107+
const pinnedPanel = document.querySelector('#right-side-panel')
108+
pinnedPanel?.classList.add('d-none')
109+
this.hiddenPlugin = profile
110+
this.isHidden = true
111+
}
112+
} catch (e) {}
89113
}
90114
if (!isHidden && !this.hiddenPlugin) {
91115
this.isHidden = false
92116
this.events.emit('rightSidePanelShown')
93117
this.emit('rightSidePanelShown')
94118
}
119+
// Save pinned plugin profile to panelStates
120+
const updatedPanelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
121+
updatedPanelStates.rightSidePanel = {
122+
isHidden: isHidden,
123+
pluginProfile: profile
124+
}
125+
window.localStorage.setItem('panelStates', JSON.stringify(updatedPanelStates))
95126
this.renderComponent()
96127
this.events.emit('pinnedPlugin', profile, isHidden)
97128
this.emit('pinnedPlugin', profile, isHidden)
@@ -103,6 +134,11 @@ export class RightSidePanel extends AbstractPanel {
103134
if (activePlugin !== profile.name) throw new Error(`Plugin ${profile.name} is not pinned`)
104135
await this.call('sidePanel', 'unPinView', profile, this.plugins[profile.name].view)
105136
super.remove(profile.name)
137+
// Clear hiddenPlugin and panel state from localStorage
138+
this.hiddenPlugin = null
139+
const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
140+
delete panelStates.rightSidePanel
141+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
106142
this.renderComponent()
107143
this.events.emit('unPinnedPlugin', profile)
108144
this.emit('unPinnedPlugin', profile)
@@ -125,12 +161,15 @@ export class RightSidePanel extends AbstractPanel {
125161
this.emit('rightSidePanelHidden')
126162
this.events.emit('rightSidePanelHidden')
127163
}
128-
// Persist the hidden state to localStorage
129-
const activePlugin = this.currentFocus()
130-
if (activePlugin && this.plugins[activePlugin]) {
131-
const profile = this.plugins[activePlugin].profile
132-
window.localStorage.setItem('rightSidePanelState', JSON.stringify({ pluginProfile: profile, isHidden: this.isHidden }))
164+
// Persist the hidden state to panelStates, preserving pluginProfile
165+
const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
166+
const currentPlugin = this.currentFocus()
167+
const pluginProfile = currentPlugin && this.plugins[currentPlugin] ? this.plugins[currentPlugin].profile : null
168+
panelStates.rightSidePanel = {
169+
isHidden: this.isHidden,
170+
pluginProfile: pluginProfile
133171
}
172+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
134173
// Re-render to update the toggle icon
135174
this.renderComponent()
136175
}

‎apps/remix-ide/src/app/components/side-panel.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,22 @@ export class SidePanel extends AbstractPanel {
2929

3030
onActivation() {
3131
this.renderComponent()
32+
// Initialize isHidden state from panelStates in localStorage
33+
const panelStatesStr = window.localStorage.getItem('panelStates')
34+
let panelStates = panelStatesStr ? JSON.parse(panelStatesStr) : {}
35+
36+
if (panelStates.leftSidePanel) {
37+
this.isHidden = panelStates.leftSidePanel.isHidden || false
38+
} else {
39+
// Initialize with default state if not found
40+
this.isHidden = false
41+
// Note: pluginProfile will be set when showContent is called
42+
panelStates.leftSidePanel = {
43+
isHidden: this.isHidden,
44+
pluginProfile: null
45+
}
46+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
47+
}
3248
// Toggle content
3349
this.on('menuicons', 'toggleContent', (name) => {
3450
if (!this.plugins[name]) return
@@ -102,6 +118,12 @@ export class SidePanel extends AbstractPanel {
102118
async showContent(name) {
103119
super.showContent(name)
104120
this.emit('focusChanged', name)
121+
// Save active plugin to panelStates
122+
const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
123+
if (!panelStates.leftSidePanel) panelStates.leftSidePanel = {}
124+
panelStates.leftSidePanel.pluginProfile = this.plugins[name]?.profile
125+
panelStates.leftSidePanel.isHidden = this.isHidden || false
126+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
105127
this.renderComponent()
106128
}
107129

@@ -118,6 +140,14 @@ export class SidePanel extends AbstractPanel {
118140
this.emit('leftSidePanelHidden')
119141
this.events.emit('leftSidePanelHidden')
120142
}
143+
// Persist the hidden state and active plugin to panelStates
144+
const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
145+
const activePlugin = this.currentFocus()
146+
panelStates.leftSidePanel = {
147+
isHidden: this.isHidden,
148+
pluginProfile: this.plugins[activePlugin]?.profile
149+
}
150+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
121151
}
122152

123153
isPanelHidden() {

‎apps/remix-ide/src/app/panels/terminal.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,26 @@ export default class Terminal extends Plugin {
115115

116116
onActivation() {
117117
this.renderComponent()
118+
// Initialize isHidden state from panelStates in localStorage
119+
const panelStatesStr = window.localStorage.getItem('panelStates')
120+
let panelStates = panelStatesStr ? JSON.parse(panelStatesStr) : {}
121+
122+
if (panelStates.bottomPanel) {
123+
this.isHidden = panelStates.bottomPanel.isHidden || false
124+
// Apply d-none class to hide the terminal on reload if it was hidden
125+
if (this.isHidden) {
126+
const terminalPanel = document.querySelector('.terminal-wrap')
127+
terminalPanel?.classList.add('d-none')
128+
}
129+
} else {
130+
// Initialize with default state if not found
131+
this.isHidden = false
132+
panelStates.bottomPanel = {
133+
isHidden: this.isHidden,
134+
pluginProfile: this.profile
135+
}
136+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
137+
}
118138
}
119139

120140
onDeactivation() {
@@ -143,6 +163,13 @@ export default class Terminal extends Plugin {
143163
terminalPanel?.classList.add('d-none')
144164
this.emit('terminalPanelHidden')
145165
}
166+
// Persist the hidden state and plugin profile to panelStates
167+
const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
168+
panelStates.bottomPanel = {
169+
isHidden: this.isHidden,
170+
pluginProfile: this.profile
171+
}
172+
window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
146173
}
147174

148175
isPanelHidden() {

0 commit comments

Comments
 (0)