feat: show preview bar on click

glzr-io · Feb 9, 2025 · cbbf7b7 · cbbf7b7
1 parent 6beebe6
commit cbbf7b7
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 24 deletions.
diff --git a/packages/settings-ui/src/common/desktop/CommunityPacksContext.tsx b/packages/settings-ui/src/common/desktop/CommunityPacksContext.tsx
@@ -1,4 +1,11 @@
-import { createContext, type JSX, Resource, useContext } from 'solid-js';
+import {
+  Accessor,
+  createContext,
+  createSignal,
+  type JSX,
+  Resource,
+  useContext,
+} from 'solid-js';
 import { createResource } from 'solid-js';
 
 import { WidgetPack } from './UserPacksContext';
@@ -43,6 +50,9 @@ const communityPacksMock = [
 
 type CommunityPacksContextState = {
   all: Resource<WidgetPack[]>;
+  previewPack: Accessor<WidgetPack | null>;
+  startPreview: (pack: WidgetPack) => void;
+  stopPreview: () => void;
 };
 
 const CommunityPacksContext = createContext<CommunityPacksContextState>();
@@ -53,8 +63,23 @@ export function CommunityPacksProvider(props: { children: JSX.Element }) {
     initialValue: [],
   });
 
+  const [previewPack, setPreviewPack] = createSignal<WidgetPack | null>(
+    null,
+  );
+
+  function startPreview(pack: WidgetPack) {
+    setPreviewPack(pack);
+  }
+
+  function stopPreview() {
+    setPreviewPack(null);
+  }
+
   const store: CommunityPacksContextState = {
     all,
+    previewPack,
+    startPreview,
+    stopPreview,
   };
 
   return (

diff --git a/packages/settings-ui/src/common/layout/AppLayout.tsx b/packages/settings-ui/src/common/layout/AppLayout.tsx
@@ -3,16 +3,19 @@ import {
   ResizableHandle,
   ResizablePanel,
 } from '@glzr/components';
-import { createSignal, type JSX } from 'solid-js';
+import { createSignal, Show, type JSX } from 'solid-js';
 import { RouteSectionProps } from '@solidjs/router';
 
 import { Sidebar } from './Sidebar';
+import { PreviewBar } from './PreviewBar';
+import { useCommunityPacks } from '~/common';
 
 export interface AppLayoutProps {
   children: JSX.Element;
 }
 
 export function AppLayout(props: AppLayoutProps & RouteSectionProps) {
+  const communityPacks = useCommunityPacks();
   const [sizes, setSizes] = createSignal<number[]>([0.2, 0.8]);
 
   return (
@@ -29,6 +32,12 @@ export function AppLayout(props: AppLayoutProps & RouteSectionProps) {
           {props.children}
         </ResizablePanel>
       </Resizable>
+
+      <Show when={communityPacks.previewPack()}>
+        {pack => (
+          <PreviewBar pack={pack()} onStop={communityPacks.stopPreview} />
+        )}
+      </Show>
     </>
   );
 }
diff --git a/packages/settings-ui/src/common/layout/PreviewBar.tsx b/packages/settings-ui/src/common/layout/PreviewBar.tsx
@@ -0,0 +1,24 @@
+import { Button } from '@glzr/components';
+import { IconPlayerPause } from '@tabler/icons-solidjs';
+
+import { WidgetPack } from '~/common';
+
+export type PreviewBarProps = {
+  pack: WidgetPack;
+  onStop: () => void;
+};
+
+export function PreviewBar(props: PreviewBarProps) {
+  return (
+    <div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-black rounded-lg px-4 py-3 shadow-lg flex items-center gap-4 text-white">
+      <p>
+        Previewing <span class="font-medium">{props.pack.name}</span>
+      </p>
+
+      <Button variant="ghost" size="sm" onClick={() => props.onStop()}>
+        <IconPlayerPause class="h-4 w-4 mr-2" />
+        Stop Preview
+      </Button>
+    </div>
+  );
+}
diff --git a/packages/settings-ui/src/community/CommunityPacks.tsx b/packages/settings-ui/src/community/CommunityPacks.tsx
@@ -1,6 +1,6 @@
 import { Button, TextField } from '@glzr/components';
 import { A } from '@solidjs/router';
-import { IconDownload, IconEye, IconSearch } from '@tabler/icons-solidjs';
+import { IconDownload, IconEye } from '@tabler/icons-solidjs';
 import { createForm, Field } from 'smorf';
 import { createMemo } from 'solid-js';
 
@@ -46,22 +46,16 @@ export function CommunityPacks() {
           </p>
         </div>
 
-        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <div class="relative">
-            <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-
-            <Field of={filterQueryForm} path="search">
-              {inputProps => (
-                <TextField
-                  id="search"
-                  placeholder="Search widget packs..."
-                  class="pl-8 w-full sm:w-[300px]"
-                  {...inputProps()}
-                />
-              )}
-            </Field>
-          </div>
-        </div>
+        <Field of={filterQueryForm} path="search">
+          {inputProps => (
+            <TextField
+              id="search"
+              placeholder="Search widget packs..."
+              class="w-full sm:w-[300px]"
+              {...inputProps()}
+            />
+          )}
+        </Field>
 
         <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {filteredPacks().map(pack => (
@@ -83,15 +77,23 @@ export function CommunityPacks() {
                       by {pack.author}
                     </p>
                   </div>
-                  <div class="flex items-center gap-3">
-                    <Button variant="ghost" size="icon" class="h-8 w-8">
-                      <IconEye class="h-4 w-4" />
-                      <span class="sr-only">Preview</span>
-                    </Button>
+                  <div class="flex items-center gap-2">
                     <Button variant="ghost" size="icon" class="h-8 w-8">
                       <IconDownload class="h-4 w-4" />
                       <span class="sr-only">Install</span>
                     </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      class="h-8 w-8"
+                      onClick={e => {
+                        e.preventDefault();
+                        communityPacks.startPreview(pack);
+                      }}
+                    >
+                      <IconEye class="h-4 w-4" />
+                      <span class="sr-only">Preview</span>
+                    </Button>
                   </div>
                 </div>
               </A>