Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine sidebar layout #20

Merged
merged 5 commits into from
Nov 29, 2024
Merged

Refine sidebar layout #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
82395b2
abstract sidebar toggle button
nwaughachukwuma Nov 29, 2024
ee7dd94
allow chatbox container to fill its parent's width
nwaughachukwuma Nov 29, 2024
d9a0544
Refactor chat components for improved layout and sidebar functionality
nwaughachukwuma Nov 29, 2024
df7fefa
finalize
nwaughachukwuma Nov 29, 2024
9e34f9e
remove unused import
nwaughachukwuma Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions app/src/lib/components/ChatBoxContainer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,12 @@
export let disabled = false;
</script>

<div
class="fixed bg-background bottom-0 block w-full max-w-full max-sm:px-2 py-4 sm:max-w-xl lg:max-w-3xl"
>
<div class="bg-background block w-full">
<div class="block w-full items-center">
<ChatBox {showIcon} disabled={loading || disabled} bind:searchTerm on:keypress>
<svelte:fragment slot="icon-right" let:disabled>
<ChatBoxIcon iconType="send" {loading} {disabled} {searchTerm} on:click />
</svelte:fragment>
</ChatBox>

<div class="h-6"></div>
</div>
</div>
20 changes: 11 additions & 9 deletions app/src/lib/components/ChatContainer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,18 @@
</script>

<div
id="chatContainer1"
class="mx-auto flex h-full w-full flex-col overflow-auto items-center gap-1 px-4"
class="mx-auto flex h-full w-full flex-col overflow-hidden justify-between items-center gap-1 relative"
>
<div class="sm:max-w-xl lg:max-w-3xl max-w-full w-full">
<div class="scrollbar-y-1 w-full h-[calc(100%-4rem)] block">
<slot name="content"></slot>
<div class="h-24"></div>
<div id="chatContainer1" class="overflow-auto w-full flex justify-center mx-auto px-4">
<div class="sm:max-w-xl lg:max-w-3xl max-w-full w-full">
<div class="scrollbar-y-1 w-full h-full block">
<slot name="content"></slot>
</div>
</div>
</div>

