small cleanup

README.md

@@ -22,7 +22,7 @@ To get started:
 
 ## Supported platforms
 
-We support all the most common e-ink displays out there.
+Supported are all the most common e-ink displays out there.
 
 - Pimoroni e-ink frames
 - Waveshare e-ink

frontend/src/scenes/frame/panels/FrameSettings/FrameSettings.tsx

@@ -11,11 +11,11 @@ import { Field } from '../../../../components/Field'
 import { devices } from '../../../../devices'
 import { secureToken } from '../../../../utils/secureToken'
 
-export interface DetailsProps {
+export interface FrameSettingsProps {
   className?: string
 }
 
-export function FrameSettings({ className }: DetailsProps) {
+export function FrameSettings({ className }: FrameSettingsProps) {
   const { frameId, frame, frameFormTouches } = useValues(frameLogic)
   const { touchFrameFormField, setFrameFormValues } = useActions(frameLogic)
   const { deleteFrame } = useActions(framesModel)
@@ -272,3 +272,6 @@ export function FrameSettings({ className }: DetailsProps) {
     </div>
   )
 }
+FrameSettings.PanelTitle = function FrameSettingsPanelTitle(): JSX.Element {
+  return <>Settings</>
+}

frontend/src/scenes/frame/panels/SceneState/SceneState.tsx

@@ -43,10 +43,13 @@ export function SceneState(): JSX.Element {
   return (
     <Form logic={frameLogic} props={{ frameId }} formKey="frameForm">
       <Group name={['scenes', sceneIndex]}>
-        <Select options={sceneOptions} value={sceneId} onChange={editStateScene} />
+        <div className="space-y-2">
+          <H6>Scene</H6>
+          <Select options={sceneOptions} value={sceneId} onChange={editStateScene} />
+        </div>
         <div className="flex justify-between w-full items-center gap-2 mb-2 mt-4">
           <H6>
-            Fields{' '}
+            State fields{' '}
             <div className="inline-block align-text-top">
               <Tooltip
                 title={

frontend/src/scenes/frame/panels/Terminal/Terminal.tsx

@@ -2,17 +2,22 @@ import { H6 } from '../../../../components/H6'
 import { useValues } from 'kea'
 import { frameLogic } from '../../frameLogic'
 import { Reveal } from '../../../../components/Reveal'
+import copy from 'copy-to-clipboard'
+import { ClipboardDocumentIcon } from '@heroicons/react/24/solid'
 
 export function Terminal() {
   const { frame } = useValues(frameLogic)
+  const sshString = `ssh ${frame.ssh_user}@${frame.frame_host}`
   return (
     <div className="space-y-2">
       <H6>TODO: implement inline terminal :/</H6>
       <ul>
-        <li>
-          <code>
-            ssh {frame.ssh_user}@{frame.frame_host}
-          </code>
+        <li className="space-x-2">
+          <code>{sshString}</code>
+          <ClipboardDocumentIcon
+            className="w-4 h-4 min-w-4 min-h-4 cursor-pointer inline-block"
+            onClick={() => copy(sshString)}
+          />
         </li>
         {frame.ssh_pass ? (
           <li className="flex items-center gap-2">