feat: allow access to fiddle history

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',

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;
+}

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';

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>

src/renderer/components/history-wrapper.tsx

@@ -0,0 +1,78 @@
+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();
+  };
+
+  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';
+
+    return (
+      <>
+        {buttonOnly ? (
+          this.renderHistoryButton()
+        ) : (
+          <>
+            {this.renderHistoryButton()}
+            <GistHistoryDialog
+              key={dialogKey}
+              appState={appState}
+              isOpen={appState.isHistoryShowing}
+              onClose={this.toggleHistory}
+              onRevisionSelect={this.handleRevisionSelect}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+}

src/renderer/components/history.tsx

@@ -0,0 +1,188 @@
+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);
+    const titleLabel = index === 0 ? 'Created' : `Revision ${index}`;
+
+    return (
+      <li
+        key={revision.sha}
+        className="revision-item"
+        onClick={() => this.handleRevisionSelect(revision)}
+      >
+        <div className="revision-content">
+          <h4>
+            <Icon icon="history" className="revision-icon" />
+            {titleLabel}
+            <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 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>
+    );
+  }
+}