commit 9777d622d9023b748e95bf2ec09d2b617d1c82ae
parent eb0d458e595b4653a5cda5c65b373161157c8bd0
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 27 Apr 2025 04:51:37 +0000
apps-lib: add farms view, edit components, types, views
Diffstat:
12 files changed, 378 insertions(+), 254 deletions(-)
diff --git a/apps-lib/src/lib/components/glyph/glyph-circle.svelte b/apps-lib/src/lib/components/glyph/glyph-circle.svelte
@@ -15,6 +15,6 @@
<div
class={`${fmt_cl(basis?.classes_wrap)} flex flex-col h-[${styles?.dim_1}px] w-[${styles?.dim_1}px] justify-center items-center rounded-full el-re`}
>
- <GlyphButton basis={basis?.glyph}></GlyphButton>
+ <GlyphButton basis={basis?.glyph} />
</div>
{/if}
diff --git a/apps-lib/src/lib/components/lib/toast.svelte b/apps-lib/src/lib/components/lib/toast.svelte
@@ -1,6 +1,7 @@
<script lang="ts">
import {
app_lo,
+ Glyph,
toast_layout_map,
toast_style_map,
type IToast,
@@ -28,14 +29,13 @@
<div
class={`absolute top-0 left-4 flex flex-row h-full items-center text-layer-${layer}-glyph`}
>
- <glyph
+ <Glyph
basis={{
key: `info`,
- weight: `regular`,
dim: `md`,
...basis.glyph,
}}
- ></glyph>
+ />
</div>
<div
class={`col-span-12 flex flex-row pl-1 ${fmt_cl(styles.map((style) => fmt_cl(toast_style_map.get(style)?.inner)).join(` `))}`}
diff --git a/apps-lib/src/lib/components/trellis/trellis-offset.svelte b/apps-lib/src/lib/components/trellis/trellis-offset.svelte
@@ -66,7 +66,7 @@
...mod.glyph_circle?.glyph,
},
}}
- ></GlyphCircle>
+ />
{/if}
</button>
</div>
diff --git a/apps-lib/src/lib/components/trellis/trellis-row-label.svelte b/apps-lib/src/lib/components/trellis/trellis-row-label.svelte
@@ -25,8 +25,7 @@
<div
class={`flex flex-row justify-start items-center pr-2`}
>
- <GlyphButton basis={{ ...title_l.glyph }}
- ></GlyphButton>
+ <GlyphButton basis={{ ...title_l.glyph }} />
</div>
{:else if `value` in title_l}
<p
@@ -48,7 +47,7 @@
class={`${fmt_cl(title_r.classes_wrap)} flex flex-row h-full gap-1 items-center ${title_r.hide_truncate ? `` : `truncate`}`}
>
{#if `glyph` in title_r}
- <GlyphButton basis={{ ...title_r.glyph }}></GlyphButton>
+ <GlyphButton basis={{ ...title_r.glyph }} />
{:else if `value` in title_r}
<p
class={`${fmt_cl(title_r.classes)} font-sans text-line_d text-layer-${layer}-glyph_d ${title_r.hide_truncate ? `` : `truncate`} el-re`}
diff --git a/apps-lib/src/lib/features/farm/farms-display-li-el.svelte b/apps-lib/src/lib/features/farm/farms-display-li-el.svelte
@@ -1,5 +1,10 @@
<script lang="ts">
- import { Map, MapMarkerArea, type LcGeocodeCallback } from "$root";
+ import {
+ Map,
+ MapMarkerArea,
+ type IViewFarmsDataListItem,
+ type LcGeocodeCallback,
+ } from "$root";
import {
fmt_geolocation_address,
geol_lat_fmt,
@@ -7,9 +12,7 @@
parse_geom_point_tup,
parse_tup_geop_point,
type CallbackPromiseGeneric,
- type GeolocationAddress,
type GeolocationPointTuple,
- type GeometryPoint,
type I18nTranslateFunction,
type I18nTranslateLocale,
} from "@radroots/util";
@@ -22,14 +25,7 @@
ls,
locale,
}: {
- basis: {
- id: string;
- name: string;
- geolocation?: {
- point: GeometryPoint;
- address: GeolocationAddress;
- };
- };
+ basis: IViewFarmsDataListItem;
lc_geocode: LcGeocodeCallback;
lc_handle_farm_view: CallbackPromiseGeneric<string>;
ls: I18nTranslateFunction;
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -113,6 +113,7 @@ export * from "./util/nostr/nostr-sync.js"
export * from "./util/service/nostr-event-classified.js"
export * from "./util/service/nostr-sync.js"
export * from "./util/view.js"
+export { default as Farms } from "./view/farms.svelte"
export { default as Home } from "./view/home.svelte"
export { default as Notifications } from "./view/notifications.svelte"
export { default as ProfileEdit } from "./view/profile-edit.svelte"
diff --git a/apps-lib/src/lib/types/view/farm.ts b/apps-lib/src/lib/types/view/farm.ts
@@ -1,4 +1,17 @@
-import type { GeolocationAddress, GeolocationPoint } from "@radroots/util";
+import type { GeolocationAddress, GeolocationPoint, GeometryPoint } from "@radroots/util";
+
+export type IViewFarmsDataListItem = {
+ id: string;
+ name: string;
+ geolocation?: {
+ point: GeometryPoint;
+ address: GeolocationAddress;
+ };
+};
+
+export type IViewFarmsData = {
+ list: IViewFarmsDataListItem[];
+}
export type IViewFarmsProductsAddSubmission = {
product: string;
diff --git a/apps-lib/src/lib/types/view/lib.ts b/apps-lib/src/lib/types/view/lib.ts
@@ -1,7 +1,6 @@
import type { CallbackPromiseGeneric } from "@radroots/util";
-export type IHomeViewData = {};
-
+export type IViewHomeData = {};
export type IViewOnMount<TypeCallbackParam> = {
lc_on_mount: CallbackPromiseGeneric<TypeCallbackParam>;
diff --git a/apps-lib/src/lib/view/farms.svelte b/apps-lib/src/lib/view/farms.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+ import {
+ ButtonLabelDashed,
+ Fade,
+ FarmsDisplayLiEl,
+ GlyphButtonSimple,
+ handle_err,
+ idb_init_page,
+ LayoutPage,
+ LayoutView,
+ PageToolbar,
+ type CallbackRoute,
+ type IViewFarmsData,
+ type LcGeocodeCallback,
+ } from "$root";
+ import {
+ type CallbackPromise,
+ type CallbackPromiseGeneric,
+ type I18nTranslateFunction,
+ type I18nTranslateLocale,
+ type IViewBasis,
+ } from "@radroots/util";
+ import { onMount } from "svelte";
+
+ let {
+ basis,
+ ls,
+ locale,
+ }: {
+ basis: IViewBasis<{
+ data?: IViewFarmsData;
+ callback_route?: CallbackRoute<string>;
+ lc_geocode: LcGeocodeCallback;
+ lc_handle_farm_add: CallbackPromise;
+ lc_handle_farm_view: CallbackPromiseGeneric<string>;
+ }>;
+ ls: I18nTranslateFunction;
+ locale: I18nTranslateLocale;
+ } = $props();
+
+ onMount(async () => {
+ try {
+ if (!basis.kv_init_prevent) await idb_init_page();
+ } catch (e) {
+ handle_err(e, `on_mount`);
+ }
+ });
+</script>
+
+{#if basis.data}
+ {@const { data: basis_data } = basis}
+ <LayoutView>
+ <PageToolbar
+ basis={{
+ header: {
+ label: `${$ls(`common.farms`)}`,
+ callback_route: basis.callback_route,
+ },
+ }}
+ >
+ {#snippet header_option()}
+ {#if basis_data.list.length}
+ <Fade>
+ <GlyphButtonSimple
+ basis={{
+ label: `${$ls(`icu.add_*`, { value: `${$ls(`common.farm`)}` })}`,
+ callback: async () => {
+ await basis.lc_handle_farm_add();
+ },
+ }}
+ />
+ </Fade>
+ {/if}
+ {/snippet}
+ </PageToolbar>
+ <LayoutPage>
+ {#if basis_data.list.length}
+ {#each basis_data.list as li}
+ <FarmsDisplayLiEl
+ basis={li}
+ lc_geocode={basis.lc_geocode}
+ lc_handle_farm_view={basis.lc_handle_farm_view}
+ {ls}
+ {locale}
+ />
+ {/each}
+ {:else}
+ <ButtonLabelDashed
+ basis={{
+ label: `Add farm`,
+ callback: async () => {
+ await basis.lc_handle_farm_add();
+ },
+ }}
+ />
+ {/if}
+ </LayoutPage>
+ </LayoutView>
+{/if}
diff --git a/apps-lib/src/lib/view/home.svelte b/apps-lib/src/lib/view/home.svelte
@@ -7,7 +7,7 @@
LayoutView,
NavigationTabs,
PageToolbar,
- type IHomeViewData,
+ type IViewHomeData,
} from "$root";
import {
type CallbackPromise,
@@ -21,7 +21,7 @@
basis,
}: {
basis: IViewBasis<{
- data: IHomeViewData;
+ data?: IViewHomeData;
lc_handle_farms: CallbackPromise;
lc_handle_products: CallbackPromise;
}>;
@@ -37,23 +37,26 @@
});
</script>
-<LayoutView>
- <PageToolbar
- basis={{
- header: {
- label: `${$ls(`common.general`)}`,
- },
- }}
- />
- <LayoutPage>
- <ButtonSimple
+{#if basis.data}
+ {@const { data: basis_data } = basis}
+ <LayoutView>
+ <PageToolbar
basis={{
- label: `${$ls(`common.farms`)}`,
- callback: async () => {
- await basis.lc_handle_farms();
+ header: {
+ label: `${$ls(`common.general`)}`,
},
}}
/>
- </LayoutPage>
-</LayoutView>
-<NavigationTabs />
+ <LayoutPage>
+ <ButtonSimple
+ basis={{
+ label: `${$ls(`common.farms`)}`,
+ callback: async () => {
+ await basis.lc_handle_farms();
+ },
+ }}
+ />
+ </LayoutPage>
+ </LayoutView>
+ <NavigationTabs />
+{/if}
diff --git a/apps-lib/src/lib/view/profile-edit.svelte b/apps-lib/src/lib/view/profile-edit.svelte
@@ -27,7 +27,7 @@
val_field = $bindable(``),
}: {
basis: IViewBasis<{
- data: IViewProfileEditData;
+ data?: IViewProfileEditData;
lc_handle_back: CallbackPromiseGeneric<{
field: ViewProfileEditFieldKey;
public_key: string;
@@ -63,40 +63,43 @@
);
</script>
-<LayoutView>
- <LayoutPage>
- <div class={`flex flex-row h-20 w-full justify-start items-center`}>
- <Empty />
- </div>
- {#if basis.data.field}
- <Input
- bind:value={val_field}
- basis={{
- id: fmt_id(`field`),
- sync: true,
- classes: `pl-6 h-entry_line text-layer-1-glyph bg-layer-1-surface rounded-2xl`,
- placeholder: input_placeholder,
- callback: basis.lc_handle_input,
- }}
- />
- {/if}
- </LayoutPage>
-</LayoutView>
-<FloatPage
- basis={{
- posx: `left`,
- }}
->
- <ButtonRoundNav
+{#if basis.data}
+ {@const { data: basis_data } = basis}
+ <LayoutView>
+ <LayoutPage>
+ <div class={`flex flex-row h-20 w-full justify-start items-center`}>
+ <Empty />
+ </div>
+ {#if basis.data.field}
+ <Input
+ bind:value={val_field}
+ basis={{
+ id: fmt_id(`field`),
+ sync: true,
+ classes: `pl-6 h-entry_line text-layer-1-glyph bg-layer-1-surface rounded-2xl`,
+ placeholder: input_placeholder,
+ callback: basis.lc_handle_input,
+ }}
+ />
+ {/if}
+ </LayoutPage>
+ </LayoutView>
+ <FloatPage
basis={{
- glyph: `arrow-left`,
- callback: async () => {
- await basis.lc_handle_back({
- field: basis.data.field,
- public_key: basis.data.public_key,
- });
- },
+ posx: `left`,
}}
- />
-</FloatPage>
-<NavigationTabs />
+ >
+ <ButtonRoundNav
+ basis={{
+ glyph: `arrow-left`,
+ callback: async () => {
+ await basis.lc_handle_back({
+ field: basis_data.field,
+ public_key: basis_data.public_key,
+ });
+ },
+ }}
+ />
+ </FloatPage>
+ <NavigationTabs />
+{/if}
diff --git a/apps-lib/src/lib/view/profile.svelte b/apps-lib/src/lib/view/profile.svelte
@@ -31,7 +31,7 @@
photo_path = $bindable(``),
}: {
basis: IViewBasis<{
- data: IViewProfileData;
+ data?: IViewProfileData;
loading_photo_upload: boolean;
loading_photo_upload_open: boolean;
lc_handle_back: CallbackPromiseGeneric<{
@@ -64,14 +64,17 @@
onDestroy(async () => {
try {
- await basis.lc_on_destroy({ public_key: basis.data.public_key });
+ if (basis.data)
+ await basis.lc_on_destroy({
+ public_key: basis.data.public_key,
+ });
} catch (e) {
handle_err(e, `on_destroy`);
}
});
const photo_overlay_visible = $derived(
- !!(basis.data.picture || photo_path),
+ !!(basis.data?.picture || photo_path),
);
const classes_photo_overlay_glyph = $derived(
@@ -87,222 +90,230 @@
);
</script>
-<div
- class={`relative flex flex-col min-h-[525px] h-[525px] w-full justify-center items-center bg-layer-2-surface fade-in`}
->
- <FloatPage
- basis={{
- posx: `left`,
- }}
- >
- <ButtonRoundNav
- basis={{
- glyph: `arrow-left`,
- loading: basis.loading_photo_upload,
- callback: async () => {
- await basis.lc_handle_back({
- is_photo_existing: photo_overlay_visible,
- });
- },
- }}
- />
- </FloatPage>
- <FloatPage
- basis={{
- posx: `right`,
- }}
+{#if basis.data}
+ <div
+ class={`relative flex flex-col min-h-[525px] h-[525px] w-full justify-center items-center bg-layer-2-surface fade-in`}
>
- <SelectMenu
- bind:value={val_sel_options_button}
+ <FloatPage
basis={{
- layer: 0,
- options: [
- {
- entries: [
- {
- value: `*add-new`,
- label: `Add new photo`,
- },
- ],
- },
- ],
+ posx: `left`,
}}
>
<ButtonRoundNav
basis={{
- glyph: `images-square`,
- callback: basis.lc_handle_photo_options,
+ glyph: `arrow-left`,
+ loading: basis.loading_photo_upload,
+ callback: async () => {
+ await basis.lc_handle_back({
+ is_photo_existing: photo_overlay_visible,
+ });
+ },
}}
/>
- </SelectMenu>
- </FloatPage>
- {#if basis.data.picture || photo_path}
- {@const img_path = photo_path || basis.data.picture || ``}
- {#if img_path.startsWith(`file://`)}
- {#await basis.lc_fs_read_bin(img_path) then data}
- <ImageBlob basis={{ data }} />
- {/await}
- {:else if img_path.startsWith(`http://`) || img_path.startsWith(`https://`)}
- <ImagePath basis={{ path: img_path }} />
- {/if}
- {:else}
- <div class={`flex flex-row justify-start items-center -translate-y-8`}>
- <ImageUploadAddPhoto
- bind:photo_path
- {ls}
+ </FloatPage>
+ <FloatPage
+ basis={{
+ posx: `right`,
+ }}
+ >
+ <SelectMenu
+ bind:value={val_sel_options_button}
basis={{
- loading: basis.loading_photo_upload_open,
- lc_handle_photo_add: basis.lc_handle_photo_add,
+ layer: 0,
+ options: [
+ {
+ entries: [
+ {
+ value: `*add-new`,
+ label: `Add new photo`,
+ },
+ ],
+ },
+ ],
}}
- />
- </div>
- {/if}
- <div
- class={`absolute bottom-0 left-0 flex flex-col h-[calc(100%-100%/1.618)] w-full px-6 gap-2 justify-end items-center`}
- >
+ >
+ <ButtonRoundNav
+ basis={{
+ glyph: `images-square`,
+ callback: basis.lc_handle_photo_options,
+ }}
+ />
+ </SelectMenu>
+ </FloatPage>
+ {#if basis.data.picture || photo_path}
+ {@const img_path = photo_path || basis.data.picture || ``}
+ {#if img_path.startsWith(`file://`)}
+ {#await basis.lc_fs_read_bin(img_path) then data}
+ <ImageBlob basis={{ data }} />
+ {/await}
+ {:else if img_path.startsWith(`http://`) || img_path.startsWith(`https://`)}
+ <ImagePath basis={{ path: img_path }} />
+ {/if}
+ {:else}
+ <div
+ class={`flex flex-row justify-start items-center -translate-y-8`}
+ >
+ <ImageUploadAddPhoto
+ bind:photo_path
+ {ls}
+ basis={{
+ loading: basis.loading_photo_upload_open,
+ lc_handle_photo_add: basis.lc_handle_photo_add,
+ }}
+ />
+ </div>
+ {/if}
<div
- class={`flex flex-col w-full gap-[2px] justify-center items-center`}
+ class={`absolute bottom-0 left-0 flex flex-col h-[calc(100%-100%/1.618)] w-full px-6 gap-2 justify-end items-center`}
>
- <div class={`flex flex-row h-10 w-full justify-start items-center`}>
- <button
- class={`group flex flex-row justify-center items-center`}
- onclick={async () => {
- await basis.lc_handle_edit_profile_field({
- field: `display_name`,
- });
- }}
+ <div
+ class={`flex flex-col w-full gap-[2px] justify-center items-center`}
+ >
+ <div
+ class={`flex flex-row h-10 w-full justify-start items-center`}
+ >
+ <button
+ class={`group flex flex-row justify-center items-center`}
+ onclick={async () => {
+ await basis.lc_handle_edit_profile_field({
+ field: `display_name`,
+ });
+ }}
+ >
+ <p
+ class={`font-sansd font-[600] text-[2rem] ${classes_photo_overlay_glyph} ${basis.data?.name ? `` : `capitalize opacity-active`} el-re`}
+ >
+ {#if basis.data?.display_name}
+ {`${basis.data?.display_name}`}
+ {:else if basis.data?.name}
+ {`${basis.data?.display_name || basis.data?.name || ``}`}
+ {:else}
+ {`+ ${`${$ls(`icu.add_*`, { value: `${$ls(`common.profile_name`)}` })}`}`}
+ {/if}
+ </p>
+ </button>
+ </div>
+ <div
+ class={`flex flex-row w-full gap-[6px] justify-start items-center`}
>
+ <button
+ class={`group flex flex-row justify-center items-center`}
+ onclick={async () => {
+ await basis.lc_handle_edit_profile_field({
+ field: `name`,
+ });
+ }}
+ >
+ <p
+ class={`font-sansd font-[600] text-[1.1rem] ${classes_photo_overlay_glyph} ${basis.data?.name ? `` : `capitalize opacity-active`} el-re`}
+ >
+ {#if basis.data?.name}
+ {`@${basis.data.name}`}
+ {:else}
+ {`+ ${`${$ls(`icu.add_*`, { value: `${$ls(`common.username`)}` })}`}`}
+ {/if}
+ </p>
+ </button>
<p
- class={`font-sansd font-[600] text-[2rem] ${classes_photo_overlay_glyph} ${basis.data?.name ? `` : `capitalize opacity-active`} el-re`}
+ class={`font-sans font-[400] ${classes_photo_overlay_glyph}`}
>
- {#if basis.data?.display_name}
- {`${basis.data?.display_name}`}
- {:else if basis.data?.name}
- {`${basis.data?.display_name || basis.data?.name || ``}`}
- {:else}
- {`+ ${`${$ls(`icu.add_*`, { value: `${$ls(`common.profile_name`)}` })}`}`}
- {/if}
+ {symbols.bullet}
</p>
- </button>
+ <button
+ class={`flex flex-row justify-center items-center`}
+ onclick={async () => {
+ alert(`@todo!`);
+ }}
+ >
+ <Glyph
+ basis={{
+ classes: `${classes_photo_overlay_glyph}`,
+ dim: `xs`,
+
+ key: `link-simple`,
+ }}
+ />
+ </button>
+ </div>
+ <div class={`flex flex-row w-full justify-start items-center`}>
+ <button
+ class={`group flex flex-row justify-center items-center`}
+ onclick={async () => {
+ await basis.lc_handle_edit_profile_field({
+ field: `about`,
+ });
+ }}
+ >
+ <p
+ class={`font-sansd font-[400] text-[1.1rem] ${classes_photo_overlay_glyph} ${basis.data?.about ? `` : `capitalize opacity-active`}`}
+ >
+ {#if basis.data?.about}
+ {`${basis.data.about}`}
+ {:else}
+ {`+ ${`${$ls(`icu.add_*`, { value: `${$ls(`common.bio`)}` })}`}`}
+ {/if}
+ </p>
+ </button>
+ </div>
</div>
<div
- class={`flex flex-row w-full gap-[6px] justify-start items-center`}
+ class={`flex flex-row w-full pt-2 pb-6 gap-2 justify-start items-center`}
>
<button
- class={`group flex flex-row justify-center items-center`}
+ class={`flex flex-row justify-center items-center`}
onclick={async () => {
- await basis.lc_handle_edit_profile_field({
- field: `name`,
- });
+ view_display = `photos`;
}}
>
<p
- class={`font-sansd font-[600] text-[1.1rem] ${classes_photo_overlay_glyph} ${basis.data?.name ? `` : `capitalize opacity-active`} el-re`}
+ class={`font-sans text-[1.1rem] font-[600] capitalize ${view_display === `photos` ? classes_photo_overlay_glyph_opt_selected : classes_photo_overlay_glyph_opt} el-re`}
>
- {#if basis.data?.name}
- {`@${basis.data.name}`}
- {:else}
- {`+ ${`${$ls(`icu.add_*`, { value: `${$ls(`common.username`)}` })}`}`}
- {/if}
+ {`${$ls(`common.photos`)}`}
</p>
</button>
- <p
- class={`font-sans font-[400] ${classes_photo_overlay_glyph}`}
- >
- {symbols.bullet}
- </p>
<button
class={`flex flex-row justify-center items-center`}
onclick={async () => {
- alert(`@todo!`);
+ view_display = `following`;
}}
>
- <Glyph
- basis={{
- classes: `${classes_photo_overlay_glyph}`,
- dim: `xs`,
-
- key: `link-simple`,
- }}
- />
+ <p
+ class={`font-sans text-[1.1rem] font-[600] capitalize ${view_display === `following` ? classes_photo_overlay_glyph_opt_selected : classes_photo_overlay_glyph_opt} el-re`}
+ >
+ {`${$ls(`common.following`)}`}
+ </p>
</button>
- </div>
- <div class={`flex flex-row w-full justify-start items-center`}>
<button
- class={`group flex flex-row justify-center items-center`}
+ class={`flex flex-row justify-center items-center`}
onclick={async () => {
- await basis.lc_handle_edit_profile_field({
- field: `about`,
- });
+ view_display = `followers`;
}}
>
<p
- class={`font-sansd font-[400] text-[1.1rem] ${classes_photo_overlay_glyph} ${basis.data?.about ? `` : `capitalize opacity-active`}`}
+ class={`font-sans text-[1.1rem] font-[600] capitalize ${view_display === `followers` ? classes_photo_overlay_glyph_opt_selected : classes_photo_overlay_glyph_opt} el-re`}
>
- {#if basis.data?.about}
- {`${basis.data.about}`}
- {:else}
- {`+ ${`${$ls(`icu.add_*`, { value: `${$ls(`common.bio`)}` })}`}`}
- {/if}
+ {`${$ls(`common.followers`)}`}
</p>
</button>
</div>
</div>
- <div
- class={`flex flex-row w-full pt-2 pb-6 gap-2 justify-start items-center`}
- >
- <button
- class={`flex flex-row justify-center items-center`}
- onclick={async () => {
- view_display = `photos`;
- }}
- >
- <p
- class={`font-sans text-[1.1rem] font-[600] capitalize ${view_display === `photos` ? classes_photo_overlay_glyph_opt_selected : classes_photo_overlay_glyph_opt} el-re`}
- >
- {`${$ls(`common.photos`)}`}
- </p>
- </button>
- <button
- class={`flex flex-row justify-center items-center`}
- onclick={async () => {
- view_display = `following`;
- }}
- >
- <p
- class={`font-sans text-[1.1rem] font-[600] capitalize ${view_display === `following` ? classes_photo_overlay_glyph_opt_selected : classes_photo_overlay_glyph_opt} el-re`}
- >
- {`${$ls(`common.following`)}`}
- </p>
- </button>
- <button
- class={`flex flex-row justify-center items-center`}
- onclick={async () => {
- view_display = `followers`;
- }}
- >
- <p
- class={`font-sans text-[1.1rem] font-[600] capitalize ${view_display === `followers` ? classes_photo_overlay_glyph_opt_selected : classes_photo_overlay_glyph_opt} el-re`}
- >
- {`${$ls(`common.followers`)}`}
- </p>
- </button>
- </div>
</div>
-</div>
-<div class={`flex flex-col w-full min-h-[500px] justify-start items-center`}>
- {#if view_display === `photos`}
- <p class={`font-sans font-[400] text-layer-0-glyph`}>
- {view_display}
- </p>
- {:else if view_display === `following`}
- <p class={`font-sans font-[400] text-layer-0-glyph`}>
- {view_display}
- </p>
- {:else if view_display === `followers`}
- <p class={`font-sans font-[400] text-layer-0-glyph`}>
- {view_display}
- </p>
- {/if}
-</div>
-<NavigationTabs />
+ <div
+ class={`flex flex-col w-full min-h-[500px] justify-start items-center`}
+ >
+ {#if view_display === `photos`}
+ <p class={`font-sans font-[400] text-layer-0-glyph`}>
+ {view_display}
+ </p>
+ {:else if view_display === `following`}
+ <p class={`font-sans font-[400] text-layer-0-glyph`}>
+ {view_display}
+ </p>
+ {:else if view_display === `followers`}
+ <p class={`font-sans font-[400] text-layer-0-glyph`}>
+ {view_display}
+ </p>
+ {/if}
+ </div>
+ <NavigationTabs />
+{/if}
