From a135d31ae22400910a91de9a0012809cdef5bf2f Mon Sep 17 00:00:00 2001
From: Gergely Nagy <algernon@keyboard.io>
Date: Wed, 27 Jul 2022 11:53:27 +0200
Subject: [PATCH] Preferences: Add a preview of the selected keyboard layout

This addresses a part of #649.

Signed-off-by: Gergely Nagy <algernon@keyboard.io>
---
 .../screens/Preferences/ui/LayoutEditorPreferences.js        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/renderer/screens/Preferences/ui/LayoutEditorPreferences.js b/src/renderer/screens/Preferences/ui/LayoutEditorPreferences.js
index 28324f12..6d817ae7 100644
--- a/src/renderer/screens/Preferences/ui/LayoutEditorPreferences.js
+++ b/src/renderer/screens/Preferences/ui/LayoutEditorPreferences.js
@@ -19,12 +19,14 @@ import KeymapDB from "@api/focus/keymap/db";
 
 import Autocomplete from "@mui/material/Autocomplete";
 import Divider from "@mui/material/Divider";
+import Paper from "@mui/material/Paper";
 import Skeleton from "@mui/material/Skeleton";
 import TextField from "@mui/material/TextField";
 
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
+import Keyboard104 from "@renderer/screens/Editor/Keyboard104";
 import PreferenceSection from "../components/PreferenceSection";
 import PreferenceSwitch from "../components/PreferenceSwitch";
 import PreferenceWithHeading from "../components/PreferenceWithHeading";
@@ -111,6 +113,9 @@ function LayoutEditorPreferences(props) {
           <Skeleton variant="rectangular" />
         )}
       </PreferenceWithHeading>
+      <Paper variant="outlined" square sx={{ p: 2, mt: 1 }}>
+        <Keyboard104 onKeySelect={() => null} layout={layout} />
+      </Paper>
       <Divider sx={{ my: 2, mx: -2 }} />
       <PreferenceSwitch
         loaded={loaded}