}) => ({
+ Component: Comment,
+ props: args
+ })
+};
+
+export const Main = {
+ args: {
+ comment: comments[0]
+ }
+};
diff --git a/platforms/pictique/src/lib/fragments/Comment/Comment.svelte b/platforms/pictique/src/lib/fragments/Comment/Comment.svelte
new file mode 100644
index 00000000..86a5a068
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Comment/Comment.svelte
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
{comment.name}
+
{comment.comment}
+
+
+
+
{comment.upVotes}
+
+
+
+
+
{comment.time}
+
+ {#each comment.replies.slice(0, visibleReplies) as reply}
+ -
+
+
+
+
{reply.name}
+
{reply.comment}
+
+
+
+
{reply.upVotes}
+
+
+
+
+
{reply.time}
+
+ {/each}
+ {#if comment.replies.length > visibleReplies}
+
+ {/if}
+
+ {/if}
+
diff --git a/platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte b/platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte
new file mode 100644
index 00000000..67c14581
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte
@@ -0,0 +1,106 @@
+
+
+
+
+
+
Create Post
+
+
+
+
+
+
+
+ {#if images.length > 0}
+
+ {#each images as image, index}
+
+
+
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+
+{/snippet}
diff --git a/platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.ts b/platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.ts
new file mode 100644
index 00000000..02ea5ca1
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.ts
@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Drawer } from '..';
+import { DrawerContent } from './Drawer.stories.snippet.svelte';
+
+export default {
+ title: 'UI/Drawer',
+ component: Drawer,
+ tags: ['autodocs'],
+ render: (args: { Component: Drawer; props: ComponentProps }) => ({
+ Component: Drawer,
+ props: args
+ })
+};
+
+export const Main = {
+ args: {
+ children: DrawerContent
+ }
+};
diff --git a/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte b/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
new file mode 100644
index 00000000..e01b1ad4
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
@@ -0,0 +1,74 @@
+
+
+ ({
+ timeframe: 300,
+ minSwipeDistance: 60
+ })}
+ onswipe={handleDrawerSwipe}
+ class={cn(restProps.class)}
+>
+
+ {@render children?.()}
+
+
+ {#if variant === 'comment'}
+
+ {:else}
+
+
+ {/if}
+
{
+ if (e.key === 'Enter') handleSend();
+ }}
+ />
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime
+ modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus
+ sapiente libero fuga temporibus eligendi.
+
+{/snippet}
diff --git a/platforms/pictique/src/lib/fragments/Modal/Modal.stories.ts b/platforms/pictique/src/lib/fragments/Modal/Modal.stories.ts
new file mode 100644
index 00000000..1d253c83
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Modal/Modal.stories.ts
@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Modal } from '..';
+import { ModalContent } from './Modal.stories.snippet.svelte';
+
+export default {
+ title: 'UI/Modal',
+ component: Modal,
+ tags: ['autodocs'],
+ render: (args: { Component: Modal; props: ComponentProps }) => ({
+ Component: Modal,
+ props: args
+ })
+};
+
+export const Main = {
+ args: {
+ children: ModalContent
+ }
+};
diff --git a/platforms/pictique/src/lib/fragments/Modal/Modal.svelte b/platforms/pictique/src/lib/fragments/Modal/Modal.svelte
new file mode 100644
index 00000000..ff99a6f9
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Modal/Modal.svelte
@@ -0,0 +1,81 @@
+
+
+
+ {#if children}
+ {@render children?.()}
+ {/if}
+
+
+
diff --git a/platforms/pictique/src/lib/fragments/Post/Post.stories.ts b/platforms/pictique/src/lib/fragments/Post/Post.stories.ts
new file mode 100644
index 00000000..c48995ef
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Post/Post.stories.ts
@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'svelte';
+import Post from './Post.svelte';
+
+export default {
+ title: 'ui/Post',
+ component: Post,
+ tags: ['autodocs'],
+ render: (args: { Component: Post; props: ComponentProps }) => ({
+ Component: Post,
+ props: args
+ })
+};
+
+export const Primary = {
+ args: {
+ avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+ username: 'blurryface',
+ imgUris: [
+ 'https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg',
+ 'https://picsum.photos/200'
+ ],
+ postAlt: 'Sample',
+ text: 'Took some pictures today! Really love how this one in particular turned out! ',
+ time: '2 hours ago',
+ count: {
+ likes: 100,
+ comments: 50
+ },
+ callback: {
+ like: () => {
+ alert('Like clicked');
+ },
+ comment: () => {
+ alert('Comment clicked');
+ },
+ menu: () => {
+ alert('Menu clicked');
+ }
+ }
+ }
+};
diff --git a/platforms/pictique/src/lib/fragments/Post/Post.svelte b/platforms/pictique/src/lib/fragments/Post/Post.svelte
new file mode 100644
index 00000000..7e26dcb1
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Post/Post.svelte
@@ -0,0 +1,203 @@
+
+
+
+ {#if count}
+
+
+
+
goto(`/profile/${userId}`)}
+ >
+
+
{username}
+
+
+
+ {#if imgUris.length > 1}
+
+ {/if}
+
+ {#if imgUris.length > 1}
+
+ {#if imgUris.length > 1}
+
+ {#each imgUris as _, i}
+
+ {/each}
+
+ {/if}
+
+ {/if}
+ {#if imgUris.length > 1}
+
+ {/if}
+
{text}
+ {time}
+ {/if}
+
+ {#if count}
+
+
+
+
+ {/if}
+ {#if count}
+
+
{count?.likes} likes
+
+
{count?.comments} comments
+
+ {/if}
+
+
+
+
+
{profileData.username}
+
{profileData.userBio}
+
+ {#if variant === 'other'}
+
+
+
+
+ {/if}
+
+
+
+
+
{profileData.totalPosts}
+
Posts
+
+
+
+
+
+
+ {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post}
+
+ {
+ try {
+ } catch (err) {}
+ },
+ comment: () => {
+ if (window.matchMedia('(max-width: 768px)').matches) {
+ } else {
+ }
+ },
+ menu: () => alert('menu')
+ }}
+ />
+
+ {/each}
+
+
+
+
+ {@render children?.()}
+
+
+
+
+
goto(`/settings/account`)}
+ profileSrc="https://picsum.photos/200/300"
+ >
+ {#snippet children()}
+
+
{username}
+
{userEmail}
+
+
+
+
Personalisation
+
+ goto(`/settings/notifications`)}>
+ {#snippet leadingIcon()}
+
+ {/snippet}
+ {#snippet children()}
+ Notifications
+ {/snippet}
+
+
+
+
+
System
+
+ goto(`/settings/data-and-storage`)}>
+ {#snippet leadingIcon()}
+
+ {/snippet}
+ {#snippet children()}
+ Data & Storage
+ {/snippet}
+
+
+
+ goto(`/settings/logout`)}>
+ {#snippet leadingIcon()}
+
+ {/snippet}
+ {#snippet children()}
+ Logout
+ {/snippet}
+
+
+
+
+
+
{userName}
+
{description}
+
+
+
+
+
+
+
+
+
+
diff --git a/platforms/pictique/src/lib/icons/Like.svelte b/platforms/pictique/src/lib/icons/Like.svelte
new file mode 100644
index 00000000..9ec26816
--- /dev/null
+++ b/platforms/pictique/src/lib/icons/Like.svelte
@@ -0,0 +1,29 @@
+
+
+
diff --git a/platforms/pictique/src/lib/icons/Refresh.svelte b/platforms/pictique/src/lib/icons/Refresh.svelte
new file mode 100644
index 00000000..410e2f81
--- /dev/null
+++ b/platforms/pictique/src/lib/icons/Refresh.svelte
@@ -0,0 +1,22 @@
+
+
+
diff --git a/platforms/pictique/src/lib/icons/Search.svelte b/platforms/pictique/src/lib/icons/Search.svelte
new file mode 100644
index 00000000..f5cef932
--- /dev/null
+++ b/platforms/pictique/src/lib/icons/Search.svelte
@@ -0,0 +1,29 @@
+
+
+
diff --git a/platforms/pictique/src/lib/icons/Settings.svelte b/platforms/pictique/src/lib/icons/Settings.svelte
new file mode 100644
index 00000000..daddf35d
--- /dev/null
+++ b/platforms/pictique/src/lib/icons/Settings.svelte
@@ -0,0 +1,31 @@
+
+
+
diff --git a/platforms/pictique/src/lib/icons/VerticalDots.svelte b/platforms/pictique/src/lib/icons/VerticalDots.svelte
new file mode 100644
index 00000000..a19cce6f
--- /dev/null
+++ b/platforms/pictique/src/lib/icons/VerticalDots.svelte
@@ -0,0 +1,36 @@
+
+
+
diff --git a/platforms/pictique/src/lib/icons/index.ts b/platforms/pictique/src/lib/icons/index.ts
new file mode 100644
index 00000000..4e216554
--- /dev/null
+++ b/platforms/pictique/src/lib/icons/index.ts
@@ -0,0 +1,12 @@
+export { default as Icons } from './Icons.svelte';
+export { default as Like } from './Like.svelte';
+export { default as Refresh } from './Refresh.svelte';
+export { default as CommentIcon } from './CommentIcon.svelte';
+export { default as VerticalDots } from './VerticalDots.svelte';
+export { default as Home } from './Home.svelte';
+export { default as Flash } from './Flash.svelte';
+export { default as CommentsTwo } from './CommentsTwo.svelte';
+export { default as Search } from './Search.svelte';
+export { default as Camera } from './Camera.svelte';
+export { default as Settings } from './Settings.svelte';
+export { default as Cross } from './Cross.svelte';
diff --git a/platforms/pictique/src/lib/index.ts b/platforms/pictique/src/lib/index.ts
new file mode 100644
index 00000000..648b5d03
--- /dev/null
+++ b/platforms/pictique/src/lib/index.ts
@@ -0,0 +1,2 @@
+// place files you want to import through the `$lib` alias in this folder.
+export {};
diff --git a/platforms/metagram/src/lib/store/store.svelte.ts b/platforms/pictique/src/lib/store/store.svelte.ts
similarity index 100%
rename from platforms/metagram/src/lib/store/store.svelte.ts
rename to platforms/pictique/src/lib/store/store.svelte.ts
diff --git a/platforms/pictique/src/lib/stores/auth.ts b/platforms/pictique/src/lib/stores/auth.ts
new file mode 100644
index 00000000..0225c01d
--- /dev/null
+++ b/platforms/pictique/src/lib/stores/auth.ts
@@ -0,0 +1,24 @@
+import { writable } from 'svelte/store';
+import { apiClient, setAuthToken, removeAuthToken } from '$lib/utils/axios';
+
+export const isAuthenticated = writable(false);
+
+export const initializeAuth = () => {
+ const token = localStorage.getItem('pictique_auth_token');
+ if (token) {
+ apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+ isAuthenticated.set(true);
+ }
+};
+
+export const login = (token: string) => {
+ setAuthToken(token);
+ apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+ isAuthenticated.set(true);
+};
+
+export const logout = () => {
+ removeAuthToken();
+ delete apiClient.defaults.headers.common['Authorization'];
+ isAuthenticated.set(false);
+};
\ No newline at end of file
diff --git a/platforms/pictique/src/lib/stores/comments.ts b/platforms/pictique/src/lib/stores/comments.ts
new file mode 100644
index 00000000..36af8fe9
--- /dev/null
+++ b/platforms/pictique/src/lib/stores/comments.ts
@@ -0,0 +1,47 @@
+import { writable } from 'svelte/store';
+import { apiClient } from '$lib/utils/axios';
+
+export interface Comment {
+ id: string;
+ text: string;
+ createdAt: string;
+ author: {
+ id: string;
+ handle: string;
+ name: string;
+ avatarUrl: string;
+ };
+}
+
+export const comments = writable([]);
+export const isLoading = writable(false);
+export const error = writable(null);
+export const activePostId = writable();
+
+export const fetchComments = async (postId: string) => {
+ try {
+ isLoading.set(true);
+ error.set(null);
+ const response = await apiClient.get(`/api/posts/${postId}/comments`);
+ comments.set(response.data);
+ } catch (err) {
+ error.set(err instanceof Error ? err.message : 'Failed to fetch comments');
+ } finally {
+ isLoading.set(false);
+ }
+};
+
+export const createComment = async (postId: string, text: string) => {
+ try {
+ isLoading.set(true);
+ error.set(null);
+ const response = await apiClient.post('/api/comments', { postId, text });
+ await fetchComments(postId); // Refresh comments after creating
+ return response.data;
+ } catch (err) {
+ error.set(err instanceof Error ? err.message : 'Failed to create comment');
+ throw err;
+ } finally {
+ isLoading.set(false);
+ }
+};
diff --git a/platforms/pictique/src/lib/stores/posts.ts b/platforms/pictique/src/lib/stores/posts.ts
new file mode 100644
index 00000000..5743f76a
--- /dev/null
+++ b/platforms/pictique/src/lib/stores/posts.ts
@@ -0,0 +1,75 @@
+import { writable } from 'svelte/store';
+import { apiClient } from '$lib/utils/axios';
+
+export interface Post {
+ id: string;
+ text: string;
+ images: string[];
+ author: {
+ id: string;
+ handle: string;
+ name: string;
+ avatarUrl: string;
+ };
+ createdAt: string;
+ likedBy: string[];
+ comments: {
+ id: string;
+ text: string;
+ author: {
+ id: string;
+ handle: string;
+ name: string;
+ avatarUrl: string;
+ };
+ createdAt: string;
+ }[];
+}
+
+export const posts = writable([]);
+export const isLoading = writable(false);
+export const error = writable(null);
+export const isCreatePostModalOpen = writable(false);
+
+export const openCreatePostModal = () => isCreatePostModalOpen.set(true);
+export const closeCreatePostModal = () => isCreatePostModalOpen.set(false);
+
+export const fetchFeed = async (page = 1, limit = 10) => {
+ try {
+ isLoading.set(true);
+ error.set(null);
+ const response = await apiClient.get(`/api/posts/feed?page=${page}&limit=${limit}`);
+ posts.set(response.data);
+ } catch (err) {
+ error.set(err instanceof Error ? err.message : 'Failed to fetch feed');
+ } finally {
+ isLoading.set(false);
+ }
+};
+
+export const createPost = async (text: string, images: string[]) => {
+ try {
+ isLoading.set(true);
+ error.set(null);
+ const response = await apiClient.post('/api/posts', {
+ text,
+ images: images.map((img) => img)
+ });
+ await fetchFeed(1);
+ return response.data;
+ } catch (err) {
+ error.set(err instanceof Error ? err.message : 'Failed to create post');
+ throw err;
+ } finally {
+ isLoading.set(false);
+ }
+};
+
+export const toggleLike = async (postId: string) => {
+ try {
+ const response = await apiClient.post(`/api/posts/${postId}/like`);
+ return response.data;
+ } catch (err) {
+ throw new Error(err instanceof Error ? err.message : 'Failed to toggle like');
+ }
+};
diff --git a/platforms/pictique/src/lib/stores/users.ts b/platforms/pictique/src/lib/stores/users.ts
new file mode 100644
index 00000000..bad67bee
--- /dev/null
+++ b/platforms/pictique/src/lib/stores/users.ts
@@ -0,0 +1,44 @@
+import { writable } from 'svelte/store';
+import { apiClient } from '$lib/utils/axios';
+
+export interface User {
+ id: string;
+ handle: string;
+ name: string;
+ description: string;
+ avatarUrl: string;
+ isVerified: boolean;
+}
+
+export const searchResults = writable([]);
+export const isSearching = writable(false);
+export const searchError = writable(null);
+
+export const searchUsers = async (query: string) => {
+ if (!query.trim()) {
+ searchResults.set([]);
+ return;
+ }
+
+ try {
+ isSearching.set(true);
+ searchError.set(null);
+ const response = await apiClient.get(`/api/users/search?q=${encodeURIComponent(query)}`);
+ searchResults.set(response.data);
+ } catch (err) {
+ searchError.set(err instanceof Error ? err.message : 'Failed to search users');
+ searchResults.set([]);
+ } finally {
+ isSearching.set(false);
+ }
+};
+
+export const followUser = async (followingId: string) => {
+ try {
+ await apiClient.post('/api/users/follow', { followingId });
+ return true;
+ } catch (err) {
+ console.error('Failed to follow user:', err);
+ return false;
+ }
+};
\ No newline at end of file
diff --git a/platforms/metagram/src/lib/types.ts b/platforms/pictique/src/lib/types.ts
similarity index 100%
rename from platforms/metagram/src/lib/types.ts
rename to platforms/pictique/src/lib/types.ts
diff --git a/platforms/pictique/src/lib/ui/Avatar/Avatar.stories.ts b/platforms/pictique/src/lib/ui/Avatar/Avatar.stories.ts
new file mode 100644
index 00000000..81214f10
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Avatar/Avatar.stories.ts
@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'svelte';
+import Avatar from './Avatar.svelte';
+
+export default {
+ title: 'UI/Avatar',
+ component: Avatar,
+ tags: ['autodocs'],
+ render: (args: { Component: Avatar; props: ComponentProps }) => ({
+ Component: Avatar,
+ props: args
+ })
+};
+
+export const Large = {
+ args: {
+ src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+ size: 'lg'
+ }
+};
+
+export const Medium = {
+ args: {
+ src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+ size: 'md'
+ }
+};
+
+export const Small = {
+ args: {
+ src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+ size: 'sm'
+ }
+};
+
+export const ExtraSmall = {
+ args: {
+ src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+ size: 'xs'
+ }
+};
diff --git a/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte b/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
new file mode 100644
index 00000000..768136ee
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
@@ -0,0 +1,47 @@
+
+
+![]()
+
+
diff --git a/platforms/pictique/src/lib/ui/Button/Button.stories.snippet.svelte b/platforms/pictique/src/lib/ui/Button/Button.stories.snippet.svelte
new file mode 100644
index 00000000..6ccd33a3
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Button/Button.stories.snippet.svelte
@@ -0,0 +1,24 @@
+
+
+{#snippet ButtonText()}
+ Button
+{/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+
+
+{/snippet}
diff --git a/platforms/pictique/src/lib/ui/Button/Button.stories.ts b/platforms/pictique/src/lib/ui/Button/Button.stories.ts
new file mode 100644
index 00000000..c55b3cdb
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Button/Button.stories.ts
@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'svelte';
+import { ButtonText } from './Button.stories.snippet.svelte';
+import Button from './Button.svelte';
+
+export default {
+ title: 'UI/Button',
+ component: Button,
+ tags: ['autodocs'],
+ render: (args: { Component: Button; props: ComponentProps }) => ({
+ Component: Button,
+ props: args
+ })
+};
+
+export const Primary = {
+ args: { variant: 'primary', children: ButtonText }
+};
+
+export const Secondary = {
+ args: {
+ variant: 'secondary',
+ blockingClick: true,
+ children: ButtonText,
+ callback: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+ }
+ }
+};
+
+export const Loading = {
+ args: { isLoading: true, children: ButtonText }
+};
+
+export const BlockingClick = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ callback: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+ }
+ }
+};
diff --git a/platforms/pictique/src/lib/ui/Button/Button.svelte b/platforms/pictique/src/lib/ui/Button/Button.svelte
new file mode 100644
index 00000000..3c9658aa
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Button/Button.svelte
@@ -0,0 +1,152 @@
+
+
+
+
+
diff --git a/platforms/pictique/src/lib/ui/Helper/Helper.stories.snippet.svelte b/platforms/pictique/src/lib/ui/Helper/Helper.stories.snippet.svelte
new file mode 100644
index 00000000..daf231bf
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Helper/Helper.stories.snippet.svelte
@@ -0,0 +1,7 @@
+
+
+{#snippet HelperText()}
+ this is label
+{/snippet}
diff --git a/platforms/pictique/src/lib/ui/Helper/Helper.stories.ts b/platforms/pictique/src/lib/ui/Helper/Helper.stories.ts
new file mode 100644
index 00000000..bb4c91fe
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Helper/Helper.stories.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import Helper from './Helper.svelte';
+import { HelperText } from './Helper.stories.snippet.svelte';
+
+export default {
+ title: 'UI/Helper',
+ component: Helper,
+ tags: ['autodocs'],
+ render: (args: { Component: Helper; props: ComponentProps }) => ({
+ Component: Helper,
+ props: args
+ })
+};
+
+export const Primary = {
+ args: { children: HelperText }
+};
diff --git a/platforms/pictique/src/lib/ui/Helper/Helper.svelte b/platforms/pictique/src/lib/ui/Helper/Helper.svelte
new file mode 100644
index 00000000..6719ad51
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Helper/Helper.svelte
@@ -0,0 +1,17 @@
+
+
+
+ {@render children?.()}
+
diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/pictique/src/lib/ui/Input/Input.stories.ts
similarity index 100%
rename from platforms/metagram/src/lib/ui/Input/Input.stories.ts
rename to platforms/pictique/src/lib/ui/Input/Input.stories.ts
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/pictique/src/lib/ui/Input/Input.svelte
similarity index 100%
rename from platforms/metagram/src/lib/ui/Input/Input.svelte
rename to platforms/pictique/src/lib/ui/Input/Input.svelte
diff --git a/platforms/pictique/src/lib/ui/Label/Label.stories.snippet.svelte b/platforms/pictique/src/lib/ui/Label/Label.stories.snippet.svelte
new file mode 100644
index 00000000..4066b5be
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Label/Label.stories.snippet.svelte
@@ -0,0 +1,7 @@
+
+
+{#snippet LabelText()}
+ this is label
+{/snippet}
diff --git a/platforms/pictique/src/lib/ui/Label/Label.stories.ts b/platforms/pictique/src/lib/ui/Label/Label.stories.ts
new file mode 100644
index 00000000..69d4f7e0
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Label/Label.stories.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import { Label } from '..';
+import { LabelText } from './Label.stories.snippet.svelte';
+
+export default {
+ title: 'UI/Label',
+ component: Label,
+ tags: ['autodocs'],
+ render: (args: { Component: Label; props: ComponentProps }) => ({
+ Component: Label,
+ props: args
+ })
+};
+
+export const Primary = {
+ args: { children: LabelText }
+};
diff --git a/platforms/pictique/src/lib/ui/Label/Label.svelte b/platforms/pictique/src/lib/ui/Label/Label.svelte
new file mode 100644
index 00000000..3be3ade7
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Label/Label.svelte
@@ -0,0 +1,17 @@
+
+
+
diff --git a/platforms/pictique/src/lib/ui/Modal/Modal.svelte b/platforms/pictique/src/lib/ui/Modal/Modal.svelte
new file mode 100644
index 00000000..abce30a8
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Modal/Modal.svelte
@@ -0,0 +1,30 @@
+
+
+
+
+
diff --git a/platforms/pictique/src/lib/ui/Qr/Qr.svelte b/platforms/pictique/src/lib/ui/Qr/Qr.svelte
new file mode 100644
index 00000000..b1555443
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Qr/Qr.svelte
@@ -0,0 +1,7 @@
+
+
+
diff --git a/platforms/pictique/src/lib/ui/Select/Select.stories.ts b/platforms/pictique/src/lib/ui/Select/Select.stories.ts
new file mode 100644
index 00000000..ddd68e6e
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Select/Select.stories.ts
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import { Select } from '..';
+
+export default {
+ title: 'UI/Select',
+ component: Select,
+ tags: ['autodocs'],
+ render: (args: { Component: Select; props: ComponentProps }) => ({
+ Component: Select,
+ props: args
+ })
+};
+
+export const Primary = {
+ args: {}
+};
diff --git a/platforms/pictique/src/lib/ui/Select/Select.svelte b/platforms/pictique/src/lib/ui/Select/Select.svelte
new file mode 100644
index 00000000..007a4e0a
--- /dev/null
+++ b/platforms/pictique/src/lib/ui/Select/Select.svelte
@@ -0,0 +1,39 @@
+
+
+
+
{options.find((c) => c.code === selectedCode)?.icon}
+
+
+
+
+
+
+
+
Scan the QR to Login
+
+
Searching...
+ {:else if $searchError}
+ {$searchError}
+ {:else if searchValue && $searchResults.length === 0}
+ No users found
+ {:else if searchValue}
+
+ {#each $searchResults as user}
+ -
+ handleFollow(user.id)}
+ onclick={() => handleProfileClick(user.id)}
+ />
+
+ {/each}
+
+ {/if}
+
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/pictique/src/routes/(protected)/home/+page.svelte
similarity index 58%
rename from platforms/metagram/src/routes/(protected)/home/+page.svelte
rename to platforms/pictique/src/routes/(protected)/home/+page.svelte
index 0a94f524..3e33b5e1 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/home/+page.svelte
@@ -1,41 +1,24 @@
-
-
-{#if loading}
- Loading more posts…
-{/if}
+
- {comments.length} Comments
+ {_comments.length} Comments
{#each _comments as comment}
-
+ import { goto } from '$app/navigation';
+ import { Message } from '$lib/fragments';
+ import { onMount } from 'svelte';
+ import { apiClient } from '$lib/utils/axios';
+
+ let messages = $state([]);
+
+ onMount(async () => {
+ const { data } = await apiClient.get('/api/chats');
+ const { data: userData } = await apiClient.get('/api/users');
+ messages = data.chats.map((c) => {
+ const members = c.participants.filter((u) => u.id !== userData.id);
+ console.log(members);
+ const memberNames = members.map((m) => m.name ?? m.handle ?? m.ename);
+ const avatar = members.length > 1 ? '/images/group.png' : members[0].avatarUrl;
+ return {
+ id: c.id,
+ avatar,
+ username: memberNames.join(', '),
+ unread: c.latestMessage.isRead,
+ text: c.latestMessage.text
+ };
+ });
+ });
+
+
+
+ {#each messages as message}
+ goto(`/messages/${message.id}`)}
+ />
+ {/each}
+
diff --git a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
new file mode 100644
index 00000000..e1ee2d8e
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
@@ -0,0 +1,94 @@
+
+
+
+
+ {#each messages as msg (msg.id)}
+
+ {/each}
+
+
+
diff --git a/platforms/pictique/src/routes/(protected)/post/+page.svelte b/platforms/pictique/src/routes/(protected)/post/+page.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/platforms/pictique/src/routes/(protected)/profile/+page.svelte b/platforms/pictique/src/routes/(protected)/profile/+page.svelte
new file mode 100644
index 00000000..0fbba997
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/profile/+page.svelte
@@ -0,0 +1,2 @@
+
diff --git a/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
new file mode 100644
index 00000000..2aeea589
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
@@ -0,0 +1,104 @@
+
+
+
+ {#if loading}
+
+ {:else if error}
+
+ {:else if profile}
+ handlePostClick(post)}
+ {handleFollow}
+ {handleMessage}
+ />
+
+ {#if profile}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/if}
+ {/if}
+
diff --git a/platforms/pictique/src/routes/(protected)/settings/+layout.svelte b/platforms/pictique/src/routes/(protected)/settings/+layout.svelte
new file mode 100644
index 00000000..2f3999fb
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/settings/+layout.svelte
@@ -0,0 +1,7 @@
+
+
+
+ {@render children()}
+
diff --git a/platforms/pictique/src/routes/(protected)/settings/+page.svelte b/platforms/pictique/src/routes/(protected)/settings/+page.svelte
new file mode 100644
index 00000000..70433ebb
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/settings/+page.svelte
@@ -0,0 +1,74 @@
+
+
+
+
goto(`/settings/account`)} profileSrc={userImage}>
+ {#snippet children()}
+
+
{username}
+
{userEmail}
+
+
+
+
Personalisation
+
+ goto(`/settings/notifications`)}>
+ {#snippet leadingIcon()}
+
+ {/snippet}
+ {#snippet children()}
+ Notifications
+ {/snippet}
+
+
+
+ goto(`/settings/data-and-storage`)}>
+ {#snippet leadingIcon()}
+
+ {/snippet}
+ {#snippet children()}
+ Data & Storage
+ {/snippet}
+
+
+
+
+ goto(`/settings/logout`)}>
+ {#snippet leadingIcon()}
+
+ {/snippet}
+ {#snippet children()}
+ Logout
+ {/snippet}
+
+
+
+
+
+
{
+ profileImageDataUrl = '';
+ files = undefined;
+ }}
+ />
+ {#if profileImageDataUrl}
+ 
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/platforms/pictique/src/routes/(protected)/settings/data-and-storage/+page.svelte b/platforms/pictique/src/routes/(protected)/settings/data-and-storage/+page.svelte
new file mode 100644
index 00000000..27c9c9e4
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/settings/data-and-storage/+page.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+ {#snippet children()}
+ Merul will add things here (as per out discussion)
+ {/snippet}
+
+
+
diff --git a/platforms/metagram/src/routes/(protected)/settings/account/deactivate/+page.svelte b/platforms/pictique/src/routes/(protected)/settings/logout/+page.svelte
similarity index 65%
rename from platforms/metagram/src/routes/(protected)/settings/account/deactivate/+page.svelte
rename to platforms/pictique/src/routes/(protected)/settings/logout/+page.svelte
index 67214d5b..d1fca886 100644
--- a/platforms/metagram/src/routes/(protected)/settings/account/deactivate/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/settings/logout/+page.svelte
@@ -1,15 +1,17 @@
-
-
+ goto(`/settings/data-and-storage`)}
+ >
{#snippet children()}
-
- Are you sure you want to deactivate this account?
-
+
Do you want to log out?
You can log back in anytime
+
+ {#snippet children()}
+
+
Push Notifications
+
+ {/snippet}
+
+
+
+ {#snippet children()}
+
+
Post Interactions
+
Likes and comments on your post
+
+
+
+ {#snippet children()}
+
+
DM Requests
+
+ {/snippet}
+
+
+
+ {#snippet children()}
+
+
New Followers
+
+ {/snippet}
+
+
+