beatufitull front end for ozone modration ,, wit catpucoin and ebergarden !
ozone
moderation
1<script lang="ts">
2 import miku from '$lib/assets/miku.png';
3 import { AtUri, ComAtprotoRepoStrongRef } from '@atproto/api';
4 import { isRepoRef } from '@atproto/api/dist/client/types/com/atproto/admin/defs';
5 import type { SubjectStatusView } from '@atproto/api/dist/client/types/tools/ozone/moderation/defs';
6 import { ExternalLink, TriangleAlert, XIcon } from 'lucide-svelte';
7 import { onMount } from 'svelte';
8
9 const {
10 featuredReport,
11 onOpenPost,
12 onOpenUser
13 }: {
14 featuredReport?: SubjectStatusView | undefined;
15 onOpenPost: (uri: string) => void;
16 onOpenUser: (did: string) => void;
17 } = $props();
18 let show = $state(false);
19
20 onMount(() => {
21 const localValue = localStorage.getItem('showHelp');
22
23 if (localValue === null) {
24 show = true;
25 } else {
26 show = localValue === 'true';
27 }
28 });
29
30 function dismiss() {
31 show = false;
32 localStorage.setItem('showHelp', 'false');
33 }
34</script>
35
36{#if show}
37 <div class="pb-5">
38 <div class="relative rounded-4xl border-3 border-dashed border-ctp-mauve">
39 <button
40 class="absolute top-5 right-5 cursor-pointer rounded-xl p-1 text-ctp-subtext0 hover:bg-ctp-surface0"
41 onclick={dismiss}
42 >
43 <XIcon />
44 </button>
45 <div class="flex items-center justify-center gap-10 p-10 text-ctp-text">
46 <div class="flex-1">
47 <!-- <h2 class="mb-2 text-2xl font-bold">hatsune miku is here to help !</h2> -->
48 <p class="text-ctp-text">
49 {#if featuredReport}
50 not sure where to start? start by clicking a report with a <span
51 class="ml-1 inline-flex items-center gap-2 whitespace-nowrap text-ctp-yellow"
52 ><TriangleAlert class="size-5" />
53 triangle alert</span
54 >
55 which means it hasnt been resolved yet! like this one:
56 {:else}
57 not sure where to start? wait for a report to come in and it will show up below!
58 {/if}
59 </p>
60 {#if featuredReport}
61 {@const subject = featuredReport.subject}
62 <div class="mt-3 flex items-center rounded-xl border-2 border-ctp-surface1 px-4 py-3">
63 <div class="flex items-center gap-2">
64 <TriangleAlert class="size-5 text-ctp-yellow" />
65 <p>
66 {#if ComAtprotoRepoStrongRef.isMain(subject)}
67 <button
68 onclick={() => onOpenPost(subject.uri)}
69 class="inline-flex cursor-pointer items-center px-0 py-0 text-ctp-blue hover:underline"
70 >
71 Post
72 <ExternalLink size={15} class="ml-1" />
73 </button>
74 created by
75 <button
76 onclick={() => onOpenUser(new AtUri(subject.uri).host)}
77 class="inline-flex cursor-pointer items-center px-0 py-0 text-ctp-blue hover:underline"
78 >
79 @{featuredReport.subjectRepoHandle}
80 <ExternalLink size={15} class="ml-1" />
81 </button>
82 {:else if isRepoRef(subject)}
83 <button
84 onclick={() => onOpenUser(subject.did)}
85 class="inline-flex cursor-pointer items-center px-0 py-0 text-ctp-blue hover:underline"
86 >
87 @{featuredReport.subjectRepoHandle}
88 <ExternalLink size={15} class="ml-1" />
89 </button>
90 {/if}
91 </p>
92 </div>
93 </div>
94 {/if}
95 </div>
96 <img src={miku} alt="Miku" class="h-auto w-32 flex-shrink-0" />
97 </div>
98 </div>
99 </div>
100{/if}