Feat/social media platforms #195
Conversation
|
Important Review skippedMore than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review. 81 files out of 290 files are above the max files limit of 100. Please upgrade to Pro plan to get higher limits. You can disable this status message by setting the WalkthroughThis update introduces a new frontend platform, "pictique", featuring a comprehensive SvelteKit application with modular UI components, storybook integration, theming, and localization. It adds new fragments, icons, utilities, and dummy data, establishing a foundation for social features like posts, comments, messaging, profiles, and settings. Simultaneously, it removes legacy Metagram components and routes, and updates related infrastructure and dependencies. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UIComponent
participant Store
participant API
User->>UIComponent: Interacts (e.g., create post, comment, follow)
UIComponent->>Store: Updates state (e.g., add post, fetch comments)
Store->>API: Sends HTTP request (post, get, patch)
API-->>Store: Returns response (data, success/failure)
Store-->>UIComponent: Updates UI reactively
UIComponent-->>User: Renders new state/feedback
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 113
🔭 Outside diff range comments (6)
platforms/blabsy/src/lib/fragments/SideBar/SideBar.svelte (4)
15-20:⚠️ Potential issueIncorrect prop initialization with
$props()and$bindable.
Neither$props()nor$bindableare standard Svelte APIs. This will error at runtime. Switch to:- let { activeTab = $bindable('home'), profileSrc = 'https://picsum.photos/200', handlePost, ...restProps }: ISideBarProps = $props(); + export let activeTab: string = 'home'; + export let profileSrc: string = 'https://picsum.photos/200'; + export let handlePost?: () => Promise<void>; + const { class: _class, ...restProps } = $$restProps;
22-37: 🛠️ Refactor suggestionReplace non‐existent
$effectwith a Svelte reactive declaration.
$effectisn’t defined. Use a reactive statement or subscribe to thepagestore. For example:import { page } from '$app/stores'; $: { const path = $page.url.pathname; if (path.includes('home')) activeTab = 'home'; // … }
58-153:⚠️ Potential issueUse Svelte’s
on:clickdirective instead ofonclick.
Inlineonclickattributes won’t run in Svelte. Update all handlers like:- onclick={() => { activeTab = 'home'; goto('/home'); }} + on:click={() => { activeTab = 'home'; goto('/home'); }}Apply this change on every
<button>.
158-163:⚠️ Potential issueUse the
profileSrcprop for the avatar URL.
You defaultprofileSrcbut hard-code a different string in<img>. Update to:- src={'https://picsum.photos/200/200'} + src={profileSrc}and ensure the prop includes dimensions or handle sizing via CSS.
platforms/blabsy/src/lib/fragments/MessageInput/MessageInput.svelte (1)
54-59: 🛠️ Refactor suggestionAdd error handling for the send button click.
The async
handleSendfunction should include error handling for consistency with the keyboard interaction.<div class="bg-grey h-13 w-13 flex aspect-square items-center justify-center rounded-full" - onclick={handleSend} + onclick={() => handleSend().catch((error) => { + console.error('Failed to send message:', error); + // Consider showing user-friendly error message + })} >platforms/pictique/src/lib/fragments/Post/Post.svelte (1)
1-204: 🛠️ Refactor suggestionConsider consolidating duplicate Post components.
This Post component appears nearly identical to
platforms/blabsy/src/lib/fragments/Post/Post.svelte. Consider creating a shared component to avoid code duplication.Consider moving the Post component to a shared library location and importing it in both platforms, or create a base Post component that both platforms can extend.
♻️ Duplicate comments (3)
platforms/pictique/src/lib/fragments/Post/Post.svelte (3)
21-21:⚠️ Potential issueFix props mismatch between interface and destructuring.
Same issue as in the blabsy version - the interface declares
caption: stringbut the destructuring usestext.interface IPostProps extends HTMLAttributes<HTMLElement> { - caption: string; + text: string;Also applies to: 55-55
94-98: 🛠️ Refactor suggestionAdd keyboard event handlers for accessibility.
Same accessibility issue as the blabsy version - missing keyboard event handlers.
- <!-- svelte-ignore a11y_click_events_have_key_events --> - <!-- svelte-ignore a11y_no_static_element_interactions --> - <div + <button class="flex items-center justify-between gap-2" onclick={() => goto(`/profile/${userId}`)} >
138-152: 🛠️ Refactor suggestionRemove duplicate conditional logic.
Same issue as blabsy version - nested identical conditions.
{#if imgUris.length > 1} <div class="absolute start-[50%] bottom-4 mt-2 flex translate-x-[-50%] items-center justify-center gap-1"> - {#if imgUris.length > 1} <div class="mt-2 flex items-center justify-center gap-1"> {#each imgUris as _, i} <div class={`h-1.5 w-1.5 rounded-full ${currentIndex === i ? 'bg-white' : 'bg-black-600'}`}></div> {/each} </div> - {/if} </div> {/if}
🧹 Nitpick comments (94)
platforms/pictique/project.inlang/project_id (1)
1-1: Confirm project ID validity and formatting.
Ensure that theproject_idmatches the expected Inlang project ID pattern and that the file ends with exactly one newline (no trailing whitespace).platforms/pictique/project.inlang/.gitignore (1)
1-1: Refine ignore pattern for cache directory.
Prefer specifyingcache/(with trailing slash) to clearly target the directory, and consider adding other generated caches (e.g.,.cache/) if applicable.infrastructure/evault-provisioner/src/index.ts (2)
79-79: Enhance logging with structured format and appropriate level.Consider using a proper logging library with different log levels instead of
console.logfor production code. Also, add more context to make debugging more effective.-console.log("provisioning init"); +logger.info("Provisioning eVault started", { + namespace, + verificationId, + timestamp: new Date().toISOString() +});
99-99: Improve logging context and avoid potential sensitive data exposure.The current log doesn't provide meaningful context. Consider adding more details while being mindful of sensitive data.
-console.log("jwk"); +logger.debug("Fetching JWKS from public registry", { + registryUrl: process.env.PUBLIC_REGISTRY_URL +});infrastructure/evault-provisioner/src/templates/evault.nomad.ts (1)
40-40: Use structured logging instead of console.log.Similar to the other file, consider using a proper logging framework for production code.
-console.log("starting to provision"); +logger.info("Starting eVault provisioning", { w3id, eVaultId });platforms/pictique/src/app.d.ts (1)
1-11: Stub declaration file is valid but can be extended.
The commented interfaces follow SvelteKit docs. Once you need to customizeError,Locals,PageData, etc., uncomment and extend them to match your application's types.platforms/pictique/src/app.html (1)
1-13: Base HTML template is correctly set up.
This follows SvelteKit standards and includes the required%sveltekit.head%and%sveltekit.body%placeholders. Consider adding production‐ready meta tags (e.g., description, theme-color, PWA manifest) or link tags as needed.platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte (1)
13-14: MergeclassfromrestPropssafely.
When you spreadrestPropsalongside a staticclassattribute, Svelte may override one of them. Consider:<aside {...restProps} class={`hidden border … ${_class || ''}`}>to concatenate dynamic and static classes.
platforms/blabsy/src/routes/(protected)/profile/+page.svelte (1)
1-3: Empty page component needs implementation or removal.
This route file currently has no markup or logic. Please confirm its intent—either scaffold the profile page (load data, import fragments) or remove the file to avoid a dead route.platforms/blabsy/package.json (1)
55-57: Add dependencies for HTTP, QR generation, and date formatting
axiosandsvelte-qrcodealign with the new network and QR features. Consider swapping outmomentfor a lighter, tree-shakable library (e.g.,date-fnsordayjs) to reduce bundle size.platforms/blabsy/src/lib/ui/Qr/Qr.svelte (1)
1-7: Make QR code size configurable and guard against SSR errors
Exposingsizeas a prop improves reusability, and dynamically importingsvelte-qrcodewithinonMountprevents SSR issues.<script lang="ts"> - import QrCode from 'svelte-qrcode'; - export let data: string; + import { onMount } from 'svelte'; + let QrCode; + onMount(async () => { + const mod = await import('svelte-qrcode'); + QrCode = mod.default; + }); + export let data: string; + export let size: number = 330; </script> -<QrCode value={data} size={330} /> +{#if QrCode} + <svelte:component this={QrCode} value={data} size={size} /> +{/if}platforms/blabsy/src/routes/(protected)/settings/account/+page.svelte (1)
5-7: Consider adding error handling and user feedback for the redirect.The immediate redirect pattern is valid, but consider adding error handling and a brief loading indicator to improve user experience.
onMount(() => { - goto('/settings/account/username'); + goto('/settings/account/username').catch((error) => { + console.error('Navigation failed:', error); + }); });Also consider adding a loading state:
+<script lang="ts"> + import { goto } from '$app/navigation'; + import { onMount } from 'svelte'; + + let redirecting = true; + + onMount(async () => { + try { + await goto('/settings/account/username'); + } catch (error) { + console.error('Navigation failed:', error); + redirecting = false; + } + }); +</script> + +{#if redirecting} + <div>Redirecting to account settings...</div> +{/if}platforms/pictique/src/lib/fragments/UserRequest/UserRequest.stories.ts (3)
1-3: Tightenrenderargument typing
The current type forrender’sargsincludes bothComponentandprops, which doesn’t match the actual story inputs. You can improve type safety by usingComponentProps<typeof UserRequest>or theMeta/StoryObjgenerics from@storybook/svelte.
4-12: AdoptMetafor story metadata
Rather than a bare object, import and useMetafrom@storybook/svelteto annotate the default export. This enables richer IDE support and aligns with Storybook conventions.
16-22: Replacealertwith Storybookaction
Inlinealertcalls block the UI and aren’t tracked in the actions panel. Importactionand update the handler:+ import { action } from '@storybook/addon-actions'; export const Primary = { args: { - handleFollow: () => alert('Adsad') + handleFollow: action('user-followed') } };platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte (1)
5-7: Shorten placeholder content
The Lorem Ipsum block is very long and may distract from the drawer behavior. Consider trimming it to a couple of sentences or using a smaller placeholder component to keep the focus on the UI shell.platforms/pictique/.storybook/preview.ts (1)
5-13: Enhance default Storybook settings
You might improve the developer experience by adding default backgrounds or layout options, for example:const preview: Preview = { parameters: { backgrounds: { default: 'light', values: [{ name: 'light', value: '#ffffff' }] }, layout: 'centered', controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } } } };platforms/pictique/README.md (2)
1-4: Clarify README scope
Indicate that this README is specifically for the Pictique frontend within the monorepo, and link back to the root README for overall project guidance to avoid confusion.
19-26: Document Storybook usage
Add a section on how to launch Storybook (e.g.,npm run storybook) so contributors can easily explore and test UI fragments.platforms/pictique/.gitignore (2)
17-21: Refine.env.*exclusion
The blanket.env.*ignore pattern then re-include approach works, but you might only want to ignore environment-specific files (e.g.,.env.local,.env.production) instead of all.env.*variants.
25-26: Target Storybook log file explicitly
Using*storybook.logcould match unintended files. If your log is named.storybook.log, use that exact filename for clarity.platforms/blabsy/src/lib/ui/Modal/Modal.svelte (1)
21-21: Consider adding focus management for complete accessibility.While the current implementation handles closing, consider adding focus trap functionality to prevent keyboard navigation from escaping the modal.
Would you like me to generate a focus trap implementation or suggest a library like
focus-trap-sveltefor complete modal accessibility?platforms/pictique/src/lib/fragments/Comment/Comment.stories.ts (3)
1-3: Refine import usage for type safety.The
ComponentPropsimport is only used to type thepropskey in the customrender. Consider removing the redundantComponentproperty from theargstype and typingrenderdirectly as(args: ComponentProps<typeof Comment>).
5-13: Leverage Storybook’sMetatyping.Annotate the default export with
Meta<typeof Comment>(from@storybook/svelte) for better consistency and auto-completion. E.g.:import type { Meta } from '@storybook/svelte'; const meta: Meta<typeof Comment> = { title: 'UI/Comment', component: Comment, tags: ['autodocs'], }; export default meta;
15-19: Expand example variants.Currently
Mainuses onlycomments[0]. It would be helpful to add additional stories (e.g., a comment without replies or with nested replies) to document edge cases.platforms/pictique/src/lib/fragments/InputFile/InputFile.stories.ts (3)
1-1: AdoptMetaandStoryObjgenerics.Import and use
Meta<typeof InputFile>andStoryObj<typeof InputFile>from@storybook/svelteto enforce prop types and streamline the story definition.
3-11: Type-safe default export.Explicitly type the default export as
Meta<typeof InputFile>:import type { Meta } from '@storybook/svelte'; const meta: Meta<typeof InputFile> = { title: 'UI/InputFile', component: InputFile, tags: ['autodocs'], render: (args) => ({ Component: InputFile, props: args }), }; export default meta;
13-15: Provide meaningful default props.An empty
argswill not show the component’s UI. Populate defaults such as:args: { type: 'file', placeholder: 'Select a file', helperText: 'Max size: 2MB' }platforms/pictique/src/lib/fragments/SideBar/SideBar.stories.ts (3)
1-3: Simplify args typing.You can drop the custom
(args: { Component: SideBar; props: ComponentProps<typeof SideBar> })signature and let Storybook infer props viaStoryObj<typeof SideBar>.
4-12: UseMetafor story metadata.Replace the untyped default export with:
import type { Meta } from '@storybook/svelte'; const meta: Meta<typeof SideBar> = { title: 'UI/SideBar', component: SideBar, tags: ['autodocs'], }; export default meta;
14-16: Add default active tab.Since
SideBarlikely expects an initial active tab or callback, consider providingargs: { activeTab: 'home' }(or similar) to render a realistic state.platforms/pictique/src/lib/fragments/BottomNav/BottomNav.stories.ts (3)
1-3: Streamline import and type inference.Mirror the other fragments by importing
MetaandStoryObjfrom@storybook/svelteinstead of manually typingComponentProps.
4-12: Annotate default export withMeta.Define the default export as:
import type { Meta } from '@storybook/svelte'; const meta: Meta<typeof BottomNav> = { title: 'UI/BottomNav', component: BottomNav, tags: ['autodocs'], }; export default meta;
14-16: Populate sensible default args.An empty
argswon’t trigger any visible UI. Consider adding defaults likeactiveIndex: 0oritems: [...]to illustrate functionality.platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.ts (1)
9-12: Simplify the render function typing.The render function's args typing is unnecessarily complex. The
Componentproperty in the args type is redundant since you're already defining the component separately.- render: (args: { Component: Drawer; props: ComponentProps<typeof Drawer> }) => ({ + render: (args: ComponentProps<typeof Drawer>) => ({ Component: Drawer, props: args })platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.ts (2)
9-16: Simplify the render function typing.The render function's args typing is unnecessarily complex, similar to the Drawer story.
- render: (args: { - Component: SettingsNavigationButton; - props: ComponentProps<typeof SettingsNavigationButton>; - }) => ({ + render: (args: ComponentProps<typeof SettingsNavigationButton>) => ({ Component: SettingsNavigationButton, props: args })
29-29: Consider using a more reliable image source.The external URL
https://picsum.photos/200/300might not be reliable in all environments (offline development, corporate networks). Consider using a local placeholder image or a data URL for better reliability in Storybook.- profileSrc: 'https://picsum.photos/200/300', + profileSrc: '/placeholder-avatar.jpg', // or use a data URLplatforms/pictique/src/lib/fragments/Post/Post.stories.ts (3)
8-12: Simplify the render function typing.The render function's args typing is unnecessarily complex, consistent with the issue in other story files.
- render: (args: { Component: Post; props: ComponentProps<typeof Post> }) => ({ + render: (args: ComponentProps<typeof Post>) => ({ Component: Post, props: args })
5-5: Fix inconsistent story title casing.The story title uses lowercase 'ui/Post' while other stories use 'UI/...' format. Maintain consistency across the Storybook organization.
- title: 'ui/Post', + title: 'UI/Post',
16-21: Consider using more reliable image sources.The external URLs for avatar and post images might not be reliable in all environments. Consider using local placeholder images or data URLs for better reliability in Storybook development.
- avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', + avatar: '/placeholder-avatar.jpg', // or use a local asset - imgUris: [ - 'https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg', - 'https://picsum.photos/200' - ], + imgUris: [ + '/placeholder-post-1.jpg', + '/placeholder-post-2.jpg' + ],platforms/pictique/src/lib/icons/Camera.svelte (1)
2-2: Fix inconsistent import path.The import path uses
./../typesinstead of../types, which is inconsistent with other icon components likeCommentIcon.svelte.- import type { ISvgProps } from './../types'; + import type { ISvgProps } from '../types';platforms/blabsy/src/routes/(auth)/auth/+page.svelte (1)
18-20: Remove console.log from production code.Console logs should be removed or replaced with proper logging in production code.
eventSource.onopen = function (e) { - console.log('Successfully connected.'); + // Connection established successfully };platforms/pictique/src/lib/fragments/SettingsToggleButton/SettingsToggleButton.svelte (2)
17-17: Simplify the class name concatenation.The
cnutility likely already handles array joining internally, making the explicit.join(' ')redundant.-<button {...restProps} class={cn([cBase, restProps.class].join(' '))} {onclick}> +<button {...restProps} class={cn(cBase, restProps.class)} {onclick}>
7-10: Consider dropping the "I" prefix for interface naming.Modern TypeScript conventions typically omit the "I" prefix for interfaces.
- interface ISettingsToggleButtonProps extends HTMLButtonAttributes { + interface SettingsToggleButtonProps extends HTMLButtonAttributes {And update the usage:
- let { children, onclick, checked, ...restProps }: ISettingsToggleButtonProps = $props(); + let { children, onclick, checked, ...restProps }: SettingsToggleButtonProps = $props();platforms/pictique/src/lib/fragments/SettingsDeleteButton/SettingsDeleteButton.svelte (2)
18-18: Simplify the class name concatenation.Same issue as in SettingsToggleButton - the
cnutility likely handles array joining internally.-<div {...restProps} class={cn([cBase, restProps.class].join(' '))}> +<div {...restProps} class={cn(cBase, restProps.class)}>
8-11: Consider dropping the "I" prefix for interface naming.Same naming convention suggestion as the previous component.
- interface ISettingsDeleteButtonProps extends HTMLAttributes<HTMLElement> { + interface SettingsDeleteButtonProps extends HTMLAttributes<HTMLElement> {platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.stories.ts (2)
8-12: Simplify the render function.The render function can be simplified since Storybook can handle the component rendering automatically.
- render: (args: { Component: ChatMessage; props: ComponentProps<typeof ChatMessage> }) => ({ - Component: ChatMessage, - props: args - }) + render: (args: ComponentProps<typeof ChatMessage>) => ({ + Component: ChatMessage, + props: args + })Or even simpler, you can omit the render function entirely if using default rendering:
export default { title: 'UI/ChatMessage', component: ChatMessage, tags: ['autodocs'] - render: (args: { Component: ChatMessage; props: ComponentProps<typeof ChatMessage> }) => ({ - Component: ChatMessage, - props: args - }) };
14-42: Consider more descriptive story names.The story names could be more descriptive to better communicate their purpose in the Storybook UI.
-export const Outgoing = { +export const OutgoingMessage = { -export const Incoming = { +export const IncomingMessage = { -export const OutgoingWithoutHead = { +export const OutgoingWithoutAvatar = { -export const WithoutHead = { +export const IncomingWithoutAvatar = {platforms/blabsy/src/routes/(protected)/messages/+page.svelte (1)
15-15: Consider making the group image path configurable.The hardcoded path
/images/group.pngshould be configurable or validated to ensure the asset exists.- const avatar = members.length > 1 ? '/images/group.png' : members[0].profilePictureUrl; + const avatar = members.length > 1 ? '/images/group.png' : (members[0]?.profilePictureUrl ?? '/images/default-avatar.png');platforms/blabsy/src/routes/(protected)/discover/+page.svelte (1)
17-23: Consider cancelling pending searches on component unmount.The current implementation doesn't handle component unmount during pending search operations, which could cause memory leaks or state updates after unmount.
+ let searchController: AbortController | null = null; + function handleSearch(value: string) { searchValue = value; clearTimeout(debounceTimer); + // Cancel previous search if still pending + if (searchController) { + searchController.abort(); + } + searchController = new AbortController(); debounceTimer = setTimeout(() => { - searchUsers(value); + searchUsers(value, searchController?.signal); }, 300); }platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts (2)
17-42: Improve sample data diversity and uniqueness.All image objects have identical alt text and URLs, which doesn't provide good demonstration of the component's capabilities.
let images = [ { url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', - alt: 'Sample Image 1' + alt: 'Sample Image 1' }, { - url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', - alt: 'Sample Image 1' + url: 'https://picsum.photos/250/250?random=1', + alt: 'Sample Image 2' }, { - url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', - alt: 'Sample Image 1' + url: 'https://picsum.photos/250/250?random=2', + alt: 'Sample Image 3' }, // ... continue pattern for remaining images
44-51: Consider using reactive assignment for Storybook compatibility.Direct array mutation might not trigger Storybook's reactivity properly. Consider using reactive assignment.
export const Primary = { args: { images: images, callback: (i: number) => { - images = images.filter((_, index) => index !== i); + // Use reactive assignment for better Storybook compatibility + const updatedImages = images.filter((_, index) => index !== i); + // In a real Storybook context, you might need to trigger re-render + images = updatedImages; } } };platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte (1)
54-61: Fix unusual comma operator usage in click handler.The comma operator in the onclick handler is confusing and could be simplified.
<button bind:this={buttonEl} - onclick={(e) => { - e.preventDefault(), openMenu(); - }} + onclick={(e) => { + e.preventDefault(); + openMenu(); + }} >platforms/blabsy/src/routes/+layout.svelte (1)
41-43: Consider making splash screen duration configurable.The 2.5-second timeout is hardcoded. Consider making this configurable or at least using a named constant.
+ const SPLASH_SCREEN_DURATION = 2500; + onMount(() => { ownerId.value = '1'; setTimeout(() => { showSplashScreen = false; - }, 2500); + }, SPLASH_SCREEN_DURATION); });platforms/blabsy/src/lib/components/CreatePostModal.svelte (2)
27-27: Remove debug console.log statement.There's a debug console.log statement that should be removed before production.
- console.log('HERRREE');
72-78: Add comprehensive file input validation.The file input should include more specific validation and better user guidance.
<input type="file" accept="image/*" multiple + max="5" on:change={handleImageUpload} - class="file:bg-brand-burnt-orange hover:file:bg-brand-burnt-orange-600 block w-full text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white" + class="file:bg-brand-burnt-orange hover:file:bg-brand-burnt-orange-600 block w-full text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white" + title="Select up to 5 images (max 5MB each)" /> + <p class="mt-1 text-xs text-gray-500"> + Up to 5 images, max 5MB each. Supported formats: JPG, PNG, GIF, WebP + </p>platforms/pictique/src/lib/components/CreatePostModal.svelte (1)
27-27: Remove debug logging.This debug console.log statement should be removed before production.
- console.log('HERRREE');platforms/pictique/src/lib/fragments/InputFile/InputFile.svelte (1)
34-34: Improve filename truncation logic.The current truncation logic is arbitrary and might cut off important parts of the filename.
-<h3 class="text-black-800">{files[0].name.slice(0, 10) + '...'}</h3> +<h3 class="text-black-800" title={files[0].name}> + {files[0].name.length > 15 + ? files[0].name.slice(0, 12) + '...' + files[0].name.slice(-3) + : files[0].name} +</h3>platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte (1)
19-19: Remove debug logging.This debug console.log statement should be removed before production.
- console.log(result);platforms/pictique/src/lib/fragments/UserRequest/UserRequest.svelte (4)
7-7: Fix interface naming convention.The interface name has a typo and doesn't follow Pascal case convention.
- interface IUserRequestprops extends HTMLAttributes<HTMLElement> { + interface IUserRequestProps extends HTMLAttributes<HTMLElement> {
14-15: Update destructuring to match corrected interface name.- let { userImgSrc, userName, description, handleFollow, ...restProps }: IUserRequestprops = + let { userImgSrc, userName, description, handleFollow, ...restProps }: IUserRequestProps =
20-20: Simplify class concatenation logic.The current class concatenation is unnecessarily complex and potentially error-prone.
- class={cn(['flex items-center justify-between', restProps.class].join(' '))} + class={cn('flex items-center justify-between', restProps.class)}
29-31: Consider accessibility improvements for the follow button.The button lacks proper accessibility attributes and could benefit from loading state handling.
- <Button class="max-w-[100px]" variant="secondary" size="sm" callback={handleFollow} - >Follow</Button - > + <Button + class="max-w-[100px]" + variant="secondary" + size="sm" + callback={handleFollow} + aria-label={`Follow ${userName}`} + > + Follow + </Button>platforms/pictique/src/lib/fragments/SettingsPage/SettingsPage.svelte (2)
38-38: Simplify route comparison logic.The route comparison logic is repetitive and could be extracted into a utility function.
+ const isActiveRoute = (routePath: string) => route === routePath; - <div class="{route === `/settings/notifications` ? 'bg-grey' : ''} rounded-xl p-2"> + <div class="{isActiveRoute('/settings/notifications') ? 'bg-grey' : ''} rounded-xl p-2"> - <div class="{route === `/settings/data-and-storage` ? 'bg-grey' : ''} rounded-xl p-2"> + <div class="{isActiveRoute('/settings/data-and-storage') ? 'bg-grey' : ''} rounded-xl p-2"> - <div class="{route === `/settings/logout` ? 'bg-grey' : ''} rounded-xl p-2"> + <div class="{isActiveRoute('/settings/logout') ? 'bg-grey' : ''} rounded-xl p-2">Also applies to: 56-56, 70-70
22-84: Consider adding keyboard navigation support.The navigation buttons should support keyboard navigation for better accessibility.
Add proper keyboard event handlers and focus management to the SettingsNavigationButton components for better accessibility compliance.
platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte (2)
34-34: Add null check for leadingIcon snippet rendering.The optional chaining
?.()is unnecessary since you've already checked forleadingIconexistence in the{#if}block.- {@render leadingIcon?.()} + {@render leadingIcon()}
47-47: Add null check consistency for children snippet.Similar to the leadingIcon, the optional chaining is unnecessary here.
- {@render children?.()} + {@render children()}platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte (2)
27-27: Improve conditional class string construction.The current class concatenation is hard to read and maintain. Consider using a more structured approach.
- [`flex items-start gap-2 ${isOwn ? 'flex' : 'flex-row-reverse'}`, restProps.class].join(' ') + ['flex items-start gap-2', isOwn ? 'flex' : 'flex-row-reverse', restProps.class].filter(Boolean).join(' ')
39-39: Use consistent color system.The component mixes hardcoded colors (
bg-grey) with CSS custom properties. Consider using the design system consistently.Consider replacing
bg-greywith a CSS custom property likebg-gray-100or equivalent from your design system to maintain consistency with thevar(--color-brand-burnt-orange)usage.platforms/pictique/src/lib/fragments/MessageInput/MessageInput.svelte (2)
31-31: Remove unused variable.The
fileInputvariable is declared but never used in the component.- let fileInput: HTMLInputElement | undefined = $state();
14-15: Remove unused props from interface.The
filesandhandleAddprops are not used in the component implementation.interface IMessageInputProps extends HTMLAttributes<HTMLElement> { variant: 'comment' | 'dm'; input?: HTMLInputElement; src: string; value: string; placeholder?: string; - files?: FileList | undefined; - handleAdd?: () => void; handleSend: () => Promise<void>; }And remove from props destructuring:
let { variant = 'comment', src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', value = $bindable(), input = $bindable(), placeholder, - files = $bindable(), - handleAdd, handleSend, ...restProps }: IMessageInputProps = $props();platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte (2)
23-23: Remove commented code.The commented line suggests uncertainty in the implementation. Remove it to keep the code clean.
- // activeTab = newTab;
48-106: Extract repetitive button styling into a reusable function.The button styling logic is repeated for each navigation item, making maintenance difficult.
+ const getButtonClass = (tabName: string) => ({ + color: activeTab === tabName ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-400)', + fill: activeTab === tabName ? 'var(--color-brand-burnt-orange-300)' : 'white' + }); <button type="button" class="flex flex-col items-center" aria-current={activeTab === 'home' ? 'page' : undefined} onclick={() => handleNavClick('home')} > <Home size="24px" - color={activeTab === 'home' - ? 'var(--color-brand-burnt-orange)' - : 'var(--color-black-400)'} - fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange-300)' : 'white'} + {...getButtonClass('home')} /> </button>platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.svelte (2)
29-31: Simplify class name construction.The current approach of joining arrays and then calling
cnis unnecessarily complex.- class={cn( - ['flex max-w-screen flex-row items-center gap-4 scroll-auto', restProps.class].join(' ') - )} + class={cn('flex max-w-screen flex-row items-center gap-4 scroll-auto', restProps.class)}
48-82: Move component documentation to JSDoc or separate file.Large inline documentation blocks make the component harder to read and maintain. Consider using JSDoc comments or a separate documentation file.
+/** + * @component UploadedPostView + * @description This component displays uploaded images with removal functionality + * @param {IImage[]} images - Array of image objects with url and alt text + * @param {string} width - Width class (default: 'w-full') + * @param {string} height - Height class (default: 'h-full') + * @param {(i: number) => void} callback - Function called when cross is clicked + */ -<!-- - @component - export default UploadedPostView - ... --->platforms/blabsy/src/lib/fragments/CreatePostModal/CreatePostModal.svelte (2)
19-19: Remove debug console.log statement.Debug logging should not be present in production code.
- console.log(result);
64-64: Use CSS variables for brand colors.Hardcoded Tailwind classes for brand colors should use CSS variables for consistency.
- class="focus:border-brand-burnt-orange w-full resize-none rounded-lg border border-gray-200 p-4 focus:outline-none" + class="w-full resize-none rounded-lg border border-gray-200 p-4 focus:border-[var(--color-brand-burnt-orange)] focus:outline-none"platforms/pictique/src/lib/fragments/Profile/Profile.svelte (1)
48-48: Extract filter logic for better readability.The inline filter logic is complex and could be extracted for better maintainability.
+ $: postsWithImages = profileData.posts.filter((post) => post.imgUris && post.imgUris.length > 0); <div class="grid grid-cols-3 gap-1"> - {#each profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0) as post} + {#each postsWithImages as post}platforms/pictique/src/lib/fragments/Modal/Modal.svelte (1)
47-47: Reconsider automatic modal presentation.Automatically calling
present()on mount may not be desired behavior. Consider making this conditional or controlled by a prop.+ let autoPresent = true; // or make this a prop + onMount(() => { if (modalEl) paneModal = new CupertinoPane(modalEl, { // ... config }); - present(); + if (autoPresent) present();platforms/blabsy/src/lib/fragments/Post/Post.svelte (1)
34-49: Improve function naming and documentation.The function name
pairAndJoinChunksdoesn't clearly indicate its purpose. Consider adding documentation or a more descriptive name.+ /** + * Combines pairs of URI chunks into complete data URIs + * @param chunks Array of URI chunks where each pair forms a complete URI + * @returns Array of complete URI strings + */ - function pairAndJoinChunks(chunks: string[]): string[] { + function combineUriChunks(chunks: string[]): string[] {platforms/pictique/src/lib/fragments/Header/Header.stories.ts (2)
8-11: Simplify render function for Storybook.The render function structure seems unnecessarily complex for Storybook stories.
- render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({ - Component: Header, - props: args - }) + render: (args: ComponentProps<typeof Header>) => ({ + Component: Header, + props: args + })
19-19: Replace alert() with console.log() in Storybook stories.Using
alert()in Storybook stories can be disruptive during development and testing.- callback: () => alert('clicked') + callback: () => console.log('Header clicked')- callback: () => alert('menu clicked') + callback: () => console.log('Header menu clicked')- callback: () => alert('clicked') + callback: () => console.log('Tertiary header clicked')Also applies to: 42-42, 50-50
platforms/blabsy/src/routes/(protected)/profile/[id]/+page.svelte (2)
77-102: Remove commented code block.Large blocks of commented code should be removed. If this functionality is needed, it should be properly implemented or tracked in an issue.
- {#if profile} - <!-- {#each profile.posts as post (post.id)} --> - <!-- <li class="mb-6"> --> - <!-- <Post --> - <!-- avatar={post.author.avatarUrl} --> - <!-- username={post.author.handle} --> - <!-- imgUris={post.images} --> - <!-- text={post.text} --> - <!-- time={new Date(post.createdAt).toLocaleDateString()} --> - <!-- count={{ likes: post.likedBy.length, comments: post.comments.length }} --> - <!-- callback={{ --> - <!-- like: async () => { --> - <!-- try { --> - <!-- } catch (err) {} --> - <!-- }, --> - <!-- comment: () => { --> - <!-- if (window.matchMedia('(max-width: 768px)').matches) { --> - <!-- } else { --> - <!-- } --> - <!-- }, --> - <!-- menu: () => alert('menu') --> - <!-- }} --> - <!-- /> --> - <!-- </li> --> - <!-- {/each} --> - {/if}
9-9: Remove unused import.The Post component is imported but only used in commented code.
-import Post from '../../../../lib/fragments/Post/Post.svelte';platforms/blabsy/src/lib/stores/comments.ts (1)
16-19: Initialize activePostId with explicit null value.The
activePostIdstore is declared without an explicit initial value, which defaults toundefinedrather than the expectednulltype.-export const activePostId = writable<string | null>(); +export const activePostId = writable<string | null>(null);platforms/blabsy/src/lib/stores/posts.ts (1)
4-27: Consider extracting shared User type and evaluate embedded replies approach.The interface is well-structured but has opportunities for improvement:
- Code duplication:
authorandreplies[].creatorhave identical structures- Performance concern: Embedding full replies in posts could impact performance with large comment threads
+export interface User { + id: string; + username: string; + displayName: string; + profilePictureUrl: string; +} + +export interface Reply { + id: string; + text: string; + creator: User; + createdAt: string; +} export interface Post { id: string; content: string; images: string[]; - author: { - id: string; - username: string; - displayName: string; - profilePictureUrl: string; - }; + author: User; createdAt: string; likedBy: string[]; - replies: { - id: string; - text: string; - creator: { - id: string; - username: string; - displayName: string; - profilePictureUrl: string; - }; - createdAt: string; - }[]; + replies: Reply[]; }platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte (3)
10-20: Clarify profileSrc prop usage vs hardcoded image.The interface accepts a
profileSrcprop but the component uses a hardcoded placeholder URL on line 162. This makes the prop unused and potentially confusing.Either remove the unused prop or use it consistently:
interface ISideBarProps extends HTMLAttributes<HTMLElement> { activeTab?: string; - profileSrc: string; + profileSrc?: string; handlePost?: () => Promise<void>; }And update the image source:
-src={'https://picsum.photos/200/200'} +src={profileSrc || 'https://picsum.photos/200/200'}
54-171: Consider refactoring repetitive button structure for maintainability.The navigation buttons follow good accessibility practices but have significant code duplication. Consider extracting a reusable navigation item component.
Create a
NavItem.sveltecomponent:<script lang="ts"> import { goto } from '$app/navigation'; interface Props { tab: string; activeTab: string; label: string; path: string; icon?: any; isProfile?: boolean; profileSrc?: string; onclick?: () => void; } let { tab, activeTab, label, path, icon, isProfile, profileSrc, onclick }: Props = $props(); const handleClick = () => { if (onclick) { onclick(); } else { goto(path); } }; </script> <button type="button" class="flex items-center gap-2" aria-current={activeTab === tab ? 'page' : undefined} {onclick}={handleClick} > <!-- icon or profile image logic --> <h3 class={`${activeTab === tab ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}> {label} </h3> </button>
43-49: Reconsider the use ofrole="tablist"for navigation.The navigation uses
role="tablist"which is semantically intended for tab widgets (like browser tabs), not primary navigation. This might confuse screen readers.-<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role --> <nav {...restProps} aria-label="Main navigation" class={cn([cBase, restProps.class].join(' '))} - role="tablist" >The default
navigationrole for<nav>elements is more semantically appropriate for this use case.platforms/pictique/src/lib/fragments/Header/Header.svelte (1)
58-60: Consider more robust back navigation handling.The current implementation using
window.history.back()may not work in all scenarios (e.g., if there's no history to go back to).const backButtonCallback = () => { - window.history.back(); + if (window.history.length > 1) { + window.history.back(); + } else { + goto('/'); // fallback to home + } };Or consider using SvelteKit's navigation utilities for more consistent behavior.
platforms/blabsy/src/routes/(protected)/messages/[id]/+page.svelte (1)
100-100: Replace hardcoded image URL with dynamic user avatar.The hardcoded Picsum URL should be replaced with the actual user's profile picture or a proper placeholder.
Consider using the authenticated user's profile picture from the userData fetched in onMount.
platforms/blabsy/src/lib/stores/users.ts (1)
41-41: Replace console.error with proper error handling.Consider using a proper logging solution or error reporting service instead of console.error.
platforms/blabsy/src/routes/(protected)/+layout.svelte (1)
76-76: Use actual user profile pictures instead of hardcoded URLs.The hardcoded Picsum URLs should be replaced with the authenticated user's actual profile picture.
Consider fetching and using the current user's profile picture from the auth store or user data.
Also applies to: 142-142
platforms/blabsy/src/routes/(protected)/home/+page.svelte (1)
18-22: Implement pagination to handle large datasets.The TODO comment indicates missing pagination logic. This could cause performance issues as the post list grows.
Would you like me to generate the pagination implementation or create an issue to track this task?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
platforms/blabsy/static/favicon.pngis excluded by!**/*.pngplatforms/blabsy/static/fonts/Geist-VariableFont_wght.ttfis excluded by!**/*.ttfplatforms/blabsy/static/images/Logo.svgis excluded by!**/*.svgplatforms/pictique/static/favicon.pngis excluded by!**/*.pngplatforms/pictique/static/fonts/Geist-VariableFont_wght.ttfis excluded by!**/*.ttfplatforms/pictique/static/images/Logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (107)
infrastructure/eid-wallet/src/routes/(app)/+layout.svelte(2 hunks)infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte(5 hunks)infrastructure/evault-provisioner/src/index.ts(2 hunks)infrastructure/evault-provisioner/src/templates/evault.nomad.ts(4 hunks)platforms/blabsy/package.json(1 hunks)platforms/blabsy/src/lib/components/CreatePostModal.svelte(1 hunks)platforms/blabsy/src/lib/fragments/CreatePostModal/CreatePostModal.svelte(1 hunks)platforms/blabsy/src/lib/fragments/InputFile/InputFile.svelte(2 hunks)platforms/blabsy/src/lib/fragments/MessageInput/MessageInput.svelte(1 hunks)platforms/blabsy/src/lib/fragments/Post/Post.svelte(1 hunks)platforms/blabsy/src/lib/fragments/Profile/Profile.svelte(1 hunks)platforms/blabsy/src/lib/fragments/SideBar/SideBar.svelte(1 hunks)platforms/blabsy/src/lib/stores/auth.ts(1 hunks)platforms/blabsy/src/lib/stores/comments.ts(1 hunks)platforms/blabsy/src/lib/stores/posts.ts(1 hunks)platforms/blabsy/src/lib/stores/users.ts(1 hunks)platforms/blabsy/src/lib/ui/Modal/Modal.svelte(1 hunks)platforms/blabsy/src/lib/ui/Qr/Qr.svelte(1 hunks)platforms/blabsy/src/lib/ui/index.ts(1 hunks)platforms/blabsy/src/lib/utils/axios.ts(1 hunks)platforms/blabsy/src/lib/utils/index.ts(1 hunks)platforms/blabsy/src/routes/(auth)/auth/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/+layout.svelte(5 hunks)platforms/blabsy/src/routes/(protected)/discover/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/home/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/messages/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/messages/[id]/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/profile/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/profile/[id]/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/settings/account/+page.svelte(1 hunks)platforms/blabsy/src/routes/(protected)/settings/account/username/+page.svelte(1 hunks)platforms/blabsy/src/routes/+layout.svelte(1 hunks)platforms/blabsy/svelte.config.js(1 hunks)platforms/metagram/project.inlang/cache/plugins/2sy648wh9sugi(0 hunks)platforms/metagram/project.inlang/cache/plugins/ygx0uiahq6uw(0 hunks)platforms/metagram/src/lib/fragments/Post/Post.svelte(0 hunks)platforms/metagram/src/lib/fragments/Profile/Profile.svelte(0 hunks)platforms/metagram/src/routes/(protected)/discover/+page.svelte(0 hunks)platforms/metagram/src/routes/(protected)/messages/+page.svelte(0 hunks)platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte(0 hunks)platforms/metagram/src/routes/(protected)/profile/[id]/+page.svelte(0 hunks)platforms/metagram/src/routes/(protected)/profile/post/+page.svelte(0 hunks)platforms/metagram/src/routes/(protected)/settings/account/+page.svelte(0 hunks)platforms/metagram/src/routes/(protected)/settings/account/username/+page.svelte(0 hunks)platforms/pictique/.gitignore(1 hunks)platforms/pictique/.npmrc(1 hunks)platforms/pictique/.prettierignore(1 hunks)platforms/pictique/.prettierrc(1 hunks)platforms/pictique/.storybook/main.ts(1 hunks)platforms/pictique/.storybook/preview.ts(1 hunks)platforms/pictique/README.md(1 hunks)platforms/pictique/eslint.config.js(1 hunks)platforms/pictique/messages/en.json(1 hunks)platforms/pictique/messages/es.json(1 hunks)platforms/pictique/package.json(1 hunks)platforms/pictique/project.inlang/.gitignore(1 hunks)platforms/pictique/project.inlang/project_id(1 hunks)platforms/pictique/project.inlang/settings.json(1 hunks)platforms/pictique/src/app.css(1 hunks)platforms/pictique/src/app.d.ts(1 hunks)platforms/pictique/src/app.html(1 hunks)platforms/pictique/src/lib/components/CreatePostModal.svelte(1 hunks)platforms/pictique/src/lib/dummyData.ts(1 hunks)platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte(1 hunks)platforms/pictique/src/lib/fragments/BottomNav/BottomNav.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte(1 hunks)platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte(1 hunks)platforms/pictique/src/lib/fragments/Comment/Comment.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/Comment/Comment.svelte(1 hunks)platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte(1 hunks)platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte(1 hunks)platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte(1 hunks)platforms/pictique/src/lib/fragments/Header/Header.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/Header/Header.svelte(1 hunks)platforms/pictique/src/lib/fragments/InputFile/InputFile.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/InputFile/InputFile.svelte(1 hunks)platforms/pictique/src/lib/fragments/Message/Message.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/Message/Message.svelte(1 hunks)platforms/pictique/src/lib/fragments/MessageInput/MessageInput.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/MessageInput/MessageInput.svelte(1 hunks)platforms/pictique/src/lib/fragments/Modal/Modal.stories.snippet.svelte(1 hunks)platforms/pictique/src/lib/fragments/Modal/Modal.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/Modal/Modal.svelte(1 hunks)platforms/pictique/src/lib/fragments/Post/Post.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/Post/Post.svelte(1 hunks)platforms/pictique/src/lib/fragments/Profile/Profile.svelte(1 hunks)platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte(1 hunks)platforms/pictique/src/lib/fragments/SettingsDeleteButton/SettingsDeleteButton.svelte(1 hunks)platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.snippet.svelte(1 hunks)platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte(1 hunks)platforms/pictique/src/lib/fragments/SettingsPage/SettingsPage.svelte(1 hunks)platforms/pictique/src/lib/fragments/SettingsToggleButton/SettingsToggleButton.svelte(1 hunks)platforms/pictique/src/lib/fragments/SideBar/SideBar.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte(1 hunks)platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.svelte(1 hunks)platforms/pictique/src/lib/fragments/UserRequest/UserRequest.stories.ts(1 hunks)platforms/pictique/src/lib/fragments/UserRequest/UserRequest.svelte(1 hunks)platforms/pictique/src/lib/fragments/index.ts(1 hunks)platforms/pictique/src/lib/icons/Camera.svelte(1 hunks)platforms/pictique/src/lib/icons/CommentIcon.svelte(1 hunks)platforms/pictique/src/lib/icons/CommentsTwo.svelte(1 hunks)platforms/pictique/src/lib/icons/Cross.svelte(1 hunks)
⛔ Files not processed due to max files limit (67)
- platforms/pictique/src/lib/icons/Flash.svelte
- platforms/pictique/src/lib/icons/Home.svelte
- platforms/pictique/src/lib/icons/Icons.stories.ts
- platforms/pictique/src/lib/icons/Icons.svelte
- platforms/pictique/src/lib/icons/Like.svelte
- platforms/pictique/src/lib/icons/Refresh.svelte
- platforms/pictique/src/lib/icons/Search.svelte
- platforms/pictique/src/lib/icons/Settings.svelte
- platforms/pictique/src/lib/icons/VerticalDots.svelte
- platforms/pictique/src/lib/icons/index.ts
- platforms/pictique/src/lib/index.ts
- platforms/pictique/src/lib/store/store.svelte.ts
- platforms/pictique/src/lib/stores/auth.ts
- platforms/pictique/src/lib/stores/comments.ts
- platforms/pictique/src/lib/stores/posts.ts
- platforms/pictique/src/lib/stores/users.ts
- platforms/pictique/src/lib/types.ts
- platforms/pictique/src/lib/ui/Avatar/Avatar.stories.ts
- platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
- platforms/pictique/src/lib/ui/Button/Button.stories.snippet.svelte
- platforms/pictique/src/lib/ui/Button/Button.stories.ts
- platforms/pictique/src/lib/ui/Button/Button.svelte
- platforms/pictique/src/lib/ui/Helper/Helper.stories.snippet.svelte
- platforms/pictique/src/lib/ui/Helper/Helper.stories.ts
- platforms/pictique/src/lib/ui/Helper/Helper.svelte
- platforms/pictique/src/lib/ui/Input/Input.stories.ts
- platforms/pictique/src/lib/ui/Input/Input.svelte
- platforms/pictique/src/lib/ui/Label/Label.stories.snippet.svelte
- platforms/pictique/src/lib/ui/Label/Label.stories.ts
- platforms/pictique/src/lib/ui/Label/Label.svelte
- platforms/pictique/src/lib/ui/Modal/Modal.svelte
- platforms/pictique/src/lib/ui/Qr/Qr.svelte
- platforms/pictique/src/lib/ui/Select/Select.stories.ts
- platforms/pictique/src/lib/ui/Select/Select.svelte
- platforms/pictique/src/lib/ui/Toggle/Toggle.stories.ts
- platforms/pictique/src/lib/ui/Toggle/Toggle.svelte
- platforms/pictique/src/lib/ui/index.ts
- platforms/pictique/src/lib/utils/axios.ts
- platforms/pictique/src/lib/utils/clickOutside.ts
- platforms/pictique/src/lib/utils/index.ts
- platforms/pictique/src/lib/utils/mergeClasses.ts
- platforms/pictique/src/routes/(auth)/auth/+page.svelte
- platforms/pictique/src/routes/(protected)/+layout.svelte
- platforms/pictique/src/routes/(protected)/discover/+page.svelte
- platforms/pictique/src/routes/(protected)/home/+page.svelte
- platforms/pictique/src/routes/(protected)/messages/+page.svelte
- platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
- platforms/pictique/src/routes/(protected)/profile/+page.svelte
- platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
- platforms/pictique/src/routes/(protected)/settings/+layout.svelte
- platforms/pictique/src/routes/(protected)/settings/+page.svelte
- platforms/pictique/src/routes/(protected)/settings/account/+page.svelte
- platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte
- platforms/pictique/src/routes/(protected)/settings/data-and-storage/+page.svelte
- platforms/pictique/src/routes/(protected)/settings/logout/+page.svelte
- platforms/pictique/src/routes/(protected)/settings/notifications/+page.svelte
- platforms/pictique/src/routes/+layout.ts
- platforms/pictique/src/routes/+page.svelte
- platforms/pictique/svelte.config.js
- platforms/pictique/tsconfig.json
- platforms/pictique/vite.config.ts
- scripts/expose-ports.sh
- services/ontology/package.json
- services/ontology/schemas/socialMediaPost.json
- services/ontology/schemas/user.json
- services/ontology/schemas/userProfile.json
- services/ontology/src/index.js
💤 Files with no reviewable changes (11)
- platforms/metagram/src/routes/(protected)/discover/+page.svelte
- platforms/metagram/src/routes/(protected)/settings/account/+page.svelte
- platforms/metagram/src/routes/(protected)/messages/+page.svelte
- platforms/metagram/src/routes/(protected)/settings/account/username/+page.svelte
- platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
- platforms/metagram/src/routes/(protected)/profile/post/+page.svelte
- platforms/metagram/src/lib/fragments/Profile/Profile.svelte
- platforms/metagram/src/routes/(protected)/profile/[id]/+page.svelte
- platforms/metagram/project.inlang/cache/plugins/ygx0uiahq6uw
- platforms/metagram/src/lib/fragments/Post/Post.svelte
- platforms/metagram/project.inlang/cache/plugins/2sy648wh9sugi
🧰 Additional context used
🧬 Code Graph Analysis (4)
platforms/blabsy/src/lib/utils/axios.ts (1)
platforms/pictique/src/lib/utils/axios.ts (4)
apiClient(7-13)setAuthToken(16-18)getAuthToken(20-22)removeAuthToken(25-27)
platforms/blabsy/src/lib/stores/posts.ts (2)
platforms/blabsy/src/lib/stores/comments.ts (2)
isLoading(17-17)error(18-18)platforms/blabsy/src/lib/utils/axios.ts (1)
apiClient(7-13)
platforms/blabsy/src/lib/stores/comments.ts (2)
platforms/blabsy/src/lib/stores/posts.ts (2)
isLoading(30-30)error(31-31)platforms/blabsy/src/lib/utils/axios.ts (1)
apiClient(7-13)
platforms/blabsy/src/lib/stores/users.ts (1)
platforms/blabsy/src/lib/utils/axios.ts (1)
apiClient(7-13)
🪛 Biome (1.9.4)
platforms/pictique/.storybook/main.ts
[error] 3-3: A Node.js builtin module should be imported with the node: protocol.
Using the node: protocol is more explicit and signals that the imported module belongs to Node.js.
Unsafe fix: Add the node: protocol.
(lint/style/useNodejsImportProtocol)
platforms/blabsy/src/lib/stores/auth.ts
[error] 9-9: The computed expression can be simplified without the use of a string literal.
Unsafe fix: Use a literal key instead.
(lint/complexity/useLiteralKeys)
[error] 16-16: The computed expression can be simplified without the use of a string literal.
Unsafe fix: Use a literal key instead.
(lint/complexity/useLiteralKeys)
[error] 22-22: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 22-22: The computed expression can be simplified without the use of a string literal.
Unsafe fix: Use a literal key instead.
(lint/complexity/useLiteralKeys)
infrastructure/evault-provisioner/src/templates/evault.nomad.ts
[error] 42-42: Reassigning a function parameter is confusing.
The parameter is declared here:
Use a local variable instead.
(lint/style/noParameterAssign)
🔇 Additional comments (39)
platforms/pictique/messages/es.json (1)
1-4: Verify Spanish translation accuracy.
The greeting still uses English ("Hello, {name} from es!"); please confirm or update to a proper Spanish localization (e.g., "¡Hola, {name}!").platforms/pictique/messages/en.json (1)
1-4: Validate JSON schema reference and formatting.
The$schemaURL and overall structure look correct. Confirm that this file follows the project’s JSON style guide (indentation, trailing newline).platforms/pictique/project.inlang/settings.json (1)
1-12: Verify plugin configuration and versions.
Please confirm that the module URLs and pinned versions (@inlang/plugin-message-format@4,@inlang/plugin-m-function-matcher@2) are intentional and that thepathPattern: "../messages/{locale}.json"correctly resolves to theplatforms/pictique/messagesdirectory.infrastructure/evault-provisioner/src/templates/evault.nomad.ts (1)
2-236: Acknowledge formatting improvements.The consistent formatting changes throughout the file (double quotes, proper indentation, semicolons) improve code readability and maintainability.
🧰 Tools
🪛 Biome (1.9.4)
[error] 3-3: A Node.js builtin module should be imported with the node: protocol.
Using the node: protocol is more explicit and signals that the imported module belongs to Node.js.
Unsafe fix: Add the node: protocol.(lint/style/useNodejsImportProtocol)
[error] 42-42: Reassigning a function parameter is confusing.
The parameter is declared here:
Use a local variable instead.
(lint/style/noParameterAssign)
platforms/blabsy/src/lib/ui/index.ts (1)
8-8: Export QR component integration
The new export adds theQrcomponent to the UI module, enabling its use across the Blabsy platform.platforms/pictique/.prettierignore (1)
1-6: Ignore lock files in Prettier formatting
The.prettierignorecorrectly excludes various lock files to prevent accidental formatting.platforms/pictique/.npmrc (1)
1-1: Enforce strict Node.js engine version
Settingengine-strict=trueensures installations adhere to the specified Node.js version.platforms/blabsy/src/lib/utils/index.ts (1)
3-3: Export registration for axios utility is correct
This addition re-exports your configured Axios instance alongside the existing utilities, enabling consistent HTTP usage across Blabsy.platforms/pictique/.prettierrc (1)
1-15: Initial Prettier configuration looks good
Tabs, single quotes, no trailing commas, and the Svelte/Tailwind plugins align with your code style conventions.platforms/blabsy/src/lib/fragments/InputFile/InputFile.svelte (1)
29-29: CSS class order update is non-functional
Reordering Tailwind classes here is purely cosmetic (and consistent with your Prettier Tailwind plugin). No functional changes.platforms/blabsy/svelte.config.js (1)
8-10: Verifyenv.dirpath configuration
Confirm that settingenv.dir: '../../'correctly points to your project’s root for environment variables without unintended side effects.platforms/pictique/src/lib/fragments/Modal/Modal.stories.snippet.svelte (1)
1-3: Confirm snippet export validity
EnsureModalContentis defined or recognized by your Storybook snippet plugin before exporting—currently there’s no explicit declaration in this file.platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.snippet.svelte (1)
1-14:✅ Verification successful
LGTM! Clean implementation of reusable Storybook snippets.
The snippets are well-structured and follow Svelte best practices. The use of CSS custom properties for color theming is excellent.
Consider verifying that the CSS custom property
--color-brand-burnt-orangeis defined in your theme:
🏁 Script executed:
#!/bin/bash # Description: Verify CSS custom property exists in theme files # Expected: Find definition of --color-brand-burnt-orange rg --type css --type scss --type sass "\-\-color\-brand\-burnt\-orange" -A 2 -B 2Length of output: 112
🏁 Script executed:
#!/bin/bash # Search for the CSS custom property definition across style files rg -n -A 2 -B 2 --glob "*.css" --glob "*.scss" --glob "*.sass" --glob "*.less" "--color-brand-burnt-orange"Length of output: 559
🏁 Script executed:
#!/bin/bash # Corrected search for the CSS custom property definition rg -n -A 2 -B 2 --glob '*.css' --glob '*.scss' --glob '*.sass' --glob '*.less' '\-\-color-brand-burnt-orange'Length of output: 2014
Verified: CSS custom property is defined
LGTM! The Storybook snippets are well-structured and follow Svelte best practices. The color variable you’re using is indeed defined in your theme:
- platforms/pictique/src/app.css:65 defines
--color-brand-burnt-orange: #da4a11;infrastructure/eid-wallet/src/routes/(app)/+layout.svelte (1)
30-33:✅ Verification successful
Review global CSS impact on the entire application.
The global CSS changes affect the entire document body and all descendants, which could have unintended side effects on other parts of the application.
Consider scoping the styles more specifically or verifying that the global changes don't break other functionality:
Consider using a more specific selector or CSS containment:
<style> - :global(body.custom-global-style, body.custom-global-style *:not(button)) { + :global(.scan-qr-container) { background-color: #00000000; overflow-y: hidden; } </style>And wrap the content conditionally:
-<div class="p-6"> +<div class="p-6" class:scan-qr-container={currentRoute === "scan-qr"}> {@render children()} </div>
🏁 Script executed:
#!/bin/bash # Description: Check for potential conflicts with the global styling # Expected: Find other CSS rules that might conflict # Search for other body styles rg "body\s*\{" --type css --type scss -A 5 # Search for overflow-y usage rg "overflow-y" --type css --type scss -A 2 -B 2 # Search for background-color on body rg "body.*background" --type css --type scss -A 2 -B 2Length of output: 237
🏁 Script executed:
#!/bin/bash # Refined search for global body styling across Svelte components and CSS files # Search in Svelte files for any global body selectors rg ":global\(body" -g '*.svelte' -A 5 -n # Search in Svelte files for bare body selector definitions rg "body\s*\{" -g '*.svelte' -A 5 -n # Search in Svelte files for overflow-y usage rg "overflow-y" -g '*.svelte' -A 2 -B 2 -n # Search in Svelte files for background-color assignments rg "background-color" -g '*.svelte' -A 2 -B 2 -n # Also check any standalone CSS files for body rules rg "body\s*\{" --type css -n -A 5 rg "overflow-y" --type css -n -A 2 -B 2 rg "background-color" --type css -n -A 2 -B 2Length of output: 10535
🏁 Script executed:
#!/bin/bash sed -n '1,200p' 'infrastructure/eid-wallet/src/routes/(app)/+layout.svelte'Length of output: 1144
No conflicting global CSS detected
I searched across all Svelte components and CSS files for otherbodyselectors,overflow-y, andbackground-colorrules and found no overlapping definitions that would clash with your.custom-global-style. Since this class is only added on thescan-qrroute, its scope is effectively limited to that page.platforms/pictique/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte (1)
1-3: Verify snippet loader setup
This file relies on the Storybook Svelte snippet plugin to transform{#snippet DrawerContent()}into a valid function. Ensure your.storybook/main.tsincludes the appropriate loader; otherwiseexport { DrawerContent }will error at runtime.platforms/pictique/.storybook/preview.ts (1)
1-4: Check global CSS import path
Confirm that../src/app.cssexists relative to this file. An incorrect path will lead to unstyled components in Storybook.platforms/pictique/src/lib/icons/CommentsTwo.svelte (1)
1-5: Well-structured icon component with proper TypeScript integration.The component follows good Svelte patterns with TypeScript support, proper props destructuring, and consistent interface usage.
platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.stories.ts (1)
14-21: Good story configuration with practical examples.The Primary story provides useful examples with alert handlers that demonstrate the component's functionality effectively.
platforms/blabsy/src/lib/ui/Modal/Modal.svelte (1)
8-18: Excellent event handling implementation.The backdrop click detection using
target === currentTargetand escape key handling are correctly implemented following modal best practices.platforms/pictique/src/lib/icons/Cross.svelte (1)
15-22: Well-designed cross icon with good visual hierarchy.The combination of circular background with contrasting cross creates a clear, accessible close button icon. The stroke properties with rounded caps provide a polished appearance.
platforms/pictique/.storybook/main.ts (1)
12-23: Configuration patterns look solid.The
storiesglob,addons, andframeworksettings follow Storybook conventions and require no changes.platforms/pictique/src/lib/icons/CommentIcon.svelte (1)
1-28: LGTM! Well-structured icon component.The component follows excellent practices with TypeScript typing, sensible defaults, and clean SVG implementation. The icon design effectively represents a comment bubble with text lines.
platforms/blabsy/src/routes/(protected)/discover/+page.svelte (1)
45-50: 🛠️ Refactor suggestionRemove redundant input event handling.
The input has both
bind:value={searchValue}andoninputhandler, which creates redundant event handling. Thebind:valuealready updatessearchValuereactively.- <Input - type="text" - bind:value={searchValue} - placeholder="Search users..." - oninput={(e: Event) => handleSearch((e.target as HTMLInputElement).value)} - /> + <Input + type="text" + bind:value={searchValue} + placeholder="Search users..." + oninput={() => handleSearch(searchValue)} + />Likely an incorrect or invalid review comment.
platforms/pictique/src/lib/fragments/Message/Message.stories.ts (1)
1-32: LGTM! Well-structured Storybook stories.The story configuration follows Storybook best practices with proper TypeScript typing and clear story variants demonstrating different component states.
platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte (1)
20-43: 🛠️ Refactor suggestionAdd null safety checks for DOM element references.
The positioning logic assumes
menuElandbuttonElare non-null, but they could be undefined in edge cases.tick().then(() => { - if (menuEl && buttonEl) { + if (!menuEl || !buttonEl) return; + + try { const { innerWidth, innerHeight } = window; const menuRect = menuEl.getBoundingClientRect(); const buttonRect = buttonEl.getBoundingClientRect(); // Position vertically aligned to button top (viewport) let top = buttonRect.top; let left = buttonRect.right; // If it overflows right, position to the left of the button if (innerWidth - buttonRect.right < menuRect.width) { left = buttonRect.left - menuRect.width; } // If it overflows bottom, adjust upward if (innerHeight - buttonRect.top < menuRect.height) { top = innerHeight - menuRect.height - 10; } menuEl.style.left = `${left}px`; menuEl.style.top = `${top}px`; + } catch (error) { + console.warn('Failed to position action menu:', error); } });Likely an incorrect or invalid review comment.
platforms/blabsy/src/lib/stores/auth.ts (1)
7-7:✅ Verification successful
Verify the localStorage key naming consistency.
The localStorage key uses
'pictique_auth_token'but this file is in theblabsyplatform. Ensure this naming is intentional and consistent across the application.
🏁 Script executed:
#!/bin/bash # Description: Check for localStorage key usage across both platforms to verify consistency # Expected: Find usage of this key in blabsy platform or confirm it's shared rg -A 2 -B 2 "pictique_auth_token" platforms/blabsy/ platforms/pictique/Length of output: 1607
LocalStorage Key Verification
The
pictique_auth_tokenkey is used consistently in both blabsy and pictique platforms (in their respectivesrc/lib/utils/axios.tsandsrc/lib/stores/auth.tsfiles). No renaming is necessary unless you specifically intend to isolate tokens per platform.platforms/pictique/src/lib/fragments/MessageInput/MessageInput.stories.ts (1)
1-29: Well-structured Storybook configuration.The story setup is comprehensive and properly demonstrates both variants of the MessageInput component with appropriate props and callbacks.
platforms/pictique/src/lib/fragments/Message/Message.svelte (1)
1-68: Excellent Svelte component implementation.The component demonstrates best practices with proper TypeScript typing, modern Svelte runes usage, accessibility considerations, and comprehensive documentation. The text truncation logic is well-implemented.
platforms/pictique/src/lib/fragments/UserRequest/UserRequest.svelte (1)
34-59: Excellent inline documentation!The comprehensive component documentation with usage examples is a great practice that will help other developers understand and use this component effectively.
platforms/pictique/src/app.css (2)
11-47: Well-implemented responsive layout and utility classes.Good use of safe area insets for mobile devices and comprehensive scrollbar hiding utility that works across all browsers.
84-169:✅ Verification successful
Verify browser support for View Transitions API.
The View Transitions API is experimental and has limited browser support. Ensure this aligns with your browser support requirements.
🌐 Web query:
What is the current browser support for the CSS View Transitions API?💡 Result:
Current Browser Support for the CSS View Transitions API (as of June 2025)
The CSS View Transitions API enables smooth, animated transitions between different DOM states or across page navigations, significantly improving the user experience in both SPAs (single-page applications) and MPAs (multi-page applications)[1][5]. Its browser support situation has evolved rapidly in the past year and is now quite robust across most modern browsers—except for Firefox.
Desktop Browsers
Browser Single-Document Transitions Cross-Document Transitions Notes Chrome 111+ 126+ Full support Edge 111+ 126+ Full support Safari 18+ 18.2+ Full support Opera 97+ 112+ Full support Firefox Not supported Not supported Only in Nightly/preview
- Chrome and Edge: Have provided full support for both same-document and cross-document (multi-page) transitions since version 126, released in June 2024[3][5][7][9].
- Safari: Full support for same-document transitions since version 18; cross-document transitions since 18.2[5][7][9].
- Opera: Support aligns with Chrome’s Chromium base: full support for same-document since 97+, cross-document since 112+[5][9].
- Firefox: Does not support the View Transitions API in stable releases. Experimental support is available in Nightly builds, but there is no official timeline for wider adoption due to ongoing concerns about performance and complexity in multi-page scenarios[3][4][5][6].
Mobile Browsers
- Chrome for Android, Android Browser, and Samsung Internet: Support same-document transitions starting with the most recent versions (Chrome 137+, Samsung Internet 23+)[9].
- Safari on iOS: Supported from version 18[9].
- Opera Mobile: Supported from version 80[9].
- Firefox for Android: Not supported[9].
Usage and Fallback
The View Transitions API is a progressive enhancement—if a browser does not support it, there is no negative impact; the website will simply fall back to standard navigation without transitions[5][8]. This makes it safe to implement in production with minor feature detection.
Summary Table
Feature Chrome Edge Safari Opera Firefox Single-document 111+ 111+ 18+ 97+ No Cross-document 126+ 126+ 18.2+ 112+ No Key Takeaways
- Broad support: The View Transitions API is supported in up-to-date versions of Chrome, Edge, Safari, Opera, and most Android browsers.
- Firefox exception: Firefox lags behind and does not support the API in its stable release, though the feature is under evaluation in Nightly builds[3][5][6].
- Progressive enhancement: Implementing the API is safe even with partial support, as non-supporting browsers degrade gracefully[5][8].
For developers, this means you can use the View Transitions API with confidence on most major platforms, but should always test for support and provide fallback experiences for users on Firefox and older browsers.
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
- 2: https://caniuse.com/?search=view+transition+api
- 3: https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-class
- 4: https://cydstumpel.nl/a-practical-guide-to-the-css-view-transition-api/
- 5: https://lincolnloop.com/blog/smooth-page-transitions-in-modern-browsers/
- 6: https://www.smashingmagazine.com/2023/12/view-transitions-api-ui-animations-part1/
- 7: https://view-transitions.chrome.dev
- 8: https://www.amitmerchant.com/bare-minimum-view-transitions/
- 9: https://caniuse.com/view-transitions
- 10: https://caniuse.com/css-transitions
Confirm View Transitions API Browser Support
- Chrome (same-document 111+, cross-document 126+), Edge (111+/126+), Safari (18+/18.2+), Opera (97+/112+), Android browsers (Chrome 137+, Samsung 23+, Safari iOS 18+, Opera Mobile 80+) all support the View Transitions API.
- Firefox (desktop & Android) has no stable support (only in Nightly).
Because this API is a progressive enhancement, unsupported browsers will simply fall back to standard navigation. No changes to your CSS animations are required, but if Firefox is within your target matrix, wrap your JS calls in a feature check—e.g.:
if (document.startViewTransition) { document.startViewTransition(() => { /* … */ }); }—and verify that the fallback experience meets your requirements.
platforms/blabsy/src/lib/stores/comments.ts (1)
4-14: Well-structured Comment interface.The interface provides a clear, comprehensive structure for comment data with appropriate nested creator details. The design follows good TypeScript practices with required fields and proper typing.
platforms/blabsy/src/lib/stores/posts.ts (1)
29-35: LGTM: Consistent store pattern and clear modal functions.The store exports follow the established pattern and the modal management functions are straightforward and effective.
platforms/pictique/src/lib/fragments/Header/Header.svelte (3)
13-22: Well-designed interface with good TypeScript practices.The interface provides clear prop definitions with appropriate optional properties and type safety through string literal types for variants.
24-56: Excellent variant-based styling architecture.The configuration objects and reactive class computation provide a clean, maintainable approach to variant-based styling. This pattern scales well and keeps styling logic organized.
63-96: Well-implemented conditional rendering logic.The component handles the different variant requirements clearly with appropriate conditional rendering for back buttons, headings, and action elements. The logic is easy to follow and maintains good separation of concerns.
platforms/blabsy/src/routes/(protected)/messages/[id]/+page.svelte (1)
30-33:❓ Verification inconclusive
Security: Avoid exposing auth token in URL.
Authentication tokens should not be passed as URL query parameters as they can be logged in server logs, browser history, and proxy servers. Consider using headers or cookies instead.
🌐 Web query:
What are the security best practices for passing authentication tokens in Server-Sent Events (SSE) connections?💡 Result:
When using Server-Sent Events (SSE) to push updates from a server to a client, passing authentication tokens securely is crucial to prevent unauthorized access and token leakage. Here are best practices for securely handling authentication tokens in SSE connections:
Use HTTPS:
Always use HTTPS to encrypt the entire connection, including headers and URL parameters, preventing interception of the token.Avoid Sending Tokens in URL Query Parameters:
Tokens in URLs can be logged in browser history, server logs, and proxy logs. Prefer sending tokens in headers instead.Use Authorization Headers:
Although SSE is established via the standardEventSourceAPI, which doesn't allow setting custom headers directly, use cookies or other techniques to send the token securely (see points below).Use Secure, HttpOnly Cookies:
- Store the authentication token in a cookie with
SecureandHttpOnlyflags enabled.- The browser automatically sends cookies with the SSE request, so the token is not exposed in JavaScript or URL.
- Use the
SameSiteattribute to protect against CSRF attacks.Token Renewal and Expiry:
- Use short-lived tokens to limit the impact of a token leak.
- Implement token renewal mechanisms where clients can obtain new tokens securely.
Server-Side Validation:
Always validate tokens on the server-side before establishing or continuing an SSE connection.Re-authentication on Connection Loss:
SSE connections automatically reconnect by default. Require re-validation of token upon reconnect to ensure continued authorization.Consider Alternate Transport for Custom Headers:
If sending tokens via headers is mandatory, consider implementing SSE through libraries or proxies that allow custom headers, or switch to WebSockets where headers can be set more easily.Content Security Policy (CSP):
Use CSP headers to restrict which sources your client can connect to, reducing the risk of malicious interception.Minimal Token Scope:
Use tokens with the least privilege necessary for the SSE connection functionality.Summary:
Best practice is to keep authentication tokens out of URLs, use secure cookies with proper flags, serve the SSE over HTTPS, and validate tokens thoroughly on the server. This minimizes potential exposure and protects against interception or misuse of authentication tokens in SSE connections.
Security Fix Required: Don’t expose auth token in the SSE URL
Passing the token via a query parameter still exposes it to logs, browser history, and intermediaries. Instead, store and transmit the token in a Secure, HttpOnly cookie (with SameSite protection) over HTTPS so that the browser attaches it automatically to the SSE request.
• File: platforms/blabsy/src/routes/(protected)/messages/[id]/+page.svelte
Lines 30–33:- const sseUrl = new URL( - `/api/chats/${id}/events?token=${getAuthToken()}`, - PUBLIC_BLABSY_BASE_URL - ).toString(); + // Rely on a Secure, HttpOnly cookie for auth; no token in URL + const sseUrl = new URL( + `/api/chats/${id}/events`, + PUBLIC_BLABSY_BASE_URL + ).toString();• Ensure your authentication flow sets a cookie with flags:
– Secure
– HttpOnly
– SameSite=strict (or lax, as appropriate)• On the server, validate the token from the cookie before establishing the SSE connection.
fix_required
platforms/pictique/src/lib/fragments/index.ts (1)
1-19: LGTM!The index file is well-organized with consistent naming conventions for all fragment exports.
platforms/blabsy/src/routes/(protected)/home/+page.svelte (1)
7-7:❌ Incorrect review comment
Remove unused import and verify store path consistency.
The
showCommentsimport appears to be from a different store path pattern ($lib/store/store.svelte) compared to other stores ($lib/stores/*). Additionally, its usage on line 98 (showComments.value = true) doesn't follow standard Svelte store patterns.
🏁 Script executed:
#!/bin/bash # Description: Verify store organization and showComments usage # Check if showComments is properly exported as a store rg -A 5 "export.*showComments" --glob "**/*.{ts,js,svelte}" # Check the store directory structure fd -t f . "src/lib/store" "src/lib/stores" | head -20 # Verify other usages of showComments rg "showComments" --glob "**/*.{svelte,ts,js}" -A 2 -B 2Length of output: 7210
Import and store usage are correct
No changes needed for the
showCommentsimport:
showCommentsis exported fromplatforms/blabsy/src/lib/store/store.svelte.tsvia a custom$statehelper and its.valueproperty is the intended API.- The distinction between the singular
store(global UI state) and pluralstores(domain-specific data stores) is by design and consistent across the codebase.activePostIdis used on line 98 (activePostId.set(post.id)), so there are no unused imports here.Likely an incorrect or invalid review comment.
| const idParts = w3id.split("@"); | ||
| w3id = idParts[idParts.length - 1]; | ||
| const neo4jPassword = sha256(w3id); |
There was a problem hiding this comment.
Fix parameter reassignment to improve code clarity.
Reassigning function parameters is confusing and can lead to bugs. Use a local variable instead.
-const idParts = w3id.split("@");
-w3id = idParts[idParts.length - 1];
-const neo4jPassword = sha256(w3id);
+const idParts = w3id.split("@");
+const domainPart = idParts[idParts.length - 1];
+const neo4jPassword = sha256(domainPart);Then update the subsequent usage of w3id to use domainPart where appropriate.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const idParts = w3id.split("@"); | |
| w3id = idParts[idParts.length - 1]; | |
| const neo4jPassword = sha256(w3id); | |
| const idParts = w3id.split("@"); | |
| const domainPart = idParts[idParts.length - 1]; | |
| const neo4jPassword = sha256(domainPart); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 42-42: Reassigning a function parameter is confusing.
The parameter is declared here:
Use a local variable instead.
(lint/style/noParameterAssign)
🤖 Prompt for AI Agents
In infrastructure/evault-provisioner/src/templates/evault.nomad.ts around lines
41 to 43, avoid reassigning the function parameter w3id directly. Instead,
assign the extracted domain part from w3id.split("@") to a new local variable
(e.g., domainPart) and use this variable in subsequent code, such as when
computing neo4jPassword. This improves code clarity and prevents potential bugs
from parameter reassignment.
| const isMinikubeIp = address === "192.168.49.2"; | ||
| return `http://${isMinikubeIp ? address : process.env.IP_ADDR.split("http://")[1]}:${nodePort}`; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve IP address logic robustness and error handling.
The current implementation has several fragility issues:
- Hard-coded IP comparison for Minikube detection
- Unsafe string splitting without validation
- Potential runtime errors if
process.env.IP_ADDRis undefined or malformed
-const isMinikubeIp = address === "192.168.49.2";
-return `http://${isMinikubeIp ? address : process.env.IP_ADDR.split("http://")[1]}:${nodePort}`;
+const isMinikubeIp = address === "192.168.49.2";
+if (isMinikubeIp) {
+ return `http://${address}:${nodePort}`;
+}
+
+// Use configured IP_ADDR if available
+const configuredIpAddr = process.env.IP_ADDR;
+if (!configuredIpAddr) {
+ throw new Error("IP_ADDR environment variable is required for non-Minikube deployments");
+}
+
+// Extract IP from URL format if needed
+const ipAddr = configuredIpAddr.startsWith("http://")
+ ? new URL(configuredIpAddr).hostname
+ : configuredIpAddr;
+
+return `http://${ipAddr}:${nodePort}`;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const isMinikubeIp = address === "192.168.49.2"; | |
| return `http://${isMinikubeIp ? address : process.env.IP_ADDR.split("http://")[1]}:${nodePort}`; | |
| const isMinikubeIp = address === "192.168.49.2"; | |
| if (isMinikubeIp) { | |
| return `http://${address}:${nodePort}`; | |
| } | |
| // Use configured IP_ADDR if available | |
| const configuredIpAddr = process.env.IP_ADDR; | |
| if (!configuredIpAddr) { | |
| throw new Error("IP_ADDR environment variable is required for non-Minikube deployments"); | |
| } | |
| // Extract IP from URL format if needed | |
| const ipAddr = configuredIpAddr.startsWith("http://") | |
| ? new URL(configuredIpAddr).hostname | |
| : configuredIpAddr; | |
| return `http://${ipAddr}:${nodePort}`; |
🤖 Prompt for AI Agents
In infrastructure/evault-provisioner/src/templates/evault.nomad.ts around lines
224 to 225, improve the IP address handling by removing the hard-coded Minikube
IP check and adding validation for process.env.IP_ADDR before splitting. Ensure
to check if process.env.IP_ADDR is defined and properly formatted to avoid
runtime errors, and implement a more flexible way to detect the IP address
rather than relying on a fixed string comparison.
| interface IRightAsideProps extends HTMLAttributes<HTMLElement> { | ||
| header: Snippet; | ||
| asideContent: Snippet; | ||
| } | ||
| let { header, asideContent, ...restProps }: IRightAsideProps = $props(); | ||
| </script> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use standard Svelte props instead of $props() destructuring.
Svelte components should declare props via export let and collect extra attributes with $$restProps. Replace:
let { header, asideContent, ...restProps }: IRightAsideProps = $props();with something like:
+export let header: Snippet;
+export let asideContent: Snippet;
+const { class: _class, ...restProps } = $$restProps;This ensures proper prop initialization and rest-prop spreading.
🤖 Prompt for AI Agents
In platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte around
lines 6 to 11, replace the use of $props() destructuring with standard Svelte
prop declarations by declaring header and asideContent as exported let variables
and use $$restProps to collect additional attributes. This change ensures proper
prop initialization and enables correct spreading of extra attributes.
| onkeydown={(e) => { | ||
| if (e.key === 'Enter') handleSend(); | ||
| }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve Enter key handling for better UX.
The Enter key handling is a good addition, but consider supporting Shift+Enter for multiline input and adding error handling for the async send operation.
onkeydown={(e) => {
- if (e.key === 'Enter') handleSend();
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSend().catch((error) => {
+ console.error('Failed to send message:', error);
+ // Consider showing user-friendly error message
+ });
+ }
}}This prevents the default form submission behavior and allows Shift+Enter for new lines while providing error handling for failed sends.
🤖 Prompt for AI Agents
In platforms/blabsy/src/lib/fragments/MessageInput/MessageInput.svelte around
lines 48 to 50, improve the Enter key handling by preventing the default form
submission when Enter is pressed without Shift, allowing Shift+Enter to insert
new lines. Modify the onkeydown handler to check for Shift key and prevent
default only when Enter is pressed alone. Also, update handleSend to be async
and add try-catch error handling to manage any failures during the send
operation gracefully.
| $effect(() => { | ||
| const isScanPage = currentRoute === "scan-qr"; | ||
| if (isScanPage) | ||
| return document.body.classList.add("custom-global-style"); | ||
| return document.body.classList.remove("custom-global-style"); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve effect cleanup and add component unmount handling.
The effect implementation needs better cleanup logic to handle component unmounting and prevent memory leaks.
$effect(() => {
const isScanPage = currentRoute === "scan-qr";
- if (isScanPage)
- return document.body.classList.add("custom-global-style");
- return document.body.classList.remove("custom-global-style");
+
+ if (isScanPage) {
+ document.body.classList.add("custom-global-style");
+ } else {
+ document.body.classList.remove("custom-global-style");
+ }
+
+ // Cleanup function
+ return () => {
+ document.body.classList.remove("custom-global-style");
+ };
});This ensures the class is properly removed when the component unmounts or the route changes.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| $effect(() => { | |
| const isScanPage = currentRoute === "scan-qr"; | |
| if (isScanPage) | |
| return document.body.classList.add("custom-global-style"); | |
| return document.body.classList.remove("custom-global-style"); | |
| }); | |
| $effect(() => { | |
| const isScanPage = currentRoute === "scan-qr"; | |
| if (isScanPage) { | |
| document.body.classList.add("custom-global-style"); | |
| } else { | |
| document.body.classList.remove("custom-global-style"); | |
| } | |
| // Cleanup when the effect re-runs or the component unmounts | |
| return () => { | |
| document.body.classList.remove("custom-global-style"); | |
| }; | |
| }); |
🤖 Prompt for AI Agents
In infrastructure/eid-wallet/src/routes/(app)/+layout.svelte around lines 10 to
15, the effect adding or removing the "custom-global-style" class on
document.body lacks proper cleanup for component unmounting. Refactor the effect
to include a cleanup function that removes the class when the component unmounts
or when the route changes, ensuring no leftover side effects or memory leaks.
| <textarea | ||
| bind:value={text} | ||
| placeholder="What's on your mind??" | ||
| class="focus:border-brand-burnt-orange w-full rounded-lg border border-gray-300 p-3 focus:outline-none" | ||
| rows="4" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve accessibility for form controls.
Add proper labels and ARIA attributes for better accessibility.
<textarea
bind:value={text}
placeholder="What's on your mind??"
+ aria-label="Post content"
class="focus:border-brand-burnt-orange w-full rounded-lg border border-gray-300 p-3 focus:outline-none"
rows="4"
/>🤖 Prompt for AI Agents
In platforms/pictique/src/lib/components/CreatePostModal.svelte around lines 63
to 68, the textarea lacks an associated label or ARIA attributes, which reduces
accessibility. Add a visible label element linked to the textarea using the
"for" attribute and the textarea's "id" attribute, or alternatively add an
aria-label or aria-labelledby attribute to the textarea to provide a descriptive
label for screen readers.
| <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"> | ||
| <div class="w-full max-w-2xl rounded-lg bg-white p-6"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add focus trap and ARIA attributes to modal.
The modal should trap focus and include proper ARIA attributes for accessibility.
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
- <div class="w-full max-w-2xl rounded-lg bg-white p-6">
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+ <div class="w-full max-w-2xl rounded-lg bg-white p-6" role="document">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"> | |
| <div class="w-full max-w-2xl rounded-lg bg-white p-6"> | |
| <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" role="dialog" aria-modal="true" aria-labelledby="modal-title"> | |
| <div class="w-full max-w-2xl rounded-lg bg-white p-6" role="document"> |
🤖 Prompt for AI Agents
In platforms/pictique/src/lib/components/CreatePostModal.svelte around lines 49
to 50, the modal lacks focus trapping and ARIA attributes needed for
accessibility. Implement a focus trap to keep keyboard navigation within the
modal while it is open. Add appropriate ARIA attributes such as role="dialog"
and aria-modal="true" to the modal container. Also, ensure the modal has an
accessible label using aria-labelledby or aria-label to describe its purpose.
| const handleImageUpload = async (event: Event) => { | ||
| const input = event.target as HTMLInputElement; | ||
| if (!input.files?.length) return; | ||
| isUploading = true; | ||
| const newImages: string[] = []; | ||
| for (const file of Array.from(input.files)) { | ||
| const reader = new FileReader(); | ||
| const dataUri = await new Promise<string>((resolve) => { | ||
| reader.onload = () => resolve(reader.result as string); | ||
| reader.readAsDataURL(file); | ||
| }); | ||
| console.log('HERRREE'); | ||
| newImages.push(dataUri); | ||
| } | ||
| images = [...images, ...newImages]; | ||
| isUploading = false; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling and file validation for image uploads.
The image upload handler lacks proper error handling and file validation, which could lead to crashes or security issues.
const handleImageUpload = async (event: Event) => {
const input = event.target as HTMLInputElement;
if (!input.files?.length) return;
+ // Validate file count
+ if (input.files.length + images.length > 10) {
+ alert('Maximum 10 images allowed');
+ return;
+ }
isUploading = true;
const newImages: string[] = [];
- for (const file of Array.from(input.files)) {
+ try {
+ for (const file of Array.from(input.files)) {
+ // Validate file type and size
+ if (!file.type.startsWith('image/')) {
+ console.warn(`Skipping non-image file: ${file.name}`);
+ continue;
+ }
+ if (file.size > 5 * 1024 * 1024) { // 5MB limit
+ console.warn(`File too large: ${file.name}`);
+ continue;
+ }
+
const reader = new FileReader();
- const dataUri = await new Promise<string>((resolve) => {
- reader.onload = () => resolve(reader.result as string);
+ const dataUri = await new Promise<string>((resolve, reject) => {
+ reader.onload = () => resolve(reader.result as string);
+ reader.onerror = () => reject(reader.error);
reader.readAsDataURL(file);
});
- console.log('HERRREE');
newImages.push(dataUri);
- }
+ }
+ } catch (error) {
+ console.error('Error uploading images:', error);
+ alert('Failed to upload one or more images');
+ } finally {
+ isUploading = false;
+ }
images = [...images, ...newImages];
- isUploading = false;
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleImageUpload = async (event: Event) => { | |
| const input = event.target as HTMLInputElement; | |
| if (!input.files?.length) return; | |
| isUploading = true; | |
| const newImages: string[] = []; | |
| for (const file of Array.from(input.files)) { | |
| const reader = new FileReader(); | |
| const dataUri = await new Promise<string>((resolve) => { | |
| reader.onload = () => resolve(reader.result as string); | |
| reader.readAsDataURL(file); | |
| }); | |
| console.log('HERRREE'); | |
| newImages.push(dataUri); | |
| } | |
| images = [...images, ...newImages]; | |
| isUploading = false; | |
| }; | |
| const handleImageUpload = async (event: Event) => { | |
| const input = event.target as HTMLInputElement; | |
| if (!input.files?.length) return; | |
| // Validate file count | |
| if (input.files.length + images.length > 10) { | |
| alert('Maximum 10 images allowed'); | |
| return; | |
| } | |
| isUploading = true; | |
| const newImages: string[] = []; | |
| try { | |
| for (const file of Array.from(input.files)) { | |
| // Validate file type and size | |
| if (!file.type.startsWith('image/')) { | |
| console.warn(`Skipping non-image file: ${file.name}`); | |
| continue; | |
| } | |
| if (file.size > 5 * 1024 * 1024) { // 5MB limit | |
| console.warn(`File too large: ${file.name}`); | |
| continue; | |
| } | |
| const reader = new FileReader(); | |
| const dataUri = await new Promise<string>((resolve, reject) => { | |
| reader.onload = () => resolve(reader.result as string); | |
| reader.onerror = () => reject(reader.error); | |
| reader.readAsDataURL(file); | |
| }); | |
| newImages.push(dataUri); | |
| } | |
| } catch (error) { | |
| console.error('Error uploading images:', error); | |
| alert('Failed to upload one or more images'); | |
| } finally { | |
| isUploading = false; | |
| } | |
| images = [...images, ...newImages]; | |
| }; |
🤖 Prompt for AI Agents
In platforms/pictique/src/lib/components/CreatePostModal.svelte around lines 14
to 33, the image upload handler does not validate file types or handle errors
during file reading. Add validation to ensure only image files are processed by
checking the file type before reading. Wrap the FileReader logic in try-catch
blocks or use error event handlers to catch and handle any errors during file
reading gracefully, preventing crashes and improving security.
| <h3 class="text-black-800">{files[0].name.slice(0, 10) + '...'}</h3> | ||
| <button | ||
| type="button" | ||
| {oncancel} |
There was a problem hiding this comment.
Fix event handler binding for cancel button.
The oncancel prop should be properly bound as an event handler.
<button
type="button"
- {oncancel}
+ on:click={oncancel}
class="text-brand-burnt-orange underline decoration-solid"
>🤖 Prompt for AI Agents
In platforms/pictique/src/lib/fragments/InputFile/InputFile.svelte at line 37,
the oncancel prop is not correctly bound as an event handler. Update the code to
bind oncancel using the proper event handler syntax, such as
on:cancel={oncancel}, to ensure the cancel event triggers the provided handler
function.
| oncancel | ||
| }: IInputFileProps = $props(); | ||
| const uniqueId = Math.random().toString().split('.')[1]; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use crypto.randomUUID() for unique ID generation.
Math.random() is not cryptographically secure and could theoretically have collisions.
-const uniqueId = Math.random().toString().split('.')[1];
+const uniqueId = crypto.randomUUID();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const uniqueId = Math.random().toString().split('.')[1]; | |
| - const uniqueId = Math.random().toString().split('.')[1]; | |
| + const uniqueId = crypto.randomUUID(); |
🤖 Prompt for AI Agents
In platforms/pictique/src/lib/fragments/InputFile/InputFile.svelte at line 21,
replace the use of Math.random() for generating uniqueId with
crypto.randomUUID() to ensure cryptographically secure and collision-resistant
unique identifiers.
* chore: this part works now wooohooo * chore: stash progress * chore: stash progress * chore: init message data models * feat: different socials * chore: blabsy ready for redesign
* initial commit * chore: add w3id readme (#3) * chore: add w3id readme * chore: bold text * chore: better formatting * docs: add w3id details * chore: format * chore: add links * fix: id spec considerations addressal (#8) * fix: id spec considerations addressal * fix: identity -> indentifier * chore: expand on trust list based recovery * chore: expand on AKA --------- Co-authored-by: Merul Dhiman <[email protected]> * Docs/eid wallet (#10) * chore: add eid-wallet folder * chore: add eid wallet docs * feat: add (#9) * feat(w3id): basic setup (#11) * feat(w3id): basic setup * fix(root): add infrastructure workspaces * update: lock file * feat(eidw): setup tauri (#40) * Feat/setup daisyui (#46) * feat: setup-daisyui * fix: index file * feat: colors added * feat: Archivo font added * fix: postcss added * fix: +layout.svelte file added * fix: packages * fix: fully migrating to tailwind v4 * feat: add Archivo font * feat: add danger colors * feat: twmerge and clsx added * feat: shadcn function added --------- Co-authored-by: Bekiboo <[email protected]> Co-authored-by: Julien <[email protected]> * feat: add storybook (#45) * feat: add storybook * update: lockfile * feat: created connection button (#48) * created connection button * added restprops to parent class * added onClick btn and storybook * fix: make font work in storybook (#54) * Feat/header (#55) * feat: add icons lib * fix: make font work in storybook * feat: Header * feat: runtime global added, icon library created, icons added, type file added * feat: header props added * fix: remove icons and type file as we are using lib for icons * fix: heading style * fix: color and icons, git merge branch 51, 54 * fix: color * fix: header-styling * fix: classes * chore: handlers added * chore: handlers added * fix: added heading --------- Co-authored-by: Soham Jaiswal <[email protected]> * Alternative w3id diagram (#52) * Feat/cupertino pane (#49) * feat: Drawer * feat: Drawer and added a function for clickoutside in utils * fix: classes * fix: drawer button position * fix: style and clickoutside * fix: pane height * fix: border-radius * fix: drawer as bulletin * fix: styling * fix: component with inbuilt features * fix: remove redundant code * fix: remove redundant code * fix: cancel button * fix: css in storybook * fix: position * fix: height of pane * fix: remove redundant code * feat: add button action component (#47) * feat: add button action component * fix: add correct weights to Archivo fontt * feat: add base button * fix: set prop classes last * feat: improve loading state * chore: cleanup * feat: add button action component * fix: add correct weights to Archivo fontt * feat: add base button * fix: set prop classes last * feat: improve loading state * chore: cleanup * chore: add documentation * fix: configure Storybook * chore: storybook gunk removal * feat: enhance ButtonAction component with type prop and better error handling --------- Co-authored-by: JulienAuvo <[email protected]> * Feat/splash screen (#63) * feat: SplashScreen * fix: remove redundant code * fix: as per given suggestion * fix: font-size * fix: logo * feat: input-pin (#56) * feat: input-pin * fix: styling as per our design * fix: added small variant * fix: hide pin on select * fix: gap between pins * fix: color of focus state * fix: removed legacy code and also fix some css to tailwind css * fix: css * fix: optional props * feat: added color variants * Feat/improve button component (#60) * feat: add white variant * feat: add small variant * chore: update doc and story for button * chore: rename cb into callback * update: improve small size * update: modify loading style * fix: return getAbsolutePath function to storybook (#58) Co-authored-by: Bekiboo <[email protected]> * feat: add selector component (#59) * feat: add selector component * feat: improve selector + add flag-icon lib * feat: improve selector + doc * feat: add utility function to get language with country name * feat: test page for language selectors * chore: add Selector Story * chore: clean test page * fix: types * fix: normalize custom tailwind colors (#71) * feat: workflows (#64) * feat: workflows * fix: node version * fix: use pnpm 10 * fix: check message * Fix/codebase linting (#73) * fix: Check Lint / lint * fix: Check Lint / lint * fix: Check Lint / lint * fix: Check Lint / lint * fix: Check Code / lint * fix: Check Format / lint * fix: Check Code / lint * fix: Check Format / lint * fix: Check Code / lint * fix: Check Format / lint * fix: Check Code / lint * fix: Check Code / lint * fix: Check Format / lint * fix: unknown property warning * fix: unknown property warning * chore: improve args type * settings nav button :) (#75) * setting bav button all done :) * lint fixski * added component to index.ts * Feat/#32 identity card fragment (#74) * identity card * identity card * lint fixski * lint fixski * lint fixski * fixed the font weight * added component to index.ts * changed span to buttton * feat: add icon button component (#68) * feat: add icon button component * feat: finish up buttonIcon + stories * fix: update with new color naming * feat: polish button icon (and button action too) * chore: format lint * chore: sort imports * chore: format, not sure why * Feat/onboarding flow (#67) * feat: onboarding-page * fix: line height and added handlers * fix: button variant * fix: text-decoration * fix: subtext * fix: underline * fix: padding and button spacing * fix: according to design update * feat: Drawer * feat: verify-pae * fix: verify-page styling * feat: drawer for both confirm pin and add bio metrics added * feat: modal added in fragments * fix: icons and flow * feat: Identifier Card * fix: copy to clipboard * feat: e-passport page * fix: error state * fix: colors * fix: lint error * fix: lint * feat: Typography * fix: typograpy * fix: as per given suggestion * fix: font-sizing * fix: identity card implementation * fix: spacing * fix: padding * fix: padding and spacing * fix: splashscreen * fix: error state * fix: styling to avoid * fix:typo * Fix/remove daisyui (#82) * refactoring: remove DaisyUI + refactor some tailwind classes and logic * refactoring: remove DaisyUI + refactor some tailwind classes and logic * feat: add Button.Nav (#77) * feat: add Button.Nav * chore: format * chore: sort imports * update: remove unused snippet and add missing props * feat: stick to fragment definition * update: documentation * fix: stories * chore: sort imports * Feat/splashscreen animation (#81) * feat: add animation to splashScreen * feat: implement data loading logic with splash screen delay * chore: sort import * update: use ButtonIcon is IdentityCard (#78) * update: use ButtonIcon is IdentityCard * feat: refactor ButtonIcon to be used anywhere in the app * chore: format indent * chore: remove useless change * feat: setup safe area (#80) * feat: setup safe area * chore: simplify implementation * chore: format * Feat/uuidv5 generation (#61) * feat: setup uuidv5 * chore: add test for deterministic UUID * feat: add Hero fragment (#88) * feat: add Hero fragment * chore: sort imports + add doc * feat: add storage specification abstract class (#92) * feat: add storage specification abstract class * chore: format and ignore lint * chore: change format checker on w3id * feat: settings-flow (#86) * feat: settings-flow * feat: settings and language page * feat : history page * feat: change pin page * fix: height of selector * fix: pin change page * fix: size of input pin * fix: spacing of pins * feat: AppNav fragment * fix: height of page * fix: padding * fix: remove redundant code * feat: privacy page * chore: add doc * fix: error state * feat: remove redundant code * chore: used app nav component --------- Co-authored-by: JulienAuvo <[email protected]> * feat: AppNav fragment (#90) * feat: AppNav fragment * chore: add doc * feat: Main page flow (#93) * feat: create root page + layout * feat: complete main page flow beta * chore: fix ts block * chore: sort imports * feat: integrate-flows (#94) * feat: intigrate-flows * fix: spacing in e-passport page * fix: page connectivity * feat: app page transitions * fix: z index * fix: pages * fix: view transition effect on splashscreen * fix: drawer pill and cancel button removed * fix: share button removed when onboarding * fix: remove share and view button when on onboarding flow * fix: remove view button * fix: ci checks * fix: transitions * fix: transititon according to direction * fix: lint error * fix: loop holes * Feat/w3id log generation (#98) * chore: create basic log generation mechanism * chore: add hashing utility function * chore: rotation event * feat: genesis entry * feat: generalize hash function * feat: append entry * chore: basic tests * chore: add tests for rotation * feat: add malform throws * chore: add the right errors * chore: fix CI stuff * chore: add missing file * chore: fix event type enum * chore: format * feat: add proper error * chore: format * chore: remove eventtypes enum * chore: add new error for bad options * chore: add options tests * feat: add codec tests * fix: err handling && jsdoc * fix: run format * fix: remove unused import * fix: improve default error messages * fix: move redundant logic to function * fix: run format * fix: type shadow * fix: useless conversion/cast * fix: run format --------- Co-authored-by: Soham Jaiswal <[email protected]> * Feat/core id creation logic (#99) * feat: create w3id builder * fix: w3id builder * feat: add global config var for w3id * chore: add docs * chore: change rand to crng * chore: add ts type again * chore: fix lint and format * chore: add w3id tests github workflow * Feat/evault core (#100) * feat: migrate neo4j * chore: envelope logic works * chore: envelope logic works * feat: parsed envelopes search * feat: generics * feat: protocol * feat: jwt sigs in w3id * chore: stuff works * chore: tests for evault core * chore: format * chore: fix test * Feat/docker compose and docs (#101) * chore: stash dockerfile progress * fix: getEnvelopesByOntology thing * chore: fix tests * Update infrastructure/evault-core/src/protocol/vault-access-guard.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: remove unused import * chore: remove package * chore: fix pnpm lock * chore: fix workflow * chore: fix port in dockerfile --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Feat/registry and evault provisioning (#106) * feat: evault provisioning * chore: fianlly fixed provisioner * feat: add logic for metadata in consul * feat: registry * chore: format * Feat/watchers logs (#114) * feat: alloc according to entropy and namespace * chore: move exports * chore: docs * feat: `whois` endpoint * feat: watcher endpoints * chore: fix format and lint * chore: fix tests * feat: web3 adapter (#115) * feat: tauri plugins setup (#97) * feat: tauri plugins setup * fix: add editorconfig * fix: add missing biome json * fix: run formatter * feat: biometry homework * feat: add pin set logic * feat: add biometric enabling logic * fix: sec controller qol * feat: stub user controller * fix: run format && lint * fix: sort imports * fix: import statement sort * feat: user controller * feat: pin flow * feat: biometrics unavailable * fix: pin input not working * feat: make checks pass * fix: scan works * fix: actions * feat: format on save * fix: coderabbit suggestions * chore: run format lint check * fix: scan on decline too * feat: documentation links (#117) * feat: bad namespace test (#116) * fix: layouts (#119) * fix: layouts * fix: Onboarding page scroll fixed * fix: page layout and prevent from scroll in all devices * fix: pages layout * chore: try to fix emulator * fix: units * fix: safezones for ios * fix: styling --------- Co-authored-by: Soham Jaiswal <[email protected]> * feat: setup-metagram (#121) * feat: setup-metagram * chore: tailwind css worked * feat: fonts added * feat: typography * fix: removed stories and fixed setup for icons lib * feat: icons and story file * fix: type of args in story * fix: lint errors * feat: colors added * feat: Button * fix: format and lint * fix: colors * fix: spinner * fix: code rebbit suggestions * fix: code rebbit suggestions * fix: paraglide removed * fix: lock file * feat: added user avatar. (#130) * feat: Button (#129) * feat: Button * fix: colors of variants * feat: Input (#131) * feat: Input * feat: styling added * fix: styling * fix: styling * fix: added a new story * fix: focus states * fix: input states * Feat/settings navigation button (#140) * feat: settings-navigation-button * fix: handler added * chore: another variant added * fix: as per given suggestion * feat: BottomNav (#132) * feat: BottomNav * fix: icons * feat: profile icons created * feat: handler added * feat: handler added * fix: correct tags * fix: as per given suggestion, bottomnav moved to fragments and also implemented on page * fix: handler * chore: routes added * feat: app transitions added * fix: direction of transition * fix: transition css * fix: directionable transition * fix: used button instead of label, and used page from state * feat: added post fragment. (#137) * feat: FileInput (#150) * feat: FileInput * fix: added icon * feat: cancel upload * fix: remove redundant code * fix: usage docs added and as per requirements ' * fix: moved to framents * feat: Toggle Switch (#143) * feat: Toggle Switch * feat: Toggle Switch * fix: as per our design * fix: as per our design * feat: Label (#146) * feat: Select (#148) * feat: Select * fix: as per our design * fix: code format and as per svelte 5 * fix: font-size * fix: font-size * fix: icon * feat: message-input (#144) * feat: message-input * fix: classes merge and a files as a prop * feat: variant added * feat: icon replaced * fix: as per code rabbit suggestions * fix: icon * fix: input file button * fix: as per suggestion * fix: classes * fix: no need of error and disabled classes * fix: input * feat: invalid inputs * feat: add number input storybook --------- Co-authored-by: Soham Jaiswal <[email protected]> * feat:Drawer (#152) * feat:Drawer * feat: Drawer with clickoutside * fix: settings * Feat/metagram header (#133) * feat: added metagram header primary linear gradient. * feat: added flash icon. * feat: added secondary state of header. * feat: added secondary state of header with menu. * chore: cleaned some code. * docs: updated component docs. --------- Co-authored-by: SoSweetHam <[email protected]> * Feat/metagram message (#135) * feat: added metagram message component. * feat: added both states of message component. * docs: added usage docs. * chore: exposed component from ui. * fix: component -> fragement --------- Co-authored-by: SoSweetHam <[email protected]> * feat: modal (#154) * fix: styling of modal * fix: modal props * fix: conflicting styles * fix: styles of drawer * fix: hide scrollbar in drawer * fix: padding * fix: used native method for dismissing of drawer * feat: Context-Menu (#156) * feat: Context-Menu * fix: name of component * fix: as per suggestion * fix: action menu position * fix: class * feat: responsive-setup (#157) * feat: responsive-setup * fix: background color * fix: added font fmaily * feat: responsive setup for mobile and desktop (#159) * feat: responsive setup for mobile and desktop * fix: width of sidebar and rightaside * fix: responsive layout * feat: SideBar * fix: added some finishing touches to sidebar and button * fix: prevent pages transition on desktop * fix: icon center * feat: settings page and icon added * feat/layout-enhancement (#168) * feat/infinite-scroll (#170) * feat/infinite-scroll * fix: aspect ratio of post * fix: bottom nav background * settings page (#169) * settings page layout done * settings page layout done * formt fix * format fix * format fix * routing for settings page fixed * settings page buttons * merge conflict * settings page tertiary pages * settings pages all done * settings pages unnecessary page deleted * requested changes done * requested changes done * Feat/comments pane (#171) * feat/comments-pane * fix: overflow and drawer swipe * feat: Comment fragment * fix: comments added * fix: comment fragment * feat: Comments reply * fix: message input position * fix: post type shifted to types file * fix: one level deep only * fix: drawer should only be render on mobile * fix: comments on layout page * fix: format * feat: messages (#174) * feat: messages * feat: ChatMessae * feat: messages by id * fix: messages page * fix: icon name * fix: hide bottom nav for chat * fix: header * fix: message bubble * fix: message bubble * fix: message bubble * fix: as per suggestion * fix: messaging * chore: change from nomad to k8s (#179) * chore: change from nomad to k8s * Update infrastructure/eid-wallet/src/routes/+layout.svelte Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: uri extraction * feat: regitry stuff * feat: registry using local db * 📝 Add docstrings to `feat/switch-to-k8s` (#181) Docstrings generation was requested by @coodos. * #179 (comment) The following files were modified: * `infrastructure/evault-provisioner/src/templates/evault.nomad.ts` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: format --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: make scan qr page work again (#185) * feat: Discover Page (#180) * refactor/Post (#186) * refactor/Post * fix: format and lint * fix: added dots for gallery * fix: added dots for gallery * fix: added dots for gallery * fix: plural name * feat: splash-screen (#187) * Feat/evault provisioning via phone (#188) * feat: eid wallet basic ui for verification * chore: evault provisioning * feat: working wallet with provisioning * feat: restrict people on dupes * 📝 Add docstrings to `feat/evault-provisioning-via-phone` (#189) Docstrings generation was requested by @coodos. * #188 (comment) The following files were modified: * `infrastructure/eid-wallet/src/lib/utils/capitalize.ts` * `infrastructure/evault-provisioner/src/utils/hmac.ts` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: added uploaded post view component. (#182) * feat: added uploaded post view component. * fix: fixed the outline and color. * fix: moved function to external definition. * fix: fixed the restProps. * profile page (#178) * basic layout for profile page * fixed alt text * merge conflict * profile page for other users implemented * fix: profile pages and logics * fixed all the pages of profile * fixed all the pages of profile * fix: format --------- Co-authored-by: gourav <[email protected]> * Feat/radio input (#176) * feat: added a radio button custom * docs: added name option in docs. * chore: cleaned the unnecessary classes and variables for input type radio. * fix: moved input radio to its own component. * fix: keydown events added. * feat: added settings tile component. (#184) * feat: added settings tile component. * chore: fixed the naming convention * chore: renamed callback to onclick * fix: fixed the use of restProps * fix: fixed the unnecessary onclick expose. * fix: fixed the join function params. * Feat/textarea (#194) * chore: removed redundant radio * feat: added textarea. * fix: tabindex * fix: removed type inconsitency. * Feat/mobile upload flow (#193) * fix: header logic in secondary * fix: fixed the text in header in post * feat: trying some hack to get file image input. * feat: added image input on clicking the post bottom nav * chore: got rid of non-required code. * feat: added the logic to get the images from user on clicking post tab. * feat: added store. * feat: added correct conversion of files. * feat: added the correct display of image when uploading. * feat: added settings tile to the post page and fixed the settingsTile component type of currentStatus * feat: added hte correct header for the audience page. * fix: fixed the page transition not happening to audience page. * feat: added audience setting * feat: added store to audience. * chore: removed console log * feat: added post button. * feat: correct button placement * fix: horizontal scroll * fix: positioning of the post button. * fix: protecting post route when no image is selected. * fix: improved type saftey * feat: added memory helper function * feat: added memory cleanup. * Feat/social media platforms (#195) * chore: this part works now wooohooo * chore: stash progress * chore: stash progress * chore: init message data models * feat: different socials * chore: blabsy ready for redesign * Feat/social media platforms (#196) * chore: this part works now wooohooo * chore: stash progress * chore: stash progress * chore: init message data models * feat: different socials * chore: blabsy ready for redesign * chore: add other socials * Feat/blabsy add clone (#198) * chore: clone twitter * feat: custom auth with firebase using w3ds * chore: add chat * feat: chat works with sync * feat: twittex * feat: global schemas * feat: blabsy adapter * refactor: shift some text messages to work on blabsy (#199) * chore: stash progress * chore: stash adapters * chore: stash working extractor * feat: adapter working properly for translating to global with globalIDs * feat: adapter toGlobal pristine * chore: stash * feat: adapter working * chore: stash until global translation from pictique * feat: bi-directional sync prestino * feat: bidir adapters * chore: login redir * chore: swap out for sqlite3 * chore: swap out for sqlite3 * chore: server conf * feat: messages one way * feat: ready to deploy * feat: ready to deploy * chore: auth thing pictique * chore: set adapter to node * chore: fix auth token thingy * chore: auth thing * chore: fix auth token thingy * chore: port for blabsy * feat: provision stuff * feat: provision * feat: provision * feat: provision * chore: fix sync * feat: temporary id thing * chore: android * chore: fix mapper sync * chore: fallback * feat: add error handling on stores * feat: fix issue with posts * chore: fix retry loop * Fix/author details (#229) * fix: author-details * fix: owner-details * fix: author avatar * fix: auth user avatar * fix: error handling * fix: author image in bottom nav --------- Co-authored-by: Merul Dhiman <[email protected]> * Fix/change name (#228) * fix: corrected the name to blabsy * fix: extra shit comming. * fix: fixed the alignment of the display in more to look more like current twitter. * fix: avatars (#226) * fix: avatars * fix: avatar in follow request page * fix: images uploaded shown in user profile * fix: button size * fix: avatar --------- Co-authored-by: Merul Dhiman <[email protected]> * chore: temp fix sync * chore: stash progress * Fix/post context menu (#231) * fix: post-context-menu * fix: user id with post * fix: removed redundant code * fix: images * fix: profile data * fix: profile data * fix: image cover * fix: logout * Fix/wallet text (#234) * changed text as per the request and fixed styling on pages with useless scroll * added settings button in main page which went missing somehow * fix: consistent padding * chore: change tags * feat: change icon * feat: webhook dynamic registry * feat: make camera permission work properlyh * chore: removed all locking mechanism thing from platforms * feat: synchronization works perfectly * feat: fixed everything up * feat: changes * chore: stats fix * chore: fix pictique visual issues * chore: fix cosmetic name issue * feat: fix sync issue * chore: fix logical issue here * chore: add qrcode ename * feat: add packages (#235) * feat: add packages * feat: add sample funcs + docs * fixed the filled color on like icon for liked post (#239) * feat: fake passport name * feat: double confirmation * chore: fix pictique login issue * fix: make no user case redir to login * fix: issues with wallet --------- Co-authored-by: Soham Jaiswal <[email protected]> Co-authored-by: SoSweetHam <[email protected]> Co-authored-by: Gourav Saini <[email protected]> Co-authored-by: Bekiboo <[email protected]> Co-authored-by: Julien <[email protected]> Co-authored-by: Ananya Rana <[email protected]> Co-authored-by: Sergey <[email protected]> Co-authored-by: Julien Connault <[email protected]> Co-authored-by: Ananya Rana <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Sahil Garg <[email protected]> Co-authored-by: Sahil Garg <[email protected]>
Description of change
Issue Number
Type of change
How the change has been tested
Change checklist
Summary by CodeRabbit
New Features
Documentation
Chores
Style