Skip to content

Commit 1a1302e

Browse files
ItzNotABugItzNotABug
committed
update: misc fixes as per reviews.
1 parent 317a8d6 commit 1a1302e

4 files changed

Lines changed: 74 additions & 40 deletions

File tree

‎src/lib/components/breadcrumbs.svelte‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
import { type Models, Query } from '@appwrite.io/console';
2626
import { sdk } from '$lib/stores/sdk';
2727
import { page } from '$app/state';
28+
import { BillingPlan } from '$lib/constants';
2829
2930
type Organization = {
3031
name: string;
@@ -226,6 +227,9 @@
226227
$: if (shouldReloadProjects) {
227228
projectsBottomSheet = createProjectsBottomSheet(selectedOrg);
228229
}
230+
231+
let badgeType: 'success' | undefined;
232+
$: badgeType = $currentPlan && $currentPlan.name !== BillingPlan.FREE ? 'success' : undefined;
229233
</script>
230234

231235
<svelte:window on:resize={onResize} />
@@ -240,10 +244,13 @@
240244
use:melt={$triggerOrganizations}
241245
aria-label="Open organizations tab">
242246
<span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
243-
<span class="not-mobile"
247+
<span class="not-mobile" style="padding-inline-start: 2px"
244248
>{#if correctPlanName}<Badge
249+
size="xs"
245250
variant="secondary"
246-
content={correctPlanName} />{/if}</span>
251+
type={badgeType}
252+
content={correctPlanName} />
253+
{/if}</span>
247254
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
248255
</button>
249256
{:else}
@@ -257,7 +264,11 @@
257264
<span class="orgName" class:noProjects={!currentProject}
258265
>{selectedOrg?.name ?? 'Organization'}</span>
259266
<span class="not-mobile"
260-
><Badge variant="secondary" content={correctPlanName ?? ''} /></span>
267+
><Badge
268+
size="xs"
269+
variant="secondary"
270+
type={badgeType}
271+
content={correctPlanName ?? ''} /></span>
261272
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
262273
</button>
263274
{/if}
@@ -476,6 +487,7 @@
476487
border-radius: var(--border-radius-S, 8px);
477488
background: var(--overlay-neutral-hover, rgba(25, 25, 28, 0.03));
478489
}
490+
479491
.trigger {
480492
display: inline-flex;
481493
align-items: center;

‎src/lib/components/sidebar.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -591,6 +591,7 @@
591591
@media (min-width: 1024px) {
592592
width: 166px;
593593
}
594+
594595
.info {
595596
position: absolute;
596597
display: flex;

‎src/lib/layout/animatedTitle.svelte‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,32 @@
33
import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
44
import { Button, Icon, Layout } from '@appwrite.io/pink-svelte';
55
import type { Snippet } from 'svelte';
6+
import type { HTMLAttributes } from 'svelte/elements';
67
78
let {
89
href = null,
910
collapsed = false,
10-
children
11+
children,
12+
...restProps
1113
}: {
1214
href?: string | null;
1315
collapsed?: boolean;
1416
children: Snippet;
15-
} = $props();
17+
} & HTMLAttributes<HTMLDivElement> = $props();
1618
1719
const buttonSize = $derived(collapsed ? 'xs' : 's');
1820
const currentLineHeight = $derived(collapsed ? '130%' : '140%');
1921
const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
20-
const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxxl)');
22+
const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxl)');
2123
</script>
2224

