chore(husky): add pre-commit hooks and fix TypeScript errors

Author: awesomestvi

.githooks/pre-commit

@@ -0,0 +1 @@
+pnpm check && pnpm check:stories && pnpm typecheck && pnpm test

.husky/pre-commit

@@ -22,7 +22,8 @@
     "test:coverage": "vitest --config vitest.unit.config.ts --project unit --coverage",
     "test:storybook": "vitest --project \"storybook:$PWD/.storybook\"",
     "typecheck": "tsc --noEmit",
-    "setup:hooks": "node scripts/setup-hooks.mjs"
+    "setup:hooks": "node scripts/setup-hooks.mjs",
+    "prepare": "husky"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -67,6 +68,7 @@
     "@vitejs/plugin-react": "6.0.1",
     "@vitest/browser-playwright": "^4.1.3",
     "@vitest/coverage-v8": "^4.1.3",
+    "husky": "^9.1.7",
     "jsdom": "^29.0.2",
     "playwright": "^1.59.1",
     "storybook": "^10.3.5",

package.json

@@ -1,6 +1,7 @@
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { type CardSize, isCompactCardSize } from '@/app/components/shared/card-size-selector';
+import { getCardShellSurfaceTokens } from '@/app/components/shared/theme/card-shell-surface-tokens';
 import { useTheme } from '@/app/hooks';
 import { useSettingsStore } from '@/app/stores';
 import { resolveEffectsQuality } from '@/app/utils/effects-quality';
@@ -65,6 +66,7 @@ export const LightCard = memo(function LightCard({
     size,
     isEditMode,
   });
+  const cardShell = getCardShellSurfaceTokens(theme);
   const resolvedEffectsQuality = resolveEffectsQuality(effectsQuality, lowPowerMode);
   const showAmbientLightBleed = ambientLightBleed && resolvedEffectsQuality === 'high';
   const surfaceTokens = getLightCardSurfaceTokens({

pnpm-lock.yaml

@@ -41,13 +41,15 @@ export function getMediaEntityTypeKey(
   deviceClass?: string
 ): MediaEntityTypeKey {
   const normalizedDeviceClass = normalizeMediaEntityType(deviceClass);
-  if (normalizedDeviceClass in MEDIA_ENTITY_TYPE_KEY_BY_NORMALIZED_VALUE) {
-    return MEDIA_ENTITY_TYPE_KEY_BY_NORMALIZED_VALUE[normalizedDeviceClass]!;
+  const deviceClassKey = MEDIA_ENTITY_TYPE_KEY_BY_NORMALIZED_VALUE[normalizedDeviceClass];
+  if (deviceClassKey) {
+    return deviceClassKey;
   }
 
   const normalizedEntityType = normalizeMediaEntityType(entityType);
-  if (normalizedEntityType in MEDIA_ENTITY_TYPE_KEY_BY_NORMALIZED_VALUE) {
-    return MEDIA_ENTITY_TYPE_KEY_BY_NORMALIZED_VALUE[normalizedEntityType]!;
+  const entityTypeKey = MEDIA_ENTITY_TYPE_KEY_BY_NORMALIZED_VALUE[normalizedEntityType];
+  if (entityTypeKey) {
+    return entityTypeKey;
   }
 
   return 'media.type.player';

src/app/features/lighting/components/light-card/index.tsx

@@ -49,7 +49,7 @@ interface MediaCardProps {
 export const MediaCard = memo(function MediaCard({
   id,
   name,
-  room,
+  room: _room,
   title,
   artist,
   entityType,
@@ -242,15 +242,12 @@ export const MediaCard = memo(function MediaCard({
               onArtworkError={handleArtworkError}
               entityName={name}
               entityTypeKey={mediaEntityTypeKey}
-              room={room}
               title={displayTitle}
               artist={displayArtist}
               isActive={!isOff}
               isPlaying={isPlaying}
               volume={volume}
               isMuted={isMuted}
-              elapsedSeconds={elapsedSeconds}
-              durationSeconds={durationSeconds}
               theme={theme}
               onToggleMute={toggleMute}
               onPrevious={handlePrevious}
@@ -268,7 +265,6 @@ export const MediaCard = memo(function MediaCard({
               onArtworkError={handleArtworkError}
               entityName={name}
               entityTypeKey={mediaEntityTypeKey}
-              room={room}
               title={displayTitle}
               artist={displayArtist}
               isActive={!isOff}
@@ -294,15 +290,12 @@ export const MediaCard = memo(function MediaCard({
               onArtworkError={handleArtworkError}
               entityName={name}
               entityTypeKey={mediaEntityTypeKey}
-              room={room}
               title={displayTitle}
               artist={displayArtist}
               isActive={!isOff}
               isPlaying={isPlaying}
               volume={volume}
               isMuted={isMuted}
-              elapsedSeconds={elapsedSeconds}
-              durationSeconds={durationSeconds}
               theme={theme}
               onOpenDialog={openDialog}
               onToggleMute={toggleMute}
@@ -322,7 +315,6 @@ export const MediaCard = memo(function MediaCard({
               artist={displayArtist}
               entityName={name}
               entityTypeKey={mediaEntityTypeKey}
-              room={room}
               isActive={!isOff}
               isPlaying={isPlaying}
               volume={volume}