Skip to content

Commit d85673d

Browse files
shiveroshivero
authored
Merge pull request #18 from shivero/feature/development
Feature/development
2 parents 9255ff5 + f0ea987 commit d85673d

27 files changed

+422
-36
lines changed

‎.prettierrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"bracketSameLine": true,
44
"plugins": [
55
"prettier-plugin-tailwindcss"
6-
]
6+
],
7+
"tailwindFunctions": ["tw", "cva", "clsx"]
78
}

‎.vscode/settings.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
{
2-
"typescript.tsdk": "node_modules/typescript/lib"
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"tailwindCSS.experimental.classRegex": [
4+
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
5+
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
6+
]
37
}

‎bun.lockb

728 Bytes
Binary file not shown.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@headlessui/vue": "^1.7.16",
1414
"@types/node": "^20.10.0",
15+
"class-variance-authority": "^0.7.0",
1516
"date-fns": "^2.30.0",
1617
"pinia": "^2.1.7",
1718
"vue": "^3.3.4"

‎src/App.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Sidebar from "./components/Sidebar.vue";
33
import Messages from "./components/Messages.vue";
44
import Channels from "./components/Channels.vue";
55
import AppHeader from "./components/AppHeader.vue";
6+
import ChannelHeader from './components/ChannelHeader.vue';
67
</script>
78

89
<template>

‎src/components/Button.vue

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,34 @@
11
<script setup lang="ts">
2-
import { ref } from "vue";
3-
const count = ref(0);
2+
import { cva, type VariantProps } from "class-variance-authority";
3+
4+
const button = cva(["button", "mt-8 inline-flex items-center justify-center"], {
5+
variants: {
6+
intent: {
7+
primary: "rounded bg-discord-blue hover:bg-discord-blue-hover text-white",
8+
secondary: "secondary",
9+
},
10+
size: {
11+
small: "px-2 text-sm h-4",
12+
medium: "px-4 text-sm h-9",
13+
},
14+
},
15+
compoundVariants: [{ intent: "primary", size: "medium", class: "primaryMedium" }],
16+
});
17+
18+
type ButtonProps = VariantProps<typeof button>;
19+
20+
withDefaults(
21+
defineProps<{ intent: ButtonProps["intent"]; size: ButtonProps["size"] }>(),
22+
{
23+
intent: "primary",
24+
size: "medium",
25+
},
26+
);
427
</script>
528

629
<template>
7-
<button
8-
class="h-10 rounded-sm bg-discord-dark-3 px-6 text-white hover:bg-discord-dark-2"
9-
type="button"
10-
@click="count++"
11-
>
12-
count is {{ count }}
30+
<button type="button" :class="button({intent, size})">
31+
<slot />
1332
</button>
1433
</template>
1534
<style></style>

