From e976d60974a7837967d03807605cbf2e7b4f3f9a Mon Sep 17 00:00:00 2001
From: Nate Sesti <33237525+sestinj@users.noreply.github.com>
Date: Sat, 23 Sep 2023 13:06:00 -0700
Subject: UI Redesign and fixing many details (#496)

* feat: :lipstick: start of major design upgrade

* feat: :lipstick: model selection page

* feat: :lipstick: use shortcut to add highlighted code as ctx

* feat: :lipstick: better display of errors

* feat: :lipstick: ui for learning keyboard shortcuts, more details

* refactor: :construction: testing slash commands ui

* Truncate continue.log

* refactor: :construction: refactoring client_session, ui, more

* feat: :bug: layout fixes

* refactor: :lipstick: ui to enter OpenAI Key

* refactor: :truck: rename MaybeProxyOpenAI -> OpenAIFreeTrial

* starting help center

* removing old shortcut docs

* fix: :bug: fix model setting logic to avoid overwrites

* feat: :lipstick: tutorial and model descriptions

* refactor: :truck: rename unused -> saved

* refactor: :truck: rename model roles

* feat: :lipstick: edit indicator

* refactor: :lipstick: move +, folder icons

* feat: :lipstick: tab to clear all context

* fix: :bug: context providers ui fixes

* fix: :bug: fix lag when stopping step

* fix: :bug: don't override system message for models

* fix: :bug: fix continue button cursor

* feat: :lipstick: title bar

* fix: :bug: updates to code highlighting logic and more

* fix: :bug: fix renaming of summarize model role

* feat: :lipstick: help page and better session title

* feat: :lipstick: more help page / ui improvements

* feat: :lipstick: set session title

* fix: :bug: small fixes for changing sessions

* fix: :bug: perfecting the highlighting code and ctx interactions

* style: :lipstick: sticky headers for scroll, ollama warming

* fix: :bug: fix toggle bug

---------

Co-authored-by: Ty Dunn <ty@tydunn.com>
---
 .../src/components/dialogs/KeyboardShortcuts.tsx   | 129 +++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx

(limited to 'extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx')

diff --git a/extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx b/extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx
new file mode 100644
index 00000000..2a7b735c
--- /dev/null
+++ b/extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx
@@ -0,0 +1,129 @@
+import React from "react";
+import styled from "styled-components";
+import {
+  defaultBorderRadius,
+  lightGray,
+  secondaryDark,
+  vscForeground,
+} from "..";
+import { getPlatform } from "../../util";
+
+const GridDiv = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 2rem;
+  padding: 1rem;
+  justify-items: center;
+  align-items: center;
+
+  border-top: 0.5px solid ${lightGray};
+`;
+
+const KeyDiv = styled.div`
+  border: 0.5px solid ${lightGray};
+  border-radius: ${defaultBorderRadius};
+  padding: 4px;
+  color: ${vscForeground};
+
+  width: 16px;
+  height: 16px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+interface KeyboardShortcutProps {
+  mac: string;
+  windows: string;
+  description: string;
+}
+
+function KeyboardShortcut(props: KeyboardShortcutProps) {
+  const shortcut = getPlatform() === "windows" ? props.windows : props.mac;
+  return (
+    <div className="flex justify-between w-full items-center">
+      <span
+        style={{
+          color: vscForeground,
+        }}
+      >
+        {props.description}
+      </span>
+      <div className="flex gap-2 float-right">
+        {shortcut.split(" ").map((key) => {
+          return <KeyDiv>{key}</KeyDiv>;
+        })}
+      </div>
+    </div>
+  );
+}
+
+const shortcuts: KeyboardShortcutProps[] = [
+  {
+    mac: "⌘ M",
+    windows: "⌃ M",
+    description: "Ask about Highlighted Code",
+  },
+  {
+    mac: "⌘ ⇧ M",
+    windows: "⌃ ⇧ M",
+    description: "Edit Highlighted Code",
+  },
+  {
+    mac: "⌘ ⇧ ↵",
+    windows: "⌃ ⇧ ↵",
+    description: "Accept Diff",
+  },
+  {
+    mac: "⌘ ⇧ ⌫",
+    windows: "⌃ ⇧ ⌫",
+    description: "Reject Diff",
+  },
+  {
+    mac: "⌘ ⇧ L",
+    windows: "⌃ ⇧ L",
+    description: "Quick Text Entry",
+  },
+  {
+    mac: "⌥ ⌘ M",
+    windows: "⌥ ⌃ M",
+    description: "Toggle Auxiliary Bar",
+  },
+  {
+    mac: "⌘ ⇧ R",
+    windows: "⌃ ⇧ R",
+    description: "Debug Terminal",
+  },
+  {
+    mac: "⌥ ⌘ N",
+    windows: "⌥ ⌃ N",
+    description: "New Session",
+  },
+  {
+    mac: "⌘ ⌫",
+    windows: "⌃ ⌫",
+    description: "Stop Active Step",
+  },
+];
+
+function KeyboardShortcutsDialog() {
+  return (
+    <div className="p-2">
+      <h3 className="my-3 mx-auto text-center">Keyboard Shortcuts</h3>
+      <GridDiv>
+        {shortcuts.map((shortcut) => {
+          return (
+            <KeyboardShortcut
+              mac={shortcut.mac}
+              windows={shortcut.windows}
+              description={shortcut.description}
+            />
+          );
+        })}
+      </GridDiv>
+    </div>
+  );
+}
+
+export default KeyboardShortcutsDialog;
-- 
cgit v1.2.3-70-g09d2