23-
<Layout.Stack justifyContent="center" alignItems="center" direction="row" gap="xs" inline>
25+
<Layout.Stack
26+
inline
27+
gap="xs"
28+
direction="row"
29+
alignItems="center"
30+
justifyContent="center"
31+
{...restProps}>
2432
{#if href && !$isSmallViewport}
2533
<span style:position="relative">
2634
<Button.Anchor size={buttonSize} icon variant="text" {href} aria-label="page back">

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,11 @@
7878
<Sidebar.Base state="open" resizable={false}>
7979
<section class="list-container" slot="top" style:width="100%">
8080
<a
81+
class:is-selected={!isTablesScreen}
8182
href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
82-
class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
83+
class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile u-padding-block-8 u-padding-inline-start-4">
8384
<Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
85+
8486
{data.database?.name}
8587
</a>
8688
<div class="table-content">
@@ -145,33 +147,33 @@
145147
</Layout.Stack>
146148
</div>
147149

148-
{#if isTablesScreen}
149-
<Layout.Stack direction="column" gap="xxs" style="bottom: 1rem; position: sticky;">
150-
<div class="action-menu-divider">
151-
<Divider />
152-
</div>
153-
154-
<ul
155-
style="margin-inline-start: -1.25rem"
156-
class="drop-list bottom-nav u-margin-block-start-4">
157-
{#each databaseSubNavigationItems as action}
158-
{@const isSelected = page.url.pathname.endsWith(action.href)}
159-
{@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/${action.href}`}
160-
161-
<Layout.Stack gap="s" direction="row" alignItems="center">
162-
<li class:is-selected={isSelected}>
163-
<a
164-
{href}
165-
class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8">
166-
<Icon size="s" icon={action.icon} color="--fgcolor-neutral-weak" />
167-
<span class="text table-name">{action.title}</span>
168-
</a>
169-
</li>
170-
</Layout.Stack>
171-
{/each}
172-
</ul>
173-
</Layout.Stack>
174-
{/if}
150+
<Layout.Stack direction="column" gap="xxs" style="bottom: 1rem; position: sticky;">
151+
<div class="action-menu-divider">
152+
<Divider />
153+
</div>
154+
155+
<ul
156+
style="margin-inline-start: -1.25rem"
157+
class="drop-list bottom-nav u-margin-block-start-4">
158+
{#each databaseSubNavigationItems as action}
159+
{@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/${action.href}`}
160+
161+
<Layout.Stack gap="s" direction="row" alignItems="center">
162+
<li>
163+
<a
164+
{href}
165+
class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8">
166+
<Icon
167+
size="s"
168+
icon={action.icon}
169+
color="--fgcolor-neutral-weak" />
170+
<span class="text table-name">{action.title}</span>
171+
</a>
172+
</li>
173+
</Layout.Stack>
174+
{/each}
175+
</ul>
176+
</Layout.Stack>
175177
</section>
176178
</Sidebar.Base>
177179
{:else if data?.database?.name && !isMainDatabaseScreen}
@@ -234,9 +236,15 @@
234236
}
235237
236238
.database-name {
237-
margin-block-end: 8px;
239+
margin-block-end: 4px;
238240
font-size: var(--font-size-sm);
239241
color: var(--fgcolor-neutral-secondary);
242+
243+
&:hover {
244+
color: var(--fgcolor-neutral-primary);
245+
border-radius: var(--border-radius-s, 6px);
246+
background: var(--bgcolor-neutral-secondary);
247+
}
240248
}
241249
242250
.table-content {
@@ -272,7 +280,7 @@
272280
273281
.drop-list {
274282
flex: 1;
275-
gap: 8px;
283+
gap: 4px;
276284
padding-left: 4px;
277285
position: relative;
278286
font-size: var(--font-size-sm);
@@ -311,10 +319,9 @@
311319
margin-inline-start: 0.5rem;
312320
}
313321
314-
li:hover,
315-
.is-selected {
322+
li:hover {
316323
color: var(--fgcolor-neutral-primary);
317-
border-radius: var(--border-radius-xs, 4px);
324+
border-radius: var(--border-radius-s, 6px);
318325
background: var(--bgcolor-neutral-secondary);
319326
}
320327
@@ -327,6 +334,12 @@
327334
}
328335
}
329336
337+
.is-selected {
338+
color: var(--fgcolor-neutral-primary);
339+
border-radius: var(--border-radius-s, 6px);
340+
background: var(--bgcolor-neutral-secondary);
341+
}
342+
330343
:global(.sub-navigation header) {
331344
top: 48px !important;
332345
}

0 commit comments

Comments
 (0)