Refactor the client to implement a channel navbar #76

Open
twig wants to merge 23 commits from navbar into main
5 changed files with 11 additions and 11 deletions
Showing only changes of commit 5ce236c936 - Show all commits

View file

@ -31,9 +31,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { NavbarInterface, NavbarItem } from '~/types/interfaces'; import type { INavbar, NavbarItem } from '~/types/interfaces';
const props = defineProps<NavbarInterface>(); const props = defineProps<INavbar>();
const runtimeConfig = useRuntimeConfig(); const runtimeConfig = useRuntimeConfig();
const defaultIcon = `${runtimeConfig.app.baseURL}/icon.svg` const defaultIcon = `${runtimeConfig.app.baseURL}/icon.svg`

View file

@ -48,14 +48,14 @@ import Loading from '~/components/Popups/Loading.vue';
import Button from '~/components/UserInterface/Button.vue'; import Button from '~/components/UserInterface/Button.vue';
import Navbar from '~/components/UserInterface/Navbar.vue'; import Navbar from '~/components/UserInterface/Navbar.vue';
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue'; import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
import type { GuildResponse, NavbarInterface, NavbarItem } from '~/types/interfaces'; import type { GuildResponse, INavbar, NavbarItem } from '~/types/interfaces';
definePageMeta({ definePageMeta({
keepalive: true keepalive: true
}); });
const loading = useState("loading", () => false); const loading = useState("loading", () => false);
const navbar = useState<NavbarInterface>("navbar") const navbar = useState<INavbar>("navbar")
const createButtonContainer = ref<HTMLButtonElement>(); const createButtonContainer = ref<HTMLButtonElement>();
twig marked this conversation as resolved Outdated

This should be an anchor element, not a button

This should be an anchor element, not a button

disagree, i'd like to put an inbox here, that would be a popup, not a link

disagree, i'd like to put an inbox here, that would be a popup, not a link

Right but I think all clickable elements that lead you to an external site should be anchor elements. Here I'm specifically talking about the source code element.

Right but I think all clickable elements that lead you to an external site should be anchor elements. Here I'm specifically talking about the source code element.

sure, i'm reworking it anyways

sure, i'm reworking it anyways
@ -163,7 +163,7 @@ onMounted(() => {
helpItem helpItem
], ],
channelItems: [] // set by the channel channelItems: [] // set by the channel
} as NavbarInterface } as INavbar
} }
}) })

View file

@ -36,12 +36,12 @@ import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue"; import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
import MemberEntry from "~/components/Guild/MemberEntry.vue"; import MemberEntry from "~/components/Guild/MemberEntry.vue";
import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue"; import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
import type { ChannelResponse, GuildMemberResponse, GuildResponse, NavbarInterface } from "~/types/interfaces"; import type { ChannelResponse, GuildMemberResponse, GuildResponse, INavbar } from "~/types/interfaces";
const route = useRoute(); const route = useRoute();
const loading = useState("loading"); const loading = useState("loading");
const navbar = useState<NavbarInterface>("navbar"); const navbar = useState<INavbar>("navbar");
const channelUrlPath = `channels/${route.params.channelId}`; const channelUrlPath = `channels/${route.params.channelId}`;

View file

@ -129,7 +129,7 @@ export interface NavbarItem {
callback: (...args: any[]) => any; callback: (...args: any[]) => any;
} }
export interface NavbarInterface { export interface INavbar {
clientItems?: NavbarItem[] clientItems?: NavbarItem[]
channelItems?: NavbarItem[] // search bar will require some changes channelItems?: NavbarItem[] // search bar will require some changes
contextName?: string contextName?: string

View file

@ -1,10 +1,10 @@
import type { NavbarInterface, NavbarOptions } from "~/types/interfaces"; import type { INavbar, NavbarOptions } from "~/types/interfaces";
const navbar = useState<NavbarInterface>("navbar") const navbar = useState<INavbar>("navbar")
export default async (options: NavbarOptions) => { export default async (options: NavbarOptions) => {
await nextTick() await nextTick()
if (navbar.value) { if (navbar.value) {
if (options.guild) { if (options.guild) {
navbar.value.channelItems = [] navbar.value.channelItems = []