From 1ec9d4f1ca1f133d818da1ae0254029e423ec1c7 Mon Sep 17 00:00:00 2001
From: Shelley Vohr <shelley.vohr@gmail.com>
Date: Mon, 5 May 2025 11:44:36 +0200
Subject: [PATCH] feat: allow access to fiddle history

---
 src/interfaces.ts                             |   1 +
 src/less/components/history.less              |  63 ++++++
 src/less/root.less                            |   1 +
 src/renderer/components/commands.tsx          |  10 +-
 src/renderer/components/history-wrapper.tsx   |  84 ++++++++
 src/renderer/components/history.tsx           | 187 ++++++++++++++++++
 .../components/settings-general-gist.tsx      |  90 +++++++++
 .../settings-general-package-author.tsx       |  70 -------
 src/renderer/components/settings-general.tsx  |   4 +-
 src/renderer/remote-loader.ts                 |  42 +++-
 src/renderer/state.ts                         |  11 ++
 .../__snapshots__/commands-spec.tsx.snap      |  20 +-
 ...ap => settings-general-gist-spec.tsx.snap} |  18 +-
 .../settings-general-spec.tsx.snap            |   2 +-
 ...pec.tsx => settings-general-gist-spec.tsx} |  33 +++-
 .../components/settings-general-spec.tsx      |   9 +-
 16 files changed, 545 insertions(+), 100 deletions(-)
 create mode 100644 src/less/components/history.less
 create mode 100644 src/renderer/components/history-wrapper.tsx
 create mode 100644 src/renderer/components/history.tsx
 create mode 100644 src/renderer/components/settings-general-gist.tsx
 delete mode 100644 src/renderer/components/settings-general-package-author.tsx
 rename tests/renderer/components/__snapshots__/{settings-general-package-author-spec.tsx.snap => settings-general-gist-spec.tsx.snap} (50%)
 rename tests/renderer/components/{settings-general-package-author-spec.tsx => settings-general-gist-spec.tsx} (51%)