{#if !hasFinalResponse && !$sessionCompleted$ && !$fetchingSource$ && !$audioSource$}
{#if !hasFinalResponse && !$sessionCompleted$ && !$fetchingSource$ && !$audioSource$}
<div class="shrink-0 w-full sm:max-w-xl lg:max-w-3xl max-w-full max-sm:px-4 px-1 py-4">
<ChatBoxContainer
bind:searchTerm
loading={navLoading}
Expand All @@ -33,6 +35,6 @@
on:keypress
on:click
/>
{/if}
</div>
</div>
{/if}
</div>
2 changes: 1 addition & 1 deletion app/src/lib/components/RenderExamples.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

<div class="w-full h-full block mt-16">
<div class="w-full mx-auto md:w-4/5 mb-6 text-center">
<h3 class="text-2xl sm:text-3xl font-semibold">Start with one of the following</h3>
<h3 class="text-2xl sm:text-3xl font-semibold">Start with one</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pb-4">
{#each contentExamplesDict as [category, content]}
Expand Down
17 changes: 3 additions & 14 deletions app/src/lib/components/RootNav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
import Logo from './Logo.svelte';
import SearchSlideSheet from './SlideSheet.svelte';
import Sidebar from './Sidebar.svelte';
import { Button } from './ui/button';
import { getAppContext } from '$lib/stores/appContext.svelte';
import { invalidateAll } from '$app/navigation';
import { mediaBreakPoints$ } from '@/utils/mediaBreakpoints';
import SidebarToggleButton from './SidebarToggleButton.svelte';

export let sessionId: string;

Expand All @@ -28,20 +28,9 @@
</svelte-fragment>
</SearchSlideSheet>
</div>
{/if}

{#if $mdAndUp}
{:else}
<div class="pl-3 block">
<Button variant="ghost" class="px-2" on:click={() => openSettingsDrawer$.update((v) => !v)}>
<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
<path
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
></path>
</svg>
</Button>
<SidebarToggleButton on:click={() => openSettingsDrawer$.update((v) => !v)} />
</div>
{/if}

Expand Down
93 changes: 53 additions & 40 deletions app/src/lib/components/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,18 @@
import cs from 'clsx';
import { page } from '$app/stores';
import NewAudiocastButton from './NewAudiocastButton.svelte';
import { goto } from '$app/navigation';
import { goto, invalidateAll } from '$app/navigation';
import { env } from '@env';
import SidebarToggleButton from './SidebarToggleButton.svelte';
import Logo from './Logo.svelte';

const dispatch = createEventDispatcher<{ clickItem: void }>();
const { openSettingsDrawer$ } = getAppContext();
const { session$, refreshSidebar$ } = getSessionContext();

$: sidebarItems = getSidebarItems(getSessionItems());
$: if ($refreshSidebar$ || $session$?.title) {

$: if ($refreshSidebar$ || $session$) {
sidebarItems = getSidebarItems(getSessionItems());
}

Expand Down Expand Up @@ -79,12 +81,23 @@
</script>

<div
class={cs('scrollbar-none block h-full shrink-0 overflow-x-hidden bg-gray-900', {
'w-full overflow-y-auto px-2 md:w-72 xl:w-80': $openSettingsDrawer$,
'w-0': !$openSettingsDrawer$
class={cs('scrollbar-none block h-full shrink-0 overflow-y-auto overflow-x-hidden bg-gray-900', {
'w-full px-2 md:w-72 xl:w-80': $openSettingsDrawer$,
'w-0 opacity-0': !$openSettingsDrawer$
})}
style="transition: width 0.3s cubic-bezier(0.34, 1.47, 0.64, 1), padding 0.3s ease;"
>
<div
class="flex pl-1 max-md:hidden mt-[6px] animate-fade-in mb-2 items-center"
class:hidden={!$openSettingsDrawer$}
>
<SidebarToggleButton on:click={() => openSettingsDrawer$.update((v) => !v)} />

<a class="block shrink-0" href="/" on:click={invalidateAll}>
<Logo />
</a>
</div>

<nav
class={cs('flex w-full flex-col gap-x-2 pt-2 lg:gap-x-0 lg:gap-y-1', {
'opacity-100': $openSettingsDrawer$,
Expand All @@ -104,40 +117,40 @@
<span class="px-2 mt-3 font-medium">Your audiocasts will appear here</span>
</div>
</div>
{/if}
{:else}
<div class="flex w-full flex-col gap-y-1.5 pt-2" class:hidden={!inLast24Hrs.length}>
<div class="px-2 text-sm font-semibold">Last 24 hrs</div>
{#each inLast24Hrs as item (item.sessionId)}
<SidebarItem
{item}
on:click={dispatchClickItem}
on:deleteSession={deleteSession(item.sessionId)}
/>
{/each}
</div>

<div class="flex w-full flex-col gap-y-1.5 pt-6" class:hidden={!inLast7Days.length}>
<div class="px-2 text-sm font-semibold">Last 7 days</div>
{#each inLast7Days as item (item.sessionId)}
<SidebarItem
{item}
on:click={dispatchClickItem}
on:deleteSession={deleteSession(item.sessionId)}
/>
{/each}
</div>

<div class="flex w-full flex-col gap-y-1.5 pt-2" class:hidden={!inLast24Hrs.length}>
<div class="px-2 text-sm font-semibold">Today</div>
{#each inLast24Hrs as item (item.sessionId)}
<SidebarItem
{item}
on:click={dispatchClickItem}
on:deleteSession={deleteSession(item.sessionId)}
/>
{/each}
</div>

<div class="flex w-full flex-col gap-y-1.5 pt-6" class:hidden={!inLast7Days.length}>
<div class="px-2 text-sm font-semibold">Last 7 days</div>
{#each inLast7Days as item (item.sessionId)}
<SidebarItem
{item}
on:click={dispatchClickItem}
on:deleteSession={deleteSession(item.sessionId)}
/>
{/each}
</div>

<div class="flex w-full flex-col gap-y-1.5 pt-6" class:hidden={!inLast30Days.length}>
<div class="px-2 text-sm font-semibold">Last month</div>
{#each inLast30Days as item (item.sessionId)}
<SidebarItem
{item}
on:click={dispatchClickItem}
on:deleteSession={deleteSession(item.sessionId)}
/>
{/each}
</div>
<div class="block h-20"></div>
<div class="flex w-full flex-col gap-y-1.5 pt-6" class:hidden={!inLast30Days.length}>
<div class="px-2 text-sm font-semibold">Last 30 days</div>
{#each inLast30Days as item (item.sessionId)}
<SidebarItem
{item}
on:click={dispatchClickItem}
on:deleteSession={deleteSession(item.sessionId)}
/>
{/each}
</div>
<div class="block h-20"></div>
{/if}
</nav>
</div>
15 changes: 15 additions & 0 deletions app/src/lib/components/SidebarToggleButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script>
import { Button } from './ui/button';
export let builders = undefined;
</script>

<Button {builders} variant="ghost" class="px-2" on:click>
<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
<path
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
></path>
</svg>
</Button>
13 changes: 2 additions & 11 deletions app/src/lib/components/SlideSheet.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
<script>
import * as Sheet from './ui/sheet';
import { Button } from './ui/button';
import SidebarToggleButton from './SidebarToggleButton.svelte';
export let open = false;
</script>

<Sheet.Root bind:open closeOnOutsideClick>
<Sheet.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="px-2">
<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
<path
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
></path>
</svg>
</Button>
<SidebarToggleButton builders={[builder]} />
</Sheet.Trigger>
<Sheet.Content side="left" class="bg-gray-900 border-muted">
<Sheet.Header class="mb-1 text-left">
Expand Down
21 changes: 16 additions & 5 deletions app/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,15 @@
import Sidebar from '@/components/Sidebar.svelte';
import { page } from '$app/stores';
import Spinner from '@/components/Spinner.svelte';
import { setAppContext } from '@/stores/appContext.svelte';
import { getAppContext, setAppContext } from '@/stores/appContext.svelte';
import { onMount } from 'svelte';
import { getAnalytics, logEvent } from 'firebase/analytics';
import cs from 'clsx';

export let data;

const { openSettingsDrawer$ } = getAppContext();

$: sessionId = $page.params.sessionId || data.sessionId;

$: setAppContext();
Expand All @@ -34,16 +37,24 @@
</svelte:head>

<div class="h-screen bg-background block w-full">
<RootNav {sessionId} />

<div class="relative flex h-full w-full gap-x-2">
<div class={cs({ 'md:hidden': $openSettingsDrawer$ })}>
<RootNav {sessionId} />
</div>
<div
class={cs('flex w-full', {
'h-full': $openSettingsDrawer$,
'h-[calc(100%-4rem)]': !$openSettingsDrawer$
})}
>
{#if browser}
<span class="hidden md:block">
<Sidebar />
</span>

{#key sessionId}
<slot />
<div class={cs('w-full max-w-screen-2xl mx-auto', { 'md:mt-16': $openSettingsDrawer$ })}>
<slot />
</div>
{/key}
{:else}
<div class="-mt-16 flex h-full w-full items-center justify-center sm:-mt-24">
Expand Down
Loading