wip: add tabs and layout size

heiso · Jan 11, 2025 · 4588fdf · 4588fdf
1 parent 517a6f2
commit 4588fdf
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 138 deletions.
diff --git a/.vscode/macrolev.code-workspace b/.vscode/macrolev.code-workspace
@@ -19,6 +19,8 @@
   "settings": {
     "files.associations": {
       "hid.h": "c"
-    }
+    },
+    "typescript.tsdk": "./node_modules/typescript/lib",
+    "tailwindCSS.classAttributes": ["class", "className", ".*Styles", ".*Class"]
   }
 }
diff --git a/web-app/.vscode/settings.json b/web-app/.vscode/settings.json
@@ -2,9 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "typescript.preferences.importModuleSpecifier": "relative",
-  "typescript.tsdk": "./node_modules/typescript/lib",
   "editor.quickSuggestions": {
     "strings": "on"
-  },
-  "tailwindCSS.classAttributes": ["class", "className", ".*Styles", ".*Class"]
+  }
 }
diff --git a/web-app/app/components/keyboard.tsx b/web-app/app/components/keyboard.tsx
diff --git a/web-app/app/routes/config.tsx b/web-app/app/routes/config.tsx
@@ -6,6 +6,7 @@ import {
   type HTMLAttributes,
   type PropsWithChildren,
 } from 'react'
+import { Link } from 'react-router'
 import { SwitchOffsetsConfiguration } from '../components/switch-offsets-configuration'
 import { getNormalizedKLEKeys } from '../kle-parser'
 import KLElayout from '../layout.json'
@@ -197,14 +198,15 @@ function addKey(
   clickedKey: Key,
   direction: 'top' | 'right' | 'bottom' | 'left',
 ): State {
+  const lastId = state.layout.reduce((acc, key) => Math.max(acc, key.id), state.layout[0]?.id || 0)
   return addToHistory(
     fixCoordinatesToZero(
       unselectAll({
         ...state,
         layout: [
           ...state.layout,
           {
-            id: state.layout.length,
+            id: lastId + 1,
             height: clickedKey.height,
             width: clickedKey.width,
             x:
@@ -467,6 +469,20 @@ export default function Index() {
 
   return (
     <div className="p-4 sm:p-8 flex flex-col items-center gap-8">
+      <div className="flex gap-4 text-slate-400 text-xs uppercase">
+        <Link to="" className="hover:text-pink-400 active:text-pink-500 text-pink-400">
+          Hardware layout
+        </Link>
+        |
+        <Link to="" className="hover:text-pink-400 active:text-pink-500">
+          Keymap
+        </Link>
+        |
+        <Link to="" className="hover:text-pink-400 active:text-pink-500">
+          Debug
+        </Link>
+      </div>
+
       <div className="flex w-full justify-center" ref={containerRef}>
         <div className="flex flex-col w-fit gap-4">
           <div className="bg-slate-700 rounded-lg p-4">
@@ -627,6 +643,10 @@ export default function Index() {
               {Math.ceil(state.layout.length / 16) > 1 ? 's' : ''}
             </div>
 
+            <div>
+              pcb dimensions {(width * 19.05).toFixed(1)} x {(height * 19.05).toFixed(1)} mm
+            </div>
+
             {state.layout.length > 0 && (
               <div>
                 <span

diff --git a/web-app/app/ui/button.tsx b/web-app/app/ui/button.tsx
@@ -2,16 +2,17 @@ import { type ButtonHTMLAttributes } from 'react'
 import { Link, type LinkProps } from 'react-router'
 
 const defaultClass =
-  'inline-block rounded-md text-center disabled:pointer-events-none px-9 py-4 font-bold text-large disabled:opacity-50 select-none transition hover:scale-105 active:opacity-80'
-const primaryClass = 'bg-pink-500 text-pink-50 [text-shadow:0_0_1px_rgb(0,0,0,0.4)]'
+  'inline-block rounded-md text-center disabled:pointer-events-none px-9 py-4 font-bold text-large disabled:opacity-50 select-none transition'
+const primaryClass =
+  'bg-pink-500 text-pink-50 [text-shadow:0_0_1px_rgb(0,0,0,0.4)] hover:scale-105 active:bg-pink-400'
 const secondaryClass = 'bg-transparent border'
 
 export type ButtonProps = (
   | (ButtonHTMLAttributes<HTMLButtonElement> & { as?: 'button' })
   | (LinkProps & { as: 'link' })
-) & { primary?: boolean }
+) & { primary?: boolean; size?: 's' | 'm' | 'xl' }
 
-export function Button({ primary, className, children, ...props }: ButtonProps) {
+export function Button({ primary, className, children, size, ...props }: ButtonProps) {
   if (props.as === 'link') {
     return (
       <Link