feat: persist selected tag & note locally (#1851)

packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx

@@ -9,6 +9,7 @@ import LabsPane from './Labs/Labs'
 import Advanced from '@/Components/Preferences/Panes/General/Advanced/AdvancedSection'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 import PlaintextDefaults from './PlaintextDefaults'
+import Persistence from './Persistence'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -18,6 +19,7 @@ type Props = {
 
 const General: FunctionComponent<Props> = ({ viewControllerManager, application, extensionsLatestVersions }) => (
   <PreferencesPane>
+    <Persistence application={application} />
     <PlaintextDefaults application={application} />
     <Defaults application={application} />
     <Tools application={application} />

packages/web/src/javascripts/Components/Preferences/Panes/General/Persistence.tsx

@@ -0,0 +1,51 @@
+import { WebApplication } from '@/Application/Application'
+import StyledRadioInput from '@/Components/Radio/StyledRadioInput'
+import { useState } from 'react'
+import { Title } from '../../PreferencesComponents/Content'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+type Props = {
+  application: WebApplication
+}
+
+export const ShouldPersistNoteStateKey = 'ShouldPersistNoteState'
+
+const Persistence = ({ application }: Props) => {
+  const [shouldPersistNoteState, setShouldPersistNoteState] = useState(application.getValue(ShouldPersistNoteStateKey))
+
+  const toggleStatePersistence = (shouldPersist: boolean) => {
+    application.setValue(ShouldPersistNoteStateKey, shouldPersist)
+    setShouldPersistNoteState(shouldPersist)
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title className="mb-2">When opening the app, show...</Title>
+        <label className="mb-2 flex items-center gap-2 text-sm font-medium">
+          <StyledRadioInput
+            name="state-persistence"
+            checked={!shouldPersistNoteState}
+            onChange={(event) => {
+              toggleStatePersistence(!event.target.checked)
+            }}
+          />
+          The first note in the list
+        </label>
+        <label className="flex items-center gap-2 text-sm font-medium">
+          <StyledRadioInput
+            name="state-persistence"
+            checked={!!shouldPersistNoteState}
+            onChange={(event) => {
+              toggleStatePersistence(event.target.checked)
+            }}
+          />
+          The last viewed note
+        </label>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default Persistence