diff --git a/src/interfaces.ts b/src/interfaces.ts
index 5a5094ac39..8ce6ff4c69 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -236,6 +236,7 @@ export enum GlobalSetting {
   knownVersion = 'known-electron-versions',
   localVersion = 'local-electron-versions',
   packageAuthor = 'packageAuthor',
+  isShowingGistHistory = 'isShowingGistHistory',
   packageManager = 'packageManager',
   showObsoleteVersions = 'showObsoleteVersions',
   showUndownloadedVersions = 'showUndownloadedVersions',
diff --git a/src/less/components/history.less b/src/less/components/history.less
new file mode 100644
index 0000000000..0780cafa18
--- /dev/null
+++ b/src/less/components/history.less
@@ -0,0 +1,63 @@
+.revision-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.revision-list ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.revision-item {
+  padding: 10px;
+  margin-bottom: 5px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-left: 3px solid #106ba3;
+}
+
+.revision-item:hover {
+  background-color: rgba(167, 182, 194, 0.3);
+}
+
+.revision-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.revision-icon {
+  margin-right: 8px;
+}
+
+.sha-label {
+  font-size: 12px;
+  color: #738694;
+  margin-left: 10px;
+  font-family: monospace;
+}
+
+.revision-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.revision-date {
+  color: #738694;
+  font-size: 12px;
+}
+
+.revision-changes {
+  display: flex;
+  gap: 5px;
+}
+
+.history-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
diff --git a/src/less/root.less b/src/less/root.less
index e980ccc204..1ce2f5848f 100644
--- a/src/less/root.less
+++ b/src/less/root.less
@@ -10,6 +10,7 @@
 // Components
 @import 'components/commands.less';
 @import 'components/output.less';
+@import "components/history.less";
 @import 'components/dialogs.less';
 @import 'components/mosaic.less';
 @import 'components/settings.less';
diff --git a/src/renderer/components/commands.tsx b/src/renderer/components/commands.tsx
index 86292d2b38..d3cde2cbb0 100644
--- a/src/renderer/components/commands.tsx
+++ b/src/renderer/components/commands.tsx
@@ -9,6 +9,7 @@ import { AddressBar } from './commands-address-bar';
 import { BisectHandler } from './commands-bisect';
 import { Runner } from './commands-runner';
 import { VersionChooser } from './commands-version-chooser';
+import { HistoryWrapper } from './history-wrapper';
 import { AppState } from '../state';
 
 interface CommandsProps {
@@ -75,7 +76,14 @@ export const Commands = observer(
             <div className="title">{title}</div>
           ) : undefined}
           <div>
-            <AddressBar appState={appState} />
+            <ControlGroup vertical={false}>
+              <AddressBar appState={appState} />
+            </ControlGroup>
+            {appState.isShowingGistHistory && (
+              <ControlGroup vertical={false}>
+                <HistoryWrapper appState={appState} />
+              </ControlGroup>
+            )}
             <GistActionButton appState={appState} />
           </div>
         </div>
diff --git a/src/renderer/components/history-wrapper.tsx b/src/renderer/components/history-wrapper.tsx
new file mode 100644
index 0000000000..330fa59068
--- /dev/null
+++ b/src/renderer/components/history-wrapper.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+import { Button } from '@blueprintjs/core';
+import { observer } from 'mobx-react';
+
+import { GistHistoryDialog } from './history';
+import { AppState } from '../state';
+
+interface HistoryWrapperProps {
+  appState: AppState;
+  buttonOnly?: boolean;
+  className?: string;
+}
+
+/**
+ * A component that observes the appState and manages the history dialog.
+ * Can be rendered as just a button or as a button with a dialog.
+ */
+@observer
+export class HistoryWrapper extends React.Component<HistoryWrapperProps> {
+  private toggleHistory = () => {
+    const { appState } = this.props;
+
+    appState.toggleHistory();
+
+    setTimeout(() => {
+      this.forceUpdate();
+    }, 0);
+  };
+
+  private handleRevisionSelect = async (revisionId: string) => {
+    const { remoteLoader } = window.app;
+    try {
+      await remoteLoader.fetchGistAndLoad(
+        this.props.appState.gistId!,
+        revisionId,
+      );
+    } catch (error: any) {
+      console.error('Failed to load revision', error);
+      this.props.appState.showErrorDialog(
+        `Failed to load revision: ${error.message || 'Unknown error'}`,
+      );
+    }
+  };
+
+  public renderHistoryButton() {
+    const { className } = this.props;
+
+    return (
+      <Button
+        icon="history"
+        onClick={this.toggleHistory}
+        className={className}
+        aria-label="View revision history"
+        data-testid="history-button"
+      />
+    );
+  }
+
+  public render() {
+    const { appState, buttonOnly } = this.props;
+
+    const dialogKey = `history-dialog-${appState.isHistoryShowing}`;
+
+    return (
+      <>
+        {buttonOnly ? (
+          this.renderHistoryButton()
+        ) : (
+          <>
+            {this.renderHistoryButton()}
+            <GistHistoryDialog
+              key={dialogKey}
+              appState={appState}
+              isOpen={appState.isHistoryShowing}
+              onClose={this.toggleHistory}
+              onRevisionSelect={this.handleRevisionSelect}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+}
diff --git a/src/renderer/components/history.tsx b/src/renderer/components/history.tsx
new file mode 100644
index 0000000000..58beb0d138
--- /dev/null
+++ b/src/renderer/components/history.tsx
@@ -0,0 +1,187 @@
+import * as React from 'react';
+
+import {
+  Classes,
+  Dialog,
+  Icon,
+  NonIdealState,
+  Spinner,
+  Tag,
+} from '@blueprintjs/core';
+import { observer } from 'mobx-react';
+
+import { AppState } from '../state';
+
+interface GistRevision {
+  sha: string;
+  date: string;
+  changes: {
+    deletions: number;
+    additions: number;
+    total: number;
+  };
+}
+
+interface HistoryProps {
+  appState: AppState;
+  isOpen: boolean;
+  onClose: () => void;
+  onRevisionSelect: (revisionId: string) => Promise<void>;
+}
+
+interface HistoryState {
+  isLoading: boolean;
+  revisions: GistRevision[];
+  error: string | null;
+}
+
+@observer
+export class GistHistoryDialog extends React.Component<
+  HistoryProps,
+  HistoryState
+> {
+  constructor(props: HistoryProps) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      revisions: [],
+      error: null,
+    };
+  }
+
+  public async componentDidMount() {
+    await this.loadRevisions();
+  }
+
+  private async loadRevisions() {
+    const { appState } = this.props;
+    const { remoteLoader } = window.app;
+
+    if (!appState.gistId) {
+      this.setState({ isLoading: false, error: 'No Gist ID available' });
+      return;
+    }
+
+    this.setState({ isLoading: true, error: null });
+
+    try {
+      const revisions = await remoteLoader.getGistRevisions(appState.gistId);
+      this.setState({ revisions, isLoading: false });
+    } catch (error) {
+      console.error('Failed to load gist revisions', error);
+      this.setState({
+        isLoading: false,
+        error: 'Failed to load revision history',
+      });
+    }
+  }
+
+  private handleRevisionSelect = async (revision: GistRevision) => {
+    try {
+      await this.props.onRevisionSelect(revision.sha);
+      this.props.onClose();
+    } catch (error: any) {
+      console.error('Failed to load revision', error);
+      // show an error  to the user and hide popover
+
+      this.props.appState.showErrorDialog(
+        `Failed to load revision: ${error.message || 'Unknown error'}`,
+      );
+      this.props.onClose();
+    }
+  };
+
+  private renderChangeStats(changes: GistRevision['changes']) {
+    return (
+      <div className="revision-changes">
+        <Tag intent="success" minimal>
+          +{changes.additions}
+        </Tag>
+        <Tag intent="danger" minimal>
+          -{changes.deletions}
+        </Tag>
+        <Tag minimal>{changes.total} total</Tag>
+      </div>
+    );
+  }
+
+  private renderRevisionItem = (revision: GistRevision, index: number) => {
+    const date = new Date(revision.date).toLocaleString();
+    const shortSha = revision.sha.substring(0, 7);
+
+    return (
+      <li
+        key={revision.sha}
+        className="revision-item"
+        onClick={() => this.handleRevisionSelect(revision)}
+      >
+        <div className="revision-content">
+          <h4>
+            <Icon icon="history" className="revision-icon" />
+            {`Revision ${index + 1}`}
+            <span className="sha-label">{shortSha}</span>
+          </h4>
+          <div className="revision-details">
+            <span className="revision-date">{date}</span>
+            {this.renderChangeStats(revision.changes)}
+          </div>
+        </div>
+      </li>
+    );
+  };
+
+  private renderContent() {
+    const { isLoading, revisions, error } = this.state;
+
+    if (isLoading) {
+      return (
+        <div className="history-loading">
+          <Spinner />
+          <p>Loading revision history...</p>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <NonIdealState
+          icon="error"
+          title="Error Loading History"
+          description={error}
+        />
+      );
+    }
+
+    if (revisions.length === 0) {
+      return (
+        <NonIdealState
+          icon="history"
+          title="No Revision History"
+          description="This Gist doesn't have any previous revisions"
+        />
+      );
+    }
+
+    return (
+      <div className="revision-list">
+        <ul>{revisions.map(this.renderRevisionItem)}</ul>
+      </div>
+    );
+  }
+
+  public render() {
+    const { isOpen, onClose } = this.props;
+
+    return (
+      <Dialog
+        isOpen={isOpen}
+        onClose={onClose}
+        title="Revision History"
+        className="gist-history-dialog"
+        icon="history"
+      >
+        <div className={Classes.DIALOG_BODY}>{this.renderContent()}</div>
+      </Dialog>
+    );
+  }
+}
diff --git a/src/renderer/components/settings-general-gist.tsx b/src/renderer/components/settings-general-gist.tsx
new file mode 100644
index 0000000000..3df8984f49
--- /dev/null
+++ b/src/renderer/components/settings-general-gist.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+import { Callout, Checkbox, FormGroup, InputGroup } from '@blueprintjs/core';
+import { observer } from 'mobx-react';
+
+import { AppState } from '../state';
+
+interface GistSettingsProps {
+  appState: AppState;
+}
+
+interface IGistSettingsState {
+  packageAuthor: string;
+  isShowingGistHistory: boolean;
+}
+
+/**
+ * Settings package.json author info
+ */
+export const GistSettings = observer(
+  class GistSettings extends React.Component<
+    GistSettingsProps,
+    IGistSettingsState
+  > {
+    constructor(props: GistSettingsProps) {
+      super(props);
+
+      this.state = {
+        packageAuthor: this.props.appState.packageAuthor,
+        isShowingGistHistory: this.props.appState.isShowingGistHistory,
+      };
+
+      this.handlePackageAuthorChange =
+        this.handlePackageAuthorChange.bind(this);
+      this.handleGistHistoryChange = this.handleGistHistoryChange.bind(this);
+    }
+
+    /**
+     * Set the author information in package.json when processing uploads to gist.
+     */
+    public handlePackageAuthorChange(event: React.FormEvent<HTMLInputElement>) {
+      const { value } = event.currentTarget;
+
+      this.setState({ packageAuthor: value });
+
+      this.props.appState.packageAuthor = value;
+    }
+
+    /**
+     * Toggle the visibility of the Gist history.
+     */
+    public handleGistHistoryChange = (
+      event: React.FormEvent<HTMLInputElement>,
+    ) => {
+      const { checked } = event.currentTarget;
+
+      this.setState({ isShowingGistHistory: checked });
+
+      this.props.appState.isShowingGistHistory = checked;
+    };
+
+    public render() {
+      const PackageAuthorDescription =
+        'Set the package.json author field for your exported Fiddle projects.';
+      const GistHistoryDescription =
+        'Show the history of your Gist uploads and optionally load previous revisions.';
+
+      return (
+        <div>
+          <h4>Gists</h4>
+          <Callout>
+            <FormGroup>
+              <p>{PackageAuthorDescription}</p>
+              <InputGroup
+                value={this.state.packageAuthor}
+                onChange={this.handlePackageAuthorChange}
+              />
+              <p>{GistHistoryDescription}</p>
+              <Checkbox
+                checked={this.state.isShowingGistHistory}
+                label="Show Gist History"
+                onChange={this.handleGistHistoryChange}
+              />
+            </FormGroup>
+          </Callout>
+        </div>
+      );
+    }
+  },
+);
diff --git a/src/renderer/components/settings-general-package-author.tsx b/src/renderer/components/settings-general-package-author.tsx
deleted file mode 100644
index 1035ead6dc..0000000000
--- a/src/renderer/components/settings-general-package-author.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-
-import { Callout, FormGroup, InputGroup } from '@blueprintjs/core';
-import { observer } from 'mobx-react';
-
-import { AppState } from '../state';
-
-interface PackageAuthorSettingsProps {
-  appState: AppState;
-}
-
-interface IPackageAuthorSettingsState {
-  value: string;
-}
-
-/**
- * Settings package.json author info
- */
-export const PackageAuthorSettings = observer(
-  class PackageAuthorSettings extends React.Component<
-    PackageAuthorSettingsProps,
-    IPackageAuthorSettingsState
-  > {
-    constructor(props: PackageAuthorSettingsProps) {
-      super(props);
-
-      this.state = {
-        value: this.props.appState.packageAuthor,
-      };
-
-      this.handlePackageAuthorChange =
-        this.handlePackageAuthorChange.bind(this);
-    }
-
-    /**
-     * Set the author information in package.json when processing uploads to gist
-     */
-    public handlePackageAuthorChange(event: React.FormEvent<HTMLInputElement>) {
-      const { value } = event.currentTarget;
-
-      this.setState({
-        value,
-      });
-
-      this.props.appState.packageAuthor = value;
-    }
-
-    public render() {
-      const packageAuthorLabel =
-        'Set the package.json author field for your exported Fiddle projects.';
-
-      return (
-        <div>
-          <h4>Package Author</h4>
-          <Callout>
-            <FormGroup label={packageAuthorLabel} labelFor="package-author">
-              <InputGroup
-                id="package-author"
-                value={this.state.value}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  this.handlePackageAuthorChange(e)
-                }
-              />
-            </FormGroup>
-          </Callout>
-        </div>
-      );
-    }
-  },
-);
diff --git a/src/renderer/components/settings-general.tsx b/src/renderer/components/settings-general.tsx
index 25bf04eb7e..998b928f13 100644
--- a/src/renderer/components/settings-general.tsx
+++ b/src/renderer/components/settings-general.tsx
@@ -7,9 +7,9 @@ import { AppearanceSettings } from './settings-general-appearance';
 import { BlockAcceleratorsSettings } from './settings-general-block-accelerators';
 import { ConsoleSettings } from './settings-general-console';
 import { FontSettings } from './settings-general-font';
+import { GistSettings } from './settings-general-gist';
 import { GitHubSettings } from './settings-general-github';
 import { MirrorSettings } from './settings-general-mirror';
-import { PackageAuthorSettings } from './settings-general-package-author';
 import { AppState } from '../state';
 
 interface GeneralSettingsProps {
@@ -39,7 +39,7 @@ export const GeneralSettings = observer(
           <Divider />
           <BlockAcceleratorsSettings appState={this.props.appState} />
           <Divider />
-          <PackageAuthorSettings appState={this.props.appState} />
+          <GistSettings appState={this.props.appState} />
           <Divider />
           <MirrorSettings appState={this.props.appState} />
         </div>
diff --git a/src/renderer/remote-loader.ts b/src/renderer/remote-loader.ts
index 3a309bca47..7ffc3cb4f7 100644
--- a/src/renderer/remote-loader.ts
+++ b/src/renderer/remote-loader.ts
@@ -16,6 +16,17 @@ import {
   VersionSource,
 } from '../interfaces';
 
+// Define the GistRevision interface
+interface GistRevision {
+  sha: string;
+  date: string;
+  changes: {
+    deletions: number;
+    additions: number;
+    total: number;
+  };
+}
+
 export class RemoteLoader {
   constructor(private readonly appState: AppState) {
     for (const name of [
@@ -115,13 +126,40 @@ export class RemoteLoader {
     }
   }
 
+  public async getGistRevisions(gistId: string): Promise<GistRevision[]> {
+    console.log('getGistRevisions!');
+    try {
+      const octo = await getOctokit(this.appState);
+      const revisions = await octo.gists.listCommits({
+        gist_id: gistId,
+      });
+
+      console.log('Gist revisions', revisions.data);
+
+      return revisions.data.map((r) => ({
+        sha: r.version,
+        date: r.committed_at,
+        changes: r.change_status,
+      }));
+    } catch (error: any) {
+      this.handleLoadingFailed(error);
+      return [];
+    }
+  }
+
   /**
    * Load a fiddle
    */
-  public async fetchGistAndLoad(gistId: string): Promise<boolean> {
+  public async fetchGistAndLoad(
+    gistId: string,
+    revision?: string,
+  ): Promise<boolean> {
     try {
       const octo = await getOctokit(this.appState);
-      const gist = await octo.gists.get({ gist_id: gistId });
+      const gist = revision
+        ? await octo.gists.getRevision({ gist_id: gistId, sha: revision })
+        : await octo.gists.get({ gist_id: gistId });
+
       const values: EditorValues = {};
 
       for (const [id, data] of Object.entries(gist.data.files)) {
diff --git a/src/renderer/state.ts b/src/renderer/state.ts
index 20d0536e17..a6fba52e38 100644
--- a/src/renderer/state.ts
+++ b/src/renderer/state.ts
@@ -118,6 +118,9 @@ export class AppState {
   public packageAuthor =
     (localStorage.getItem(GlobalSetting.packageAuthor) as string) ??
     window.ElectronFiddle.getUsername();
+  public isShowingGistHistory = !!(
+    this.retrieve(GlobalSetting.isShowingGistHistory) ?? true
+  );
   public electronMirror: typeof ELECTRON_MIRROR =
     (this.retrieve(GlobalSetting.electronMirror) as typeof ELECTRON_MIRROR) ===
     null
@@ -168,6 +171,7 @@ export class AppState {
   public isSettingsShowing = false;
   public isThemeDialogShowing = false;
   public isTokenDialogShowing = false;
+  public isHistoryShowing = false;
   public isTourShowing = !localStorage.getItem(GlobalSetting.hasShownTour);
   public isUpdatingElectronVersions = false;
   public isDownloadingAll = false;
@@ -245,6 +249,7 @@ export class AppState {
       isUpdatingElectronVersions: observable,
       isDeletingAll: observable,
       isDownloadingAll: observable,
+      isShowingGistHistory: observable,
       isUsingSystemTheme: observable,
       localPath: observable,
       modules: observable,
@@ -415,6 +420,7 @@ export class AppState {
           case GlobalSetting.isEnablingElectronLogging:
           case GlobalSetting.isKeepingUserDataDirs:
           case GlobalSetting.isPublishingGistAsRevision:
+          case GlobalSetting.isShowingGistHistory:
           case GlobalSetting.isUsingSystemTheme:
           case GlobalSetting.packageAuthor:
           case GlobalSetting.packageManager:
@@ -536,6 +542,7 @@ export class AppState {
       this.save(GlobalSetting.acceleratorsToBlock, this.acceleratorsToBlock),
     );
     autorun(() => this.save(GlobalSetting.packageAuthor, this.packageAuthor));
+    autorun(() => this.save(GlobalSetting.isShowingGistHistory, false));
     autorun(() => this.save(GlobalSetting.electronMirror, this.electronMirror));
     autorun(() => this.save(GlobalSetting.fontFamily, this.fontFamily));
     autorun(() => this.save(GlobalSetting.fontSize, this.fontSize));
@@ -710,6 +717,10 @@ export class AppState {
     this.resetView({ isSettingsShowing: !this.isSettingsShowing });
   }
 
+  public toggleHistory() {
+    this.isHistoryShowing = !this.isHistoryShowing;
+  }
+
   public updateDownloadProgress(version: string, progress: ProgressObject) {
     const percent = Math.round(progress.percent * 100) / 100;
     const ver = this.versions[version];
diff --git a/tests/renderer/components/__snapshots__/commands-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
index 539ea0b0fa..5f5d02f15a 100644
--- a/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
@@ -44,9 +44,13 @@ exports[`Commands component > renders when system is darwin 1`] = `
     Electron Fiddle
   </div>
   <div>
-    <address-bar
-      appState={"default StateMock"}
-    />
+    <Blueprint3.ControlGroup
+      vertical={false}
+    >
+      <address-bar
+        appState={"default StateMock"}
+      />
+    </Blueprint3.ControlGroup>
     <action-button
       appState={"default StateMock"}
     />
@@ -93,9 +97,13 @@ exports[`Commands component > renders when system not is darwin 1`] = `
     </Blueprint3.ControlGroup>
   </div>
   <div>
-    <address-bar
-      appState={"default StateMock"}
-    />
+    <Blueprint3.ControlGroup
+      vertical={false}
+    >
+      <address-bar
+        appState={"default StateMock"}
+      />
+    </Blueprint3.ControlGroup>
     <action-button
       appState={"default StateMock"}
     />
diff --git a/tests/renderer/components/__snapshots__/settings-general-package-author-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-gist-spec.tsx.snap
similarity index 50%
rename from tests/renderer/components/__snapshots__/settings-general-package-author-spec.tsx.snap
rename to tests/renderer/components/__snapshots__/settings-general-gist-spec.tsx.snap
index 1614e4edc6..764eb51440 100644
--- a/tests/renderer/components/__snapshots__/settings-general-package-author-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-gist-spec.tsx.snap
@@ -3,18 +3,24 @@
 exports[`PackageAuthorSettings component > renders 1`] = `
 <div>
   <h4>
-    Package Author
+    Gists
   </h4>
   <Blueprint3.Callout>
-    <Blueprint3.FormGroup
-      label="Set the package.json author field for your exported Fiddle projects."
-      labelFor="package-author"
-    >
+    <Blueprint3.FormGroup>
+      <p>
+        Set the package.json author field for your exported Fiddle projects.
+      </p>
       <Blueprint3.InputGroup
-        id="package-author"
         onChange={[Function]}
         value="electron<electron@electron.org>"
       />
+      <p>
+        Show the history of your Gist uploads and optionally load previous revisions.
+      </p>
+      <Blueprint3.Checkbox
+        label="Show Gist History"
+        onChange={[Function]}
+      />
     </Blueprint3.FormGroup>
   </Blueprint3.Callout>
 </div>
diff --git a/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap
index 0ea9f18479..f9bd4c9331 100644
--- a/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap
@@ -26,7 +26,7 @@ exports[`GeneralSettings component > renders 1`] = `
     appState={{}}
   />
   <Blueprint3.Divider />
-  <settings-package-author
+  <settings-gist
     appState={{}}
   />
   <Blueprint3.Divider />
diff --git a/tests/renderer/components/settings-general-package-author-spec.tsx b/tests/renderer/components/settings-general-gist-spec.tsx
similarity index 51%
rename from tests/renderer/components/settings-general-package-author-spec.tsx
rename to tests/renderer/components/settings-general-gist-spec.tsx
index 55ccf3e9ea..a65eb7691a 100644
--- a/tests/renderer/components/settings-general-package-author-spec.tsx
+++ b/tests/renderer/components/settings-general-gist-spec.tsx
@@ -4,7 +4,7 @@ import { InputGroup } from '@blueprintjs/core';
 import { shallow } from 'enzyme';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { PackageAuthorSettings } from '../../../src/renderer/components/settings-general-package-author';
+import { GistSettings } from '../../../src/renderer/components/settings-general-gist';
 import { AppState } from '../../../src/renderer/state';
 
 describe('PackageAuthorSettings component', () => {
@@ -15,13 +15,34 @@ describe('PackageAuthorSettings component', () => {
   });
 
   it('renders', () => {
-    const wrapper = shallow(<PackageAuthorSettings appState={store} />);
+    const wrapper = shallow(<GistSettings appState={store} />);
     expect(wrapper).toMatchSnapshot();
   });
 
+  describe('handleGistHistoryChange()', () => {
+    it('handles gist history', async () => {
+      const wrapper = shallow(<GistSettings appState={store} />);
+      const instance: any = wrapper.instance();
+
+      instance.handleGistHistoryChange({
+        currentTarget: { checked: true },
+      } as React.FormEvent<HTMLInputElement>);
+
+      expect(store.isShowingGistHistory).toEqual(true);
+      expect(instance.state.isShowingGistHistory).toEqual(true);
+
+      instance.handleGistHistoryChange({
+        currentTarget: { checked: false },
+      } as React.FormEvent<HTMLInputElement>);
+
+      expect(store.isShowingGistHistory).toEqual(false);
+      expect(instance.state.isShowingGistHistory).toEqual(false);
+    });
+  });
+
   describe('handlePackageAuthorChange()', () => {
     it('handles package author', async () => {
-      const wrapper = shallow(<PackageAuthorSettings appState={store} />);
+      const wrapper = shallow(<GistSettings appState={store} />);
       const instance: any = wrapper.instance();
 
       const author = 'electron<electron@electron.org>';
@@ -31,20 +52,20 @@ describe('PackageAuthorSettings component', () => {
       } as React.FormEvent<HTMLInputElement>);
 
       expect(store.packageAuthor).toEqual(author);
-      expect(instance.state.value).toEqual(author);
+      expect(instance.state.packageAuthor).toEqual(author);
 
       instance.handlePackageAuthorChange({
         currentTarget: { value: 'test' },
       } as React.FormEvent<HTMLInputElement>);
 
       expect(store.packageAuthor).toEqual('test');
-      expect(instance.state.value).toEqual('test');
+      expect(instance.state.packageAuthor).toEqual('test');
 
       const event = { currentTarget: { value: 'test-onchange' } };
       wrapper.find(InputGroup).simulate('change', event);
 
       expect(store.packageAuthor).toEqual('test-onchange');
-      expect(instance.state.value).toEqual('test-onchange');
+      expect(instance.state.packageAuthor).toEqual('test-onchange');
     });
   });
 });
diff --git a/tests/renderer/components/settings-general-spec.tsx b/tests/renderer/components/settings-general-spec.tsx
index 9d17b34b72..1ae763d912 100644
--- a/tests/renderer/components/settings-general-spec.tsx
+++ b/tests/renderer/components/settings-general-spec.tsx
@@ -29,12 +29,9 @@ vi.mock(
   }),
 );
 
-vi.mock(
-  '../../../src/renderer/components/settings-general-package-author',
-  () => ({
-    PackageAuthorSettings: 'settings-package-author',
-  }),
-);
+vi.mock('../../../src/renderer/components/settings-general-gist', () => ({
+  GistSettings: 'settings-gist',
+}));
 
 vi.mock('../../../src/renderer/components/settings-general-mirror', () => ({
   MirrorSettings: 'settings-general-mirror',