refactor: improve widget pack type definitions and card component

Author: lars-berger

packages/settings-ui/src/common/desktop/MarketplacePacksContext.tsx

@@ -129,7 +129,7 @@ const marketplacePacksMock: MarketplaceWidgetPack[] = [
 
 type MarketplacePacksContextState = {
   allPacks: Resource<MarketplaceWidgetPack[]>;
-  selectedPack: Resource<MarketplaceWidgetPack>;
+  selectedPack: Resource<MarketplaceWidgetPack | null>;
   previewPack: Accessor<MarketplaceWidgetPack | null>;
   install: (pack: MarketplaceWidgetPack) => void;
   selectPack: (packId: string) => void;

packages/settings-ui/src/common/desktop/UserPacksContext.tsx

@@ -87,19 +87,31 @@ const downloadedPacksMock: WidgetPack[] = [
   },
 ];
 
-export type WidgetPack = {
-  id: string;
-  name: string;
-  author: string;
-  type: 'local' | 'marketplace';
-  previewImages: string[];
-  excludeFiles: string;
-  directoryPath: string;
-  description: string;
-  version: string;
-  widgetConfigs: WidgetConfigEntry[];
-  tags: string[];
-};
+export type WidgetPack =
+  | {
+      type: 'marketplace';
+      id: string;
+      name: string;
+      author: string;
+      previewImages: string[];
+      excludeFiles: string;
+      directoryPath: string;
+      description: string;
+      version: string;
+      widgetConfigs: WidgetConfigEntry[];
+      tags: string[];
+    }
+  | {
+      type: 'local';
+      id: string;
+      name: string;
+      previewImages: string[];
+      excludeFiles: string;
+      directoryPath: string;
+      description: string;
+      widgetConfigs: WidgetConfigEntry[];
+      tags: string[];
+    };
 
 export type WidgetConfigEntry = {
   absolutePath: string;

packages/settings-ui/src/user-packs/WidgetPackCard.tsx

@@ -11,13 +11,13 @@ import {
 } from '@glzr/components';
 import { useNavigate } from '@solidjs/router';
 import { IconPackage, IconTrash } from '@tabler/icons-solidjs';
+import { Show } from 'solid-js';
 
 import { WidgetPack } from '~/common';
 import { DeleteWidgetPackDialog } from './dialogs';
 
 export interface WidgetPackCardProps {
   pack: WidgetPack;
-  isLocal: boolean;
   onDelete: (packId: string) => void;
 }
 
@@ -35,14 +35,19 @@ export function WidgetPackCard(props: WidgetPackCardProps) {
             <CardTitle class="flex items-center gap-2">
               <IconPackage class="h-5 w-5" />
               {props.pack.name}
-              <Badge variant="outline" class="ml-2">
-                {props.pack.version}
-              </Badge>
+
+              {props.pack.type === 'marketplace' && (
+                <Badge variant="outline" class="ml-2">
+                  {props.pack.version}
+                </Badge>
+              )}
             </CardTitle>
 
-            <CardDescription class="mt-1">
-              by {props.pack.author}
-            </CardDescription>
+            {props.pack.type === 'marketplace' && (
+              <CardDescription class="mt-1">
+                by {props.pack.author}
+              </CardDescription>
+            )}
           </div>
 
           <div class="flex gap-2" onClick={e => e.stopPropagation()}>
@@ -66,16 +71,20 @@ export function WidgetPackCard(props: WidgetPackCardProps) {
       </CardHeader>
 
       <CardContent>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-          {props.pack.description}
-        </p>
+        <Show when={props.pack.description !== ''}>
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            {props.pack.description}
+          </p>
+        </Show>
+
         <div class="flex flex-wrap gap-2 mb-4">
           {props.pack.tags.map(tag => (
             <Badge key={tag} variant="secondary">
               {tag}
             </Badge>
           ))}
         </div>
+
         <div class="text-sm">
           <p>
             <strong>Widgets:</strong> {props.pack.widgetConfigs.length}

packages/settings-ui/src/user-packs/WidgetPacksPage.tsx

@@ -67,7 +67,6 @@ export function WidgetPacksPage() {
             {pack => (
               <WidgetPackCard
                 pack={pack}
-                isLocal={false}
                 onDelete={userPacks.deletePack}
               />
             )}
@@ -79,7 +78,6 @@ export function WidgetPacksPage() {
             {pack => (
               <WidgetPackCard
                 pack={pack}
-                isLocal={true}
                 onDelete={userPacks.deletePack}
               />
             )}