‎src/components/ChannelHeader.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<script setup lang="ts">
2+
import {
3+
Popover,
4+
PopoverButton,
5+
PopoverPanel,
6+
PopoverGroup,
7+
PopoverOverlay,
8+
} from "@headlessui/vue";
9+
import { useChannelStore } from "@/store/channelStore";
10+
import TextChannelIcon from "./Icons/TextChannelIcon.vue";
11+
import VoiceChannelIcon from "./Icons/VolumeChannelIcon.vue";
12+
import MdiCommentMultiple from "./Icons/MdiCommentMultiple.vue";
13+
import MdiBell from "./Icons/MdiBell.vue";
14+
import MdiPin from "./Icons/MdiPin.vue";
15+
import MdiAccountMultiple from "./Icons/MdiAccountMultiple.vue";
16+
import MdiMagnify from "./Icons/MdiMagnify.vue";
17+
import MdiInbox from "./Icons/MdiInbox.vue";
18+
import MdiHelpCircle from "./Icons/MdiHelpCircle.vue";
19+
import PopoverBasic from "./Popover/PopoverBasic.vue";
20+
import Tooltip from "./Tooltip/Tooltip.vue";
21+
const channelStore = useChannelStore();
22+
import { localeEn } from "../translations/locale-en";
23+
</script>
24+
25+
<template>
26+
<div
27+
class="relative flex h-12 items-center justify-between rounded-tr-xl bg-discord-dark px-4 text-slate-200 shadow-slight-bottom">
28+
<div>
29+
<TextChannelIcon
30+
class="inline-block fill-gray-500"
31+
v-if="channelStore.type === 'text'" />
32+
<VoiceChannelIcon
33+
class="inline-block fill-gray-500"
34+
v-else-if="channelStore.type === 'voice'" />
35+
<span class="ml-2 font-bold">{{ channelStore.name }}</span>
36+
</div>
37+
<div class="flex flex-row items-center gap-4">
38+
<Popover v-slot="{ open }" class="relative">
39+
<PopoverButton>
40+
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_threads.name">
41+
<MdiCommentMultiple class="inline-block fill-gray-400 text-2xl" />
42+
</Tooltip>
43+
</PopoverButton>
44+
<PopoverPanel class="absolute right-0 top-8 z-10 w-80 rounded-lg">
45+
<PopoverBasic title="Threads" :open="open" :size="2" />
46+
</PopoverPanel>
47+
</Popover>
48+
<Tooltip
49+
intent="primary"
50+
size="medium"
51+
:tooltipText="localeEn.ui_notiifcations.name">
52+
<MdiBell class="inline-block fill-gray-400 text-2xl" />
53+
</Tooltip>
54+
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_pinned.name">
55+
<MdiPin class="inline-block fill-gray-400 text-2xl" />
56+
</Tooltip>
57+
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_members.name">
58+
<MdiAccountMultiple class="inline-block fill-gray-400 text-2xl" />
59+
</Tooltip>
60+
<div class="flex items-center">
61+
<input
62+
type="text"
63+
class="inline-flex h-6 flex-row items-center rounded-l-sm bg-discord-dark-3 px-2 pr-7 text-sm font-normal"
64+
placeholder="Search" />
65+
<div
66+
class="inline-flex h-6 -translate-x-5 items-center rounded-r-sm bg-discord-dark-3">
67+
<MdiMagnify class="shrink-0 fill-gray-400 text-base" />
68+
</div>
69+
<div class="flex flex-row gap-4">
70+
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_inbox.name">
71+
<MdiInbox class="inline-block shrink-0 fill-gray-400 text-2xl" />
72+
</Tooltip>
73+
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_help.name">
74+
<MdiHelpCircle class="inline-block shrink-0 fill-gray-400 text-2xl" />
75+
</Tooltip>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</template>

‎src/components/Channels.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ let groupedChannels = groupBy(channels, "group");
7070
</DisclosureButton>
7171
<DisclosurePanel class="flex flex-col gap-[2px] text-gray-500">
7272
<div v-for="channel in group">
73-
<Channel :channel="channel" @click="channelStore.setChannel(channel.name)" />
73+
<Channel :channel="channel" @click="channelStore.setChannel({...channel})" />
7474
</div>
7575
</DisclosurePanel>
7676
</Disclosure>

‎src/components/Icons/ArrowDown.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ const props = defineProps(["size"]);
55
<template>
66
<svg
77
xmlns="http://www.w3.org/2000/svg"
8-
:height="props.size"
8+
height="1em"
9+
width="1em"
910
viewBox="0 -960 960 960"
10-
:width="props.size"
1111
>
1212
<path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
1313
</svg>

‎src/components/Icons/MdiAccountMultiple.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
height="1em"
5+
width="1em"
6+
:viewBox="viewBox">
7+
<path
8+
fill="inherit"
9+
d="M16 17v2H2v-2s0-4 7-4s7 4 7 4m-3.5-9.5A3.5 3.5 0 1 0 9 11a3.5 3.5 0 0 0 3.5-3.5m3.44 5.5A5.32 5.32 0 0 1 18 17v2h4v-2s0-3.63-6.06-4M15 4a3.39 3.39 0 0 0-1.93.59a5 5 0 0 1 0 5.82A3.39 3.39 0 0 0 15 11a3.5 3.5 0 0 0 0-7Z"></path>
10+
</svg>
11+
</template>
12+
13+
<script setup lang="ts">
14+
import { computed } from "vue";
15+
16+
const props = defineProps({
17+
size: { type: Number, default: 24 },
18+
});
19+
20+
const viewBox = computed(() => `0 0 ${props.size} ${props.size}`);
21+
</script>

0 commit comments

Comments
 (0)