Skip to content

Commit

Permalink
feat: add sidebar to widget page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lars-berger
lars-berger committed Feb 11, 2025
1 parent 4f7434d commit b6b4c46
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 76 deletions.
8 changes: 6 additions & 2 deletions packages/settings-ui/src/common/desktop/CommunityPacksContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const communityPacksMock = [
],
description: 'CPU, memory, and disk usage widgets',
version: '1.0.0',
license: 'MIT',
tags: ['system', 'monitor', 'cpu', 'memory', 'disk'],
widgets: [
{ id: 'cpu-usage', name: 'CPU Usage' },
Expand All @@ -35,18 +34,21 @@ const communityPacksMock = [
versionNumber: '2.1.0',
publishDate: new Date('2024-01-15'),
commitHash: '8f62a3d',
repoUrl: 'https://github.com/zebar-team/system-monitor',
releaseNotes: 'Added dark mode support and new KPI cards',
},
{
versionNumber: '2.0.1',
publishDate: new Date('2023-12-20'),
commitHash: '3e7b9c2',
repoUrl: 'https://github.com/zebar-team/system-monitor',
releaseNotes: 'Fixed responsive layout issues',
},
{
versionNumber: '2.0.0',
publishDate: new Date('2023-12-01'),
commitHash: '1a2b3c4',
repoUrl: 'https://github.com/zebar-team/system-monitor',
releaseNotes: 'Major redesign and performance improvements',
},
],
Expand All @@ -61,7 +63,6 @@ const communityPacksMock = [
],
description: 'Current weather and forecast widgets',
version: '2.1.0',
license: 'MIT',
tags: ['weather', 'forecast', 'current'],
widgets: [
{ id: 'current-weather', name: 'Current Weather' },
Expand All @@ -72,18 +73,21 @@ const communityPacksMock = [
versionNumber: '2.1.0',
publishDate: new Date('2024-01-15'),
commitHash: '8f62a3d',
repoUrl: 'https://github.com/weather-team/weather-widgets',
releaseNotes: 'Added dark mode support and new KPI cards',
},
{
versionNumber: '2.0.1',
publishDate: new Date('2023-12-20'),
commitHash: '3e7b9c2',
repoUrl: 'https://github.com/weather-team/weather-widgets',
releaseNotes: 'Fixed responsive layout issues',
},
{
versionNumber: '2.0.0',
publishDate: new Date('2023-12-01'),
commitHash: '1a2b3c4',
repoUrl: 'https://github.com/weather-team/weather-widgets',
releaseNotes: 'Major redesign and performance improvements',
},
],
Expand Down
5 changes: 1 addition & 4 deletions packages/settings-ui/src/common/desktop/UserPacksContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const communityPacksMock = [
author: 'Zebar Team',
description: 'CPU, memory, and disk usage widgets',
version: '1.0.0',
license: 'MIT',
tags: ['system', 'monitor', 'cpu', 'memory', 'disk'],
widgets: [
{ id: 'cpu-usage', name: 'CPU Usage' },
Expand All @@ -25,7 +24,6 @@ const communityPacksMock = [
author: 'Weather Team',
description: 'Current weather and forecast widgets',
version: '2.1.0',
license: 'MIT',
tags: ['weather', 'forecast', 'current'],
widgets: [
{ id: 'current-weather', name: 'Current Weather' },
Expand All @@ -41,7 +39,6 @@ const localPacksMock = [
author: 'me',
description: 'Personal collection of widgets',
version: '0.1.0',
license: 'MIT',
widgets: [{ id: 'todo-list', name: 'Todo List' }],
tags: ['todo', 'list', 'custom'],
},
Expand All @@ -56,14 +53,14 @@ export type WidgetPack = {
description: string;
version: string;
widgets: { id: string; name: string }[];
license: string;
tags: string[];
};

export type WidgetPackVersion = {
versionNumber: string;
releaseNotes: string;
commitHash: string;
repoUrl: string;
publishDate: Date;
};

Expand Down
189 changes: 122 additions & 67 deletions packages/settings-ui/src/community/CommunityPack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
BreadcrumbLink,
BreadcrumbSeparator,
BreadcrumbPage,
Card,
CardContent,
} from '@glzr/components';
import { A, useParams } from '@solidjs/router';
import {
Expand All @@ -22,6 +24,7 @@ import {
IconArrowLeft,
IconChevronLeft,
IconChevronRight,
IconBrandGithub,
} from '@tabler/icons-solidjs';

import { createEffect, createSignal, Show } from 'solid-js';
Expand Down Expand Up @@ -142,7 +145,7 @@ export function CommunityPack() {
</div>

{/* Header */}
<div class="flex items-start justify-between">
{/* <div class="flex items-start justify-between">
<div class="flex items-center gap-2">
<Button
variant="outline"
Expand All @@ -160,78 +163,130 @@ export function CommunityPack() {
Install
</Button>
</div>
</div>
</div> */}

{/* Content */}
<Tabs defaultValue="readme" class="space-y-6">
<TabsList>
<TabsTrigger value="readme">Readme</TabsTrigger>
<TabsTrigger value="widgets">Included widgets</TabsTrigger>
<TabsTrigger value="versions">
Versions
<Badge class="ml-1" variant="secondary">
{selectedPack().versions.length}
</Badge>
</TabsTrigger>
</TabsList>

<TabsContent value="readme" class="space-y-6">
<div class="prose prose-sm dark:prose-invert max-w-none">
<div class="whitespace-pre-line">
{selectedPack().description}
</div>
</div>
<div class="flex flex-wrap gap-2">
{selectedPack().tags.map(tag => (
<Badge key={tag} variant="secondary">
{tag}
</Badge>
))}
<div class="grid grid-cols-1 md:grid-cols-[1fr_300px] gap-8">
{/* Action buttons and repo - full width on mobile, sidebar on desktop */}
<div class="space-y-4 md:order-2 md:col-start-2">
<div class="flex flex-col gap-2">
<Button
class="w-full"
onClick={() => communityPacks.install(selectedPack())}
>
<IconDownload class="mr-2 h-4 w-4" />
Install
</Button>
<Button
variant="outline"
class="w-full"
onClick={() =>
communityPacks.startPreview(selectedPack())
}
>
<IconEye class="mr-2 h-4 w-4" />
Preview
</Button>
</div>
</TabsContent>

<TabsContent value="widgets" class="space-y-6">
<div class="grid gap-6 sm:grid-cols-2">
{selectedPack().widgets.map(widget => (
<div class="group relative space-y-3">
<div>
<h3 class="font-medium">{widget.name}</h3>
</div>

<Card>
<CardContent>
<div class="space-y-2 mt-3">
<h3 class="font-medium">Repository</h3>
<a
href={selectedPack().versions?.[0].repoUrl}
class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
target="_blank"
>
<IconBrandGithub class="h-4 w-4" />
{new URL(
selectedPack().versions?.[0].repoUrl,
).pathname.slice(1)}
</a>
</div>
))}
</div>
</TabsContent>

<TabsContent value="versions" class="space-y-6">
<div class="space-y-4">
{selectedPack().versions.map(version => (
<div class="flex items-start justify-between border-b pb-4">
<div class="space-y-1">
<div class="flex items-center gap-2">
<h3 class="font-medium">
v{version.versionNumber}
</h3>
<span class="text-sm text-muted-foreground">
•{' '}
{new Date(
version.publishDate,
).toLocaleDateString()}
</span>
</div>
<p class="text-sm text-muted-foreground">
{version.releaseNotes}
</p>

<div class="space-y-2 mt-1">
<h3 class="font-medium">Tags</h3>
<div class="flex flex-wrap gap-2">
{selectedPack().tags.map(tag => (
<Badge key={tag} variant="secondary">
{tag}
</Badge>
))}
</div>
<div class="text-sm text-muted-foreground">
<code class="px-2 py-1 rounded-md bg-muted">
{version.commitHash}
</code>
</div>
</CardContent>
</Card>
</div>

{/* Left side with TabsList */}
<div class="md:row-span-2">
{/* Content */}
<Tabs defaultValue="readme" class="space-y-6">
<TabsList>
<TabsTrigger value="readme">Readme</TabsTrigger>
<TabsTrigger value="widgets">
Included widgets
</TabsTrigger>
<TabsTrigger value="versions">
Versions
<Badge class="ml-1" variant="secondary">
{selectedPack().versions.length}
</Badge>
</TabsTrigger>
</TabsList>

<TabsContent value="readme" class="space-y-6">
<div class="prose prose-sm dark:prose-invert max-w-none">
<div class="whitespace-pre-line">
{selectedPack().description}
</div>
</div>
))}
</div>
</TabsContent>
</Tabs>
</TabsContent>

<TabsContent value="widgets" class="space-y-6">
<div class="grid gap-6 sm:grid-cols-2">
{selectedPack().widgets.map(widget => (
<div class="group relative space-y-3">
<div>
<h3 class="font-medium">{widget.name}</h3>
</div>
</div>
))}
</div>
</TabsContent>

<TabsContent value="versions" class="space-y-6">
<div class="space-y-4">
{selectedPack().versions.map(version => (
<div class="flex items-start justify-between border-b pb-4">
<div class="space-y-1">
<div class="flex items-center gap-2">
<h3 class="font-medium">
v{version.versionNumber}
</h3>
<span class="text-sm text-muted-foreground">
•{' '}
{new Date(
version.publishDate,
).toLocaleDateString()}
</span>
</div>
<p class="text-sm text-muted-foreground">
{version.releaseNotes}
</p>
</div>
<div class="text-sm text-muted-foreground">
<code class="px-2 py-1 rounded-md bg-muted">
{version.commitHash}
</code>
</div>
</div>
))}
</div>
</TabsContent>
</Tabs>
</div>
</div>
</div>
)}
</Show>
Expand Down
3 changes: 0 additions & 3 deletions packages/settings-ui/src/user-packs/WidgetPackCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,6 @@ export function WidgetPackCard(props: WidgetPackCardProps) {
<p>
<strong>Widgets:</strong> {props.pack.widgets.length}
</p>
<p>
<strong>License:</strong> {props.pack.license}
</p>
</div>
</CardContent>
</Card>
Expand Down

0 comments on commit b6b4c46

Please sign in to comment.